Comment éliminer les ressources bloquant le rendu de votre site Web WordPress

Avez-vous déjà fini de créer un site Web WordPress, avez-vous tout aimé et avez-vous rapidement commencé à le détester après avoir réalisé que son chargement prenait une éternité ? Maîtriser l'élimination des ressources bloquant le rendu aidera à diagnostiquer ce problème. Mais comment?

Non seulement les vitesses de chargement lentes sont une nuisance pour vous et vos visiteurs, mais elles peuvent également vous coûter cher en matière de référencement. Depuis 2010, les algorithmes de Google tiennent compte de la vitesse de chargement dans les décisions de classement, de sorte que les pages lentes apparaissent plus bas sur les pages de résultats.

Vous connaissez peut-être les coupables courants des mauvaises performances des pages : contenu excessif, fichiers image non compressés, hébergement insuffisant et manque de mise en cache, pour n'en nommer que quelques-uns. Mais il y a un autre auteur souvent négligé en jeu : les ressources qui bloquent le rendu.

Ne vous méprenez pas, CSS et JavaScript sont excellents. Sans CSS, les sites Web seraient des murs de texte brut. Sans Ja=ooovaScript, nous ne serions pas en mesure d'ajouter des éléments dynamiques, interactifs et attrayants à nos sites Web. Mais, s'ils sont exécutés au mauvais moment, CSS et JavaScript peuvent nuire aux performances de votre site Web.

Voici pourquoi : lorsqu'un navigateur Web charge une page Web pour la première fois, il analyse tout le code HTML de la page avant de l'afficher à l'écran pour un visiteur. Lorsque le navigateur rencontre un lien vers un fichier CSS, un fichier JavaScript ou un script en ligne (c'est-à-dire du code JavaScript dans le document HTML lui-même), il interrompt l'analyse HTML pour récupérer et exécuter le code, ce qui ralentit tout.

Si vous avez optimisé les performances de votre page dans WordPress et que vous rencontrez toujours des problèmes, les ressources bloquant le rendu peuvent en être la cause. Parfois, ce code est important à exécuter lors du premier chargement, mais la plupart du temps, il peut être supprimé ou poussé jusqu'à la toute fin de la file d'attente.

Dans cet article, nous vous montrerons comment éliminer ce code embêtant de votre site Web WordPress et donner un coup de pouce à vos performances.

Si vous préférez suivre une vidéo, consultez cette procédure pas à pas créée par WP Casts :

1. Identifiez les ressources bloquant le rendu.

Avant d'apporter des modifications, vous devez d'abord localiser les ressources bloquant le rendu. La meilleure façon de le faire est d'utiliser un test de vitesse en ligne gratuit comme l'outil PageSpeed ​​Insights de Google. Collez l'URL de votre site et cliquez sur Analyser .

Une fois l'analyse terminée, Google attribue à votre site Web un score de vitesse global, de 0 (le plus lent) à 100 (le plus rapide). Un score compris entre 50 et 80 est moyen, vous voudrez donc atterrir dans la partie supérieure de cette fourchette ou au-dessus.

Pour identifier les fichiers bloquant le rendu qui ralentissent votre page, faites défiler jusqu'à Opportunités , puis ouvrez l'accordéon Éliminer les ressources bloquant le rendu .

Source des images

Vous verrez une liste de fichiers ralentissant la "première peinture" de votre page - ces fichiers affectent le temps de chargement de tout le contenu qui apparaît dans la fenêtre du navigateur lors du chargement initial de la page. Ceci est également appelé contenu « au-dessus de la ligne de flottaison ».

Prenez note de tous les fichiers se terminant par les extensions .css et .js, car ce sont ceux sur lesquels vous voudrez vous concentrer.

2. Éliminez les ressources bloquant le rendu manuellement ou avec un plugin.

Maintenant que vous avez identifié le problème, il existe deux façons de le résoudre dans WordPress : manuellement ou avec un plugin. Nous couvrirons d'abord la solution du plugin.

Plusieurs plugins WordPress peuvent réduire l'effet des ressources bloquant le rendu sur les sites Web WordPress. Je couvrirai deux solutions populaires, Autoptimize et W3 Total Cache.

