Catégories
Astuces et Design

Optimiser CSS pour des chargements de page plus rapides

Il n'y a pas longtemps, j'ai décidé d'améliorer les temps de chargement de mon site Web. Il se charge déjà assez rapidement, mais je savais qu'il y avait encore place à l'amélioration et l'un d'entre eux était le chargement CSS. Je vais vous guider tout au long du processus et vous montrer comment vous pouvez également améliorer vos temps de chargement.

Pourquoi le temps de chargement est-il important?

Car Le temps, c'est de l'argent. Ce proverbe est particulièrement vrai pour les temps de chargement des pages Web. Le temps de chargement de votre page a un impact direct sur vos bénéfices. Les gens sont plus susceptibles d'acheter quelque chose sur une boutique en ligne rapide que sur une boutique lente. Selon une étude Milliseconds faire des millions d'amélioration de 0,1 s sur les sites mobiles a augmenté les conversions de 10,1% et la valeur des commandes de 1,9% sur les sites de voyage. Cela peut représenter beaucoup d'argent.

Ainsi, si vous souhaitez créer une entreprise rentable, ne sous-estimez pas les temps de chargement de vos pages.

REMARQUE: Il y a plus d'études confirmant ce modèle. J'ai utilisé un exemple de l'étude mentionnée ci-dessus car c'est la plus récente que j'ai pu trouver.

Comment le CSS affecte-t-il les temps de chargement

Pour voir comment CSS affecte le temps de chargement d'une page Web, nous devons d'abord savoir comment le navigateur convertit un document HTML en une page Web fonctionnelle.

