Réussissez tous les tests CWV et PageSpeed ​​Insights avec ces techniques de développement WordPress

En 2021, chez StrategiQ, une agence numérique complète basée au Royaume-Uni, nous nous sommes donné pour objectif de commencer à développer chaque site Web que nous développons et lançons pour dépasser les performances de Google Core Web Vitals (CWV) et PageSpeed ​​Insights (PSI). rapport.

Core Web Vitals montre les performances de votre site Web de différentes manières. Cela inclut la vitesse de chargement du premier contenu sur une page (First and Largest Contentful Paint), la vitesse d'attente d'un utilisateur avant de pouvoir interagir avec lui (Time to Interactive) et les changements de mise en page (Cumulative Layout Shift) .

Tester votre CWV est aussi simple que bonjour - rendez-vous simplement sur https://pagespeed.web.dev/ et entrez votre adresse. La zone supérieure affiche les dernières données du monde réel des 28 derniers jours, tandis que la section inférieure (un score sur 100, à la fois pour mobile et ordinateur de bureau), est constituée de données générées en laboratoire.

Pourquoi est-ce important ? Eh bien, parce que Google le dit.

En juillet 2018, Google a annoncé que la vitesse est un facteur d'affichage d'un site dans les résultats de recherche, en particulier sur mobile. La source.

En 2020, ils ont également annoncé que les métriques d'expérience utilisateur (qui composent les Core Web Vitals / CVW) sont désormais utilisées dans la façon dont ils classent les sites. La source.

C'est simple : plus un site est rapide et performant, mieux il est susceptible d'être classé.

L'équipe de développement de StrategiQ a donc décidé que c'était à notre tour d'aider le département SEO. Les experts en référencement peuvent travailler leurs petits clochards aussi dur que possible, mais un site qui fonctionne terriblement peut faire beaucoup plus de mal que de bien. Un site qui passe CWV et PSI, cependant, assurera que leur excellent travail a un brillant tremplin.

Ce qu'il faut noter, c'est que CWV et PSI sont notoirement difficiles à passer. La grande majorité des sites ne le font pas, même la plupart des sites Web les plus connus au monde . Pensez à YouTube, à la BBC et même à WP Engine eux-mêmes qui ont du mal à obtenir un laissez-passer sur mobile et sur ordinateur ( désolé les gars ).

Alors, qu'avons-nous fait pour nous assurer que nous avons vu ces délicieux beignets verts de délice?

Nous avons tout retiré et travaillé sur un mantra simple :

Chargez le moins possible, le plus rapidement possible.

Bien que je n'entre pas dans les moindres détails, je passerai en revue nos principales méthodes pour garder nos thèmes WordPress sur mesure aussi rationalisés que possible.

Tout d'abord, parlons matériel. Nous ne pouvons pas continuer sans parler d'abord de WP Engine. Sans aucun doute, ils sont l'un des meilleurs fournisseurs d'hébergement spécifiques à WordPress, sinon les meilleurs. Nous avons été ravis du support impressionnant, de la disponibilité, des environnements pour chaque installation, des sauvegardes et de la facilité de gestion des certificats SSL et des domaines parmi de nombreuses autres fonctionnalités. De plus, leur mise en cache et leur optimisation de la vitesse garantissent que le site fonctionne aussi rapidement que possible au niveau du serveur.

Avec un serveur hautement performant en son cœur, nous savons qu'il nous appartient maintenant de faire fonctionner un site Web le plus rapidement possible.

Comme la plupart des agences, nous avons notre propre modèle de base artisanal que nous utilisons comme point de départ pour tous nos sites Web sur mesure. Chaque site que nous créons est conçu et codé en interne - pas un thème prédéfini en vue.

Notre modèle de base contient nos méthodes d'optimisation de la vitesse, ainsi qu'un certain nombre de fonctions intelligentes et de composants réutilisables dont nous avons besoin pour chaque projet. Avoir ce point de départ nous fait gagner du temps à long terme et garantit que chaque site fonctionnera de son mieux avec peu de frais généraux requis par le développeur.

Je sais ce que vous pensez - passez aux bonnes choses !

Je ne vais pas m'embêter à lister les trucs ennuyeux habituels que vous voyez sur chaque article de blog, comme les "images à chargement paresseux". Mais si vous ne le faites pas, c'est en effet un must - nous avons une fonction d'image qui imprime nos images paresseusement chargées avec des balises srcset et tailles (appelées images réactives).