Comment éliminer les ressources bloquant le rendu avec le plugin Autoptimize

Autoptimize est un plugin gratuit qui modifie les fichiers de votre site Web pour fournir des pages plus rapides. Autoptimize fonctionne en agrégeant les fichiers, en minimisant le code (c'est-à-dire en réduisant la taille du fichier en supprimant les caractères redondants ou inutiles) et en retardant le chargement des ressources bloquant le rendu.

Puisque vous modifiez le backend de votre site, n'oubliez pas d'être prudent avec ce plugin ou tout plugin similaire. Pour éliminer les ressources bloquant le rendu avec Autoptimize :

1. Installez et activez le plugin Autoptimize.

2. Depuis votre tableau de bord WordPress, sélectionnez Paramètres > Optimiser automatiquement .

3. Sous Options JavaScript , cochez la case en regard de Optimiser le code JavaScript ? .

4. Si la case à côté de Aggregate JS-files? est coché, décochez-le.

5. Sous Options CSS , cochez la case en regard de Optimiser le code CSS ? .

6. Si la case à côté de Aggregate CSS-files? est coché, décochez-le.

7. Au bas de la page, cliquez sur Enregistrer les modifications et vider le cache .

8. Analysez votre site Web avec PageSpeed ​​Insights et recherchez une amélioration.

9. Si PageSpeed ​​Insights signale toujours des fichiers JavaScript bloquant le rendu, revenez à Paramètres > Optimisation automatique et cochez les cases en regard de Agréger les fichiers JS ? et Agréger les fichiers CSS ? . Ensuite, cliquez sur Enregistrer les modifications et vider le cache et analysez à nouveau.

Comment éliminer les ressources bloquant le rendu avec le plugin W3 Total Cache

W3 Total Cache est un plugin de mise en cache largement utilisé qui aide à traiter le code lent. Pour éliminer JavaScript bloquant le rendu avec W3 Total Cache :

1. Installez et activez le plugin W3 Total Cache.

2. Une nouvelle option Performance sera ajoutée au menu de votre tableau de bord WordPress. Sélectionnez Performances > Paramètres généraux.

3. Dans la section Minify , cochez la case à côté de Minify , puis définissez le mode Minify sur Manual .

4. Cliquez sur Enregistrer tous les paramètres en bas de la section Minify .

5. Dans le menu du tableau de bord, sélectionnez Performances > Réduire .

6. Dans la section JS à côté de JS minify settings , assurez-vous que la case Enable est cochée. Ensuite, sous Opérations dans les zones , ouvrez le premier menu déroulant Type d'intégration et choisissez Non bloquant à l'aide de "différer" .

7. Sous Gestion des fichiers JS , choisissez votre thème actif dans la liste déroulante Thème .

8. Reportez-vous aux résultats PageSpeed ​​Insights de votre analyse précédente. Pour chaque élément sous Éliminer les ressources bloquant le rendu se terminant par .js, cliquez sur Ajouter un script . Ensuite, copiez l'URL complète de la ressource JavaScript à partir de PageSpeed ​​Insights et collez-la dans le champ URI du fichier .

9. Une fois que vous avez collé toutes les ressources JavaScript bloquant le rendu signalées par PageSpeed ​​Insights, cliquez sur Enregistrer les paramètres et purger les caches en bas de la section JS .

10. Dans la section CSS à côté de CSS minify settings , cochez la case à côté de CSS minify settings et assurez-vous que la méthode Minify est définie sur Combine & Minify .

11. Sous Gestion des fichiers CSS , choisissez votre thème actif dans la liste déroulante Thème .

12. Pour chaque élément sous Éliminer les ressources bloquant le rendu se terminant par .css dans vos résultats d'analyse PageSpeed ​​Insights, cliquez sur Ajouter une feuille de style . Ensuite, copiez l'URL complète de la ressource CSS de PageSpeed ​​Insights et collez-la dans le champ URI du fichier .

13. Une fois que vous avez collé toutes les ressources CSS bloquant le rendu signalées par PageSpeed ​​Insights, cliquez sur Enregistrer les paramètres et purger les caches en bas de la section CSS .

14. Analysez votre site Web avec PageSpeed ​​Insights et recherchez une amélioration.

Comment éliminer manuellement JavaScript bloquant le rendu

Les plugins peuvent gérer le travail de backend pour vous. Là encore, les plugins eux-mêmes ne sont que des fichiers supplémentaires ajoutés à votre serveur Web. Si vous souhaitez limiter ces fichiers supplémentaires, ou si vous préférez gérer vous-même la programmation, vous pouvez adresser manuellement le JavaScript bloquant le rendu.

Pour ce faire, localisez les balises <script> dans les fichiers de votre site Web pour les ressources identifiées dans votre analyse PageSpeed ​​Insights. Ils ressembleront à ceci :

 
<script src="https://blog.hubspot.com/marketing/resource.js">

Les balises <script> indiquent au navigateur de charger et d'exécuter le script identifié par l'attribut src (source). Le problème avec ce processus est que ce chargement et cette exécution retardent l'analyse de la page Web par le navigateur, ce qui a un impact sur le temps de chargement global :

Source des images

Pour résoudre ce problème, vous pouvez ajouter l'attribut async (asynchrone) ou defer aux balises de script pour les ressources bloquant le rendu. async et defer sont placés comme suit :

 
<script src="https://blog.hubspot.com/marketing/resource.js" async>
 <script src="https://blog.hubspot.com/marketing/resource.js" defer>

Bien qu'ils aient des effets similaires sur les temps de chargement, ces attributs indiquent au navigateur de faire des choses différentes.

L'attribut async signale au navigateur de charger la ressource JavaScript lors de l'analyse du reste de la page et exécute ce script immédiatement après son chargement. L'exécution du script interrompt l'analyse HTML :

Source des images

Les scripts avec l'attribut defer sont également chargés pendant l'analyse de la page, mais ces scripts sont retardés du chargement jusqu'après le premier rendu ou jusqu'à ce que les parties les plus essentielles aient été chargées :

Source des images

Les attributs defer et async ne doivent pas être utilisés ensemble sur la même ressource, mais l'un peut être mieux adapté à une ressource particulière que l'autre. Généralement, si un script non essentiel s'appuie sur un script pour s'exécuter avant lui, utilisez defer . L'attribut defer garantit que le script s'exécutera après le script nécessaire précédent. Sinon, utilisez async .

3. Réexécutez une analyse du site.

Après avoir apporté vos modifications, effectuez une dernière analyse de votre site Web via PageSpeed ​​Insights et voyez quel impact vos modifications ont eu sur votre score.

Espérons qu'il y ait une amélioration notable, mais ne vous inquiétez pas si ce n'est pas le cas. De nombreux facteurs peuvent inhiber les performances de la page, et vous devrez peut-être creuser davantage pour trouver la source des performances médiocres.

4. Vérifiez si votre site Web contient des bogues.

En plus d'une nouvelle analyse, vérifiez vos pages pour vous assurer que votre site fonctionne. La page se charge-t-elle correctement ? Est-ce que tous les éléments s'affichent ? Si quelque chose est cassé ou ne se charge pas correctement, annulez vos modifications et résolvez le problème.

Si vous avez atteint un point où vous avez essayé à plusieurs reprises diverses mesures avec des gains de vitesse minimes, il serait peut-être préférable d'envisager d'autres moyens d'accélérer vos pages, plutôt que de risquer de casser votre site.

Optimiser votre site WordPress pour les performances

De nombreux facteurs contribuent à l'expérience de vos utilisateurs sur votre site Web, mais peu sont plus importants que le temps de chargement. Chaque fois que vous apportez des modifications importantes au contenu ou à l'apparence de votre site WordPress, vous devez toujours tenir compte de la manière dont ces modifications affectent les performances.

Maintenant que vous avez éliminé les ressources bloquant le rendu, vous devez continuer à optimiser la vitesse de votre site Web en analysant d'autres fonctionnalités connues pour ralentir les performances. Essayez d'intégrer des tests de vitesse réguliers dans le calendrier de maintenance de votre site - rester en avance sur tout problème potentiel sera essentiel à votre succès.