Google Pagespeed

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

google pagespeed 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.

pagespeed 100 score

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 optimisation 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 !

pagespeed optimisation ok

2. Réduire le Javascript et CSS

minifier javascript css html

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.”

google pagespeed minification

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

pagespeed resources

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

Pagespeed et google fontsLe 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'>

pagespeed no render blocking

4. Modifier la mise en cache du navigateur

pagespeed leverage browser caching

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

pagespeed 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.

pagespeed cache control

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;

pagespeed gzip compression

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.

google pagespeed 100 score

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.

perfmatters pingdom score before 1

Test Pingdom

webpagetest median before

WebPageTest

Après les recommandations de Google PageSpeed Insights

perfmatters pingdom score after 1

Test Pingdom

webpagetest median after

WebPageTest

Voici une comparaison des résultats.

Outil de testAvant (s)Après (s)DIFFERENCE %
Pingdom 0.328 0.277 – 15.55%
WebPageTest 1.839 1.537 – 16.42%

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.

Cet article est une libre traduction de l'article de keyCDN Google PageSpeed Insights – Scoring 100/100 with WordPress
 
L'auteur : un expert à votre service
Jean-Charles Gautard
Nom : Jean-Charles Gautard
Consultant, formateur et intégrateur web depuis plus de 10 ans, je mets mon expertise digitale au service des professionnels amorçant leur transformation digitale. A la recherche d'une stratégie digitale avec le CMS Joomla ? Besoin de conseils ? d'une formation ? d'un site Internet ou Intranet ? Contactez-nous

Articles qui devraient vous intéresser

Migrer les polices du CDN Google Fonts sur votre propre CDN Migrer les polices du CDN Google Fonts sur votre propre CDN
Il existe aujourd'hui beaucoup de façon de faire pour utiliser des polices sur votre site ou votre application....
18 conseils pour optimiser vos performances Web 18 conseils pour optimiser vos performances Web
L'optimisation des performances d’un site Web est toujours une priorité absolue, notamment car la concurrence sur...

Commentaires (3)

This comment was minimized by the moderator on the site

Superbe article !
Il faudrait le même sous Joomla!

This comment was minimized by the moderator on the site

Merci :-)
Un guide complet sur l'optimisation des performances d'un Joomla! va paraître prochainement.

This comment was minimized by the moderator on the site

Cool. J'ai hâte.

Il n'y a pas encore de commentaire pour cet article.

Ajouter vos commentaires

  1. Insérer un commentaire en tant qu'invité.
Pièces jointes (0 / 3)
Share Your Location
Contact

Scoop.It de NosyWeb

Twitter de NosyWeb

YouTube de NosyWeb

Facebook de NosyWeb

Google+ de NosyWeb

Flux RSS de NosyWeb

Inscription newsletter de NosyWeb

Dernier article sur la même thématique
Comment identifier si votre site a été pénalisé ?Comment identifier si votre site a été pénalisé ?
Pourquoi la plupart des gérants d'entreprises lancent-ils leurs sites Web ? C'est l'un des meilleurs moyens de promouvoir leur entreprise et de l'aider à se développer. Mais quelle serait votre...