NosyWeb DIGITAL

L’exécution de tests de vitesse avec des outils comme Google PageSpeed Insights, WebPageTest, ou le site de test de vitesse de KeyCDN sont un bon moyen pour vous aider à évaluer les performances de votre site web. Bien que ces mesures puissent être très utiles, il est important d’avoir du recul sur ces données. Même si elles peuvent fournir des informations précieuses pour vous aider à optimiser votre site Web, il ne faut pas oublier la performance perçue, en particulier l’expérience utilisateur.

Cela étant dit, découvrez comment obtenir facilement un score de 100/100 avec WordPress sur Google PageSpeed ​​Insights.

Ne vous focalisez pas sur le 100/100

Beaucoup de personnes luttent pour obtenir un score de 100/100 sur Google PageSpeed ​​Insights. Certains le font parce qu’ils essaient de rendre leur site plus rapide et d’autres parce qu’un client exige qu’ils obtiennent ce résultat (oui, cela arrive plus souvent que vous le pensez).

Il est important de prendre le temps pour réfléchir à la raison pour laquelle nous essayons d’atteindre ce score de 100/100. Ne voyez pas ce score comme une simple métrique. La raison principale pour laquelle Google a développé PageSpeed ​​Insights était de fournir un guide sur les meilleures pratiques de performance Web pour fournir des recommandations pour optimiser votre site. Et en suivant ces lignes directrices vous devriez obtenir un site Web plus rapide.

Il est également important de se rappeler que l’obtention de ce score de 100/100 n’est pas toujours possible en fonction de la configuration de votre environnement.

WordPress et Google PageSpeed Insights

Il peut parfois être assez délicat d’accéler un site WordPress. Nous savons tous que WordPress n’est pas la plateforme la plus rapide, en particulier du point de vue développeur. La façon dont les scripts sont placés en file d’attente et dont les plugins tiers fonctionnent peut ressembler à un cauchemar, surtout lorsqu’on compare tout cela à des frameworks autonomes.

Nous avons décidé de faire l’expérience sur notre domaine de test perfmatters.io et après quelques ajustements, nous avons pu facilement obtenir un score de 100/100 sur PageSpeed ​​Insights. Cela inclut un score de 100/100 pour la vitesse et 100/100 pour l’expérience utilisateur sur mobile.

Voici ce que nous avons fait à notre installation WordPress. Sentez-vous libre de nous copier ! Nous utilisons le thème par défaut Twenty Fifteen dans notre exemple.

1. Optimiser les Images

Google PageSpeed Insights ​​nous dit que nous devons optimiser nos images. Pour cela, nous installons simplement et exécutons le plugin Optimus Image Optimizer qui est développé et maintenu par KeyCDN. Ce plugin met l’accent sur ​​la compression sans perte, ce qui signifie que vous ne sacrifiez pas la qualité de vos images. Il propose une fonction d’optimisation en masse pour compresser votre bibliothèque multimédia en un seul clic. Ensuite, le plugin compressera automatiquement vos images lors de leur téléchargement. Nous utilisons également le plugin car il convertit nos images en .png. Ceci permet un téléchargement encore plus rapide !

2. Réduire le Javascript et CSS

Google PageSpeed Insights ​​nous dit maintenant nous avons besoin de réduire notre JavaScript, CSS et HTML. Pour résoudre ce problème, nous installons le plug-in Autoptimize. Dans les paramètres du plugin, il faut vérifier :

1. Optimiser le code HTML
2. Optimiser le code JavaScript
3. Optimiser le code CSS

Nous utilisons également le plugin gratuit de KeyCDN WordPress Cache Enabler pour proposer les images .png que nous avons converti plus tôt pour les visiteurs utilisant le navigateur Chrome et accélérer les temps de téléchargement. Dans les paramètres, assurez-vous de cocher “Create an additional cached version for WebP image support.”

3. Render-Blocking au dessus de la ligne de flottaison.

Maintenant, Google PageSpeed ​​Insights nous dit que nous avons du JavaScript et du CSS au dessus de la ligne de flottaison. L’affichage de la page est généralement retardée par le chargement de vos fichiers JavaScript / CSS, la police Font Awesome et les polices Google. Les polices participent au render-blocking dont nous avons discuté dans notre étude de cas sur les performances des polices Web.

Les fichiers

Le premier problème que nous devons résoudre concerne l’ensemble de nos fichiers JavaScript et CSS qui sont dessus de la ligne de flottaison. Pour corriger cela, nous retournons dans le plugin Autoptimize que nous avons installé plus tôt pour enregistrer les paramètres suivants.

1. Dans les Options JavaScript décochez “Force JavaScript in <head> ?”
2. Dans les options CSS cochez “Inline all CSS ?”

Font Awesome

KeyCDN sponsorise le projet Font Awesome CDN où vous pouvez récupérer la dernière version et l’intégrer dans votre site. Le problème est que si vous intégrez cela dans votre header, il devient render-blocking puisque le CSS est render-blocking. Ainsi, nous prenons le code et nous l’intégrons au footer, juste avant la balise </body>.

<link href="https://opensource.keycdn.com/fontawesome/4.5.0/font-awesome.min.css" rel="stylesheet">

Google Fonts

Le troisième problème concerne les Google Fonts. Le thème WP Twenty Fifteen intègre la police Noto Serif. Par défaut WordPress utilise wp_enqueue_scripts pour charger la police dans votre tête. Pour corriger cela, nous installons un plugin gratuit appelé Disable Google Fonts. Si vous utilisez un thème personnalisé, cela pourrait varier légèrement. Vous pouvez alors demander à votre développeur de désactiver les polices Google.

Nous incluons alors notre police Google avec le code suivant dans notre footer, juste avant la balise </body>.

<link href='https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

4. Modifier la mise en cache du navigateur

Les fichiers

Maintenant, nous recevons un avertissement sur la mise en cache du navigateur. Nous utilisons KeyCDN, déployé avec notre plugin gratuit WordPress CDN Enabler, et cela signifie que les assets (JS & CSS) livrés à partir du CDN ont déjà des en-têtes cache-control. Cependant, avec le thème Twenty Fifteen, il y a un fichier qui n’avait pas été délivré avec le CDN. Pour corriger cela, nous ajoutons simplement des en-têtes Cache-Control à notre serveur d’origine en ajoutant le code suivant à notre fichier .htaccess.

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

Et voici le code si vous êtes sur un serveur Nginx.

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

Google Analytics

Nous avons rencontré un autre problème avec Google Analytics. Le plus drôle est qu’il s’agit d’un avertissement sur leur propre script. http://www.google-analytics.com/analytics.js. Le problème se produit car leur script possède une durée de vie de mémoire cache de seulement 2 heures. Google a déjà confirmé qu’il ne résoudrait pas ce problème. Il en résulte que presque tout le monde utilise Google Analytics avec un avertissement impossible à résoudre. Ce problème peut se révéler très frustrant pour les personnes qui traitent avec des clients qui exigent des améliorations sur Google PageSpeed ​​Insights. Dire à un client que vous ne pouvez pas résoudre un problème à cause de Google semble un peu fou.

La seule solution que nous avons trouvé à ce jour pour résoudre ce problème est le script de Jesse Luoto ga-lite script qui utilise l’API Google Analytics Measurement Protocol REST. Vous pouvez utiliser la version disponible à partir de jsdelivr. Ce paramètre positionne automatiquement les en-têtes nécessaires dans le script de sorte que vous pouvez résoudre le problème concernant Google Analytics. Copiez le code suivant dans votre pied de page, juste avant la balise </body>.

<script src="https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js" async></script> <script> var galite = galite || {}; galite.UA = 'UA-XXXXXX'; // Insérez votre tracking code ici </script>

Remarque : il y a quelques problèmes qu’il faut connaitre concernant ce script. N’hésitez pas à ouvrir un sujet sur Github si vous trouvez des bugs.

5. Activer la compression

Nous avions déjà Gzip activé sur notre serveur d’origine et par défaut Gzip est activé sur tous les serveurs de périphérie de KeyCDN. Voici les instructions si vous devez l’activer sur votre serveur d’origine.

Apache

Vous pouvez activer la compression en ajoutant ce qui suit à votre fichier .htaccess.

<IfModule mod_deflate.c>
  # 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
</IfModule>

Nginx

Vous pouvez activer la compression en ajoutant ce qui suit à votre fichier nginx.conf.

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

6. Réduire le temps de réponse du serveur

Et enfin, l’avertissement concernant la réduction du temps de réponse du serveur. Les meilleures recommandations pour cela est d’utiliser un hébergeur rapide et de mettre en place un CDN, comme KeyCDN.

Et c’est tout ! Si vous êtes en mesure de suivre tout ce qui précède, vous devriez maintenant avoir un 100/100 dans Google PageSpeed Insights ​​avec votre site sous WordPress. N’hésitez pas à consulter nos résultats sur notre domaine de test.

Avant et après

Le 100/100 nous a-t-il permis d’obtenir des pages plus rapides ? En fait, toutes les optimisations que nous avons appliquées selon les recommandations de Google PageSpeed Insights ​​ont fait diminuer notre temps de chargement. Nous pensions que nous avions un site dejà très rapide mais traiter manuellement chacun des sujets précédents comme une liste de contrôle nous a fait gagner encore un peu de temps. Observez la différence ci-dessous.

Avant les recommandations de Google PageSpeed Insights

Nous avons utilisé Pingdom et WebPageTest pour vous montrer la différence entre l’avant et l’après. Rappelez-vous que Pingdom ne supporte pas encore le HTTP/2. Mais certaines personnes préfèrent encore voir ces tests car ils proposent des métriques plus faciles à comprendre. Nous avons exécuté les tests cinq fois afin de déterminer une moyenne.

Voici une comparaison des résultats.

Comme vous pouvez le voir, le temps de téléchargement total a diminué en moyenne de 15-16% en suivant toutes les recommandations Google PageSpeed. Nous sommes également en mesure de nous débarrasser de 9 requêtes HTTP, bien que cela soit moins important avec le HTTP/2.

Résumé

Comme vous pouvez le voir, les recommandations de Google PageSpeed ​​Insights sont très précieuces et les suivre peut vous aider à optimiser votre site. Encore une fois, nous rappelons qu’il ne faut pas rester focaliser sur ces chiffres. Si vous ne pouvez pas atteindre les 100/100, ce n’est pas la fin du monde. Notre meilleur conseil est de mettre en œuvre ces nombreuses optimisations tant que possible dans votre environnement. Et surtout, n’oubliez pas de tester l’expérience utilisateur. Tout simplement car ce n’est pas parce qu’un outil vous dit que votre site se charge rapidement que c’est réellement le cas lorsque vous le visitez.

Nous vous recommandons également de lire notre guide complet sur ​​la façon d’accélérer WordPress qui contient des conseils d’optimisation supplémentaires.