Tout d'abord, il doit télécharger un document HTML et l'analyser pour créer un DOM (Document Object Model). A chaque fois qu'il rencontre une ressource externe (CSS, JS, images, etc.), il lui attribue une priorité de téléchargement et lance son téléchargement. Les priorités sont importantes car certaines ressources sont essentielles pour rendre une page (par exemple, la feuille de style principale et les fichiers JS) tandis que d'autres peuvent être moins importantes (comme les images ou les feuilles de style pour d'autres types de médias).

Dans le cas du CSS, cette priorité est généralement élevée car des feuilles de style sont nécessaires pour créer CSSOM (CSS Object Model). Pour rendre un navigateur de page Web doit construire à la fois DOM et CSSOM. Sans ces navigateurs, aucun pixel ne sera rendu à l'écran. La raison en est que les styles définissent l'apparence de la page et que le rendu de la page en premier sans eux serait un gaspillage de pouvoirs de traitement et une mauvaise expérience utilisateur. Ce n'est que lorsque le navigateur a à la fois DOM et CSSOM disponibles qu'il peut créer une arborescence de rendu en les combinant et commencer le rendu de l'écran. Bref pas de CSS téléchargé, pas de page rendue.

Comme vous pouvez le voir, CSS a un impact énorme sur le temps de chargement de votre page Web. Il y a deux domaines de base affectant le temps de chargement de la page Web lorsque nous parlons de CSS:

  1. Taille du fichier CSS et quantité totale de CSS sur la page (nombre de fichiers). Les fichiers CSS trop volumineux prendront plus de temps à télécharger et donc la page entière prendra beaucoup plus de temps à s'afficher (il faut attendre que ce gros CSS soit téléchargé en premier).
  2. Quand et comment nous lançons et téléchargeons notre CSS. Vous souhaitez télécharger vos styles dès que possible.

Voyons en détail comment nous pouvons les améliorer.

Limiter la taille de votre feuille de style

TLDR: Configurez correctement vos outils pour utiliser du code moderne dans la mesure du possible.

Si vous souhaitez accélérer les temps de chargement, réduire la taille de vos fichiers CSS est une bonne idée. De nos jours, il est assez courant d’utiliser un outil pour modifier le CSS au moment de la compilation (postprocesseur ou PostCSS) pour fournir des solutions de secours pour les navigateurs plus anciens ou d'autres améliorations.

Je suggérerais de vérifier le code de résultat pour des ballonnements inutiles. Surtout si vous utilisez PostCSS avec plusieurs plugins. Dans mon cas, j'avais du CSS avec des solutions de secours générées pour les variables CSS et avec des préfixes pour la syntaxe plus ancienne de la flexbox. Cela peut sembler un problème trivial avec très peu d'effet, mais les économies résultantes étaient d'environ 3 Ko pour une petite feuille de style comme la mienne. Je pense que c'est une grande amélioration pour très peu de travail. Et pour les grands CSS, il a le potentiel d'avoir un impact encore plus grand.

old index.css:  12.5kB (without GZip)
new index.css: 9.2kB (without GZip, ~26.4% smaller)

Tout ce que j'avais à faire était de mettre à jour une configuration de liste de navigateurs utilisée par Autoprefixer et d'autres outils similaires pour cibler le code généré pour des versions de navigateur spécifiques. J'ai également mis à jour un peu ma configuration PostCSS. (J'ai également ajouté le plugin pour concaténer les requêtes multimédias ensemble pour économiser de l'espace supplémentaire). Voir la configuration PostCSS dans le code source et la définition de ma liste de navigateurs si vous voulez voir ma configuration exacte.

Utilisez le CSS critique

Nous avons donc réduit notre fichier CSS, mais nous devons encore le télécharger. Nous pouvons accélérer le temps de chargement de la page Web en réduisant les demandes réseau. Et les meilleures demandes réseau ne sont pas du tout des demandes. Nous pouvons intégrer nos styles directement dans le HTML pour éviter d'avoir à télécharger des feuilles de style externes et ainsi gagner du temps.

Bien sûr, inclure une feuille de style entière de 9 Ko (ou grande pour les projets plus importants) sur chaque page n'est pas très efficace. Nous n'inclurons donc que les styles nécessaires pour rendre la partie de la page au-dessus du pli et chargez paresseusement le reste des styles. De cette façon, nous pouvons toujours tirer parti de la mise en cache du navigateur pour d'autres pages et accélérer le chargement de notre page Web. Étant donné que nous incluons des styles essentiels pour le rendu de page, cette technique est appelée CSS critique.

Au-dessus du pli se trouve le contenu visible immédiatement après le chargement de la page. Le contenu non visible sans défilement est en dessous d'un pli.

Heureusement, vous n’avez pas à décider quels styles doivent être inclus dans le code HTML. Certains outils le feront pour vous, comme Critical d'Addy Osmani. Veuillez garder à l'esprit que cette technique concerne les compromis. Vous devez trouver le bon équilibre entre ce qu'il faut inclure et la taille du CSS car cette technique vous fera économiser une requête lors du chargement de la page, mais elle agrandit également chaque page (et la rend ainsi plus longue à télécharger). Vous voulez donc expérimenter cela et mesurer les résultats pour trouver la meilleure configuration pour votre site.

Feuilles de style à chargement différé

Puisque nous utilisons Critical CSS, nous voulons charger paresseusement nos feuilles de style pour éviter de bloquer le rendu de la page. À moins que vous n'ayez besoin de prendre en charge certains anciens navigateurs, la solution moderne utilise de nos jours la balise de lien normale que vous utilisez pour les feuilles de style mais avec un type de support différent et un peu de JS. Cette petite astuce est décrite en détail dans le billet de blog de Filament Group. Ci-dessous, vous pouvez voir l'extrait de CSS à chargement paresseux à partir de l'article, mais je suggère de lire le tout.

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

REMARQUE: Si vous utilisez le package Critical ci-dessus, il transforme votre feuille de style pour qu'elle soit automatiquement chargée paresseusement comme ça.

Vous souhaiterez peut-être inclure une solution de secours lorsque JS est désactivé. De cette façon, vos styles se chargeront normalement et vous éviterez le contenu sans style qui affecterait gravement l'expérience utilisateur.

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
<noscript>
<link rel="stylesheet" href="/path/to/my.css" media="screen">
noscript>

Dans les diagrammes en cascade ci-dessous, vous pouvez voir que la page avec CSS critique commence à s'afficher immédiatement (partie violette du graphique dans Fil de discussion principal du navigateur row) et est interactif beaucoup plus tôt que l'ancienne version où le fichier CSS doit d'abord être téléchargé.

La page démarre le rendu après 3,6 secondes et est interactive après 3,8 secondes.
Tableau en cascade pour la page des projets sans pour autant CSS critique.
La page démarre le rendu après 3,2 secondes et est interactive après 3,3 secondes.
Tableau en cascade pour la page des projets avec CSS critique.

Utilisez le fractionnement de code pour vos feuilles de style

Nous avons du CSS avec les propriétés dont nous avons besoin pour les navigateurs modernes et nous utilisons du CSS critique et chargeons le reste. Mais nous pouvons probablement diminuer un peu plus la taille de notre fichier. Dans les outils de développement Chrome, il existe un outil appelé Couverture. Il peut vous montrer quelle partie des fichiers CSS et JS est utilisée sur la page en cours. Ouvrez les outils de développement et appuyez sur Ctrl+Décalage+p pour ouvrir une palette de commandes et saisir Couverture. Sélectionner Afficher la couverture option pour afficher le panneau. Maintenant, rechargez la page.

Rapport de couverture de ma page d'accueil avant toute optimisation, plus de 45% du CSS n'est pas utilisé sur la page.Rapport de couverture de ma page projets avant toute optimisation, plus de 53% du CSS n'est pas utilisé sur la page.

J'avais presque 50% de mon code CSS inutilisé sur la page. Lorsque nous vérifions une autre page, nous obtenons encore plus – près de 54% de CSS inutilisé. C'est beaucoup de code inutile. Et ce nombre peut être encore plus élevé sur les grandes applications héritées.

Lors de l'utilisation de JS, nous utilisons souvent le fractionnement de code pour créer plusieurs fichiers plus petits (bundles). Nous téléchargeons ces bundles en cas de besoin au lieu de récupérer un gros bundle JS lors du chargement de la page. Nous pouvons également utiliser une approche similaire pour CSS. Nous pouvons diviser notre CSS de trois manières différentes.

Diviser le CSS en fonction des requêtes multimédias

Dans cette approche, vous divisez votre gros CSS en feuilles de style plus petites en fonction de vos requêtes multimédias (PostCSS a plugin pour cela) et référencez ces feuilles de style dans votre HTML.

<link rel="stylesheet" href="index.css" media="all" />
<link rel="stylesheet" href="mobile.css" media="(max-width:44.9375rem)" />
<link rel="stylesheet" href="table.css" media="(min-width: 45rem)" />

Sachez que cette approche n’a pas beaucoup de sens lors de l’utilisation de CSS critique et du chargement différé de la feuille de style. Le navigateur téléchargera toutes les feuilles de style, quelle que soit la requête multimédia utilisée. Il utilisera uniquement l'attribut multimédia pour hiérarchiser les téléchargements. Donc, fondamentalement, il téléchargera CSS avec une priorité élevée pour les requêtes multimédias actives et chargera paresseusement le reste des feuilles de style.

Division de code basée sur la page

Une autre approche consiste à utiliser un CSS distinct pour chaque page. Comme nous l'avons vu ci-dessus, il existe de nombreux styles inutilisés pour différentes pages. Ce serait formidable si nous pouvions supprimer ces styles inutilisés et ne conserver que ce qui est nécessaire pour une page donnée. C'est ce que j'ai choisi de faire. Malheureusement, je n'ai trouvé aucun outil pour le faire – prenez un gros fichier CSS et générez un ensemble plus petit pour chaque page en fonction de son contenu.

Cela semble assez simple, alors j'ai décidé de tenter le coup et de créer un script de nœud capable de faire ce genre de chose. Il s’appelle CSS Split et fonctionne très bien pour les sites créés à l’aide d’un générateur de site statique (comme Eleventy que j’utilise pour mon site). Il utilise PurgeCSS pour supprimer les styles inutilisés et devrait donc également fonctionner sur d'autres fichiers non HTML (en fonction de leur documentation). Je ne l'ai pas testé pour autre chose que du HTML, donc lorsque vous l'utilisez de cette façon, assurez-vous de vérifier les résultats.

En utilisant cette technique, j'ai pu réduire la taille de fichier du CSS demandé de près de 50%. Voici quelques statistiques après la mise en œuvre du CSS critique et du fractionnement de code basé sur la page:

single index.css for all pages:      9.2kB (without GZip)
CSS file for homepage: 5.4kB (without GZip)
CSS file for projects: 4.4kB (without GZip)
Rapport de couverture pour ma page d'accueil après le fractionnement du code, seuls environ 400 octets sont inutilisés.Rapport de couverture pour la page de mes projets après la division du code, seuls environ 400 octets sont inutilisés.

Vous pouvez voir qu'il reste des octets inutilisés. Ce n'est pas un problème, car la couverture n'inclut pas les états ou requêtes de survol ou de focus. Il est peu probable que vous obteniez jamais les octets inutilisés à 0.

Division de code basée sur les composants

J'ai reçu cette astuce de Harry Roberts. Nous pouvons également diviser le CSS sur la base des composants et ne charger que progressivement le CSS pour les composants que nous utilisons sur la page (pied de page, en-tête, article, etc.). Vous pouvez en savoir plus sur cette astuce dans l'article de Harry. Cette technique dont je parle est décrite dans la dernière section de l'article. Mais lisez l'article en entier, il est plein d'informations intéressantes sur l'amélioration des performances du réseau CSS que je ne couvre pas ici (je ne pourrais pas mieux l'écrire de toute façon).

Je n’ai toujours pas testé cette technique pour voir dans quelle mesure elle fonctionnera par rapport à ma configuration actuelle, mais elle figure sur ma liste de tâches. Alors restez à l'écoute pour un prochain article.

Résumé

Même si mon site est assez simple et n’a pas trop de place pour des améliorations, en utilisant les techniques mentionnées, j’ai pu accélérer le chargement initial de ma page Web et réduire la taille totale des éléments. Vous pouvez utiliser le même processus pour n’importe quelle page Web afin d’améliorer les performances de chargement (avec probablement de meilleurs résultats pour les projets plus importants).

Ci-dessous, vous pouvez voir quelques résultats finaux après les mises à jour. Les graphiques montrent quel pourcentage de la page a été rendu à quel moment. Ces tests ont été exécutés sur une connexion 3G lente, c'est pourquoi le chargement de la page prend autant de temps.

Graphique comparant le temps de rendu complet de la page d'accueil avant et après les optimisations. La page d'accueil se charge environ 0,2 seconde plus rapidement après les optimisations.
Page d'accueil – comparaison finale
Graphique comparant le temps de rendu complet de la page des projets avant et après les optimisations. La page se charge environ 0,5 seconde plus rapidement après les optimisations.
Page Projets – comparaison finale
Graphique comparant le temps de rendu complet d'un seul article de blog avant et après les optimisations. La page se charge environ 0,6 seconde plus rapidement après les optimisations.
Article unique – comparaison finale

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *