Chez Kinsta, nous travaillons avec beaucoup d’agences et de pigistes qui traitent avec les clients sur une base quotidienne. Il n’est pas rare pour les clients ou même un PDG d’une entreprise de demander à leur agence ou développeur WordPress d’augmenter leur score Google PageSpeed Insights. Google fait un bon travail de marketing de cet outil pour les consommateurs, et souvent, ils ne comprennent pas toujours qu’un score parfait n’est pas la fin du monde. Cela peut être frustrant à certains moments. Cependant, aujourd’hui, nous voulons partager avec vous quelques conseils et stratégies qui peuvent vous aider à obtenir un score de 100/100 dans Google PageSpeed Insights avec votre site WordPress.

Quelle est l’importance de Google PageSpeed Insights ?

Google PageSpeed Insights est un outil de performance web créé par Google pour vous aider à identifier facilement les moyens de rendre votre site plus rapide et plus mobile, en suivant les recommandations sur les meilleures pratiques web. Une chose très importante à se rappeler est que vous ne devriez pas toujours être obsédé par le score de 100/100. Cela pourrait même ne pas être possible dans tous les scénarios, selon la façon dont votre site WordPress est configuré. Avec beaucoup de thèmes polyvalents et de sites avec des douzaines de scripts externes, ce sera tout simplement presque impossible d’essayer d’obtenir un score parfait. Ce qui est parfaitement correct.

Nous vous recommandons de regarder la vitesse de votre site, plus que les scores. Les scores avec des outils comme Pingdom, GTMetrix et Google PageSpeed Insights peuvent parfois vous égarer. D’autant plus que certains d’entre eux ne supportent même pas encore HTTP/2. Ce qui compte vraiment, c’est de s’assurer que votre site se charge rapidement et que la performance perçue est également à la hauteur. La performance perçue est la vitesse à laquelle votre site Web se charge pour les utilisateurs.

Google utilise-t-il PageSpeed Insights lorsqu’il s’agit de référencement et du facteur de classement de vitesse ou de la vitesse de réponse pure ? C’était une question intéressante soulevée par un référenceur chez FDP Group Leeds et discutée sur Search Engine Roundtable. Gary Illyes, Webmaster Trends Analyst pour Google, a répondu en disant « Je dirais les deux ».

Cela est dû en partie au fait que dans la plupart des cas, lorsque vous avez un site Web lent, vous allez probablement avoir beaucoup d’avertissements dans Google PageSpeed Insights. Beaucoup de recommandations vont de pair avec la façon dont elles se rapportent à vos temps de réponse purs. Ce n’est pas forcément en rapport à 100%, mais ce que Gary dit probablement, c’est que si vous avez un site Web lent, oui, cela affectera certainement votre classement.

Cela est dû en partie au fait que dans la plupart des cas, lorsque vous avez un site Web lent, vous allez probablement avoir beaucoup d’avertissements dans Google PageSpeed Insights. Beaucoup de recommandations vont de pair avec la façon dont elles se rapportent à vos temps de réponse purs. Ce n’est pas forcément en rapport à 100%, mais ce que Gary dit probablement, c’est que si vous avez un site Web lent, oui, cela affectera certainement votre classement.

Obtenir un score de 100/100 sur un hébergement mutualisé et Kinsta

Nous avons pensé qu’il serait amusant d’explorer le nouveau thème Twenty Seventeen dans WordPress 4.7. C’est le premier thème WordPress par défaut qui s’adresse aux entreprises à la place d’un blog typique, ce qui est passionnant ! C’est pourquoi nous allons vous montrer aujourd’hui comment obtenir le score parfait de 100/100 sur le bureau et sur le mobile. Nous avons installé des outils et services communs que de nombreux sites WordPress utilisent, tels que Google Analytics, Akismet, Yoast SEO, etc. Nous avons effectué des tests à la fois sur un hébergement mutualisé à petit budget et sur Kinsta pour vous montrer la différence entre l’hébergement Google Cloud et un environnement d’hébergement mutualisé.

Bien qu’il s’agisse d’un petit site, c’est une bonne base pour au moins comprendre un peu comment fonctionne Google PageSpeed Insights. Si vous êtes intéressé à voir des optimisations sur un thème polyvalent plus grand, consultez notre article sur l’optimisation du thème Total WordPress.

100 sur Google PageSpeed Insights

100 sur Google PageSpeed Insights

100/100 dans Google PageSpeed Insights avec un hébergement mutualisé

Sur notre premier site de test, nous avons WordPress 4.7 avec le Thème Twenty Seventeen fonctionnant sur un hébergement mutualisé à petit budget populaire (Apache). SSL est configuré et les extensions suivantes sont installées.

  • Yoast SEO
  • Akismet

Nous avons aussi Google Analytics qui tourne dans le <body> de notre fichier header.php. La seule modification que nous avons faite est que nous avons ajouté une image vedette à l’article par défaut « Hello world ! Nous exécutons notre site de test à travers Google PageSpeed Insights et nous obtenons un score de 69/100 pour le bureau et un score de 58/100 pour le mobile. Nous avons donc certainement des améliorations à apporter ici. Creusons chacun d’entre elles pour voir comment nous pouvons les réparer.

Score d'hébergement mutualisé sur Google PageSpeed Insights

Score d’hébergement mutualisé sur Google PageSpeed Insights

Activer la compression

Nous commencerons par le bureau d’abord, car de nombreux correctifs s’appliqueront également au mobile. La toute première recommandation de Google PageSpeed Insights que nous devons corriger est l’avertissement Enable Compression.

enable-avertissement

Avertissement Enable compression

Selon Google, pour résoudre ce problème, nous devons activer la compression Gzip. Malheureusement, l’hébergeur mutualisé ne l’a pas déjà activé automatiquement sur ses serveurs, donc nous devons le faire manuellement.

Tous les navigateurs modernes supportent et négocient automatiquement la compression Gzip pour toutes les requêtes HTTP. L’activation de la compression Gzip peut réduire la taille de la réponse transférée jusqu’à 90%, ce qui peut réduire considérablement le temps de téléchargement de la ressource, réduire l’utilisation des données pour le client et améliorer le temps de rendu initial de vos pages.

Il y a plusieurs façons de procéder. La première et l’une des plus faciles est d’utiliser une extension de mise en cache qui supporte l’activation de Gzip. WP Rocket par exemple ajoute automatiquement les règles de compression Gzip dans votre fichier .htaccess en utilisant le module mod_deflate. W3 Total Cache a aussi un moyen de l’activer pour vous dans sa section performance.

La deuxième façon d’activer la compression Gzip est d’éditer votre fichier .htaccess.  La plupart des hébergeurs mutualisés utilisent Apache, dans lequel vous pouvez simplement ajouter le code ci-dessous à votre fichier .htaccess. Vous pouvez trouver votre fichier .htaccess à la racine de votre site WordPress via FTP.

  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent

 Assurez-vous de l’ajouter sous le contenu actuel de votre fichier .htaccess. Exemple ci-dessous :

Ajouter le code de compression GZIP

Ajouter le code de compression GZIP

Si vous utilisez NGINX , ajoutez simplement ceci à votre fichier nginx.conf.

36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

Un outil comme Check Gzip Compression peut vous montrer quel poids en octets vous avez gagné en activant la compression Gzip. Voici un exemple ci-dessous de ce que nous avons gagné sur notre site de test.

Économies grâce à la compression GZIP

Économies grâce à la compression GZIP

Si nous testons notre site via Google PageSpeed Insights à nouveau, nous pouvons voir que l’avertissement de compression Gzip a maintenant disparu et il a augmenté notre score de bureau de 69/100 à 80/100 et notre score mobile de 58/100 à 67/100.

PageSpeed Insights après la compression GZIP

PageSpeed Insights après la compression GZIP

Optimise les Images

La prochaine recommandation de Google PageSpeed Insights que nous devons corriger est l’avertissement Optimiser les images. Notre article de blog par défaut « Hello world ! » a une image en vedette qui est à l’origine de cette erreur.

Avertissement Optimise Images

Avertissement Optimise Images

Il s’agit d’un avertissement très important et très utile. Selon HTTP Archive, en novembre 2016, les images représentaient en moyenne 65% du poids total d’une page web. L’optimisation de vos images peut être l’un des moyens les plus simples d’améliorer les performances de votre site Web WordPress.

Il y a plusieurs façons de régler ce problème. La première est d’utiliser une extension d’optimisation d’image. Une extension peut réellement passer à travers et optimiser en masse l’ensemble de votre médiathèque WordPress et aussi les optimiser automatiquement lorsque vous les téléchargez. Nous avons fait un guide complet sur la façon d’optimiser vos images WordPress Vous trouverez ci-dessous quelques extensions d’optimisation d’images populaires :

Ces extensions résoudront le problème, ou vous pouvez aussi les compresser avant de les télécharger dans un outil comme Adobe Photoshop, Gimp ou Affinity Photo. Ci-dessous se trouve l’image en vedette qui lance cet avertissement. Nous pouvons la comprimer à l’avance en la réduisant à la fois à l’échelle et en abaissant la qualité. Il est préférable de garder vos images aussi petites que possible. Cette image était à l’origine de 2,32 Mo, après le redimensionnement et la compression, elle est maintenant de 99,38 ko. Rappelez-vous qu’il est préférable de télécharger des images à l’échelle et de ne pas se fier aux CSS pour les redimensionner. Cela ralentit votre site.

Compresser les images avec Affinity Photo

Compresser les images avec Affinity Photo

Si nous testons notre site via Google PageSpeed Insights à nouveau, nous pouvons voir que l’avertissement Optimize images est maintenant disparu et il a augmenté notre score de bureau de 80/100 à 88/100 et notre score mobile de 67/100 à 73/100. Nous faisons des progrès !

PageSpeed Insights après compression d'image

PageSpeed Insights après compression d’image

Éliminer le JavaScript et le CSS bloquant le rendu dans les contenus au-dessus de pli.

La prochaine recommandation de Google PageSpeed Insights que nous devons corriger est l’élimination du JavaScript et du CSS bloquant le rendu dans l’avertissement de contenu au-dessus de la ligne de flottaison. Nous avons en fait tout un article en profondeur sur le problème de blocage de rendu JavaScript et CSS.

Éliminer les avertissements JavaScript et CSS bloquant le rendu

Éliminer les avertissements JavaScript et CSS bloquant le rendu

Lorsqu’un navigateur charge une page Web, les ressources JavaScript et CSS empêchent généralement l’affichage de la page Web jusqu’à ce qu’elles soient téléchargées et traitées par le navigateur. Certaines ressources doivent être téléchargées et traitées avant d’afficher quoi que ce soit. Cependant, de nombreuses ressources CSS et JavaScript sont conditionnelles – c’est-à-dire qu’elles ne s’appliquent que dans des cas précis – ou ne sont tout simplement pas nécessaires pour rendre du contenu au-dessus du pli. Pour produire l’expérience la plus rapide possible pour vos utilisateurs, vous devriez essayer d’éliminer toutes les ressources de blocage de rendu qui ne sont pas nécessaires pour afficher le contenu au-dessus e la ligne de flottaison.

En ce qui concerne le Javascript bloquant le rendu, Google a trois recommandations :

  • Si vous n’avez pas beaucoup de JavaScript, vous pouvez les mettre en inline pour vous débarrasser de cet avertissement. Vous pouvez mettre le javascript en inline avec une extension comme Autoptimize. Cependant, cela n’est valable que pour de très petits sites. La plupart des sites WordPress ont assez de JavaScript pour vous ralentir.
  • La seconde est de charger votre JavaScript de manière asynchrone. Le JavaScript Async télécharge essentiellement le fichier pendant l’analyse HTML et mettra en pause l’analyseur HTML pour l’exécuter une fois le téléchargement terminé.
  • Le troisième est de différer votre JavaScript. L’attribut defer télécharge également le fichier pendant l’analyse HTML, mais il ne l’exécute qu’une fois l’analyse terminée. De plus, les scripts avec cet attribut s’exécutent dans l’ordre d’apparition sur la page. En savoir plus sur les différences entre Async et Defer.

Dans notre exemple, nous allons rendre notre chargement JavaScript asynchrone. Pour ce faire, nous allons utiliser une extension gratuite appelée Async JavaScript. Vous pouvez la télécharger à partir du répertoire WordPress ou la rechercher dans votre tableau de bord WordPress sous « Extensions > Ajouter nouveau ». Au moment d’écrire ces lignes, il y a actuellement plus de 9 000 installations actives avec une note de 4,2 sur 5 étoiles. Essentiellement, l’extension ajoute l’attribut ‘async’ ou ‘defer’ à tous les JavaScript chargés par la fonction wp_enqueue_script de WordPress. Le développeur dispose également d’une version premium qui vous permet de choisir les scripts que vous voulez asynchroniser ou différer.

Exemple d’Async

<script src="file1.js" async></script>

Exemple de Defer

<script src="file1.js" defer></script>

Après l’installation, allez simplement dans les paramètres et activez Async JavaScript.

JavaScript asynchrone

JavaScript asynchrone

Et pour les grands sites, l’exclusion de script peut s’avérer utile. Ou obtenez la version premium de l’extension. Nous n’en aurons pas besoin dans cet exemple, mais si vous avez un site avec beaucoup de JavaScript, il est fort probable que vous finirez par casser quelque chose si vous réglez tout sur Async ou Defer. Dans ce cas, vous aurez besoin de faire du dépannage avec ce que vous pourrez.

Exclusions de l'asynchrone

Exclusions de l’asynchrone

Si vous ne voulez pas utiliser une extension pour cela, il y a d’autres alternatives. Comme l’ajout du code suivant à votre fichier functions.php.

/*function to add async to all scripts*/
function js_async_attr($tag){
 # Add async to all remaining scripts
 return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Voici deux messages supplémentaires qui parlent de l’ajout d’Async ou de Defer sans extension :

Nous testons notre site via Google PageSpeed Insights à nouveau et comme vous pouvez le voir, le JavaScript bloquant le rendu est maintenant corrigé et il nous reste l’avertissement Optimize CSS Delivery.

Optimiser les avertissements de livraison CSS

Optimiser les avertissements de livraison CSS

Vous pouvez voir que le premier CSS que nous devons optimiser est notre police Google Fonts (fonts.googleapis.com). CSS est par défaut « Render-Blocking », cela inclut les CSS provenant des polices web. Pour résoudre ce problème, nous allons installer l’extension gratuite Disable Google Fonts. L’auteur de l’extension, Milan Dinić, l’a récemment mise à jour pour inclure la nouvelle police Libre Franklin de Twenty Seventeen. Après l’installation de l’extension, vos polices Google vont évidemment se casser. Vous devrez donc vous rendre sur Google Fonts et récupérer le code d’intégration manuellement. Nous sélectionnons les mêmes poids de police qui sont par défaut inclus dans le thème Twenty Seventeen.

Libre+Franklin:300,300i,400,400i,600,600i,800,800i" rel="stylesheet">
Police Google Fonts

Police Google Fonts

Ensuite, vous devrez l’ajouter à votre fichier footer.php, juste avant la balise </body>. Note : En procédant de cette façon, vous obtiendrez un FOUT, ce qu’ils appellent flash de texte non stylisé. Mais on se débarrassera aussi de la question du blocage du rendu. Vous devriez décider sur votre propre site si le FOUT est une expérience utilisateur acceptable pour vos visiteurs. Vous pouvez également utiliser Google Web Font Loader.

Police Google dans le pied de page de WordPress

Police Google dans le pied de page de WordPress

Nous testons notre site de test sur Google PageSpeed Insights à nouveau et maintenant sous l’avertissement Optimize CSS Delivery, il ne nous reste plus qu’une seule chose, et c’est le fichier style.css.

Avertissement Optimiser les chaînes de requête CSS

Avertissement Optimiser les chaînes de requête CSS

L’un des moyens les plus simples de résoudre ce problème est d’utiliser une extension WordPress gratuite appelée Autoptimize, développée par Frank Goossens.

Extension WordPress pour l’optimisation automatique

Extension WordPress pour l’optimisation automatique

Cette extension est assez légère, seulement 176 KB pour être exact. Au moment d’écrire ces lignes, il y a actuellement plus de 400 000 installations actives avec une cote de 4,5 sur 5 étoiles. L’extension vous aide avec la concaténation de vos scripts, la minification, l’expiration des en-têtes, et la possibilité de déplacer les styles vers votre en-tête et les scripts vers votre pied de page. Cette extension est entièrement compatible avec l’extension Async JavaScript qui a été utilisée précédemment.

Après avoir installé l’extension, cliquez sur les paramètres et sélectionnez « Optimiser le code CSS ». Cliquez ensuite sur l’onglet avancé et activez également « Aggregate inline CSS » et « Inline All CSS ». Notez que, selon le thème sur lequel vous faites cela, il se peut qu’il ne soit pas recommandé d’utiliser cette méthode. Pour les grands sites, l’utilisation du code Inline peut être mauvais, auquel cas il vaudrait mieux ignorer simplement cet avertissement particulier de Google PageSpeed Insights. Et rappelez-vous qu’avec HTTP/2, la concaténation peut parfois ralentir votre site.

Optimiser le code CSS

Optimiser le code CSS

Nous recommandons également d’activer l’option d’optimisation du code HTML.

Optimiser le code HTML

Optimiser le code HTML

Si nous testons notre site via Google PageSpeed Insights encore une fois, nous pouvons voir que l’avertissement du JavaScript et du CSS qui bloquent le rendu du contenu au-dessus de la ligne de flottaison a maintenant complètement disparu ! L’avertissement Minify CSS qui était plus bas et qui n’était même pas encore arrivée a aussi disparu. Nous avons augmenté notre score de bureau de 88/100 à 92/100 et notre score mobile de 73/100 à 89/100. Nous y sommes presque.

PageSpeed Insights après l'optimisation JS et CSS

PageSpeed Insights après l’optimisation JS et CSS

Tirer parti de la mise en cache du navigateur

La prochaine recommandation de Google PageSpeed Insights que nous devons corriger est l’avertissement de mise en cache du navigateur. Nous avons fait un article complet et détaillé sur la question de la mise en cache du navigateur pour WordPress.

pagespeed insights leverage browser caching

Leverage browser caching warning

La raison la plus courante pour laquelle l’avertissement de mise en cache du navigateur est déclenché est que votre serveur Web n’a pas les en-têtes appropriés en place. Dans la capture d’écran ci-dessus, vous pouvez voir que tous nos scripts internes n’ont pas d’expiration. Quand il s’agit de mettre en cache, il y a deux méthodes primaires qui sont utilisées, les en-têtes Cache-Control et les en-têtes Expires. Alors que l’en-tête Cache-Control active la mise en cache côté client et définit l’âge maximum d’une ressource, l’en-tête Expires est utilisé pour spécifier un moment précis dans le temps où la ressource n’est plus valide.

Vous n’avez pas nécessairement besoin d’ajouter les deux en-têtes, car c’est un peu redondant. Cache-Control est plus récent et généralement la méthode recommandée, cependant, certains outils de performance web comme GTmetrix vérifient toujours les en-têtes Expires. Ce sont tous des exemples, vous pouvez modifier les types de fichiers, les dates d’expiration, etc. en fonction de vos besoins. Voici quelques options ci-dessous. Nous allons simplement ajouter des en-têtes expire dans Apache sur notre hébergement mutualisé pour ce tutoriel.

Ajout de l’en-tête Cache-Control dans Nginx

Vous pouvez ajouter des en-têtes Cache-Control dans Nginx en ajoutant ce qui suit à l’emplacement ou bloc de serveur de votre configuration de serveur.

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}

Ajout d’en-têtes Expires dans Nginx

Vous pouvez ajouter des en-têtes Expires dans Nginx en ajoutant ce qui suit à votre bloc serveur. Dans cet exemple, vous pouvez voir comment spécifier différents temps d’expiration en fonction des types de fichiers.

location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}

Ajout d’en-têtes de contrôle du cache dans Apache

Vous pouvez ajouter des en-têtes Cache-Control dans Apache en ajoutant ce qui suit à votre fichier .htaccess.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"

Ajout d’en-têtes Expires dans Apache

Vous pouvez ajouter les en-têtes Expires dans Apache en ajoutant ce qui suit à votre fichier .htaccess.

## EXPIRES HEADER CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

## EXPIRES HEADER CACHING ##

Rappelez-vous que nous avons activé la compression Gzip plus tôt ! Voici à quoi notre fichier .htaccess ci-dessous ressemble maintenant après avoir ajouté les en-têtes expires. Nous le plaçons simplement sous le bloc de compression.

Code en-tête Expires

Code en-tête Expires

Nous testons notre site de test via Google PageSpeed Insights à nouveau et maintenant sous l’avertissement de mise en cache du navigateu, il ne nous reste qu’une seule chose, et c’est notre script Google Analytic. C’est un peu ironique, car il s’agit du script de Google. Le problème est qu’ils fixent un temps de cache de 2 heures sur leur ressource, comme le montre la capture d’écran ci-dessous. Ils le font très probablement parce que si, pour une raison quelconque, ils modifient quelque chose, ils veulent que tous les utilisateurs obtiennent les changements le plus rapidement possible.  Cependant, il existe un moyen de contourner ce problème, et c’est d’héberger localement le script Google Analytics. Veuillez noter que ce n’est pas pris en charge par Google.

Tirer parti de la mise en cache du navigateur avec Google Analytics

Tirer parti de la mise en cache du navigateur avec Google Analytics

Il existe une petite extension gratuite appelée Complete Analytics Optimization Suite, créée et développée par Daan van den Bergh, qui vous permet d’héberger Google Analytics localement sur votre site WordPress.

Vous avez des problèmes de temps d'indisponibilité et de WordPress ? Kinsta est la solution d'hébergement conçue pour vous faire gagner du temps ! Découvrez nos fonctionnalités
Extension WordPress CAOS

Extension WordPress CAOS

You can download Complete Analytics Optimization Suite from the WordPress repository or by searching for it under « Add New » plugins in your WordPress dashboard. As of writing this the plugin currently has 10,000+ active installs with a 5 out of 5-star rating. The plugin allows you to host your Google Analytics JavaScript file (analytics.js) locally and keep it updated using wp_cron(). Other features include being able to easily anonymize the IP address of your visitors, set an adjusted bounce rate, and placement of the script (header or footer).

Installez simplement l’extension, entrez votre identifiant de suivi Google Analytics, et l’extension ajoute le code de suivi nécessaire pour Google Analytics à votre site Web WordPress, télécharge et enregistre le fichier analytics.js sur votre serveur et le met à jour à l’aide d’un script programmé dans wp_cron(). Nous recommandons également de le régler pour le charger dans le pied de page. Note : Cette extension ne fonctionnera pas avec d’autres extensions Google Analytics WordPress.

Google Analytics en local

Google Analytics en local

Si nous testons notre site via Google PageSpeed Insights à nouveau, nous pouvons voir que l’avertissement de mise en cache du navigateur a maintenant complètement disparu ! Et nous avons augmenté notre score de bureau de 92/100 à 97/100 et notre score mobile de 89/100 à 96/100. Nous sommes si proches du 100/100 que nous pouvons presque le goûter.

pagespeed insigPageSpeed Insights après la correction de la mise en cache du navigateurhts after leverage browser caching

PageSpeed Insights après la correction de la mise en cache du navigateur

Réduire le temps de réponse du serveur

La prochaine recommandation de Google PageSpeed Insights que nous devons corriger est l’avertissement Réduire le temps de réponse du serveur. Beaucoup de fois cela se produit quand quelqu’un est sur un plan d’hébergement mutualisé à petit budget. Le serveur n’est pas rapide et Google le sait. Donc, pour corriger cela, nous devons mettre en œuvre un certain type de mise en cache pour accélérer les choses. Il y a beaucoup d’excellentes extensions de mise en cache. Dans notre exemple, nous allons utiliser l’extension gratuite Cache Enabler de l’équipe de KeyCDN.

Extension WordPress Cache Enabler

Extension WordPress Cache Enabler

Cache Enabler WordPress plugin

Au moment d’écrire ces lignes, Cache Enabler a 30.000+ installations actives avec une cote de 4,6 sur 5 étoiles. Il s’agit d’une extension de cache légère pour WordPress qui rend votre site Web plus rapide en générant des fichiers HTML statiques plus le support WebP. Il n’y a pas de paramètres à activer, il suffit de l’installer et profiter. Cette extension est entièrement compatible avec les extensions Async JavaScript et Autoptimize qui ont été utilisées précédemment. Si vous voulez encore plus de vitesse, nous vous recommandons également d’ajouter le snippet avancé pour contourner PHP.

Si nous testons notre site via Google PageSpeed Insights à nouveau, nous pouvons voir que l’avertissement Réduire le temps de réponse serveur a maintenant complètement disparu ! Et nous avons augmenté notre score de bureau de 97/100 à 99/100 et notre score mobile de 96/100 à 99/100. Nous sommes sur le point de franchir la ligne d’arrivée.

PageSpeed Insights après correction du temps de réponse serveur

PageSpeed Insights après correction du temps de réponse serveur

PageSpeed Insights after response time fix

Généralement, vous ne verrez pas la recommandation « réduire le temps de réponse du serveur » ici chez Kinsta. Mais il est important de noter qu’il y a des douzaines de facteurs potentiels qui peuvent ralentir la réponse de votre serveur : y compris la lenteur des requêtes de base de données des extensions, des frameworks, des bibliothèques, le manque de ressources CPU, ou le manque de mémoire. Nous utilisons New Relic pour aider les clients à mieux déterminer d’où cela pourrait provenir.

Minifier JavaScript

La dernière recommandation de Google PageSpeed Insights que nous devons corriger est l’avertissement Minify JavaScript.

Avertissement Minify JavaScript

Avertissement Minify JavaScript

Pour corriger cela, nous allons retourner dans les paramètres de l’extension Autoptimize et simplement activer l’option Optimize JavaScript Code. Puisque vous avez maintenant une extension de mise en cache en cours d’exécution, il se peut que vous ayez besoin de vider votre cache après l’avoir fait pour voir les résultats.

Optimiser le code JavaScript

Optimiser le code JavaScript

Et c’est tout ! Nous avons maintenant réussi à faire passer le thème WordPress Twenty Seventeen de 69/100 à 100/100 sur le mobile et le bureau sur un hébergement mutualisé à petit budget.

100/100 sur Google PageSpeed Insights

100/100 sur Google PageSpeed Insights

Voici les scores mobiles. Nous n’avons pas eu à faire quoi que ce soit d’autre pour le mobile. Le fait d’avoir la version de bureau à 100/100 a automatiquement augmenté nos scores de version mobile et d’expérience utilisateur à 100/100.

100/100 Google PageSpeed Insights mobile

100/100 Google PageSpeed Insights mobile

Nous avons aussi un avant et un après avec des tests de vitesse de Pingdom.

Test de vitesse avant les optimisations sur PageSpeed Insights

Voici un test de vitesse de Pingdom avant que les optimisations n’aient été faites sur l’hébergement mutualisé.

Test de vitesse avant les optimisations PageSpeed

Test de vitesse avant les optimisations PageSpeed

Test de vitesse après les optimisations sur PageSpeed Insights

Voici un test de vitesse de Pingdom après que les optimisations ont été faites sur l’hébergement mutualisé.

Test de vitesse avant les optimisations PageSpeed

Test de vitesse avant les optimisations PageSpeed

Test de vitesse avant les optimisations PageSpeed

Test de vitesse avant les optimisations PageSpeed

100/100 dans Google PageSpeed Insights avec Kinsta

Notre deuxième site d’essai est configuré exactement de la même façon que le premier. Il s’agit simplement d’un domaine différent. Nous avons WordPress 4.7 avec le thème Twenty Seventeen fonctionnant sur nos serveurs Kinsta (NGINX). SSL est configuré et les extensions suivantes sont installées.

  • Yoast SEO
  • Akismet

Nous avons Google Analytics en cours d’exécution dans le <body> de notre fichier header.php. La seule modification que nous avons faite est que nous avons ajouté une image vedette à l’article par défaut « Hello world ! Nous testons notre site de test à travers Google PageSpeed Insights et nous obtenons un score de 73/100 pour le bureau et un score de 63/100 pour le mobile. Il est important de noter que par rapport au site de test de l’hébergeur mutualisé ci-dessus, il y a déjà beaucoup d’avertissements qui sont corrigés par défaut, par exemple :

  • Activer la compression (Kinsta a déjà activé Gzip sur tous les serveurs, pas besoin d’activer)
  • Réduire le temps de réponse du serveur (Kinsta est déjà très rapide, déjà bien dans les paramètres acceptables de Google sans aucune optimisation).
  • Expire Headers (pas besoin d’activer car Kinsta a activé les en-têtes de mise en cache au niveau du serveur)
PageSpeed Insights avec un hébergement WordPress infogéré

PageSpeed Insights avec un hébergement WordPress infogéré

Sur Kinsta, vous devrrez suivre quelques-unes des mêmes recommandations qu’avant :

Il nous a fallu moins de la moitié du temps pour obtenir le score de 100/100 pour notre site sur Kinsta parce qu’il y avait tout simplement moins d’étapes à effectuer.

100/100 PageSpeed Insights avec Kinsta

100/100 PageSpeed Insights avec Kinsta

Voici les scores mobiles.

100/100 PageSpeed Insights mobile avec Kinsta

100/100 PageSpeed Insights mobile avec Kinsta

We also have a before and after with speed tests from Pingdom.

Test de vitesse avant les optimisations PageSpeed Insights

Voici un test de vitesse de Pingdom avant que les optimisations n’aient été faites sur Kinsta. Notez que le site non optimisé sur Kinsta était plus de 200ms plus rapide que l’hébergeur mutualisé optimisé !

before pagespeed optimizations speed test kinsta

Speed test before PageSpeed optimizations

Test de vitesse après les optimisations PageSpeed Insights

Voici un test de vitesse de Pingdom après que les optimisations ont été faites sur Kinsta.

Test de vitesse après les optimisations PageSpeed

Test de vitesse après les optimisations PageSpeed

Améliorations supplémentaires de PageSpeed

Nous optimisons simplement pour Google PageSpeed Insights dans ce tutoriel. En fait, nous aurions pu réduire davantage nos temps de chargement si nous avions aussi fait ce qui suit :

Et bien sûr, nous avons beaucoup d’astuces supplémentaires dans notre guide du débutant sur l’optimisation de la vitessedu site Web.

Résumé

Le but de ce tutoriel était de mieux expliquer et comprendre ce que signifient les avertissements Google PageSpeed Insights et ce que vous pouvez faire pour les corriger. Une fois que vous les comprenez mieux, vous pouvez appliquer certaines de ces stratégies à vos sites. Bien sûr, avec les grands sites, vous n’obtiendrez probablement jamais cette note parfaite de 100/100, ce qui est parfaitement correct ! Ou si vous le faites, il faudra du travail. Nous recommandons simplement de mettre en œuvre ce que vous pouvez et vous verrez très probablement des améliorations de la vitesse. Rappelez-vous que la vitesse de votre site, ainsi que la performance perçue est ce qui compte vraiment. Ne soyez pas trop obsédé par les scores.

Il est également important de noter les différences ci-dessus lorsqu’il s’agit de l’hébergement mutualisé et de l’environnement WordPress de Kinsta. Nous sommes plus rapides que la plupart des hébergeurs mutualisés après optimisation. Vous devriez vous demander, combien vaut vraiment votre temps ? Si vous voulez simplement une solution rapide, l’environnement d’hébergement infogéré de Kinsta est parfait pour vous.

La prochaine fois qu’un client vous demande d’améliorer ses résultats, vous avez maintenant des conseils à jour sur la façon de le faire. Et si nous avons manqué quelque chose d’important, faites-le nous savoir ci-dessous dans les commentaires. Restez à l’écoute pour des études de cas à plus grande échelle avec Google PageSpeed Insights que nous ferons à l’avenir.