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

Dans cette documentation

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 :

  • Optimiser le chargement du CSS
  • Chargement différé des fichiers JS

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.

Optimiser le chargement du CSS

L'option de chargement asynchrone des fichiers CSS de WP Rocket concerne cette  recommandation PageSpeed :

"Optimisez l'affichage des styles CSS" ou " Optimize CSS delivery"

Notre générateur de critical path CSS ne génère pas encore de CSS spécifique au mobile. Si vous avez un thème Responsive, le critical CSS devrait être semblable, mais si vous avez un thème séparé dédié au mobile, nous ne pouvons pas le générer encore.

Générer le Critical Path CSS

WP Rocket s'efforce de rendre aussi pratique que possible la gestion des optimisations de performance avancées comme le chargement asynchrone du CSS et le Critical CSS.

Lorsque vous activez l'option Optimiser le chargement du CSS, le CSS sera chargé de manière asynchrone sur votre site. En plus, le Critical Path CSS sera automatiquement généré en arrière plan et ajouté au prochain chargement de votre page.

Notre outil externe récupérera la première entrée de chaque type de publication publiée (articles, pages, produits, etc...), ainsi que les pages d'archives publiées (catégories, tags, catégories de produits, etc...). Il en extraira le Critical Path CSS pour chacun séparément, et renverra le code au plugin WP Rocket qui l'ajoutera ensuite aux pages respectives à la demande du visiteur, ou du pré-chargement du cache WP Rocket.

Ainsi, le CSS Critical Path généré par WP Rocket suit les fonctionnalités disponibles en front sur les différents types de pages de votre site Web.

Les chemins relatifs des images et des polices seront automatiquement transformés en URLs absolues.

Le Critical Path CSS sera découpé et minifié avec soin. Cela signifie que les espaces requis (comme à l'intérieur des opérations calc ()) ou les backslashes (comme '\ f311' pour un glyphe dans une police d'icônes) seront conservés.

Par exemple, s'il y a un Slider sur votre page d'accueil, le Critical Path CSS pour cette page reflétera cette fonctionnalité, tandis que leCritical Path CSS pour un article de blog pourra contenir un code légèrement différent.

Quand régénérer le Critical Path CSS ?

Lorsque vous faites des modification de votre feuille de style, que vous ajoutez/modifiez du custom CSS via l'outil de personnalisation de WordPress (ou un plugin), vous devriez régénérer le Critical Path CSS via le menu WP Rocket de la barre d'admin :

Comprendre et résoudre les erreurs de génération du critical CSS

Quelques exigences de base pour que l'outil de génération fonctionne :

  1. Votre site doit être public et accessible pour que ça fonctionne, ça ne fonctionnera donc pas en local. 
  2. Les IPs de l’outil ne doivent pas être bloquées par votre serveur ou un plugin de sécurité : 
    167.114.226.142 et 54.37.31.6
  3. WP-cron ou une réélle tâche CRON serveur doit pouvoir tourner.

Lent ou pas de progression du tout

Si la génération semble fonctionner très lentement, c'est-à-dire qu'il faut beaucoup de temps pour mettre à jour l'indicateur de progression, il est probable que notre outil soit temporairement surchargé. Dans ces cas, il est préférable de réessayer dans quelques heures lorsque la charge sera moindre.

Notifications d'erreurs

S'il n'est pas possible pour notre outil de générer le Critical Path CSS pour n'importe quel type de contenu sur votre site, vous verrez unnotification d'erreur avec ses détails.

Certaines erreurs peuvent être temporaires, il vaut donc la peine d'essayer à nouveau la génération. Si les problèmes persistent, veuillez procéder au dépannage ci-dessous.

Si vous obtenez un message d'erreur sur chaque type de contenu (voir la capture d'écran ci-dessous comme exemple), c'est probablement que notre outil est bloqué par votre site. Veuillez vous assurer que votre site est accessible au public et que nos adresses IP ont bien été mises sur liste blanche par votre plugin de sécurité et/ou votre pare-feu.

Trouver l'URL d'accès par type de contenu

