Extraire et intégrer les CSS critiques avec Critical

Milica Mihajlija

Que vous utilisiez une bibliothèque d'interface utilisateur ou que vous créiez manuellement vos styles, les retards d'affichage CSS étaient importants, car le navigateur doit télécharger et analyser les fichiers CSS avant de pouvoir afficher la page.

Cette galerie de glaces réactives a été créée avec Bootstrap. Les bibliothèques d'interface utilisateur telles que Bootstrap accélèrent le développement, mais cela se fait souvent au détriment d'un CSS gonflé et inutile, ce qui peut ralentir vos temps de chargement. Bootstrap 4 fait 187 Ko, tandis que Semantic UI, une autre bibliothèque d'UI, fait 730 Ko non compressés. Même lorsqu'elle est réduite et compressée avec gzip, Bootstrap pèse toujours environ 20 Ko, bien au-delà du seuil de 14 Ko pour le premier aller-retour.

Critical est un outil qui extrait, réduit et insère le 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 CSS pour 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. Appuyez ensuite sur Plein écran

Pour effectuer 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 (Phare).
3. Cliquez sur Mobile.
4. Cochez la case Performances.
5. Décochez les autres cases de la section "Audits" (Audits).
6. Cliquez sur Simulée de 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 du cache, ce qui simule la façon dont les nouveaux visiteurs découvriraient la page.
8. Cliquez sur Exécuter des audits.

Lorsque vous exécutez un audit sur votre ordinateur, les résultats exacts peuvent varier, mais dans la vue filmstrip, vous remarquerez que l'application affiche un écran vide pendant un certain temps avant d'afficher enfin le contenu. C'est pourquoi le First Contentful Paint (FCP) est élevé et que le score de performances global n'est pas très bon.

Lighthouse vous aide à résoudre les problèmes de performances. Recherchez des solutions dans la section Opportunités. L'option Éliminer les ressources bloquant l'affichage est répertoriée comme une opportunité, et c'est là qu'intervient la fonctionnalité Critical.

Optimiser

• Cliquez sur Remixer pour modifier pour rendre le projet modifiable.

Pour aller plus vite, 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 erreurs n'est pas obligatoire, mais elle permet de facilement évaluer la réussite de l'opération dans la console.

Configurer Critical

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

Vous trouverez ci-dessous un exemple de configuration permettant d'extraire le code CSS critique pour plusieurs résolutions. Ajoutez-le à critical.js ou jouez avec 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" lit d'abord le fichier source HTML, extrait le code CSS critique, puis remplace index.html par le code CSS critique intégré à <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'ordinateur portable standard.

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

Exécuter une tâche critique

Ajoutez "Critical" à 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 du CSS critique, dans la console, exécutez la commande suivante :

npm run critical
refresh

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

Mesurer de nouveau

Suivez les étapes du début de l'atelier de programmation pour relancer l'audit des performances Lighthouse. Les résultats ressembleront à ceci :