Allons droit au but.

Méthode 1 : fragmenter et mettre en file d'attente

Cela arrive souvent : un projet n'a qu'un seul fichier css et un seul fichier js, et ils finissent par gonfler à la taille d'une petite planète. Et ensuite ? Google vous demande "pourquoi chargez-vous les styles et le javascript n'est-il pas utilisé sur cette page ?". Pourquoi? Pourquoi?!

C'est un argument valable. Pourquoi devriez-vous charger des masses de CSS et de javascript pour un site Web entier alors que vous n'en avez besoin que d'une fraction par page ?

Tous nos sites sont entièrement construits avec des blocs Gutenberg. Cela signifie que pour chaque bloc, vous pouvez utiliser la puissance brillante de la mise en file d'attente de vos fichiers css et js.

Pour chaque bloc, nous créons un fichier css et js séparé juste pour ce fichier (si nécessaire). Ceux-ci sont ensuite minifiés (voir le point suivant pour plus d'informations) et mis en file d'attente bloc par bloc.

Le résultat? Nous ne chargeons que ce qui est réellement là sur chaque page.

Méthode 2 : utilisez un exécuteur de tâches tel que gulp pour combiner et minimiser vos ressources

Tous les assets générés sont minifiés par une fonction gulp (d'autres sont disponibles, comme grunt). Il convient de noter qu'il y a de nombreuses lunes, Google aurait préféré la concaténation à la minification (une grande requête aurait été préférable à 5 petites requêtes), mais depuis l'essor de HTTP/2 (qui multiplexe plusieurs requêtes à la fois), ce n'est plus un publier.

Encore une fois, nous faisons cela pour garder les fichiers aussi petits que possible. Alors maintenant, non seulement nous ne chargeons que les actifs qui se trouvent sur la page, mais ils sont également de taille minuscule.

Méthode 3 : arrêter les éléments bloquant le rendu

Nous nous assurons que tous ces actifs mis en file d'attente se trouvent en bas de la page et ne bloquent donc pas le rendu.

Nous avons même retiré de la file d'attente le jQuery fourni avec WordPress et mis en file d'attente une nouvelle version (celle qui ne présente pas de failles de sécurité), également au bas de la page.

Mais qu'en est-il d'un FOUC (Flash of Unstyled Content) me direz-vous ?

Méthode 4 : CSS au-dessus du pli

Un flash de contenu sans style se produit lorsqu'une page se charge initialement sans aucun style, car la feuille de style se trouve en bas de la page. Une fois la feuille de style chargée, les styles sont appliqués, le site clignote et il semble enfin correct.

Pour résoudre ce problème, nous avons séparé les styles de pliage ci-dessus et l'avons ajouté en tant que balise <style> en ligne dans la tête. Ce n'est pas un atout bloquant le rendu, et nous n'obtenons pas de FOUC.

Méthode 5 : WP Rocket

La dernière pièce du puzzle est le plugin de performance WP Rocket, le meilleur de sa catégorie. Construit en collaboration avec les ingénieurs de WP Engine, c'est le seul plugin de mise en cache autorisé sur leur plate-forme d'hébergement.

Les resultats?

Eh bien, les scores parlent d'eux-mêmes.

SportsAidEastern est une organisation caritative soutenant les athlètes britanniques. Selon PSI, le site que nous avons développé pour eux obtient un énorme 97/100 sur mobile et 100/100 sur ordinateur.

Calligo propose des services de données transformateurs, et leurs scores de site sont encore meilleurs que SportsAid ; arrivant à un 99/100 presque parfait sur mobile et 100/100 sur ordinateur.

Conclusion

J'espère que cela a été une bouffée d'air frais de la part de tous les autres messages du site "comment accélérer votre WordPress", et si vous avez du mal à obtenir un laissez-passer, nous avons peut-être souligné quelque chose que vous pouvez essayer.

StrategiQ est l'agence de marketing axée sur la stratégie. En découvrant des informations précieuses sur le marché, en révélant des opportunités de concurrence, en définissant et en proposant des stratégies marketing efficaces, notre équipe aide les marques ambitieuses à dépasser leurs objectifs grâce au conseil, à la création, au marketing et à la technologie.
Que vous ayez besoin de stratégie, de conseils, de ressources ou d'expertise, faites le premier pas. Parlez-nous de vous et nous verrons comment nous pouvons vous aider.