Ressources bloquant le rendu

Silktide recherche les feuilles de style et les scripts que le navigateur doit télécharger entièrement avant de pouvoir afficher quoi que ce soit sur votre page. Chacun d’eux laisse les visiteurs regarder un écran blanc un peu plus longtemps.

Par défaut, une feuille de style ou un script référencé près du haut d’une page bloque le rendu : le navigateur n’affiche rien tant que le fichier n’est pas arrivé, car ce fichier peut modifier l’apparence ou le comportement de l’ensemble.

Pourquoi c’est important

Les instants de blanc avant la première apparition d’une page sont ceux où les visiteurs décident d’attendre ou non. Chaque fichier bloquant le rendu ajoute un aller-retour réseau à ce temps mort, et les retards s’additionnent rapidement sur les connexions mobiles - quelques fichiers bloquants peuvent maintenir une page autrement rapide blanche pendant plusieurs secondes.

La plupart de ces blocages sont inutiles. En général, seule une petite partie du d’une page est nécessaire pour dessiner le premier écran, et la plupart du n’a pas besoin de s’exécuter avant l’apparition de la page.

Comment y remédier

Chargez les scripts sans bloquer en ajoutant defer (ou async pour les scripts indépendants, comme les solutions d’analyse) :

<!-- Problème : bloque le rendu jusqu’à ce que le fichier soit téléchargé et exécuté -->
<script src="app.js"></script>

<!-- Corrigé : se télécharge en parallèle, s’exécute après l’analyse de la page -->
<script src="app.js" defer></script>

Intégrez directement dans la page la petite quantité de CSS nécessaire au premier écran, et chargez les feuilles de style complètes sans bloquer.
Attribuez un attribut media aux feuilles de style qui ne s’appliquent que dans certaines situations (par exemple media="print"), afin qu’elles ne bloquent plus le rendu ailleurs.
Réduisez ce qui peut bloquer : supprimez les styles et scripts inutilisés et gardez le reste léger - voir Minification CSS et JavaScript minifié.

Comment Silktide teste cela

Charger la page dans un vrai navigateur, en utilisant le type d’appareil, la vitesse de connexion et l’emplacement de test configurés pour vos tests de vitesse.
Identifier chaque feuille de style et chaque script qui a bloqué le premier rendu de la page.
Estimer le temps pendant lequel chacun a retardé le rendu, et signaler chaque fichier avec l’économie estimée.
Évaluer la page selon le temps total pouvant être économisé : environ 100 millisecondes entraînent une pénalisation, et 200 millisecondes ou plus sont considérées comme médiocres.

Dépannage

Le CSS ne doit-il pas bloquer le rendu ?

La feuille de style qui pilote le premier écran, oui : c’est volontaire, afin que les visiteurs ne voient jamais de contenu non stylé. La solution n’est pas de supprimer le CSS, mais de réduire ce qui bloque : intégrez la partie critique en ligne et chargez le reste de manière non bloquante.

Le fichier bloquant est un script tiers

Les gestionnaires de balises, les polices et les widgets de chat sont des coupables fréquents. La plupart fonctionnent correctement avec defer ou async - vérifiez les consignes d’intégration actuelles du fournisseur, qui les incluent souvent déjà.