Extraire et intégrer les CSS critiques avec Critical

Milica Mihajlija

Que vous utilisiez une bibliothèque d'interface utilisateur ou que vous fassiez vos styles à la main, les délais d'affichage CSS sont très élevés. En effet, le navigateur doit télécharger et analyser les fichiers CSS avant de pouvoir afficher la page.

Cette galerie de glaces responsive est conçue avec Bootstrap. Les bibliothèques d'UI telles que Bootstrap accélèrent le développement, mais cela s'avère souvent au détriment de la surcharge des ressources CSS, ce qui peut ralentir les temps de chargement. Bootstrap 4 fait 187 Ko, tandis que l'UI sémantique, une autre bibliothèque d'UI, fait 730 Ko non compressée. Même avec la taille réduite et compressée avec gzip, le fichier d'amorçage pèse toujours environ 20 Ko, bien plus que le seuil de 14 Ko pour le premier aller-retour.

L'outil Critical permet d'extraire, de réduire et d'aligner les CSS au-dessus de la ligne de flottaison. Cela permet d'afficher le contenu au-dessus de la ligne de flottaison dès que possible, même si le code CSS d'autres parties de la page n'a pas encore été chargé. Dans cet atelier de programmation, vous allez apprendre à utiliser le module npm de Critical.

Mesurer

• Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran .

Pour exécuter un audit Lighthouse sur ce site:

1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
2. Cliquez sur l'onglet Lighthouse.
3. Cliquez sur Mobile.
4. Cochez la case Performances.
5. Décochez les autres cases de la section "Audits".
6. Cliquez sur Simulation 3G rapide, ralentissement du processeur 4x.
7. Cochez la case Vider l'espace de stockage. Lorsque cette option est sélectionnée, Lighthouse ne charge pas les ressources depuis le cache, ce qui simule l'affichage de la page pour les nouveaux visiteurs.
8. Cliquez sur Run Audits (Exécuter des audits).

Lorsque vous exécutez un audit sur votre machine, les résultats exacts peuvent varier, mais dans la vue en pellicule, vous remarquerez que l'application affiche un écran vide pendant un certain temps avant d'afficher le contenu. C'est pourquoi la métrique First Contentful Paint (FCP) est élevée et pourquoi le score de performances globales n'est pas excellent.

Lighthouse est là pour vous aider à résoudre les problèmes de performances. Vous trouverez des solutions dans la section Opportunités. L'option Éliminer les ressources qui bloquent l'affichage est répertoriée comme une opportunité, et c'est là que les critiques sont importantes.

Optimisation

• Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.

Pour accélérer les choses, Critical est déjà installé et un fichier de configuration vide est inclus dans l'atelier de programmation.

Dans le fichier de configuration critical.js, ajoutez une référence à "Critical" (Critique), puis appelez la fonction critical.generate(). Cette fonction accepte un objet contenant la configuration.

const critical = require('critical');

critical.generate({
    // configuration
},(err, output) => {
  if (err) {
    console.error(err);
  } else if (output) {
    console.log('Generated critical CSS');
  }
});

La gestion des exceptions n'est pas obligatoire, mais c'est un moyen facile d'évaluer le succès de l'opération dans la console.

Configuration critique

Le tableau ci-dessous contient quelques options critiques utiles. Vous pouvez consulter toutes les options disponibles sur GitHub.

Vous trouverez ci-dessous un exemple de configuration permettant d'extraire les fichiers CSS critiques pour plusieurs résolutions. Ajoutez-le à critical.js ou testez-le et modifiez les options.

critical.generate({
  base: 'public/',
  src: './index.html',
  dest: './index.html',
  inline: true,
  dimensions: [
    {
      height: 500,
      width: 300,
    },
    {
      height: 720,
      width: 1280,
    },
  ]
}, (err, output) => {
  if (err) {
    console.error(err);
  } else if (output) {
    console.log('Generated critical CSS');
  }
});

Dans cet exemple, index.html est à la fois le fichier source et le fichier de destination, car l'option inline est définie sur "true". L'élément "Critical" commence par lire le fichier source HTML, extrait le CSS critique, puis remplace index.html par le CSS critique intégré dans <head>.

Le tableau dimensions comporte deux tailles de fenêtre d'affichage spécifiées: 300 x 500 pour les très petits écrans et 1 280 x 720 pour les écrans d'ordinateurs portables standards.

L'option minify est omise, car "Critical" réduit automatiquement la taille du code CSS extrait lorsque plusieurs tailles de fenêtre d'affichage sont spécifiées.

Exécution critique

Ajoutez les éléments essentiels à vos scripts dans package.json:

scripts: {
  "start": "node server.js",
  "critical": "node critical.js"
}

1. Cliquez sur Terminal (remarque: si le bouton "Terminal" ne s'affiche pas, vous devrez peut-être utiliser l'option "Plein écran").

Pour générer le code CSS essentiel, exécutez la commande suivante dans la console:

npm run critical
refresh

Dans la balise <head> de index.html, le code CSS critique généré est placé entre les balises <style>, suivi d'un script qui charge le reste du CSS de manière asynchrone.

Mesurer à nouveau

Suivez la procédure indiquée au début de l'atelier de programmation pour réexécuter l'audit de performances Lighthouse. Les résultats obtenus doivent ressembler à ce qui suit: