Blog

Supposons que vous utilisez Gatsby. Vous vous demandez ce que vous pouvez faire pour réduire le poids des pages et augmenter les performances de votre site Web?

Dans Gatsby, les plugins sont des outils essentiels conçus pour vous aider à réduire et à analyser le poids des pages de votre site.

Sachant que Gatsby gère parfaitement le pré-chargement des ressources pour les utilisateurs, l’optimisation des images, minification de chaqu’une des pages du site... Néanmoins, reste encore des choses que nous pouvons faire pour améliorer la performance via les plugins suivants : 

gatsby-plugin-preact : 

Gatsby est construit sur React, qui est lourd d'optimisation pour l'exécution des sites, nous pouvons passer à l'alternative ‘Preact’. Il ne pèse que 3 Ko et optimise le poids du code et le chargement initial de la page.

 

gatsby-plugin-preload-fonts

Par défaut, lorsque le navigateur construit l'arborescence de rendu DOM, les demandes de polices Web sont retardées jusqu'à ce que des ressources critiques aient été demandées (dans ce cas en CSS). Cela peut conduire à une situation où le rendu du texte est retardé jusqu'à ce que la police Web particulière ait été demandée.

Installer `gatsby-plugin-preload-fonts` et l'ajouter à votre` gatsby-config.js` pré-chargera automatiquement toutes les polices Web nécessaires pour vous.

gatsby-plugin-web-font-loader

Une des techniques pour éviter des problèmes de chargement de polices externes cela consiste à charger les polices de manière asynchrone, c'est exactement ce que fait la bibliothèque Web Font Loader développée par Google et Typekit, il vous donne par la suite des événements pour contrôler le chargement des polices.

gatsby-plugin-offline

Une mauvaise connexion réseau peut augmenter le temps de chargement d'un site Web. Une façon de résoudre ce problème consiste à permettre au site Web de fonctionner hors ligne afin que lorsque le réseau d'utilisateurs est perturbé, le site Web puisse toujours fonctionner comme il se doit.

La solution à ce problème consiste à mettre en cache les actifs du site Web à l'aide de Service Workers et à les rendre disponibles lorsque l'appareil des utilisateurs à une mauvaise connexion réseau ou est hors ligne.

`gatsby-plugin-offline` est un plugin conçu pour gérer l'implémentation des Services Workers dans les sites Web construits par Gatsby.
 

gatsby-plugin-purgecss

`gatsby-plugin-purgecss` apporte la puissance de PurgeCSS à votre site Web Gatsby, la solution consiste à se débarrasser de tous les CSS inutilisés de la page.

Lors de la création d'un site Web, vous pouvez choisir d'utiliser un cadre CSS comme Tailwind ou Bootstrap pour améliorer le style de votre site Web. Le plus souvent, une grande partie de ces bibliothèques n'est pas utilisée. Néanmoins, ceux-ci contribuent au poids total de la page et augmenteraient les temps de chargement de la page, le plugin gatsby-plugin-purgecss est un outil qui analyse votre contenu et supprime tous les CSS inutilisés

gatsby-plugin-guess-js
Guess.js est une bibliothèque qui télécharge un fichier à partir de Google Analytics pendant la génération de production. Ce fichier est ensuite utilisé pour construire le modèle d'analyse prédictive, du coup la bibliothèque apporte une vraie puissance d’analyse pour améliorer l'expérience utilisateur d'un site.