Pourquoi la page reste blanche une seconde

Le navigateur retient la page

Un navigateur ne dessine pas une page tant qu'il n'a pas toutes les feuilles de style indiquées dans l'en-tête. S'il dessinait d'abord et appliquait les styles ensuite, le visiteur verrait le texte brut sauter en place, ce qui est pire. Il attend donc, et chacune de ces feuilles de style est un fichier que le téléphone du visiteur doit télécharger avant que quoi que ce soit n'apparaisse.

Les scripts dans l'en-tête provoquent le même retard, sauf s'ils sont marqués comme différés. Quand le navigateur en rencontre un, il cesse de lire la page, télécharge le script, l'exécute, et ne continue qu'ensuite. Un gestionnaire de balises, un module de chat ou un extrait d'analytique placé dans l'en-tête ajoute une pause avant l'apparition du premier mot.

Les polices sont la troisième cause, et la plus facile à manquer. La page peut être dessinée sans afficher de texte, parce que le texte est composé dans une police web qui n'est pas encore arrivée. La plupart des navigateurs cachent ce texte jusqu'à trois secondes plutôt que de l'afficher dans une police de secours.

Ce que vous montre l'audit gratuit

L'audit gratuit exécute la même mesure de navigateur que Google. Deux chiffres comptent ici. Le premier rendu de contenu est le moment où le premier texte ou la première image apparaît. Le rendu du contenu principal est le moment où l'élément principal de la page apparaît. Si le premier chiffre dépasse environ 1,8 seconde, le visiteur est resté devant une page blanche.

Sous les chiffres se trouve la liste des fichiers que le navigateur a attendus, avec le temps coûté par chacun. Sur la plupart des sites d'organisations, la liste est courte : la feuille de style du thème, deux ou trois feuilles d'extensions, une police d'un service de polices et un script qui aurait dû se trouver en bas de la page.

Correctif un : laisser le texte s'afficher dans une police de remplacement

Une police web peut indiquer au navigateur quoi faire pendant son chargement. Le réglage s'appelle font-display. La valeur swap signifie : afficher le texte tout de suite dans une police de secours, puis basculer quand la vraie police arrive. Les visiteurs voient des mots dès le premier rendu au lieu d'une colonne vide.

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4.woff2") format("woff2");
  font-display: swap;
}

Si votre police vient d'un service de polices, le même réglage est généralement un paramètre du lien fourni par le service. Si elle vient de votre thème, c'est une ligne dans la déclaration de polices du thème. Héberger le fichier de police sur votre propre site évite aussi au téléphone une connexion séparée vers un autre serveur, souvent la partie la plus lente.

Correctif deux : les scripts à la fin, ou différés

Un script qui ne change pas l'apparence de la page a sa place en fin de page, ou dans l'en-tête avec l'attribut defer. Defer indique au navigateur de télécharger le script en arrière-plan et de l'exécuter après le dessin de la page. Analytique, chat, gestionnaires de balises, intégrations sociales et lecteurs vidéo entrent tous dans cette catégorie. Presque rien sur le site d'une organisation n'a besoin de s'exécuter avant le premier rendu.

Sous WordPress, la plupart de ces scripts viennent d'extensions, et la plupart des extensions ne vous laissent aucun réglage sur l'emplacement de leur script. Une extension de cache ou de performance peut tous les différer d'un coup. Testez le site après l'avoir activée, car un script dont dépend un autre script peut provoquer des erreurs s'il s'exécute dans le mauvais ordre.

Correctif trois : moins de feuilles de style sur les pages qui ne les utilisent pas

Une extension de formulaire de contact charge sa feuille de style sur chaque page, pas seulement sur la page de contact. Les extensions de carrousel, de calendrier d'événements et de galerie font de même. Un site avec douze extensions peut demander douze feuilles de style avant de dessiner une page qui n'en utilise aucune. Chaque fichier est petit, mais ensemble ils font l'attente.

Le correctif propre consiste à charger les fichiers de chaque extension uniquement sur les pages qui les utilisent. Certaines extensions ont ce réglage. Pour les autres, une extension de performance peut le faire page par page, ou le thème peut ne les charger que là où il en a besoin, quelques lignes de code pour qui maintient le site. Avant tout cela, il vaut souvent la peine de supprimer les extensions dont personne ne se souvient.

Ce qu'il ne faut pas faire

Ne courez pas après le score. Une page qui se dessine en moins d'une seconde sur un téléphone est réglée, même si l'outil de mesure liste encore des suggestions.

Et n'intégrez pas tous vos styles dans la page elle-même pour économiser des requêtes. Une feuille de style intégrée à chaque page peut atteindre des dizaines de kilooctets et est renvoyée à chaque visite, alors qu'un fichier lié est mis en cache après la première. Nous avons fait exactement cette erreur sur LFW.com et l'avons corrigée cette semaine.