Nos amis de WP Engine ont récemment déployé une magnifique nouvelle page d'accueil construite avec Beaver Builder. Nous avons partagé un lien vers la page dans le groupe Facebook Beaver Builders et quelques personnes ont noté que le temps de chargement global de la page était assez élevé. Notre bon ami et extraordinaire développeur WordPress, Jon Brown, est venu à la rescousse avec une excellente explication.

La conversation Facebook

Permettez-moi de paraphraser la conversation ici très rapidement :

Beaver Builder concerné : J'ai fait un test de chargement de page avec l'outil de test XYZ et le chargement a pris près de 10 secondes !

Jon : La vitesse et les performances sont un choix de conception et sont essentielles aux conversions de ventes, mais cela ne veut pas dire que ce n'est pas un compromis par rapport à d'autres outils PLUS précieux.

Je vois souvent des gens regarder les notes des lettres et le temps de chargement total sans comprendre la cascade. Cela vous égarera à moins que vous ne regardiez sur des sites très simples…

Les notes de ces outils de test sont vraiment rudimentaires et ignorent de nombreuses réalités pratiques. Ils diront d'éviter les redirections lorsqu'elles concernent des publicités, des scripts de suivi et d'autres choses qui fonctionnent nécessairement de cette façon. Ils ignorent souvent HTTP/2 et recommandent de réduire les requêtes et de concaténer des actifs qui n'auraient pas d'importance et pourraient même faire mal… Ils ne se concentrent pas sur l'index de vitesse et le rendu au-dessus de la ligne de flottaison…

Le chargement réel de la page est <1,5 s

Creusons plus profondément

J'ai demandé à Jon s'il accepterait quelques questions supplémentaires au sujet de la performance et il a très gracieusement accepté. Ce sont mes questions (de Robby) avec les réponses de Jon.

Oh, ai-je mentionné que Jon dirige une boutique de développement personnalisé appelée 9seeds et qu'il est donc disponible à la location pour vous aider à affiner les performances de votre site Web WordPress !

1. Vous avez mentionné la « cascade ». Pouvez-vous expliquer un peu plus ce qu'est la cascade ?

Il existe de nombreux outils pour évaluer les performances d’un site Web. Beaucoup d’entre eux fournissent un rapport comprenant une note alphabétique facile à comprendre. Ces notes de lettres sont cependant des outils assez rudimentaires, et même si c'est agréable quand vous obtenez tous les As, ce n'est pas particulièrement perspicace, et encore moins utile, lorsque vous ne voyez pas directement les As. La seule note que je trouve utile concerne la compression d'image, ce qui est une solution simple, allez exécuter vos images via un optimiseur.

Trop souvent, je vois des développeurs profanes et novices être aveuglés par les lettres. De nombreux facteurs entrent en jeu dans les performances Web frontales et il faut vraiment regarder la « cascade » qui est juste un graphique montrant toutes les requêtes HTTP, quand elles ont commencé, quand elles se sont terminées. J'utilise WebPageTest.org pour les générer.

La « cascade » est l'endroit où vous « voyez » quel est l'actif spécifique qui prend trop de temps à charger et/ou qui bloque le chargement d'autres éléments.

Enfin, sachez que le simple As peut nécessiter des choix de conception (comme la suppression des curseurs) et l'élimination des actifs tiers (comme Google Analytics, HotJar, etc.) qui sont plus précieux pour le propriétaire du site que l'obtention d'un A. Tous les sites ne peuvent pas être amenés à soyez honnête Comme sans sacrifices douloureux.

2. Vous avez recommandé WebPageTest comme outil de test de choix. Pourquoi le préférez-vous et en quoi diffère-t-il des outils comme Pingdom, GTmetrix (et/ou Google Page Speed ​​?) ?

Personnellement, je n'ai jamais trouvé quelque chose de mieux et de plus flexible que WebPageTest.org. Cependant, j'ai également utilisé GTMetrix, Pingdom, Google Page Speed ​​et d'autres dans le passé et ils vont très bien. Certains des nouveaux comme Lighthouse sont vraiment intéressants pour les applications Web progressives (pas 99 % des sites WordPress). Cependant, je ne dis certainement pas aux gens de changer d'outil, d'utiliser l'outil que vous connaissez et comprenez. Si vous ne connaissez aucun outil, WPT est un excellent outil gratuit pour apprendre. Allez simplement au-delà des notes alphabétiques et commencez à comprendre ce qui cause ces notes alphabétiques.

3. Concernant la « réduction des requêtes et la concaténation des actifs », n'est-ce plus une bonne pratique ? Pourquoi?

À l'époque où la plupart des sites étaient HTTP, par opposition à HTTPS, et où les serveurs Web utilisaient tous le protocole HTTP/1.1, les serveurs Web ne pouvaient envoyer qu'un nombre limité d'actifs en parallèle. Chaque élément (image, script, feuille de style) était envoyé séparément et chacun avait sa propre surcharge, ce qui ralentissait les choses. La concaténation de tout ce qui était possible réduisait le nombre de requêtes HTTP et présentait d'énormes avantages en termes de performances.

Au cours des deux dernières années, il y a eu une énorme poussée vers HTTPS partout et les serveurs Web ont commencé à prendre en charge le nouveau protocole HTTP/2. HTTP/2 présente d'énormes avantages comme la pré-récupération et le préchargement, mais peut également envoyer tous ces petits actifs en parallèle, il n'est donc pas nécessaire de les concaténer. En fait, il peut être préférable de ne pas le faire afin que chaque petit actif puisse être mis en cache indépendamment.

Il est important de garder à l'esprit que cela n'entre en jeu que si votre serveur Web prend en charge HTTP/2 et cela n'est possible que si votre site est HTTPS.

Cela dit, tous les sites sur lesquels nous travaillons ces jours-ci sont HTTPS et fonctionnent sur des serveurs compatibles HTTP/2, donc j'en suis au point où je ne pense même plus à concaténer des actifs, et cela ne me manque certainement pas !

4. Y a-t-il d'autres « mythes » ou recommandations de performances obsolètes contre lesquelles vous déconseilleriez ?

Le plus important est simplement que chaque site peut devenir conforme sans faire de concessions douloureuses comme des modifications de conception ou l'élimination d'actifs tiers que vous ne contrôlez pas. Cependant, ce n'est vraiment pas grave car vous devriez commencer à regarder quelque chose appelé Speed ​​Index ! WPT a un bon article à ce sujet, mais il considère essentiellement le moment où le « au-dessus de la ligne de flottaison » est perçu comme entièrement chargé par l'utilisateur. Il s'agit de l'expérience utilisateur de la vitesse, plutôt que du fait que la page soit vraiment complète. C'était l'une des choses à propos du nouveau design de la première page de WP Engine, l'indice de vitesse était génial. C'étaient les scripts différés qui prenaient beaucoup de temps à charger et à terminer.

5. Avez-vous d'autres outils, conseils ou astuces de performance que vous recommanderiez à quelqu'un ?

Outils sur lesquels j'ai appris à m'appuyer au fil des années :

• WebPageTest.org – Mon préféré !
• ImageOptim – application de bureau pour compresser les JPG/PNG
• ImageAlpha – application de bureau pour compresser les PNG (principalement en réduisant le nombre de couleurs)
• CloudFlare – gratuit en tant que CDN mondial massif et WAF de base. Plus des fonctionnalités professionnelles payantes impressionnantes telles que l'optimisation d'image à la volée, l'optimisation d'itinéraire et bien plus encore.

Plugins :

• WP Rocket – Même sur WP Engine, nous utilisons WP Rocket, cela fonctionne.
• Imagify.io – Optimisation d'images basée sur WordPress/Cloud.
• BeaverBuilder – Je n'ai pas été payé pour dire ça ! Nous sommes appelés à effectuer des audits de performances sur de nombreux sites et constatons souvent des problèmes majeurs de front-end et de back-end avec d'autres constructeurs de pages populaires que je ne nommerai pas, mais pas avec Beaver Builder, c'est pourquoi nous l'utilisons sur notre propre site comme Bien!

Merci encore, Jon, d'avoir pris le temps de nous expliquer une approche plus moderne de la performance. Je voulais donner une dernière touche à l'agence de Jon, 9seeds. Si vous cherchez de l’aide pour tout type de développement WordPress personnalisé, appelez-les !

À propos de Jon Brown

Vagabond. Développeur WordPress. Photographe. Foie de vie.