Notre outil accède à l'URL la plus récente pour chaque type de contenu de votre site. Si vous voyez une erreur pour un type de contenu spécifique, vous pouvez trouver à quelle URL spécifique l’outil tente d'accéder :

  • Installez et activez ce plugin d’aide : WP Rocket | CPCSS Debug Helper
  • Allez à : Réglages > CPCSS Helper
  • Vous y verrez l'URL à laquelle nous accédons pour chaque type de contenu.
  • Visitez les URLs problématiques pour vérifier si elles sont valides et accessibles

Code de réponse invalide

Notre outil externe envoie une requête à une page de votre site. S'il ne reçoit pas une réponse 200 “OK”, vous verrez une erreur dans la réponse.

Les raisons les plus communes sont :

  • L'URL n’est pas publiquement accessible, par exemple elle donne une 404
  • Une couche de sécurité sur votre site en bloque l'accès, ce qui entraîne souvent une erreur 400 ou 403. 

URL inaccessible

Cet notification d'erreur affichera les URLs spécifiques auxquelles l'outil ne peut pas accéder.

  • Visitez l'URL dans votre navigateur pour vous assurer qu'elle est accessible.
    • Si c'est le cas, il est probable qu'elle soit bloquée par un pare-feu ou un plugin de sécurité, veillez alors à whitelister nos IPs.
  • Si l'URL renvoie une erreur 404, ou toute autre erreur l'empêchant de s'afficher dans votre navigateur, cela signifie que notre outil ne pourra pas non plus y accéder.
    • Corrigez le problème avec cette page et essayez à nouveau la génération.
  • Si c'est pour un post type qui n'a pas été publié, cela ne fonctionnera pas. Certains post types ne sont pas conçus pour être visibles sur votre site Web. Par exemple, les post types qui gèrent les liens d'affiliation. Un post type peut être utilisé pour gérer chaque lien, mais ils ne sont pas visibles comme une page puisqu'ils redirigent ailleurs.

Aucune feuille de style valide n'est disponible

Vous verrez ce message si :

  • Il n'y a pas de feuilles de style ajoutées avec les balises <link>
  • Les feuilles de style liées sont vides
  • Il n'y a que du CSS inline sur votre site. L'outil n'utilise pas le CSS inline existant lors de la génération du Critical Path car cela pourrait entraîner une duplication du CSS.

Les styles contiennent une ou plusieurs erreurs

  • Une des feuilles de style récupérées n'est pas valide, ce qui empêche la génération du Critical CSS
  • Vérifiez que vos feuilles de style sont valides et accessibles. 

La protection CloudFlare empêche le service d'accéder au site Web

  • Mettre en liste blanche les adresses IP de notre outil dans Cloudflare (ou tout autre service pare-feu similaire)

Une erreur empêche le générateur de récupérer son contenu

Parfois cette erreur peut être temporaire, essayez à nouveau.

Si l'erreur persiste, elle peut être liée à un délai d’attente (timeout) sur la page :

  • Il y a un timeout de 30 secondes pour des demandes de fichiers spécifiques.
  • Il y a un timeout d'une minute sur l'ensemble de la page.

Erreur SSL

Le certificat SSL du site Web n'est pas valide et notre service ne peut donc pas y accéder.

Connexion refusée

Les raisons les plus communes sont :
  • Le port (80 ou 443) n'est pas ouvert sur le client.
  • Le port (80 ou 443) est ouvert sur le serveur, mais son backlog de connexions en attente est plein.
  • Un pare-feu bloque l'accès.

Trop de redirections

S'il y a plus de 2 redirections lors de l'accès à une page donnée, la connexion est interrompue pour éviter les loops infinies.

Timeout

Si la durée entre la requête et le premier octet (TTFB "Time To First Byte") dépasse 20 secondes, la connexion sera fermée.

Impossible d'accéder à l'url suivante

Notre outil n'a pas pu accéder à la page demandée. Attendez quelques minutes, puis réessayez la génération.

Impossible de générer le Critical CSS. Le service peut être surchargé. Veuillez réessayer plus tard.

Lorsque plusieurs timeouts se succèdent, cela peut provoquer une surcharge de la file d'attente et faire planter notre générateur. Lorsque cela se produit, la file d'attente est purgée. Les sites Web qui étaient dans la file d'attente reçoivent cette erreur. Recommencez la régénération dans quelques heures lorsque la charge sera moindre.

Empêcher la génération automatique du Critical Path CSS

Vous pouvez empêcher le génération automatique du Critical Path CSS en installant le plugin d’aide suivant :

📥   Télécharger (.zip):  WP Rocket | No Auto-generated Critical CSS

Développeurs : vous trouverez le code de ce plugin sur GitHub.

Modifier le Critical Path CSS généré

Si vous souhaitez modifier le Critical Path CSS généré par notre outil, suivez les instructions suivantes :

1
Utilisez l’outil pour générer automatiquement le critical path CSS pour votre site.
2
Désactivez les futures génération automatique en ajoutant le plugin d’aide ci-dessus.
3
Les fichiers CSS générés sont stockés sur votre serveur : /wp-content/cache/critical-css
Si vous êtes développeur et que vous comprenez le CSS, vous pouvez les modifier directement.
4
Videz le cache de WP Rocket

Critical Path CSS de Secours

Au cas où notre outils ne peut pas générer le critical path CSS, vous pouvez utiliser ce champs de secours pour y mettre le vôtre. Il sera appliqué à chaque fois que le critical path CSS n'existe pas déjà pour la page. Pour créer le code CSS nécessaire, vous pouvez utiliser cet outil  Critical Path CSS Generator :

1
Désactivez WP Rocket avant d'utiliser cet outil !
2
Entrez votre URL dans l'outil et copiez le CSS généré dans le champ Critical path CSS de WP Rocket : 

Remarque : Vous n'aurez pas besoin du code JavaScript fourni par l'outil. Copiez juste le CSS dans les réglages de WP Rocket qui se chargera de la partie JS automatiquement.
3
Attention ! Vous aurez besoin probablement de transformer toutes les URLs relatives de ce bout de code en URLs absolues manuellement (ex : pour les images background, fonts etc.)

Par exemple, si le CSS généré contient un chemin relatif à une police, comme ceci :
@font-face{font-family:droid_serifregular;src:url(../DroidSerif-webfont.eot);
	

Le chemin relatif (indiqué ici par  ../ dans l'URL) ne sera pas bon lorsqu'il sera retiré de son contexte. Vous avez alors besoin de le remplacer par son URL absolue, avec le chemin correct, par exemple :

@font-face{font-family:droid_serifregular;src:url(http://example.com/wp-content/themes/neutro/font/droid_serif_regular/DroidSerif-webfont.eot);
	

Si vous avez besoin d'exclure un fichier CSS particulier du chargement asynchrone, suivez-ce guide :  Exclure des fichiers CSS du chargement Asynchrone

Chargement différé des fichiers JS

Cette option concerne cette  recommandation de PageSpeed :

"Supprimez les ressources JavaScript qui bloquent l'affichage" ou  “Remove render-blocking JavaScript”

Il est préférable pour des questions de performance que les fichiers JavaScript soient chargés dans le bas de page de votre site, ou asynchronisé de manière à ce qu’ils ne bloquent pas le chargement d’autres atouts de votre site, et par là ne ralentissent le site.

En activant cette option, tous vos fichiers JS, ceux minifiés par WP Rocket inclus, seront chargés avec l'attribut  defer :

Si vous aves des problèmes sur votre site suite à l'activation de cette option, vous devriez activer le Mode Sécurisé, ceci empêchera jQuery d'être différé, pour des raisons de comptabilité :

Cela dépendra de votre site mais vous aurez peut-être besoin d'exclure certains fichiers JS du chargement différé :  Exclure des fichiers JS du chargement différé

Mais Google ne prend pas en considération que parfois, il est impossible de tout charger dans le bas de page (footer) - au moins sans casser votre site. Tous les fichiers que vous exclurez alors du chargement différé seront signalés par PageSpeed ; Mais vous ne pourrez rien y faire !

Les fichiers sur lesquels le chargement différé n’est pas appliqué

Le différemment ne sera pas appliqué si jamais l’un des attributs suivant est présent :

  • async 
  • data-cfasync="false"