Ressources bloquant le rendu

Silktide recherche les feuilles de style et les scripts que le navigateur doit entièrement télécharger avant de pouvoir afficher quoi que ce soit sur votre page. Chacune d’elles laisse vos 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’affichera rien tant que le fichier n’est pas arrivé, car il pourrait modifier l’apparence ou le comportement de l’ensemble.

Pourquoi c’est important

Les moments de blanc avant l’apparition initiale d’une page sont ceux où les visiteurs décident d’attendre ou non. Chaque fichier bloquant ajoute un aller-retour réseau à ce temps mort, et les retards s’accumulent rapidement sur les connexions mobiles — quelques fichiers bloquants peuvent maintenir une page autrement rapide sur un écran blanc pendant des 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 des scripts n’ont pas besoin de s’exécuter avant que la page n’apparaisse.

Comment le corriger

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

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

<!-- Corrigé : 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.
Ajoutez 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 du CSS et JavaScript minifié.

Comment Silktide vérifie cela

Chargez 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.
Identifiez chaque feuille de style et chaque script qui ont bloqué le premier affichage de la page.
Estimez le temps pendant lequel chacun a retardé le rendu, et signalez chaque fichier avec l’économie estimée.
Attribuez une note à la page en fonction du temps total pouvant être économisé : environ 100 millisecondes seront pénalisées, et 200 millisecondes ou plus seront considérées comme médiocres.

Dépannage

Le CSS ne doit-il pas bloquer le rendu ?

La feuille de style qui gère le premier écran, oui — c’est voulu, pour que les visiteurs ne voient jamais de contenu non stylisé. La solution n’est pas de supprimer le CSS, mais de réduire ce qui bloque : intégrez en ligne la partie critique et chargez le reste de façon non bloquante.

Le fichier bloquant est un script tiers

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