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 surchargé 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, compte 730 Ko sans compression. 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 (Critique) est un outil qui extrait, réduit et intègre le code 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 apprendrez à utiliser le module npm de Critical.
Mesurer
- Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur
Plein écran
Pour exécuter un audit Lighthouse sur ce site:
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
- Cliquez sur l'onglet Lighthouse.
- Cliquez sur Mobile.
- Cochez la case Performances.
- Décochez les autres cases dans la section "Audits".
- Cliquez sur Simulée de 3G rapide, Ralentissement du processeur 4x.
- 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.
- 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 la métrique First Contentful Paint (FCP) est élevée et pourquoi le score de performance globale n'est pas excellent.
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 Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
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 d'évaluer facilement la réussite d'une opération dans la console.
Configurer les applications critiques
Le tableau ci-dessous contient des options essentielles utiles. Vous pouvez consulter toutes les options disponibles sur GitHub.
| Option | Type | Explication |
|---|---|---|
base |
chaîne | Répertoire de base de vos fichiers. |
src |
chaîne | fichier HTML source. |
dest |
chaîne | Cible du fichier de sortie. Si CSS est intégré, le fichier de sortie est HTML. Si ce n'est pas le cas, vous obtenez un fichier CSS. |
width, height |
numéros | Largeur et hauteur de la fenêtre d'affichage en pixels |
dimensions |
tableau | Contient des objets avec des propriétés de largeur et de hauteur. Ces objets représentent les fenêtres d'affichage que vous souhaitez cibler avec le CSS dans la partie au-dessus de la ligne de flottaison. Si votre CSS comporte des requêtes média, cela vous permet de générer du code CSS essentiel qui couvre plusieurs tailles de fenêtre d'affichage. |
inline |
booléen | Si cette règle est définie sur "true", le code CSS critique généré est intégré au fichier source HTML. |
minify |
booléen | Si cette règle est définie sur "True", "Critical minimise" réduit la taille du code CSS critique généré. Peut être omis lors de l'extraction du code CSS critique pour plusieurs résolutions, car il réduit automatiquement sa taille pour éviter d'inclure des règles en double. |
Vous trouverez ci-dessous un exemple de configuration permettant d'extraire le code CSS critique pour plusieurs résolutions. Ajoutez-le à critical.js ou amusez-vous et ajustez 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 un test critique
Ajoutez les éléments essentiels à vos scripts dans package.json:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- 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, dans la console, exécutez la commande suivante:
npm run critical
refresh
Désormais, dans la balise <head> de index.html, le code 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 à nouveau
Suivez les étapes indiquées au début de l'atelier de programmation pour réexécuter un audit de performances Lighthouse. Les résultats que vous obtiendrez ressembleront à ceci:
