100/100 Google PageSpeed avec WordPress

En juin 2017 à l’occasion de quelques tests sur WPFormation, je me suis amusé à aller chercher ce que certains considèrent comme le Graal de l’optimisation, la note de 100/100 sur Google PageSpeed avec WordPress !

Cet article est donc le compte rendu des optimisations et des réglages que j’ai effectué pour obtenir ce résultat.

Nota : Ces optimisations sont propres à WPFormation et ne pourront pas toutes s’appliquer à vos WordPress respectifs, tout dépend en effet de votre thème, vos plugins, votre hébergement, et de l’utilisation ou pas d’un CDN.

google pagespeed mobile

100/100 sur mobile

google pagespeed ordinateur

100/100 sur ordinateur

Google PageSpeed c’est quoi ?

L’outil Page Speed Insights mesure les performances d’une page sur les appareils mobiles et les appareils de bureau. Il explore deux fois l’URL, une fois avec un user-agent mobile et une fois avec un user-agent de bureau.

Le score PageSpeed va de 0 à 100 points. Plus haut est le score, meilleures sont les performances, et un score de 85 ou plus indique que la page s’exécute bien.

PageSpeed Insights mesure la façon dont les performances de la page peuvent être améliorées en matière de :

  • Temps de chargement du contenu au-dessus de la ligne de flottaison : temps écoulé entre le moment où un internaute envoie une requête pour une nouvelle page et le moment où le contenu au-dessus de la ligne de flottaison est affiché par le navigateur.
  • Temps de chargement de la page complète : temps écoulé entre le moment où un internaute envoie une requête pour une nouvelle page et le moment où la page est affichée dans son intégralité par le navigateur.

Vous pouvez aussi mesurer la dimension “mobile friendly” en essayant le nouvel outil mis à disposition par Google : https://testmysite.thinkwithgoogle.com/

100 google pagespeed WordPress

 

Les recommandations de Google PageSpeed

Voici ce que vous devez mettre en oeuvre pour tous vos sites Web :

Un indicateur de priorité est affecté à chaque suggestion pour indiquer son importance :

google pagespeed OK

 

Tests additionnels de vitesse

Au delà de la note Google PageSpeed, le site a aussi été testé avec les outils suivants pour mesurer la vitesse de chargement moyenne du site :

Test sur Speed.Devs

Test sur Speed.Devs

pingdom tools test

Test Pingdom

Test GTMetrix

Test GTmetrix

 

Descriptif de l’environnement WPFormation

Avant de démarrer, voyons sur quel environnement tourne le site WPFormation :

  • Serveur dédié optimisé par WPServeur
  • CGI with Apache
  • Version de PHP 7.0.19
  • Wp_memory_limit : 256Mo
  • CDN par KeyCdn
  • SSL Comodo
  • CDN par KeyCdn
  • Cache serveur + WPRocket
  • 38 plugins installés + 7 mu-plugins
  • Thème utilisé Voice par meks

Le serveur dédié et sa gestion, l’utilisation d’un CDN ont un coût non négligeable. Les certificat SSL, eux, peuvent être gratuits grâce à let’s Encrypt et la plupart des hébergeurs le proposent aujourd’hui.

Techniquement, les bonnes pratiques peuvent être mises en place quel que soit votre hébergement, Google PageSpeed prenant en compte les optimisations et pas la performance intrinsèque du serveur.

La seule valeur importante pour PageSpeed côté serveur est le temps de réponse de ce dernier (vous pouvez le mesurer ici) et il peut parfois être assez long. Dans ce cas et si cela se répète trop souvent, vous obtiendrez le message d’avertissement ci-dessus, pour optimiser il faudra envisager de changer de serveur.

temps reponse serveur

Le temps de réponse de votre serveur ne devrait pas dépasser 200 ms. Il existe des dizaines de facteurs potentiels qui peuvent ralentir la réponse de votre serveur, comme la lenteur d’une logique d’application, des requêtes de base de données, du routage, des frameworks, des bibliothèques, ou une insuffisance des ressources processeur ou de la mémoire.

logo-wpserveur hebergement wordpress

 

Au commencement !

Avant de chercher le 100, j’accordais une importance modérée à la vitesse de chargement et aux bonnes pratiques imposées recommandées par Google PageSpeed Insights, à savoir que tant que je ne dépassais pas une seconde au chargement de la home, tout allait bien !

Voici les axes d’amélioration que me donnait PageSpeed :

Éliminer les codes JavaScript et CSS qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison
Votre page contient 10 ressources de script et 4 ressources CSS qui bloquent l'affichage de votre page, et donc le retardent.
Aucune partie du contenu situé au-dessus de la ligne de flottaison sur votre page n'a pu être affichée avant que le chargement des ressources suivantes n'ait été terminé. Essayez de différer le chargement des ressources qui bloquent votre page, de les charger de manière asynchrone, ou d'intégrer les parties essentielles de ces ressources directement dans le code HTML.

Exploiter la mise en cache du navigateur
Si vous définissez une date d'expiration ou une durée de validité maximale pour les ressources statiques dans les en-têtes HTTP, vous indiquez au navigateur d'aller chercher les ressources déjà téléchargées sur le disque local plutôt que sur le réseau.

Optimiser les images
En choisissant un format approprié pour vos images et en les compressant, vous pouvez libérer de nombreux octets de données.

Voilà quelques éléments qui doivent parler à beaucoup d’entre-vous ;)

Mon indice Google PageSpeed oscillait donc tranquillement entre 80 & 90 pour les ordinateurs et 60 & 70 pour les mobiles, selon les plugins que j’installais ou désinstallais.

WPF-peut-mieux-faire

 

On optimise les images

La première des choses et la plus simple à mettre en oeuvre, c’est l’optimisation des images : Taille, poids, compression.

Le poids d’une image c’est en fait la taille du fichier image en octets (ou kilo octets ou Méga octets), on calcule comme suit: Le Poids d’une image en octets est égal au nombre de pixels qui composent l’image multiplié par le nombre d’octets que composent un pixel.

Poids et tailles ne sont pas forcément indissociables, il faudra tenir compte de la résolution. Ainsi je peux parfaitement mettre en place une image d’arrière plan de très grande largeur avec un poids somme toute très modeste.

Quel intérêt également de mettre des images à une largeur supérieure à 3000px ? Aucun ! La majorité des écrans de vos visiteurs tourne en 15, 17 et 19”, sans parler des utilisateurs tablettes, téléphones.

Pour optimiser vos images sous WordPress, je vous conseille la lecture des articles suivants:

compress-image-wordpress

 

Exploiter la mise en cache

De ce côté là, seuls Analytics et quelques rares ressources extérieures me posaient problème.

https://connect.facebook.net/fr_FR/sdk.js (20 minutes) P'tain 20mn j'y crois pas !
https://api.optnmstr.com/v1/optin/ (délai d'expiration non spécifié) Arghhhhh quelle horreur ce truc ^^
https://www.google-analytics.com/analytics.js (2 heures)

Sachant que nous n’avons pas la main sur des sources qui ne sont pas sur notre domaine, j’ai opté pour une solution radicale : Soit je pouvais télécharger sur mon serveur le script Js concerné, soit je le supprimais purement et simplement.

Pour Analytics, le problème se produit parce que leur script a une durée de vie de cache de seulement 2 heures. Google a déjà déclaré qu’ils ne changerait pas cela, ce qui nous laisse avec un avertissement qu’on ne peut pas réparer.

Vous pouvez donc mettre le fichier Js de Google Analytics sur votre serveur assorti d’un script pour sa mise à jour avec tâche CRON, sinon il existe un plugin WordPress gratuit appelé Host Analytics.js Local qui peut faire le job (à tester).

infos serveur wordpress 1 | 100/100 Google PageSpeed avec WordPress

 

Éliminer les codes JavaScript et CSS qui bloquent

Le problème est le suivant : Puisque les fichiers JavaScript peuvent modifier le HTML de la page, le navigateur doit donc attendre leurs chargements complets, avant d’afficher quoique ce soit à l’utilisateur. Les fichiers en question peuvent être liés à des plugins ou même à votre thème.

Encore une fois, j’ai du faire des choix et des tests. Je me suis par exemple rendu compte que mon plugin de partage Social Warfare (version pro) n’était pas optimisé (pourtant /social-warfare/css/style.min.css et min.js ?). Bref, j’ai donc testé un autre plugin de partage, à savoir Monarch, et là comme par hasard plus de problème de CSS non optimisé !

J’ai décidé de supprimer le diaporama d’articles de la home qui réclamait trop de Js pour une UX négligeable. Ce slider a été avantageusement remplacé par une simple box affichant les 8 derniers articles et les offres de formations WordPress.

J’ai aussi remarqué que si je plaçais la sidebar de la page d’accueil sur la gauche, j’obtenais un message d’avertissement “mobile” concernant les allers/retours supplémentaires sur le réseau afin que la partie au-dessus de la ligne de flottaison s’affiche. Ceci étant purement lié à mon thème, j’ai simplement placé cette barre latérale à droite permettant ainsi au crawler de commencer par la colonne principale. Problème résolu ;)

contenu visible

J’ai procédé ainsi pour chaque élément bloquant. Au final, j’ai seulement remplacé 2 plugins avantageusement et je n’en ai supprimé qu’un seul (devinez lequel;) !

A noter également que le thème premium que j’utilise, à savoir Voice, ne m’a pas posé de problème majeur. Il va sans dire que j’ai bien soigné ma page d’accueil et les éléments apparaissant sur cette dernière.

HTML_CSS_JavaScript

 

Le CDN pour répartir la charge et plus encore !

J’utilise un CDN pour WPFormation. A vrai dire, j’utilise même 2 zones CDN, l’une pour les images et l’autre pour le CSS et le Js. J’ai donc créé deux zones en “pull” avec deux alias vers mes sous-domaines CDN et CDN2.

La raison est toute simple, il suffit de regarder l’image ci-dessous pour comprendre. La charge globale du site est ainsi répartie sur 3 domaines :

zone cdn

Chez KeyCdn, je peux appliquer les options suivantes sur chacune de mes zones :

  • GZip et HTTP/2
  • Expires & Max Expire
  • SSL (partagé ou let’s encrypt)
  • Ignore Query String
  • Cache Cookies & Strip Cookies
  • et bien d’autres…

Cela me facilite grandement l’optimisation car je peux ainsi travailler et agir sur 3 zones distinctes :

  1. mon site,
  2. le CDN en charge des images,
  3. le CDN2 en charge du CSS et du JS.

 

Ma configuration de WP-Rocket

Une fois que je me suis occupé des images, du CDN, vient ensuite le temps de s’occuper du paramétrage du cache. Je peux utiliser conjointement un cache serveur (le cas de wpserveur) et un plugin de cache (WPRocket, W3Total Cache, Super Cache etc…) afin de gérer le defer Js, le lazyLoad, la minification, concaténation…

WP-Rocket est un plugin de cache premium, il existe des alternatives gratuites mais j’utilise  prioritairement WPRocket pour 4 raisons : C’est un plugin made in France, il est assez simple à configurer, c’est l’un des plus performants et il est 100% compatible avec WPServeur.

wprocket1

  • Options de base : je n’ai pas coché le LazyLoad (car j’ai un CDN) ni le cache utilisateur (pour les utilisateurs connectés), en revanche tout le reste est activé. Le délai de nettoyage du cache est fixé à 0 (soit illimité).
  • Fichiers statiques : j’ai tout minifié et j’ai combiné uniquement le CSS. J’ai exclu 2 fichiers Js qui se chargent en différé. J’ai supprimé les query strings des ressources statiques. Pour le CSS et JS bloquant le rendu, j’ai tout coché et désactivé le mode sécurisé (attention ici de bien vérifier).
  • CDN : j’ai déclaré mes deux CNAME(s), l’un pour les images, l’autre pour Js & CSS et je n’ai rien exclu en dehors du logo.
  • Options avancées : j’ai exclu ma page de connexion et quelques pages, j’ai forcé la purge de ma catégorie WordPress.
  • Base de données : je ne me sers pas de cet outil.
  • Préchargement : activé en auto à 2s via mon sitemaps de Yoast. Préchargement des requêtes DNS pour les CDN, Gravatar, stats WP, fonts Google.

wprocket fichiers statiques

Nota 1: Dans les fichiers statiques j’ai du déclarer le Critical Path CSS, car en désactivant le mode sécurisé j’avais un effet de chargement très désagréable (+ d’infos ici).

Nota 2: Attention, minifier et combiner CSS & JS peut parfois casser la mise en forme de votre site (+ d’infos ici).

Nota 3: J’ai également remarqué que si j’essaie de mettre en place le LazyLoad pour les images (options de base), la note PageSpeed se dégrade.

J’ai ensuite testé le site de long en large pour vérifier que tout était OK et qu’il s’affichait bien en toutes circonstances, j’ai ensuite refait mes tests de mesure, corrigé 2 ou 3 petites choses et le tour était joué. Je suis intervenu sur mon thème (via mon thème enfant bien sûr), pour des corrections mais au final pas grand chose.

100-google-page-speed

Conclusion et mot de la fin ;)

C’est long et fastidieux ! Je me suis juste amusé et il suffira que je rajoute un plugin bancal ou que je change de thème pour devoir recommencer ^^ Atteindre la note maximale, c’est jouable mais cela implique des choix, entre l’UX, les fonctions additionnelles, les Js externes… Vous devrez passer Maître en l’art du compromis !

Bref, si vous ne devez retenir qu’une chose, c’est que si votre note Google PageSpeed est supérieure à 85/100 alors vous êtes déjà tout bon ! Faites attention toutefois à la note sous mobile, Google a déjà déclaré lui accorder plus d’importance dans l’avenir avec un bonus SEO et cela reste la note la plus difficile à améliorer.

Ne négligez jamais le ressenti sur site et l’expérience utilisateur, le temps de chargement reste toujours aussi important, servez-vous de Pingdom et de GTmetrix pour le vérifier. Par exemple, le site ci-après (testé sur Pingdom) qui a pourtant un PageSpeed de 93/100, charge en moyenne en 2,28 secondes. C’est trop long !

pingdom vs pagespeed

Il n’y a pas que Google PageSpeed, pensez aussi au temps de chargement !

 

J’espère que ce retour d’expérience vous sera utile, je veux terminer ce billet en remerciant tout particulièrement Benoit de WPServeur pour son aide précieuse à la mise en place et Jonathan de WPRocket pour le support à mes questions débiles, merci les amis !

Info : Pour celles et ceux qui veulent apprendre et aller plus loin, j’aborderais l’optimisation de WordPress et sa vitesse plus en détail dans ma formation WordPress en ligne (disponible courant 2018).

Voici quelques ressources complémentaires utiles :

wpformation
NE MANQUEZ PLUS RIEN !
Inscrivez-vous pour recevoir le meilleur de WordPress dans votre boîte de réception, chaque mois.

Nous ne spammons pas ! Consultez notre politique de confidentialité pour plus d’informations.

A propos de l'auteur...

Avatar de WPFormation

WPFormation

Fabrice Ducarme, spécialiste & formateur WordPress je suis éditeur, auteur et fondateur de WP Formation.com. Conférencier lors des WordCamp Paris 2013 & 2015, Marseille 2017 et au WP Tech Nantes 2014, je vous propose plus de 500 articles & tutoriaux à propos de WordPress, mes trucs & astuces mais aussi des coups de gueule...

29 commentaires pertinents à ce jour ;)

  • C’est très sympa, et il y a des trucs tirés par les cheveux (importer en local le js de Analytics). J’ai le même soucis avec tag manager, ou avec de l’adsense.

    Par contre je remarque que tu triches, tu n’as optimisé que la home :p

  • @DoudouMoii en général on optimise et on mesure la home, le reste suit même si certains posts peuvent faire appel à d’autres ressources qui dégradent la note. Toutefois tant que les autres restent au dessus de 85/100, tout va bien !

    Pour analytics, actuellement pas d’autre option, le plugin cité dans l’article peut être une solution viable et pérenne.

  • Merci Fabrice ! Une petite interrogation tout de même… je trouve ça dommage de devoir modifier le design d’un site afin d’obtenir une bonne note ! J’aimais bien ton petit carousel de posts en haut de la home, tu as dû le sacrifier… j’ai également remarqué que de nombreux widgets que l’on met dans le footer d’un site ne sont pas très bons pour la performance, c’est le moins que l’on puisse dire ! D’ailleurs tu n’en utilises pas… Que faire alors ? Faut-il tout virer ? Je n’aime pas cette alternative. Pour ma part, je n’aime pas trop faire certaines concessions sur le design et pourtant je sais que c’est primordial pour optimiser un site ! Rrrrrrrr !

  • Salut @Lycia,
    Oui il faut faire des compromis et c’est aussi valable en SEO !

    Je n’ai jamais été un grand fan des slides, mais lorsque j’ai vu l’impact sur le chargement, j’ai opté pour le grand remplacement :)

    Pas besoin de tout sacrifier, seulement les éléments qui chargent des scripts externes, sur lesquels on ne peut pas agir (Facebook, instagram, twitter, etc….). Si tu veux faire des liens vers tes réseaux sociaux, utilise alors des icones ou des images, pas besoin de charger leurs widgets ^^

  • Bonjour Fabrice, merci pour cet article et pour tout ce travail de recherche.

    Une question essentielle à mon sens : et le SEO dans tout ça ? Est-ce que le fait d’être à 100/100 t’a permis de grignoter quelques places dans les SERP sur les mots-clés relatifs à ton positionnement ?

  • @Philippe, au delà de l’indice Google PageSpeed, j’ai aussi revu et optimisé mon menu.

    Ce qui donne ceci :
    SEO WPF

    De là à dire que c’est lié, il n’y a qu’un pas que je ne franchirais pas ;)

  • Bonjour Fabrice,

    Félicitation, tu as choisi judicieusement les options pour atteindre la note de 100 “mais le Graal ne doit pas franchir la dalle scellée, telle est la limite et le prix de l’immortalité.” [Le Gardien du Graal]

    Je me suis également lancé dans cette quête incroyablement longue et riche en corrections (émotions) diverses et variées. Je risque de bloquer sur le temps de réponse de serveur étant chez OVH (je suis d’ailleurs en train d’étudier une migration vers WP Server).

    Mais le plus “tragicomique” dans l’histoire c’est de voir que parmi mes dernières corrections à apporter, elles sont quasi toutes liées à des services Google… Exemple : fonts.googlapis… google analytics… (Et merci pour le plugin que tu cites, ça fonctionne parfaitement et ne nécessite aucun réglage particulier).

    En tout cas, je recommande à tous ceux qui recherche la “perfection” technique de réaliser ce challenge. Même si on ne parvient que très rarement au triple 100, on apprend ou perfectionne ses connaissances de WP, html, css, js, etc.

    Merci pour cet excellent article ! Ca motive !

  • Bonjour,
    Il faut encore payer pour avoir une bonne note, il faut avoir un CDN, puis supprimer certains plugins, comme Lightbox, que mon point de vue, j’apprécie, j’aime pourvoir cliquer sur les images d’un article.
    Puis si les visiteurs d’un site fr sont surtout des visiteurs français, j’avais lu que cela apportait peu d’intérêt d’avoir un CDN.
    Bravo pour l’article, cela est très intéressant.

  • (Suite du précédent message)

    Et voilà j’y suis arrivé ! 100 / 100 mobile et desktop !

    Cela m’a pris des semaines sur mon temps libre… mais c’était un beau challenge :) Surtout que je m’étais fixé des objectifs supplémentaires :
    – conserver le design de mon site (grandes images, articles à la une, projets, google fonts, etc…),
    – ne pas faire de “bricolage” de code et de CSS dans l’éditeur de l’onglet apparence (pour faire les mises à jour du thème normalement)…
    – le tout sur le thème parent !

    @Foxdao Tu peux y arriver en limitant les frais. J’ai réussi avec un hébergement mutualisé (OVH) comprenant un CDN automatique et un certificat SSL. Et en achetant simplement une licence WP Rocket (39$/an). Franchement ce plugin fait un travail incroyable pour in prix relativement faible (comparé à d’autres plugins). C’est un must have vraiment.

    Globalement c’est le slider qui posait le plus de problèmes malgré toutes mes tentatives pour les régler. J’ai donc du m’en séparer. C’est d’ailleurs le seul élément visuel qui a changé avant/après.

    Il y a également un peu de réussite/chance dans cette quête du 100/100 car elle ne fonctionne pas avec tous les thèmes WordPress… et malheureusement on ne peut jamais savoir à l’avance…

    Bpn cpurage à tous et toutes !

  • @Fredericfrance, bravo comme quoi c’est possible même sur un mutu ;)

    Personnellement j’aurais opté pour un thème enfant (on ne sait jamais). Les sliders sont une plaie, et leur utilisation ralentit de manière significative le chargement du site.

    Tu devrais (re)générer ton Critical Path CSS, il y a un effet très désagréable à l’affichage de ta home, tu peux t’aider du lien Nota1 dans cet article ;)

  • Bonjour,
    @fredericfrance : Merci, je suis chez OVH, j’ai l’offre pro, j’ai le certificat SSL, j’ai aussi le plugin WP Rocket et j’ai pris pour 1,19 € par an DNS Anycast (mais j’aurai peut-être du éviter de prendre ça)
    Je ne connais pas CDN automatique, c’est combien ? Merci

  • Merci Fabrice !

    Oui je partage ton avis, les sliders sont une plaie ! Cela faisait un moment que je voulais m’en débarrasser et là c’était l’occasion rêvée. De toute façon, personne ne les regarde :)

    Effectivement je n’ai pas la même fluidité que toi sur la home et le phénomène est le même lors du chargement / changement de pages “lourdes”. On voit le sitemap de Yoast quelques instants ahah.
    Je n’avais pas encore réactivé l’effet “loading” livré avec le thème. Normalement ca passe bien en le ré activant mais merci pour ton conseil du Nota 1. Je vais me pencher sur le sujet dans quelques jours !

    @Foxdao : Excuse moi j’ai mal formulé ma phrase. J’ai l’offre Performance 1, et celle-ci comprend un CDN. Et lorsque je dis “CDN automatique”, cela veut dire que je n’ai absolument pas la main dessus. C’est OVH qui gère automatiquement
    cette fonction. Donc je n’ai pas d’informations à renseigner dans l’onglet CDN de WP Rocket. Tu as l’offre Pro. Je viens de regarder sur le site OVH et le CDN est en option. Après, selon ton utilisation réelle, le trafic de ton site, etc.. tu peux étudier la possibilité de passer à l’offre performance 1 ou rajouter l’option CDN sure l’offre pro. Quoi qu’il en soit, attention ton thème n’est pas forcément fait pour atteindre les 100… tout depend de son code source, fonctionnalités, etc.

  • @Frederic : merci de l’information, je pense que cela vient du thème en partie, les plugins n’arrangent rien, on va faire avec :)

  • Bonjour à tous, Merci pour ce tuto !
    moi il me reste deux optimisations à faire et je n’y arrive plus, je suis un peu perdu.
    j’ai ce fichier qui bloque : /wp-content/cache/busting/1/wp-includes-js-jquery-jquery-1.12.4.js
    “Votre page contient 1 ressources de script qui bloquent l’affichage de votre page, et donc le retardent.”
    Dois-je enlever ce script de la minification ?
    Et aussi google me demande d’optimiser 3 images de 150×150, je fais que ça de les optimiser, je les ai réduit à 1,2 ko et google en demande encore, je ne peux pas faire plus sinon c’est illisible.
    Vos conseils sont les bienvenue !

  • Bonjour @Hervé,
    Il ne vous sera pas possible de le retirer de la minification car c’est un fichier de cache (cf: Décocher le Mode sécurisé (recommandé) de WP Rocket)

    Concernant l’optimisation des images par Google PageSpeed, ce dernier vous les propose déjà à la bonne taille :
    optimisations images google pagespeed

  • Bravo pour votre travail et le temps passé dessus. (Et surtout d’avoir détailler tout cela dans un article.

    Pour ma part, c’est surtout les scripts GA et mailchimp qui me bloque. A cause d’eux, j’ai une mauvaise note…
    Je vais me pencher la dessus du coup.

  • Bonjour,
    Juste une question, Google PageSPeed, me dit

    – Votre page doit effectuer des allers-retours supplémentaires sur le réseau afin que la partie au-dessus de la ligne de flottaison s’affiche. Pour obtenir des performances optimales, réduisez la quantité de code HTML nécessaire à l’affichage de la partie au-dessus de la ligne de flottaison.

    Normal j’ai le plugin Lazyload, il faut bien utiliser ce genre de plugin, différer le chargement des images, non ?

    Et j’ai deux lignes causé par le plugin Responsive Lightbox by dFactory (prettyPhoto), il y a un “meilleur” plugin de ce type ?

    Merci

  • @Foxdao, il faudrait investiguer plus avant votre configuration de WP Rocket et vos plugins pour répondre en détail à cette question, et ce n’est pas le but de cet article.

    Le lazyload ajoute des requêtes, et il est, à mon sens, inutile si vous utilisez un CDN. Cette option n’est pas activée ici.

    Pour ce qui est de Responsive Ligthbox (dFactory), c’est celui que j’utilise en mode Fancybox ! Je ne peux donc que le recommander.

  • @WPFormation : je le sais bien, là je voulais juste gratter la surface, c’est tout, je n’utilise pas de CDN.

    Vous venez de répondre à mes questions, merci

  • Pour atteindre un score de 100% il faut mettre ses scripts CSS et JS dans le HTML.
    Si on fait cela, Facebook ne détecte plus ses metas datas et donc ne permet plus de partager les pages de son site.
    Vous pouvez allez voir sur le Debuggeur Facebook du site de WPFormation dans l’option “Scraped URL” que la page récupéré par Facebook est une page différente que celle du site actuel. Cela vient du fait que Facebook sort en erreur et récupére la derniere bonne version de son cache (meme si on click sur new fetch).
    Donc il faut choisir : 100% de Google et 0% de Facebook ou retourner a 85% de Google et permettre à Facebook de fonctionner.

  • Bonjour et merci pour tes tutos Fabrice (ça aide énormément…) !

    J’avais une petite question concernant ce 100/100 de insights et pingdom tools : vaut-il mieux avoir une bonne note sur pingdom tools ou sur google insights ?

    Merci

  • @Joss, l’idéal serait d’avoir une bonne note aux 2 ^^

    Dans la pratique, le site doit être le plus rapide possible, donc c’est principalement la vitesse d’affichage qui doit primer ! Les indices restent des indicateurs, de ce point de vue, PageSpeed recense les bonnes pratiques adoptées par le site et mesure le TTFB, en aucun cas la vitesse d’affichage.

    Vitesse pingdom

  • Bonjour, je suis super motivé pour faire cela avec mon site (disons atteindre les 90% ce serait déjà beau), mais je suis un peu perdu… J’ai testé nombre de plugins, de mnification, mise en cache, un plugin promettant de concaténer, minifier et mettre en cache, notre site reste désespérément lent… Si quelqu’un est intéressé pour donner un conseil, je vous communiquerai l’url… Merci

  • Bonjour,

    j’utilise le plugin WP Fastest Cache pour optimiser la vitesse des sites que je crée.

    L’avez-vous testé ?

    Si oui, qu’en pensez-vous ?

    Plus ou moins performant que WP Rocket ?

    Il semble que WP n’optimise pas les images (WP fastets cache le fait)

    Merci pour votre avis !

  • Je viens d’inspecter mon blog et je me suis rendue compte que le plugin UIX ShortCode me plombait mon chargement (surtout en version mobile) sur la page d’accueil alors que je ne l’utilise pas à cet endroit ! Du coup je vais en tester un autre, en espérant que ce ne soit pas le même résultat ! Super ton article en tout cas !

  • Bonjour,

    Merci pour ce retour super détaillé :) Toujours au top sur les articles.

    Est ce que tu as essayé d’utiliser le module PageSpeed de google ? : https://developers.google.com/speed/pagespeed/module/

    J’ai un client qui vient de l’installer et c’est une bombe d’après l’agence qui l’a mis en place. Un retour là dessus ?

    Bon week end !