Le guide ultime de l'optimisation de la vitesse des pages pour WordPress

En suivant ce guide, vous apprendrez toutes les techniques pour accélérer drastiquement un site WordPress. Voici les raisons les plus importantes pour lesquelles avoir un temps de chargement de page rapide dans WordPress profite à votre entreprise : les utilisateurs n'abandonneront pas votre site Web, ils y passeront plus de temps et d'argent, et les moteurs de recherche classeront mieux votre site Web dans les résultats de recherche. Prêt?

Introduction

Les internautes n'ont pas beaucoup de patience, en ce qui concerne les temps de chargement des pages. Nous cliquons sur un lien ou saisissons l'URL et nous attendons une seconde, deux, trois et c'est tout. Les statistiques de Google indiquent que 50 % des utilisateurs s'attendent à ce qu'un site mobile se charge en 2 secondes et 53 % des utilisateurs sont susceptibles d'abandonner la page si elle se charge plus de 3 secondes. C'est un délai très court, si l'on considère que le temps de chargement moyen d'une page d'accueil, sur un appareil mobile, est de 19 secondes (sur un réseau 3G). Les temps de chargement sur les ordinateurs sont plus rapides et un temps de chargement moyen est de 5 secondes, mais c'est encore trop long.

Prendre des benchmarks de sites Web de bureau comme référence n'est plus une excuse. Pour la plupart des sites Web d'aujourd'hui, la majorité du trafic provient d'appareils mobiles. Dans cet article, nous examinerons en détail les techniques les plus récentes d'optimisation de la vitesse des pages pour les sites WordPress. En suivant ce guide, vous pourrez accélérer le site WordPress, réduire considérablement les temps de chargement sur mobile et sur ordinateur, et donc le rendre beaucoup plus convivial.

Si vous n'avez pas de site WordPress, ne fermez pas encore le guide. La plupart des techniques d'optimisation de la vitesse expliquées dans ce guide étape par étape peuvent être appliquées à tout type de site Web.

Si votre site a été conçu dans l'optique de la monétisation, qu'il s'agisse d'une boutique de commerce électronique en ligne ou si vous vendez des services en ligne/hors ligne, passer à côté de clients potentiels n'est jamais une bonne chose. Vous laissez essentiellement de l'argent sur la table. L'amélioration de la vitesse de votre page devrait avoir un impact positif sur vos revenus. Fait amusant : la campagne de financement d'Obama a augmenté la conversion des dons de 14 % grâce à l'optimisation du site et à la réduction du temps de chargement de la page de 5 secondes à 2 secondes.

En tant que propriétaires ou développeurs de sites Web, nous voulons que nos visiteurs aient la meilleure expérience. Nous créons de superbes sites avec des fonctionnalités impressionnantes, mais nous oublions généralement l'importance d'un site Web rapide. Un site Web rapide renforce la confiance avec nos visiteurs, il augmente les chances qu'un visiteur reste sur notre page plus longtemps et donc qu'il dépense plus. D'un autre côté, si notre site Web est lent, les visiteurs pourraient simplement abandonner et ils ne verront même pas notre site Web génial, avec notre offre tout aussi géniale.

Si les raisons ci-dessus n'étaient pas assez convaincantes, j'en ai une de plus. Google et d'autres moteurs de recherche (SE) ont révélé qu'avoir un site Web lent fera baisser le classement de votre moteur de recherche, vous laissant encore moins de visiteurs. Ainsi, avoir un site Web rapide signifie que Google vous aimera davantage et cela peut changer radicalement votre classement SE en votre faveur.

Bien sûr, les temps de chargement varient pour plusieurs raisons, par exemple, la vitesse d'Internet du visiteur, l'emplacement du visiteur et la "lourdeur" ou la surcharge de notre site Web. Nous ne pouvons rien faire au sujet de la vitesse Internet du visiteur, mais nous pouvons nous occuper d'autres aspects et améliorer l'expérience pour tout le monde. Dans ce guide, nous verrons comment optimiser notre site Web WordPress pour la vitesse, pour le rendre rapide et léger, alors allons-y !

Table des matières

• Fondations
  • Hébergement WordPress
    • Hébergement partagé
    • Hébergement géré
    • VPS ou serveurs dédiés
  • Thème WordPress
  • Plugins WordPress
• Étapes d'optimisation de la vitesse des pages WordPress
  • Outils de vitesse de page
    • Google PageSpeed Insights
    • GTMetrix
    • Test de vitesse du site Web Pingdom
    • Test de page Web
  • Optimisation des images
    • Mini-guide pour l'optimisation des images
    • Images optimisées Google PageSpeed
    • Autres améliorations d'image
    • Améliorations des études de cas
  • Mise en cache du navigateur
  • Compression des ressources (Gzip ou Deflate)
  • Supprimer les fichiers JS ou CSS inutiles
  • JavaScript et CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison
  • Mise en cache côté serveur
    • WP Rocket (plugin de mise en cache côté serveur)
  • Réseau de diffusion de contenu
    • Nuageux
• Résultats finaux
• Conclusion

Fondations

Afin de rendre votre site Web aussi rapide que possible, nous devons le construire sur de bonnes bases. Tout comme la construction d'une maison, vous ne voulez pas la construire sur des sables mouvants et avoir des problèmes dès le début. Vous voulez le construire sur des fondations solides, afin qu'il dure longtemps sans aucun problème. Les trois principales choses à vérifier sont :

• hébergement
• le thème WordPress
• les plug-ins WordPress

Hébergement WordPress

L'hébergement est le fondement même de votre site WordPress et est donc un élément crucial, qu'il ne faut pas négliger, même si vous disposez déjà d'un hébergement. Passer à un meilleur fournisseur d'hébergement accélérera le temps de chargement de votre WordPress jusqu'à plusieurs secondes.

La sélection du bon hébergeur est importante et vous ne devez pas baser votre décision sur le prix de l'hébergement. Habituellement, avec des prix bas, vous obtenez de faibles performances et c'est ce que nous voulons éviter. Examinons les options d'hébergement disponibles et expliquons quelles sont les différences.

Hébergement partagé

C'est la solution d'hébergement la plus répandue car elle est bon marché. Mais comme nous l'avons dit, avec des prix bas, vous obtenez de faibles performances. Sur un hébergement mutualisé, il y a des milliers de comptes sur un serveur physique, ce qui signifie que les ressources du serveur sont partagées entre tous les sites créés par ces comptes d'hébergement.

Imaginez une grosse pizza (hmmm ?…), chaque site web sur un hébergement mutualisé reçoit un tout petit morceau. Mais parce que votre site a beaucoup de visiteurs, il a besoin de plus de pizza ! Il a encore faim, mais il n'y a plus de pizza :(, parce que d'autres sites ont faim aussi…

Si obtenir seulement une petite part de pizza n'est pas assez grave, les risques de sécurité potentiels aggraveront probablement encore le cas de l'hébergement partagé. Un site Web infecté sur un hébergement partagé pourrait entraîner des problèmes de vitesse et de performances pour l'ensemble du serveur et mettre également en danger votre site WordPress.

La configuration du serveur sur les hébergements mutualisés est très limitée et vous n'avez pas beaucoup de marge de manœuvre pour le configurer à votre guise. Le serveur est préconfiguré avec des paramètres spécifiques, généralement très génériques, et il devrait exécuter WordPress sans problème. Des problèmes surviennent plus tard, sous la forme d'un manque de mémoire ou sous la forme d'un paramètre PHP restreint, dont un plugin aurait besoin pour fonctionner correctement.

Je ne peux pas vraiment recommander l'hébergement partagé pour un site Web d'entreprise, mais si je devais le faire, je dirais qu'il convient mieux aux sites à très faible trafic.

Hébergement géré

Il s'agit d'une mise à niveau importante par rapport à l'hébergement partagé, car votre site Web reçoit un plus gros morceau de pizza (une tranche de pizza entière, oui !), Mais cela coûte plus cher.

Les serveurs de l'hébergement géré sont moins peuplés et cela se traduit par plus de ressources serveur pour votre site. Ces serveurs sont généralement optimisés pour exécuter WordPress aussi bien que possible, ils ont plus de mémoire, de puissance de traitement et un système de mise en cache en place.

L'installation et la configuration matérielle et logicielle de ces serveurs d'hébergement infogéré sont réalisées par l'hébergeur (d'où le mot « infogéré »). D'autres services, tels que les sauvegardes, les équilibreurs de charge, la reprise après sinistre et les contrôles/préventions de sécurité, peuvent également faire partie de l'hébergement géré, en fonction de l'offre de la société d'hébergement.

L'hébergement WordPress géré est recommandé pour les sites Web à trafic faible à moyen.

VPS ou serveurs dédiés

Si nous nous en tenons à l'analogie de la pizza, avec VPS (Virtual Private Server), vous obtenez quelques tranches de pizza, mais pas toute la pizza et avec des serveurs dédiés, vous obtenez toute la pizza.

Cela signifie qu'avec des serveurs dédiés, vous avez le contrôle de l'ensemble du serveur avec toutes ses ressources et avec le VPS, vous obtenez une partie du serveur car vous partagez toujours la machine serveur physique avec d'autres. En ce qui concerne l'optimisation de la vitesse des pages pour WordPress, il n'y a aucune limitation côté serveur lorsque vous configurez votre WordPress sur un VPS ou un serveur dédié. Vous savez exactement combien de ressources sont disponibles pour votre site Web et vous pouvez le configurer à votre guise. Vous pouvez implémenter des fonctionnalités de pointe avant que les fournisseurs d'hébergement standard ne les prennent en charge (ce qui peut avoir des années de retard sur la technologie du logiciel serveur).

Ces deux options offrent plus de contrôle et de ressources, mais elles ont également des prix plus élevés et exigent plus de compétences pour les configurer et les entretenir à long terme. Les serveurs VPS/dédiés peuvent également être gérés, vous n'avez donc pas besoin d'être un gourou des serveurs pour en utiliser un. Ils conviennent aux sites Web à fort volume de trafic.

Si vous ne savez pas quel hébergement choisir, je suggérerais l'option d'hébergement WordPress géré, qui devrait également pouvoir évoluer (allouer plus de ressources à partir du serveur), si nécessaire.

Une optimisation gratuite du site Web, que tout hébergement décent propose désormais, consiste à mettre à niveau la version PHP vers 7.x. Si votre site WordPress fonctionne sur PHP inférieur à 7, comme 5.6 ou même plus ancien, veuillez contacter votre support d'hébergement et lui demander de le mettre à jour vers la dernière version stable. Si vous recherchez un nouvel hébergement, vous pouvez demander leur support, s'ils ont la version PHP 7.x. Ils devraient tous répondre par un "oui" solide, mais s'ils n'ont pas la possibilité d'utiliser PHP 7.x, je recommanderais de rester à l'écart d'eux. PHP 7 est, par rapport aux anciennes versions, une grande amélioration en termes de vitesse et de performances et il est très facile d'y passer, alors profitez-en.

Un bon choix d'hébergement vous évitera beaucoup de soucis sur la route et si vous rencontrez un problème, un bon support client devrait pouvoir vous aider, donc je garderais également à l'esprit de choisir un hôte qui offre un bon support . Une astuce rapide que vous pouvez utiliser : posez-leur une question avant l'achat et surveillez leur temps de réponse, leur attitude et leur niveau de professionnalisme.

Thème WordPress

Lorsque nous choisissons un thème WordPress pour notre site, nous commençons toujours par la conception du thème et c'est OK. Nous devrions d'abord choisir quelques thèmes que nous aimons, car nous voulons que notre site soit génial et qu'un bon design soit la première chose qu'un visiteur voit. La deuxième chose est probablement la fonctionnalité du thème. Le thème ou les plugins recommandés par le thème offrent-ils les fonctionnalités que nous souhaitons ? Si c'est le cas, super ! Nous sommes en affaires! Ce que nous oublions presque toujours, c'est de vérifier la vitesse de chargement du thème.

Nous pouvons tester le temps de chargement de la page de démonstration du thème et nous verrons rapidement si le thème est optimisé pour la vitesse. Nous allons vérifier quels outils de vitesse de page utiliser et comment les utiliser dans une section ci-dessous, mais pour l'instant, je veux juste vous informer de cette étape supplémentaire de vérification du thème, avant l'achat. Bien sûr, le temps de chargement de la page de démonstration peut probablement être amélioré, donc si vous n'obtenez pas une note parfaite, ne vous inquiétez pas, aucun thème WordPress n'obtiendra une note parfaite de 100%, sauf s'il a très peu de contenu sur sa page de démonstration. En règle générale, vous devez rechercher les thèmes qui ne figurent pas dans les chiffres rouges (score de 50 ou moins sur les outils de vitesse de page).

