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 les feuilles de style nommées dans l'en-tête. S'il dessinait d'abord et stylait ensuite, le visiteur verrait le texte brut sauter jusqu'à sa forme finale, ce qui est pire. Alors il attend. Chaque feuille de style demandée par l'en-tête est un fichier que le téléphone du visiteur doit récupérer avant que quoi que ce soit n'apparaisse.

Les scripts dans l'en-tête font la même chose, sauf s'ils sont marqués comme différés. Le navigateur cesse de lire la page quand il en rencontre un, le récupère, l'exécute, et continue seulement ensuite. Un gestionnaire de balises, un module de chat ou un extrait d'analytique placé dans l'en-tête, c'est une pause avant le premier mot.

Les polices sont la troisième cause, et la plus sournoise. Une page peut être dessinée et ne montrer aucun texte, parce que le texte est composé dans une police web qui n'est pas arrivée, et que le comportement par défaut de la plupart des navigateurs est de cacher le texte jusqu'à trois secondes plutôt que de l'afficher dans une police de remplacement.

Ce que vous montre l'audit gratuit

L'audit gratuit exécute la même mesure de navigateur que Google. Deux chiffres comptent pour ce problème. 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 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

Un fichier de police peut déclarer comment le navigateur doit se comporter pendant son chargement. Le réglage s'appelle font-display, et la valeur swap signifie : afficher le texte maintenant dans une police de secours et basculer quand la vraie 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 la 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 d'un thème, c'est une ligne dans la déclaration de polices du thème. Héberger le fichier de police soi-même supprime une connexion séparée vers un autre serveur, ce qui, sur un téléphone, est 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, qui dit au navigateur de le récupérer 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 arrivent par des extensions, et la plupart des extensions n'offrent aucun réglage sur l'emplacement de leur script. Une extension de cache ou de performance peut les différer en bloc. Testez le site après l'avoir activée, car un script dont dépend un autre script protestera 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. Idem pour l'extension de carrousel, le calendrier d'événements, la galerie. Un site avec douze extensions peut demander douze feuilles de style avant de dessiner une page qui n'en utilise aucune. Chacune est petite. Ensemble, elles sont l'attente.

Le correctif propre consiste à charger les ressources 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 les charger conditionnellement, quelques lignes pour qui maintient le site. Le correctif brutal, supprimer les extensions dont personne ne se souvient, vaut souvent la peine d'être fait en premier.

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 tout dans la page pour éviter des requêtes : une feuille de style qui enfle jusqu'à des dizaines de kilooctets dans chaque page est renvoyée à chaque visite, alors qu'un fichier lié aurait été mis en cache après la première. Nous avons fait exactement cette erreur sur LFW.com et l'avons corrigée cette semaine.