JavaScript et CSS bloquant le rendu - PageSpeed

Remarque : Pour des informations générales sur les indications de PageSpeed et pourquoi vous ne devez pas vous soucier de votre "note", lisez cet article :  La note Google PageSpeed ne s'améliore pas

Qu’est-ce que le JavaScript et le CSS bloquant le rendu ?

Avant que le navigateur puisse afficher une page Web, elle doit lui fournir son code HTML. Pendant ce processus, chaque fois que le navigateur rencontre un élément qui référence un script ou une feuille de style, il doit s'arrêter, demander le fichier, attendre le téléchargement du serveur et l'exécuter avant de pouvoir continuer à analyser ce code HTML. Avec la plupart des thèmes et plugins, WordPress ne se charge pas en une seule fois, mais plusieurs fichiers CSS et/ou JavaScript, et ce processus peut retarder considérablement le temps du rendu de la page.

Par conséquent, il est recommandé de retarder ("différer") le chargement des fichiers non critiques jusqu'à ce que le navigateur ait fini de rendre la page. Cela nécessite des ajustements à la source du HTML d'une page elle-même, ainsi qu'une connaissance précise de quel fichier est requis à quel stade de ce processus. Ça vous paraît compliqué ? Et bien ça l’est !

Néanmoins, des outils tels que Google PageSpeed Insights le tourne d’une manière à vous faire croire que c’est simple et facile : 

"Éliminer les codes JavaScript et CSS qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison" (ou en Anglais "Eliminate render-blocking JavaScript and CSS in above-the-fold content")

Comme la plupart des recommandations données par Google PageSpeed, certaines d’entre elles sont soit impossibles, soit irréalisables, et ces même avec un plugin simplifié comme WP Rocket ! 

WP Rocket possède 2 options correspondant à ces recommandations :

Vous les trouverez dans l’onglet Optimisation des fichiers, en-dessous de Fichiers CSS et Fichiers JavaScript :

En activant ces options vous pourrez peut-être constater une amélioration de votre note PageSpeed ou de la note GT Metrix / Pingdom. Les résultats sont variables en fonction des sites. Rappelez-vous toujours de tester l'effet de ces options sur la vitesse de chargement de votre site.


Erreurs de génération du critical CSS

Veuillez lire cette doc pour comprendre et résoudre les erreurs de génération du Critical Path CSS

Cela a-t-il répondu à votre question ? Merci pour votre retour :) Une erreur est survenue lors de l’envoi de votre retour. Veuillez réessayer plus tard.