Cela se résume à un bon équilibre entre la conception du thème et la fonctionnalité par rapport à la vitesse du thème. Par exemple, un thème WordPress vide avec un peu de texte se chargera très rapidement, mais un thème gonflé avec beaucoup de fonctionnalités (dont vous n'aurez peut-être pas besoin pour la plupart), avec beaucoup de contenu multimédia, se chargera beaucoup plus lentement. Atteindre ce point idéal est l'objectif, lors de la sélection d'un thème WordPress bon et performant.

Plugins WordPress

Une question que je vois souvent surgir est : "Combien de plugins, c'est trop ?". Ce n'est pas un problème dans le nombre de plugins WordPress, mais dans la qualité du code et l'impact du plugin sur le système. Vous pouvez avoir plus de 50 plugins actifs, chacun des plugins prenant en charge une petite fonctionnalité spécifique (avec un bon code) et le site fonctionnera correctement. D'un autre côté, vous pouvez avoir 5 plugins actifs et l'un d'eux pourrait obstruer votre système, ce qui ralentirait votre WordPress.

Passer en revue le code de chaque plugin est une bonne idée, mais "personne n'a le temps pour ça", et vous auriez besoin de bonnes connaissances en programmation pour le faire. Si vous suivez cette voie, les choses à surveiller sont les plugins qui mettent en file d'attente de nombreuses ressources externes, font beaucoup de requêtes HTTP, font des requêtes de base de données inutiles (non optimisées) et ainsi de suite (essentiellement tout ce qui ralentirait le site Web WordPress, sans raison valable).

Ce que je recommanderais est de ne pas installer et activer chaque plugin dont vous pensez avoir besoin.

Pensez-y d'abord, votre site a-t-il vraiment besoin de cette fonctionnalité supplémentaire ? Par exemple, si vous avez besoin d'un shortcode de bouton, consultez la documentation de votre thème, peut-être que le thème a un shortcode pour lui et vous n'avez pas besoin d'installer et d'activer un plugin complet de bundle de shortcode juste pour utiliser un seul shortcode de boutons. Ceci est un exemple trivial, mais je veux que vous réfléchissiez avant d'installer et d'activer de nouveaux plugins. Chaque plugin non vérifié pourrait rendre votre site plus lourd et donc plus lent, et cela pourrait entraîner une faille de sécurité, si le plugin est mal codé ou non maintenu.

Enfin, une grande chose sur laquelle vous pouvez tirer parti, lors de la sélection du plugin, est une grande part mondiale de WordPress et par conséquent une énorme communauté. Avec un manque de connaissances en matière de codage, une bonne règle empirique consiste à s'en tenir aux plugins populaires avec de nombreuses installations actives, une bonne note moyenne et des critiques positives. Les autres WordPressers rendront votre sélection beaucoup plus facile !

Étapes d'optimisation de la vitesse des pages WordPress

Avant de commencer l'optimisation, je voudrais mentionner quelques points.

Tout d'abord, vous devez créer une sauvegarde de votre site WordPress, voici un guide sur la façon de le faire avec un plugin WordPress. Mieux vaut prévenir que guérir !

Deuxièmement, je vous préviens de ne pas vous attendre au score de 100/100 dans les outils de vitesse de page que nous utiliserons dans notre guide. Aller après le score de 100/100 n'est pas une bonne idée ni même possible sur certains sites. Tout dépend du type de contenu affiché par votre site. Si un site ne contient qu'un peu de texte et une image, alors bien sûr, un score parfait est tout à fait possible. Mais si vous avez une longue page, avec beaucoup de contenu multimédia et d'autres intégrations d'applications tierces, comme Google Maps, etc., alors le score de 100 n'est pas dans votre ligne de mire et vous ne devriez pas non plus le poursuivre.

Pourquoi n'est-ce pas une bonne idée d'aller pour 100/100 ? Si vous suivez les instructions des outils de vitesse de page et optimisez tout comme ils le disent, votre site risque de ne pas fonctionner correctement. Si vous déplacez tous les fichiers JS ou CSS bloquants vers le pied de page, le CSS clignotant apparaîtra (le contenu non stylisé apparaîtra en premier et lorsque le CSS se chargera, le site « clignotera » en place), la même chose se produirait avec le code JS , qui modifierait tous les éléments DOM après le chargement du code JS.

Vous pourriez casser votre site, si vous suivez aveuglément les instructions et continuez à optimiser votre site WordPress pour un meilleur temps de chargement, juste pour obtenir le score parfait. Le score de vitesse de page parfait n'est qu'un nombre, ce qui n'a pas d'importance si vos visiteurs se retrouvent avec un site défectueux. Nous devons rechercher l'équilibre entre la vitesse de la page et l'expérience utilisateur.

Pour la démonstration de l'optimisation de la vitesse des pages WordPress, nous utiliserons mon compte d'hébergement mutualisé et notre thème WordPress médical (avec les plugins recommandés pour le thème). Ouais, ouais, je sais que j'ai essentiellement dit de ne pas utiliser d'hébergement mutualisé, mais nous verrons ce qu'il est capable de faire et quelles sont les limites, et ce n'est qu'un test d'optimisation de la vitesse des pages, pas un véritable site Web professionnel WordPress

J'ai installé la dernière version de WordPress, le thème MedicPress, tous les plugins recommandés par thème et j'ai importé le contenu de démonstration. C'est notre point de départ pour le site de test.

Outils de vitesse de page

L'optimisation de la vitesse des pages peut être difficile, mais heureusement, il existe des outils en ligne qui nous facilitent la vie et nous conseillent quoi faire, afin d'améliorer la vitesse de notre site Web.

La première règle pour optimiser votre WordPress pour la vitesse est la suivante : toujours mesurer !

Exécutez les outils (ou au moins l'un d'entre eux), que nous examinerons dans la section ci-dessous, après chaque étape d'optimisation et suivez les améliorations. De cette façon, vous saurez quelles tâches apportent les plus grandes améliorations. Vous devez également exécuter des tests plusieurs fois pour voir le temps de chargement moyen réel.

Les pages se chargent différemment selon l'emplacement du serveur d'hébergement. Par exemple, si votre serveur est situé en Amérique du Nord et que le visiteur vient d'Europe, la page se chargera plus lentement pour lui que pour un visiteur canadien. Ce problème peut être résolu avec un CDN (Content Delivery Network), mais nous verrons cela un peu plus loin dans l'article. Pour l'instant, je voulais juste souligner que ce problème est présent pour les visiteurs du monde entier et également pour les outils d'optimisation de la vitesse des pages. Certains outils vous permettent également d'effectuer le test à partir de différents emplacements, afin que vous puissiez voir comment cela affecte le temps de chargement.

Les outils de vitesse de page que nous examinerons sont :

• Google PageSpeed Insights
• GTmetrix
• Test de vitesse du site Web Pingdom
• WebPageTest

Il existe d'autres outils, mais ce sont les plus populaires et nous nous en tiendrons à eux.

Google PageSpeed Insights

Comme vous pouvez le voir dans le titre de cet outil, il s'agit d'un produit Google. Outre le score (divisé en ordinateur et mobile) et les instructions utiles sur ce qu'il faut faire pour améliorer le temps de chargement de votre page, nous pouvons également tirer une conclusion sur ce que Google aime voir sur un site Web. Quelles choses il veut optimiser sur un site Web pour bien se classer dans les résultats des moteurs de recherche.

Si vous avez des images ou des fichiers de ressources non optimisés (JS ou CSS), il générera un fichier zip avec leurs homologues optimisés, que vous pourrez remplacer sur votre serveur. Plutôt chouette, non ? Nous examinerons l'optimisation des images et du code plus tard, sachez simplement que Google PageSpeed ​​peut vous aider.

Google PageSpeed ​​Insights ne contient pas beaucoup d'informations détaillées, comme d'autres outils, mais c'est un bon point de départ, qui couvre tous les aspects importants de l'optimisation de la vitesse des pages. Il répertorie les étapes qui amélioreront le plus votre site.

J'ai exécuté cet outil avec l'URL de notre site de test et j'ai obtenu un score de 71 pour le bureau et de 67 pour le mobile, il y a donc place à l'amélioration. La liste des suggestions d'optimisation possibles comprend :

• Activer la compression (compresser les ressources avec gzip ou deflate),
• optimiser les images,
• réduire le temps de réponse du serveur,
• éliminer JavaScript et CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison,
• minifier JavaScript.

GTmetrix

Cet outil vous donne des informations plus détaillées sur les choses qui sont optimisées et celles qui ne le sont pas. Chaque détail d'optimisation est répertorié et noté sur une échelle de 0 à 100. La liste est classée par importance, donc si vous suivez les tâches de haut en bas et optimisez celles qui n'ont pas un score de 100 %, vous serez sur la bonne voie pour accélérer le site WordPress le plus rapidement possible.

À l'aide des outils de test PageSpeed ​​et YSlow, GTmetrix génère des scores pour votre page et affiche les tâches qui doivent être améliorées. Une fonctionnalité intéressante de cet outil est également le rapport Waterfall, qui représentera graphiquement le chargement de votre site et vous permettra de repérer plus rapidement les goulots d'étranglement. Dans l'image ci-dessous, vous pouvez voir que mon hébergement mutualisé lent a pris 1,13s pour répondre avec les premières informations. C'est beaucoup trop long, mais nous pourrons améliorer cela.

Vous pouvez également tester votre page à partir de 7 endroits différents à travers le monde, ce qui est agréable et aussi une chose importante à tester, ce que nous verrons plus loin dans l'article.

J'ai exécuté l'outil GTmetrix (emplacement : Vancouver, Canada) sur notre site de test et j'ai obtenu un score PageSpeed ​​de 77 et un score YSlow de 71. Avec cet outil, nous obtenons également ces informations utiles :

• Temps de pleine charge : 3,1 s,
• Taille totale de la page : 803 Ko
• Requêtes : 54

J'aime le plus l'outil GTmetrix, car vous obtenez beaucoup d'informations pertinentes en un seul endroit. Nous utiliserons principalement l'outil GTmetrix pour mesurer nos progrès d'optimisation dans ce guide.

Test de vitesse du site Web Pingdom

Pingdom est un autre outil qui affiche les informations d'optimisation un peu différemment. Vous obtenez les mêmes données récapitulatives de base que sur l'outil GTmetrix (sans le score YSlow). Avec Pingdom, vous avez la possibilité de tester la vitesse de la page sur 4 emplacements différents. Les résultats sont tous différents pour chaque emplacement, ce qui montre que l'emplacement du serveur est important, mais nous pourrons également l'améliorer (avec CDN plus loin dans l'article). Nous utiliserons l'outil Pingdom pour tester les temps de chargement des pages sur les 4 emplacements disponibles, car les tests Pingdom se terminent plus rapidement.

Pingdom affiche également des tableaux intéressants, comme la taille du contenu ou le nombre de requêtes, filtrés par type de contenu ou par domaine et dispose également d'un rapport en cascade.

WebPageTest

L'outil WebPageTest a encore plus d'options de configuration que les outils précédents. Il a plus d'emplacements à choisir, une vitesse Internet peut être sélectionnée, vous pouvez activer/désactiver quelques options de navigateur et vous pouvez tester des appareils spécifiques.

C'est un bon outil, qui affiche un rapport détaillé en cascade pour chaque exécution (par défaut, il fait 3 exécutions, mais vous pouvez modifier cela dans les paramètres) et il affiche une note de A à F pour chacun de ces facteurs d'optimisation de la vitesse :

• Temps du premier octet (temps de réponse),
• keep-alive activé,
• transfert compressé (gzip),
• compresser les images,
• cache le contenu statique,
• utilisation efficace du CDN.

Vous pouvez entrer dans les détails, en vérifiant tous les onglets de résultats, où vous trouverez de nombreuses informations utiles. J'utiliserais cet outil, si j'avais besoin d'un rapport détaillé ou si j'avais besoin de tester un emplacement disponible sur leur site, sinon je pense que le GTmetrix a des informations plus concises.

J'ai exécuté cet outil pour notre site de test. Vous pouvez voir les résultats dans la capture d'écran ci-dessous :

Nous avons examiné les outils de vitesse de page les plus populaires et nous avons effectué les premiers tests de vitesse de page. Nous sommes donc enfin prêts à commencer à optimiser notre site WordPress. Pour référence, voici les résultats du point de départ des outils de vitesse de page que nous utiliserons pour mesurer nos progrès d'optimisation de la vitesse :

• Google PageSpeed Insights
  • Mobiles : 67
  • Bureau : 71
• GTmetrix
  • Vitesse de page : 77
  • LSent : 71

Optimisation des images

C'est probablement l'aspect le plus ignoré des performances du site et, en même temps, il peut apporter la plus grande amélioration à la vitesse de votre site. Si vous ne pensez jamais à optimiser l'image avant de la télécharger sur votre site WordPress, c'est une excellente première étape pour l'optimisation de votre temps de chargement WordPress.

Le téléchargement de grandes images non optimisées, utilisées dans un petit endroit sur votre site Web est un grand "non non". Exemple : vous avez un emplacement d'image qui ne sera pas plus grand que 600 x 400 px sur votre site et vous téléchargez une image de 1 920 x 1 080 px (voire plus grande !). Maintenant, vous répétez cette erreur plusieurs fois et votre site sera très lent.

La première chose à faire est de redimensionner l'image à la bonne taille. Dans notre exemple, l'emplacement de l'image ne sera jamais plus grand que 600 x 400 px, nous devons donc redimensionner l'image à cette taille.

« Ça y est, le travail est fait, non ? » Non. Nous pouvons encore améliorer l'image. Il existe de nombreux outils qui optimisent (compressent) l'image sans perdre sa qualité (nos yeux ne peuvent pas détecter la perte de qualité avec ces outils). Cela réduira également considérablement la taille du fichier image, ce qui accélérera son chargement.

La compression des images peut être effectuée manuellement ou avec des plugins WordPress. Mon collègue Marko a écrit un guide phénoménal pour l'optimisation des images, nous allons donc utiliser les connaissances acquises grâce à son article et passer rapidement en revue les techniques que vous pouvez utiliser pour optimiser vos images.

Mini-guide pour l'optimisation des images

Choisissez le bon format d'image - les formats d'image les plus populaires pour une utilisation en ligne sont JPEG et PNG. Vous pouvez économiser beaucoup sur la taille du fichier image en sélectionnant le bon format d'image (Marko a économisé 45 % dans son article). Tu devrais utiliser:

• Le format .jpg pour les photos, les images avec des dégradés et les images avec des millions de couleurs.
• Le format .png pour les images aux couleurs limitées (logos) et les images avec transparence.

Redimensionnez vos images – Comme je l'ai mentionné ci-dessus, vous devez toujours redimensionner les images avant de les télécharger sur votre site WordPress. Tout d'abord, vérifiez la taille de l'espace où vous utiliserez l'image et redimensionnez-la en conséquence. Vous pouvez redimensionner les images avec un programme de manipulation d'images, comme GIMP ou Photoshop.

Compressez vos images – Cela peut être fait avec un outil de compression d'images en ligne ou avec un plugin WordPress :

Outil de compression en ligne : Marko recommande l'outil en ligne Optimizilla. Téléchargez simplement vos images sur l'application Optimizilla et une fois le processus terminé, téléchargez les images optimisées, que vous devrez ensuite télécharger sur votre site WordPress. Cela semble un peu fastidieux, alors bien sûr il existe un plugin WordPress, qui peut simplifier ce processus.

Plugin de compression d'image WP : Encore une fois, Marko a testé les plugins de compression d'image les plus populaires et a déclaré un gagnant : ShortPixel Image Optimizer. Après avoir installé le plugin, vous devrez demander une clé API afin d'utiliser le plugin (un processus très simple). Les paramètres par défaut du plugin sont excellents, vous n'avez donc rien à configurer, allez simplement dans Média -> Bulk ShortPixel et cliquez sur le bouton "Démarrer l'optimisation". Toute image nouvellement téléchargée sera également optimisée. Remarque : la version gratuite de ce plugin n'autorise que 100 optimisations d'images/mois, si vous en avez besoin de plus, vous devrez passer à leur forfait payant. Nous voulons que nos clients aient accès aux meilleurs outils, c'est pourquoi nous nous sommes associés à ShortPixel et maintenant, nos membres ProteusClub bénéficient également de 1 000 crédits gratuits à utiliser avec le plugin WordPress ShortPixel.

Enfin, je ne saurais trop vous recommander de lire l'intégralité de l'article sur l'optimisation des images dans WordPress.

Images optimisées Google PageSpeed

Il s'agit d'une autre manière d'optimiser vos images existantes sur votre site WordPress. Si vous avez suivi les étapes ci-dessus, dans la section Mini Guide pour l'optimisation des images, vous avez probablement déjà optimisé les images et Google PageSpeed ​​n'aura donc aucune image pour vous. Bon travail! Vous pouvez toujours lire cette section à titre informatif

J'ai mentionné dans l'introduction de l'outil Google PageSpeed ​​que Google génère un fichier zip avec des fichiers optimisés que vous pouvez utiliser sur votre site. Vous pouvez télécharger le fichier zip, en cliquant sur ce lien :

Dans ce fichier zip, vous avez un dossier appelé image , qui contient les images optimisées. Vous pouvez les télécharger via FTP ou votre téléchargeur de fichiers d'hébergement. Remplacez/écrasez les images dans les bons dossiers de téléchargement (…/wp-content/uploads/…). Après cela, vous devez également générer les versions plus petites (vignettes) de ces images dans votre site WordPress. Vous pouvez le faire avec le plugin Regenerate Thumbnails.

Autres améliorations d'image

Dans cette section, nous examinerons d'autres améliorations concernant les images, dont nous pouvons tirer parti, pour obtenir des performances supplémentaires.

Images de chargement paresseux

Le Lazy Loading est une technique de chargement d'images, où les images sont chargées de manière asynchrone. Les images qui ne sont pas au-dessus de la ligne de flottaison ne sont pas chargées au chargement de la page (elles sont chargées après ou même seulement quand elles sont nécessaires). Cela signifie que les images visibles en haut de la page sont chargées, tandis que les autres images (non visibles) sont chargées après le chargement de la page ou lorsque les utilisateurs font défiler la page (à la demande). Si vous avez une longue page avec de nombreuses images, vous pouvez économiser beaucoup de temps de chargement initial de la page avec cette technique.

Le chargement paresseux peut être implémenté avec un code personnalisé ou avec un plugin WP. Nous utiliserons le plugin de mise en cache WP Rocket plus tard et il a également une fonction de chargement paresseux.

Liaison directe d'images

Qu'est-ce que le hotlinking ? Il affiche une image hébergée sur un autre serveur. Par exemple, si vous avez un message très populaire et dans ce message, vous avez une belle image. Un visiteur (voleur) pourrait copier l'URL source de l'image et l'utiliser sur son propre site. Cela signifie que l'image sera demandée et servie à partir de votre serveur. Multipliez le voleur par 100 et vous avez des milliers de requêtes externes auxquelles votre serveur doit répondre, ce qui peut ralentir votre serveur.

Il ne s'agit pas d'une optimisation directe de la vitesse de la page, mais plutôt d'une optimisation du serveur. Vous pouvez résoudre le problème de hotlinking avec du code dans le fichier .htaccess. Vous pouvez aller plus loin (être un peu méchant) et remplacer l'image volée par une autre, peut-être pas très belle :). Cela peut également être fait dans le fichier .htaccess. Ouvrez votre fichier .htaccess sur votre serveur et ajoutez-y ce code. Remplacez your-website.com par votre domaine, google.com par tout autre domaine auquel vous souhaitez autoriser l'accès à vos images et remplacez http://replacing-stolen-image-url-goes-here.jpg avec l'URL de l'image que vous souhaitez afficher pour toutes les images volées.

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ http://replacing-stolen-image-url-goes-here.jpg [NC,R,L]

Si vous ne souhaitez pas remplacer l'image volée par votre image personnalisée, utilisez ce code. Cela désactivera l'image sur leur site Web :

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Améliorations des études de cas

Regardons les progrès que nous avons réalisés avec notre site de test jusqu'à présent, après optimisation des images. Comme vous le savez, j'ai importé des données de démonstration pour notre thème médical, que nous utilisons comme site de test. Ces images de démonstration utilisaient les formats de fichier corrects et elles étaient déjà correctement dimensionnées, je pouvais donc ignorer ces deux étapes. Si je devais télécharger une nouvelle image, je ne les sauterais pas !

J'ai donc installé le plugin ShortPixel et j'ai exécuté l'optimiseur en masse. Le plugin a signalé une optimisation moyenne de l'image de 38%. C'est génial!

J'ai exécuté l'outil PageSpeed ​​Insights et Google a souligné que certaines des images pouvaient être encore plus compressées. J'ai donc suivi mes propres conseils, utilisé les images préparées par Google et je les ai téléchargées sur mon serveur via FTP.

Une fois les images triées, les résultats des outils de vitesse de page étaient :

• Google PageSpeed Insights
  • Mobiles : 72
  • Bureau : 77
• GTmetrix
  • Vitesse de page : 81
  • LSent : 71

Pas une grande amélioration, puisque les images utilisées dans les données de démonstration étaient déjà assez optimisées, mais nous nous rapprochons tout de même de notre objectif. Si vous avez des images non optimisées sur votre site, cette étape d'optimisation des images vous apportera une énorme augmentation des scores et réduira le temps de chargement de la page.

Mise en cache du navigateur

Lorsqu'un utilisateur visite votre site via un navigateur, il doit télécharger toutes les ressources (HTML, images, JS, CSS, …) de votre serveur afin d'afficher le site pour le visiteur. Lorsque le même utilisateur visite une autre page de votre site, les fichiers CSS et JS restent généralement les mêmes, mais le navigateur peut toujours les télécharger à nouveau depuis votre serveur, si vous ne disposez pas d'une configuration de serveur appropriée.

Proper caching headers and expiration dates should be set on your server, to allow static resources (JS, CSS and other files) to be stored in the browser's cache. This greatly improves the performance for returning visitors or for visitors who look at more than one page on your site.

Usually, the hosting servers have that already configured. If the page speed optimization tools report that you are missing the “Leverage browser caching” optimization or something like that, then it's best to contact your hosting company and let them know that you want to set-up browser caching for your site. They will be able to sort that out for you or at least point you to the right direction on how to do that yourself.

If you want to do things yourself, then you have to know that these browser caching settings vary, depending on the server type your hosting company is using. A good starting point for Apache servers is the .htaccess file of the HTML5 Boilerplate project (check out the “Expires headers” section). An nginx configuration is available as well.

My shared hosting account has browser caching already configured, so there is nothing for us to do on our test site.

Resource Compression (Gzip or Deflate)

Files sent from your server (HTML, JS, CSS, …) to your visitors can be compressed, so that they can be transferred faster, which improves your page speed. This can be done by enabling Gzip or Deflate compression on your server.

You can contact your hosting support and ask them, if they can enable resource compression for your site or you can configure it yourself, but be sure you know which server type your hosting is using. We can again look at the HTML5 Boilerplate project for some tips, they have default server configs for each of the major server types. For example, my hosting is using Apache server, so I found this compression config. I've copied the content of this config, I've located the .htaccess file for my WordPress site via the FTP (it's in the root of your WP installation) and I copied it at the end of the file.

I've re-run the page speed tools, after I've enabled the resource compression for my WordPress site and here are the results:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 96
  • YSlow: 82

As you can see, we've improved our scores by a fair amount and all we did, was enable the resource compression, which did not take a lot of time. By compressing resources, we change the total page size from 803KB to 476KB, which is awesome! We made another step towards an optimized site, so let's continue.

Remove unneeded JS or CSS files

If you are using plugins, which include JS or CSS files on all your pages and you actually are not using the plugin features on those pages, then it's best to remove them. This can be done with custom code in your child theme, but I would recommend that you use a plugin for that. It's much easier!

The plugin that will help us do that is WP Asset CleanUp. After you install and activate this plugin, go and edit your home page. Home pages are usually the “heavier” pages, so we will look at it for our example, but you can do that for other pages as well.

Under the page content editor, you will see a section called WP Asset CleanUp . This section will list all CSS and JS files that are included on your front page. Now, your job is to find out, which of these files are not needed on your WordPress front page.

For example, in our test site, we are using the Contact Form 7 plugin, but we are only using the contact form on our “Contact Us” page, so we can safely remove (unload) its CSS and JS files from our home page. I can do the same with WooCommerce assets, since we are not using them on our home page as well. You should look at each asset in the list and check, if you can unload it. Watch out for the files with the red exclamation icon, you should probably never unload these, since they are core WordPress files and they are needed for the site to work properly. This is how my home page Assets CleanUp settings looks like:

I was able to safely remove 11 assets, which will save 11 resource requests when a page loads and that will improve the page speed.

Re-run of page speed test tools showed, that Google PageSpeed Insights score did not change (because it also did not list this as a recommended optimization), but the GTmetrix score did improve:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 97
  • YSlow: 86

Our site also loads faster, it now needs 2.7 seconds to load the whole site (in the beginning it took 3.1 seconds). We are improving the WordPress site speed slowly but surely. Bear in mind, I'm using one of our WordPress themes for the test, which are built from the ground up to be performing out of the box. If you're using some other WordPress theme, where the author didn't put any efforts to optimize it for speed, your improved loading speed results will most probably be much greater at this point.

With removing unneeded JS and CSS files from our home page, we improved our scores, load time, number of request and the total page size as well. Bon travail!

Render-blocking JavaScript and CSS in above-the-fold content

One of the optimizations that Google PageSpeed Insights suggests is also: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. This is a tricky one. Remember when I said, that it's not good to chase a perfect score in the page speed tools? This is one of the reasons for that.

If we look at our example, the Google tool suggests that the Page Builder front-flex.css should be deferred or loaded asynchronously. We are using the Page Builder by SiteOrigin plugin for building content in our pages. So, if this file is responsible for making our layout of the page look good, then I might not respect Google suggestion and simply ignore it.

“But why would you disrespect Google? How dare you!” Well, this is only a tool and it gives you suggestions on what to do, but it does not know, if implementing some of these changes will break your site or ruin good user experience (UX) for your visitors. For example, if the tools had suggested that we load the style.css file with all the theme styles asynchronously, then it would have created the FOUC: Flash of unstyled content:

This is a bad UX, so I would ignore the suggestion from the tool and keep a good UX instead of improving our score. After all, Google is also using other factors it can gather from your website to rank it in the search results and user experience is one of them. When optimizing the website for speed, don't follow the recommendations blindly and forget about all the other aspects and goals your WordPress website has.

If the files that the tool suggests to be loaded asynchronously are valid candidates and they don't break anything, then of course we can implement that change. The best way is to just try to asynchronously load each suggested file and see, if the page still loads ok. Don't forget to reload the page without browser cache, so that a fresh copy of the page loads. You can do that by hard refreshing your site.

We will look at how to load files asynchronously in the WP Rocket plugin section below. There are other standalone plugins that offer this functionality, but since the WP Rocket has it build in, we don't need to pollute our WP installation with more plugins.

Server Side Caching

We've already talked about browser cache, but now we also have to take care of the server side cache. To understand server side caching we have to know the basics of how WordPress works, so let's look at that first.

When a visitor opens a WordPress page, the following things happen (basic explanation):

1. Server receives a page request.
2. WordPress PHP code begins to execute.
3. WordPress access the database to get the information it needs to build the requested page.
4. WordPress produces the HTML.
5. Server responds with the HTML for the browser to display it to the visitor.

These 5 steps have to be repeated for each page view, for each visitor. That's a lot of repetitive work for content that stays the same for each visitor (if your site is displaying mostly static content, which majority of websites is).

Server side caching eliminates pretty much all the server's hard work. It removes the need for repeating steps 2,3 and 4. So, when we enable server side caching, the process of a page request looks like this:

1. Server receives a page request.
2. Server retrieves the page HTML from the cache (if a cached version is available).
3. Server responds with the HTML for the browser to display it to the visitor.

As you can see, the hard work of running the WordPress code and accessing the database is bypassed, which means that the page loading time should be much faster.

If we look at the Google PageSpeed Insights tool suggestions, we will spot the “Reduce server response time” task. The tool says that our server responded in 0.98 seconds, which is not good. The slow shared hosting I'm using is definitely to blame for some chunk of that 1 second response time, but we'll be able to shorten it with server side caching.

Each page cache is usually saved with an expiration time of 24 hours, but that setting can be changed. This means that instead of thousands of page requests running the whole WordPress HTML building process, it will only be run once a day, to generate that cached page and the server will serve that cached page to other visitors. So, not only the page will be quicker, but the server will also have to do less work.

If you are updating a page in WordPress and an old cached version of the page is still available on your server, then you would have to clear that cache manually (usually with the click of a button) or some tools would do that for you automatically.

Some hosting companies already have a server side caching in place for their users, but this feature is usually available for managed WordPress hosting packages. So, before you follow instructions below, on how to setup server side caching, you should make sure that your server is not doing that for you already.

We will look at how to setup the WP Rocket plugin to enable server side caching and other features that it has (like lazy loading images, loading assets asynchronously, minification of JS and CSS files and much more). WP Rocket is a premium (paid) plugin, but I believe it's worth the investment. If you don't agree with me, that's fine WP Super Cache is a good free alternative, but it does not have the same extra features as WP Rocket and it's a little bit more cumbersome to setup.

WP Rocket (server side caching plugin)

As soon as we install and activate the WP Rocket plugin it will have some basic features enabled out of the box:

• Caching of all the pages for quick viewing.
• Decrease bandwidth usage with our GZIP compression.
• Management of the headers (expires, etags…).

The WP Rocket plugin default settings are a good starting point.

I've run the page speed tools a couple of times, so that they picked up the cached version of the site and these are the new results:

• Google page speed insights
  • Mobile: 91
  • Desktop: 97
• GTmetrix
  • PageSpeed: 97
  • YSlow: 87

The Google PageSpeed Insights tool no longer displays the “Reduce server response time” optimization suggestion, because we reduced it from 1 second to 121ms, that's a 88% improvement in server response time, just by activating the WP Rocket plugin! With this improvement, our fully loaded time is now 1.9 seconds, but we are not stopping here

Regardons les paramètres que le plugin WP Rocket a à offrir. WP Rocket a un joli menu de raccourcis dans votre barre de menus d'administration WP supérieure. De là, vous pouvez accéder à la page des paramètres, vider le cache et accéder à d'autres informations utiles concernant ce plugin.

Avant de continuer et d'essayer différents paramètres de WP Rocket, je voudrais mentionner qu'après chaque modification que vous apportez, vous devez vérifier votre site dans un onglet de navigateur incognito/privé . Si vous êtes connecté à votre site WordPress, vous ne verrez pas la version en cache du site. Dans l'onglet du navigateur incognito, vous ne serez pas connecté et vous obtiendrez une version en cache du site, vous pouvez donc vérifier s'il fonctionne correctement.

Sachez également que l'activation de chaque paramètre WP Rocket peut avoir des résultats différents ou même des effets négatifs sur la vitesse de votre WordPress, selon le thème ou les plugins que vous utilisez, donc activer tous les paramètres WP Rocket n'est pas la solution. Vous devriez essayer chaque paramètre et le mesurer avec des outils de vitesse de page, pour voir la différence. Comme vous le verrez, certaines techniques n'amélioreront pas la vitesse de notre page, nous ne les utiliserons donc pas.

Vider le cache

La mise en cache côté serveur commencera à fonctionner dès que vous activerez le plugin WP Rocket, alors regardons comment nous pouvons l'effacer. Vous pouvez effacer manuellement le cache si vous cliquez sur l'élément de menu "Effacer le cache" dans le menu contextuel de WP Rocket. Le plugin se chargera également de vider automatiquement le cache lorsque vous mettez à jour les paramètres de personnalisation, modifiez/mettez à jour les widgets, les catégories, … et il videra partiellement le cache lorsque vous mettez à jour une page. Pour plus d'informations sur le moment où l'effacement automatique du cache se produira, veuillez vous référer à cette question WP Rocket.

Le cache a une durée de vie qui peut être définie dans l'onglet "Basique" des paramètres de WP Rocket. Je suggère de régler cela sur 1 jour.

Précharger le cache

Une fonctionnalité intéressante de WP Rocket est le "préchargement du cache", qui préchargera le cache de votre page d'accueil et des pages auxquelles elle renvoie, afin que vos utilisateurs obtiennent toujours une version en cache de la page. Je pourrais utiliser cette fonctionnalité avant d'exécuter les outils de vitesse de page et je n'aurais pas à exécuter les outils plusieurs fois pour obtenir les résultats de la version en cache.

Les paramètres du cache de préchargement sont accessibles dans la page des paramètres sous l'onglet "Préchargement". Recherchez l'option "Preload bot", vous y trouverez une option manuelle et une option automatique. Si vous activez l'option de bot automatique, le cache de préchargement s'exécutera chaque fois que vous mettrez à jour ou créerez une page ou si le cache expire. Cette option peut influencer les performances de votre serveur, alors gardez un œil sur les journaux de performances si vous l'activez. Si vous mettez à jour et créez beaucoup de publications/pages et que vous avez un hébergement mutualisé, je vous conseille de ne pas activer cette option. Vous devez activer uniquement l'option de bot manuel à la place, ce qui créera un autre élément de menu contextuel WP Rocket, intitulé "Précharger le cache" et préchargera le cache uniquement lorsque vous cliquerez dessus (une fois que vous aurez terminé de modifier les publications et les pages).

Dans l'onglet des paramètres "Précharger", vous trouverez également des paramètres pour précharger le cache à partir d'un sitemap, vous pouvez donc définir un sitemap et il utilisera les URL du sitemap pour précharger le cache de ces pages.

LazyLoad

J'ai déjà expliqué le chargement paresseux des images dans la section optimisation des images de cet article, mais maintenant que WP Rocket est installé, nous pouvons réellement activer cette fonctionnalité. Allez dans l'onglet "Basique" des paramètres de WP Rocket et activez le LazyLoad pour les images et si vous utilisez des vidéos ou des iframes, vous pouvez également l'activer.

Après avoir activé cette fonctionnalité, vous devez toujours vérifier votre site et voir comment les images se chargent. LazyLoad peut casser la mise en page de votre site ou vous pouvez ne pas aimer la façon dont les images sont chargées (saut de contenu), alors vérifiez toujours vos pages. Cette fonctionnalité est vraiment pratique lorsque vous avez beaucoup d'images en dessous du pli et cela vous aidera à réduire le nombre de demandes d'images lors du chargement de la page d'origine. Sur notre site de test, nous n'avons que 5 images en dessous de la ligne de flottaison, nous avons donc enregistré 5 demandes d'images et notre temps de chargement de page est maintenant réduit à 1,7 seconde, tandis que les scores des outils de vitesse de page sont restés les mêmes. C'est un bon indicateur que vous pouvez améliorer la vitesse de votre page avec certaines tâches que les outils ne suggèrent pas.

Réduire les fichiers

Certaines des suggestions de GTMetrix que nous pouvons encore améliorer sont de réduire les fichiers HTML, CSS et JS. Parce que notre thème WordPress et la majorité des plugins recommandés utilisent déjà des versions minifiées pour les fichiers JS/CSS et que Gzip est activé sur notre serveur, cette optimisation WP Rocket n'apportera pas d'améliorations significatives pour notre site de test, mais votre cas pourrait être différent. Accédez à l'onglet "Fichiers statiques" dans les paramètres de WP Rocket et cochez les 3 options sous l'option Minify files . Enregistrez les paramètres et allez vérifier votre site Web dans un onglet incognito/privé, afin que vous puissiez rechercher les problèmes que ces options pourraient apporter à votre site. Dans mon site WordPress de test, la minification CSS a cassé la mise en file d'attente du fichier CSS flexbox du générateur de page, j'ai donc dû désactiver l'option de fichier CSS minify. Les options HTML et JS ont bien fonctionné.

J'ai demandé au support de WP Rocket quel pouvait être le problème et ils ont eu la gentillesse de déboguer ce problème sur mon site. Le problème était causé par le cache Varnish utilisé sur mon hébergement mutualisé. Ils ont suggéré de changer la configuration de Varnish sur mon serveur d'hébergement. J'ai contacté mon support d'hébergement et comme je le soupçonnais, je ne peux pas modifier la configuration de Varnish sur mon hébergement mutualisé, mais je le pourrais si je mettais à niveau vers le pack d'hébergement VPS. Comme vous pouvez le voir, utiliser un hébergement mutualisé n'est pas une bonne idée

Si vous rencontrez des problèmes avec la minification CSS ou JS, vous pouvez ajouter l'URL du fichier à l'origine des problèmes dans la boîte des fichiers JS ou CSS exclus. Trouver le fichier responsable des problèmes peut être délicat, mais généralement vous savez quelle fonctionnalité est cassée et quel plugin est responsable de cette fonctionnalité, vous vérifiez donc le code source de votre page et inspectez les fichiers inclus par ce plugin. Si le plugin a plusieurs fichiers JS ou CSS, vous pouvez simplement essayer de les ajouter à la liste d'exclusion et voir si le problème disparaît.

Combinez les fichiers JS et CSS

L'onglet YSlow de l'outil GTmetrix nous dit de "Faire moins de requêtes HTTP". Il indique que notre WordPress utilise 9 scripts JS externes et que nous devrions essayer de les combiner en 1 et que la page utilise 4 fichiers CSS externes et nous devrions également essayer de les combiner en 1 fichier. Si vous vous en souvenez, nous avons déjà supprimé les fichiers JS et CSS inutiles dans la section Supprimer les fichiers JS ou CSS inutiles de cet article.

Combiner tous les fichiers JS et CSS dans un seul fichier n'est pas une bonne idée, car les navigateurs peuvent télécharger 6 fichiers plus petits en parallèle, plus rapidement que 1 à 2 fichiers volumineux. L'autre raison est que certains fichiers sont inclus dans l'en-tête des documents HTML et d'autres à la fin du document, vous devez donc les diviser en au moins 2 fichiers.

Pour combiner des fichiers avec WP Rocket, allez dans l'onglet "Fichiers statiques" dans les paramètres du plugin et activez les options sous Combiner des fichiers . Comme toujours, vérifiez votre site dans un onglet de navigateur incognito/privé pour vérifier tout problème.

Dans notre exemple, le WP Rocket a de nouveau eu des problèmes, en raison du problème de configuration de l'hébergement partagé Varnish mentionné ci-dessus, j'ai donc dû désactiver l'option de combinaison de fichiers JS.

Encore une fois, si vous rencontrez des problèmes avec la concaténation CSS ou JS, vous pouvez ajouter l'URL du fichier à l'origine des problèmes dans la boîte des fichiers JS ou CSS exclus, comme dans l'étape de minification ci-dessus.

Supprimer les chaînes de requête des ressources statiques

GTMetrix nous recommande de supprimer les chaînes de requête des ressources statiques, car certains serveurs proxy ne mettent pas en cache les ressources avec les chaînes de requête.

Les chaînes de requête dans une ressource statique (généralement un fichier JS ou CSS) est un attribut d'URL, qui marque la version dudit fichier. Il ressemble à ceci : ?ver=2.5.8 et est ajouté à la fin de l'URL : http://domain.com/css/front-flex.css?ver=2.5.8

Nous pouvons facilement supprimer ces chaînes de requête avec WP Rocket. Accédez à l'onglet "Fichiers statiques" des paramètres du plug-in et activez l'option Supprimer les chaînes de requête .

Après avoir activé cette option, notre score GTmetrix PageSpeed ​​est passé à 98, mais le temps de chargement de la page n'a pas changé.

CSS/JS bloquant le rendu

La seule suggestion d'outil Google PageSpeed ​​​​Insights qui reste est "Éliminer le JavaScript et le CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison". Cela signifie que certains fichiers JS ou CSS bloquent le chargement de la page dans le contenu au-dessus de la ligne de flottaison. Ce que l'outil veut que nous fassions, c'est de différer ou de charger de manière asynchrone ces ressources bloquantes.

Une fois de plus, le plugin WP Rocket vient à la rescousse. Allez dans l'onglet "Fichiers statiques" et recherchez les options CSS/JS bloquant le rendu . Là, vous pouvez activer les options JS et CSS qui peuvent résoudre ce problème. Une fois que vous avez activé l'option JS, une option Mode sans échec (recommandé) apparaîtra. Ce mode sans échec chargera la bibliothèque jQuery (bibliothèque mise en file d'attente par défaut de WP) dans l'en-tête de la page, la laissant comme fichier bloquant, mais il ne cassera aucune page contenant du code jQuery en ligne sur la page. Étant donné que jQuery est toujours chargé dans la tête, l'outil PageSpeed ​​se plaint toujours que nous avons un fichier JS bloquant le rendu.

Ainsi, si je désactive le mode sans échec pour notre site de test, l'outil Google PageSpeed ​​nous donne un score parfait, 100 sur mobile et 100 sur ordinateur. Génial, non ? Pas vraiment! Notre site Web fonctionne toujours correctement, mais regardons comment le site Web se charge :

Le flash de contenu non stylisé (FOUC) peut être corrigé en utilisant l'option CSS Chemin critique dans les paramètres de WP Rocket (juste en dessous de l'option CSS/JS bloquant le rendu). La théorie est que vous pourriez ajouter le code CSS nécessaire pour la partie au-dessus du pli de la page, afin que cet effet flash de texte non stylé n'apparaisse pas au chargement de la page. C'est plus difficile qu'il n'y paraît. Il existe des outils censés générer ce CSS critique pour vous, mais je n'ai pas eu beaucoup de succès avec eux.

Pour générer le code CSS du chemin critique :

1. Désactivez le plugin WP Rocket sur votre site.
2. Accédez à l'outil Critical Path CSS Generator.
3. Entrez l'URL de votre site et exécutez-le.
4. Copiez le code CSS du chemin critique.
5. Activez le plug-in WP Rocket.
6. Collez le code CSS dans la case "Chemin critique CSS" dans les paramètres de WP Rocket.
7. Vérifiez s'il existe des chemins d'URL relatifs dans le code CSS critique et remplacez-les par des chemins absolus.

Voici à quoi ressemble le chargement de notre site de test WordPress :

C'est mieux, mais je n'aime toujours pas ça. Oui, le score Google PageSpeed ​​de 100/100 est excellent, mais le temps de chargement total est plus lent et nous avons également 2 requêtes supplémentaires car nous avons activé cette option CSS/JS bloquant le rendu. Le principal problème pour moi est toujours l'expérience utilisateur du chargement de la page, j'ai donc désactivé cette option WP Rocket.

WP Rocket est définitivement un plugin que chaque propriétaire de site Web WordPress devrait utiliser, car il possède toutes les fonctionnalités pour accélérer votre site. Le simple fait d'activer le plugin vous donnera un énorme coup de pouce. D'autres fonctionnalités doivent être testées pour chaque site Web, car chaque thème et plug-in peut apporter ses propres problèmes.

Nous sommes presque à la fin de nos étapes d'optimisation. La seule chose qui reste est d'utiliser un CDN pour les actifs de notre site Web.

Réseau de diffusion de contenu (CDN)

J'ai déjà mentionné à quelques reprises dans cet article que les temps de chargement des pages diffèrent en fonction de l'emplacement du serveur et de l'emplacement du visiteur. Par exemple, mon serveur d'hébergement partagé que nous utilisons pour les tests est situé à Austin, Texas (États-Unis) et au début de la section Pingdom page speed tool de cet article, nous avons testé 4 emplacements. Voici les résultats:

• Dallas, Texas (États-Unis) = 1,65 s
• San José, Californie (États-Unis) = 2,53 s
• Stockholm, Suède (UE) = 3,06 s
• Melbourne (Australie) = 5,38 s

Maintenant que nous avons optimisé le site, avec toutes les étapes mentionnées dans cet article, nos temps de chargement sont :

• Dallas, Texas (États-Unis) = 0,63 s
• San José, Californie (États-Unis) = 0,76 s
• Stockholm, Suède (UE) = 1,21 s
• Melbourne (Australie) = 2,24 s

Nous utiliserons ces temps pour comparer notre temps de chargement WordPress, lorsque nous configurons notre site pour utiliser un CDN.

Nous pouvons voir que ces temps sont très différents; c'est parce que les données doivent parcourir un plus long chemin depuis l'emplacement de notre serveur jusqu'au visiteur australien que jusqu'à un visiteur à Dallas. C'est là qu'un CDN nous aidera à réduire ces temps de chargement.

Un CDN est un réseau distribué géographiquement de serveurs proxy et de leurs centres de données. Leur objectif principal est de distribuer le contenu de votre site à vos visiteurs à partir d'un serveur le plus proche du visiteur. Cela signifie que le contenu statique de votre site Web (images, JS, CSS, …) sera servi par leurs serveurs, qui sont répartis dans le monde entier, ce qui rendra votre site plus rapide à charger pour tout le monde.

L'utilisation d'un CDN WordPress présente une multitude d'avantages, notamment :

• Diminution de la latence, qui est le temps et/ou le retard que la distance doit parcourir.
• Réduit le temps au premier octet (TTFB), qui est une mesure du temps que le navigateur doit attendre avant de recevoir son premier octet de données du serveur.
• Diffuse le contenu du cache pour des temps de chargement de page plus rapides et moins de contraintes sur votre serveur d'hébergement (d'origine).
• Utilise HTTP/2 sur des connexions sécurisées pour tirer parti du multiplexage, du parallélisme, de la poussée du serveur et de la compression HPACK.
• Compresse les données avec GZIP ou Brotli pour garantir des fichiers HTML, des feuilles de style et des fichiers JavaScript plus petits.

De nos jours, les CDN offrent un tas d'autres fonctionnalités, en particulier dans le département de la sécurité. Ils offrent généralement une protection DDoS, une détection/prévention des bots, etc.

Nous examinerons l'un des CDN les plus populaires, appelé Cloudflare. Ils offrent un forfait gratuit, qui inclut l'utilisation de leur CDN mondial et c'est ce dont nous avons besoin.

Nuageux

Allez d'abord sur cloudflare.com et inscrivez-vous pour un nouveau compte gratuit. Après avoir créé un compte, vous devrez configurer votre site Web sur Cloudflare, afin qu'il puisse servir votre contenu statique (actifs).

Lorsque vous vous connectez à votre nouveau compte Cloudflare, il vous sera demandé d'ajouter votre site Web (domaine) afin de récupérer automatiquement les enregistrements DNS.

Entrez votre domaine et cliquez sur "Commencer l'analyse". Même si j'utilise un sous-domaine ( speed.gregorcapuder.com ), je n'ai dû entrer que le domaine racine : gregorcapuder.com . La partie numérisation a duré environ une minute et en attendant, vous pouvez regarder une courte vidéo, qui vous expliquera ce qui se passe. Une fois la numérisation terminée, vous pouvez cliquer sur le bouton "Continuer".

À l'étape suivante, vous verrez tous les enregistrements DNS que Cloudflare a pu trouver pour notre domaine. Ici, vous devez ajouter tous les enregistrements qui pourraient manquer, alors parcourez la liste et vérifiez s'il manque quelque chose. Dans notre exemple, le sous-domaine vitesse manquait, je l'ai donc ajouté à la liste. Dans l'entrée de nom , j'ai entré "vitesse" (nom de mon sous-domaine), dans l' adresse IPv4, j'ai entré la même adresse IP que mon domaine principal (gregorcapuder.com) puis j'ai cliqué sur "Ajouter un enregistrement". Comme vous pouvez le voir dans la capture d'écran ci-dessous, j'ai activé Cloudflare pour mon domaine principal ainsi que pour le sous-domaine de vitesse (marqué par un nuage orange avec une flèche derrière le nuage). Cela signifie que sur ces deux sites Web, le trafic sera géré et protégé par Cloudflare.

Lorsque vous avez terminé avec les enregistrements DNS, vous pouvez passer à l'étape suivante, où vous sélectionnez le plan "Site Web gratuit" et continuez.

La dernière étape pour activer Cloudflare pour votre site Web consiste à vous connecter au tableau de bord de votre registraire de domaine (où vous avez acheté votre domaine) et à modifier les serveurs de noms de votre domaine. Il est indiqué que cela peut prendre jusqu'à 48 heures pour que les nouveaux serveurs de noms prennent effet, mais dans mon cas, il a été mis à jour en 1 heure. Il n'y aura pas de temps d'arrêt du site Web entre-temps, alors ne vous inquiétez pas.

Une fois les serveurs de noms mis à jour pour votre site, vous verrez le statut de votre site Web Cloudflare passer à « actif ».

J'ai laissé tous les paramètres Cloudflare dans le tableau de bord par défaut, la seule chose que j'ai changée était le niveau de sécurité. Accédez à l'onglet Pare-feu et réglez le "Niveau de sécurité" sur Faible . C'est parce que je ne veux pas que mes visiteurs obtiennent une "page de défi" sur une fausse détection d'attaquant.

Maintenant que nous configurons le côté Cloudflare, nous devons également activer les paramètres Cloudflare sur notre plugin WP Rocket.

Connectez-vous à votre tableau de bord d'administration WordPress et accédez aux paramètres du plugin WP Rocket. Accédez à l'onglet "CDN", activez l'onglet Afficher les paramètres Cloudflare et enregistrez les paramètres. Cela affichera un nouvel onglet "Cloudflare" dans les paramètres de WP Rocket et vous devriez l'ouvrir. Là, vous devez saisir l'e-mail du compte Cloudflare, le domaine et vous devez également copier et coller la clé API globale Cloudflare. Pour récupérer la clé API globale, accédez au tableau de bord Cloudflare (onglet aperçu) et cliquez sur le lien "Obtenir votre clé API". Vous verrez une section "Clé API" sur cette nouvelle page et vous devrez cliquer sur le bouton "Afficher la clé API" pour la ligne "Clé API globale". Une fois que vous avez collé la clé API globale dans les paramètres de WP Rocket, je suggérerais également d'activer l'option "Paramètres optimaux" dans WP Rocket. Enregistrez les paramètres puis cliquez sur le bouton "Effacer le cache Cloudflare", histoire de vérifier que tout fonctionne correctement.

Maintenant que le CDN est configuré, nous pouvons à nouveau tester les temps de chargement à partir de différents endroits et voir les améliorations (tests Pingdom).

• Dallas, Texas (États-Unis) = 0,54 s
• San José, Californie (États-Unis) = 0,70 s
• Stockholm, Suède (UE) = 0,91 s
• Melbourne (Australie) = 1,16 s

Comme prévu, les temps de chargement européens et australiens se sont le plus améliorés. Et tous nos temps de chargement sont d'environ 1 seconde ou moins. C'est un super temps de chargement !

Lorsque vous testez votre site, ne le testez pas avec une seule exécution de l'outil de vitesse de page pour un emplacement. Vous devez le tester plusieurs fois. Lorsque vous exécutez l'outil pour la première fois pour un certain emplacement, les fichiers mis en cache doivent d'abord être stockés sur le serveur Cloudflare le plus proche, chaque test ultérieur doit vous montrer le véritable temps de chargement de la version mise en cache. Je vous suggère de tester 3 à 5 fois, pour obtenir une bonne moyenne de la vitesse de chargement de votre page à partir d'un emplacement particulier.

Résultats finaux

Les notes finales de notre outil de vitesse de page sont :

• Informations Google PageSpeed
  • Mobile : 91
  • Bureau : 97

• GTmetrix
  • Vitesse de page : 98
  • LSent : 91

Voici les captures d'écran :

Comparons les données GTmetrix avant et après notre optimisation :

Nous avons amélioré les performances de notre site Web de toutes les manières. Le site Web se charge plus rapidement, il faut moins de demandes pour afficher le site à l'utilisateur, il prend moins de bande passante et il se charge rapidement pour les visiteurs du monde entier. Dans le même temps, nous avons conservé toutes les fonctionnalités et le style de notre site Web tels qu'ils étaient au début. Impressionnant!

Pour finir, nous avons préparé une belle représentation visuelle des résultats pour chaque étape d'optimisation individuelle que nous avons effectuée :

Conclusion

Dans ce guide ultime d'optimisation de la vitesse des pages WordPress, nous avons examiné les étapes les plus importantes que vous pouvez entreprendre pour améliorer considérablement les performances de votre site Web. Suivre les conseils de cet article rendra votre site léger et rapide, ce qui améliorera le temps de chargement de votre page et donc l'expérience utilisateur. Ces améliorations pourraient également rapporter plus d'argent et vous aider à économiser sur les coûts du serveur, c'est donc un gagnant-gagnant pour tout le monde !

Je voudrais conclure cet article en disant que la vitesse n'est pas tout, c'est une autre pièce du puzzle d'un site Web. Nous construisons des sites Web pour les humains, les clients potentiels, alors gardez toujours cela à l'esprit. Trouvez un bon équilibre entre le contenu, le multimédia, le design, l'expérience utilisateur et la vitesse des pages. Ne soyez pas obsédé par la vitesse des pages et les scores des outils de vitesse des pages. Tant que vous améliorez l'expérience de vos visiteurs, votre objectif sera atteint.

Ai-je raté une étape d'optimisation du site Web qui, selon vous, peut apporter une amélioration cruciale au temps de chargement de la page ? Faites-le moi savoir dans les commentaires ci-dessous!

Si vous trouvez notre article utile et que vous avez suivi ses étapes, veuillez me faire savoir dans les commentaires ci-dessous, quel type d'améliorations vous avez réalisé.