Éliminez les ressources qui bloquent le rendu

Que veut dire "Éliminez les ressources qui bloquent le rendu" ?

Avant que le navigateur puisse afficher (rendre) une page web, il doit lire son HTML. Au cours de ce processus, chaque fois que le navigateur rencontre une référence à un script (JavaScript) ou à une feuille de style (fichier CSS), il doit s'arrêter, demander le fichier, attendre qu'il soit téléchargé depuis le serveur et l'exécuter avant de pouvoir enfin continuer. 

Il en résulte un retard dans l'affichage du contenu pour le visiteur, pendant lequel la page peut apparaître vierge ou incomplète. 

Afin de réduire au minimum ce délai, il est essentiel de pouvoir éliminer les ressources qui bloquent le rendu. La page pourra alors se charger et afficher son contenu le plus rapidement possible.

Comment WP Rocket peut aider ?

WP Rocket a des options pour traiter les deux cas - JavaScript bloquant le rendu, et CSS bloquant le rendu. 

JavaScript bloquant le rendu

L’option Charger le JavaScript en différé de WP Rocket élimine le blocage du rendu par les JS en ajoutant la balise "defer" à chaque balise de script.

Vous trouverez cette option comme ceci : Tableau de bord → WP Rocket → Réglages → Optimisation des fichiers →  Charger le JavaScript en différé

CSS bloquant le rendu

WP Rocket dispose d'une option appelée Optimiser le chargement du CSS qui génère le chemin critique CSS nécessaire pour rendre la partie visible de votre site web et charger tous les autres fichiers CSS de manière asynchrone, c'est-à-dire différée, sans blocage du rendu de la page.

Vous trouverez cette option comme ceci : Tableau de bord → WP Rocket → Réglages → Optimisation des fichiers → Optimiser le chargement du CSS

Astuce : Ouvrez le code source de la page de votre site web et faites une recherche de "rocket-critical-css" pour vous assurer que cette option fonctionne correctement.

Si "rocket-critical-css" est introuvable, essayez de régénérer le Critical Path CSS.

Pagespeed continue de signaler jquery.js comme bloquant le rendu

Si jquery.js est signalé sous "Éliminez les ressources qui bloquent le rendu", cela signifie que le fichier est exclu de notre option Charger le JavaScript en différé depuis ce champ :

Supprimez la ligne et assurez-vous que votre site web fonctionne bien. Si c'est le cas, la recommandation disparaîtra.

Si vous n'y trouvez pas l'exclusion, cela signifie qu'elle est automatiquement exclue dans le cadre de la compatibilité. Cela signifie que le site se casserait sinon.  

Liens utiles

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.