4) minification CSS
La réduction des fichiers CSS est une autre activité qui peut vous faire gagner de précieuses millisecondes. La pratique montre que CSS est souvent beaucoup plus volumineux que nécessaire. Par conséquent, vous pouvez réduire votre CSS sans douleur sans crainte de perdre quoi que ce soit.
Si vous exploitez un petit site Web, qui n’est pas mis à jour fréquemment, envisagez d’utiliser un outil en ligne tel que CSSNano pour la minification CSS. Insérez simplement le code dans l’outil et attendez qu’il vous fournisse la version simplifiée de votre code CSS – aussi simple que cela. De tels minificateurs font un très bon travail de réduction du nombre d’octets. Par exemple, ils peuvent réduire la valeur de couleur # 000000 à seulement # 000, ce qui constitue une très bonne économie s’il existe de nombreuses valeurs de couleur comme celle-ci.
5) Minification JavaScript
Tout comme CSS, les ressources JavaScript doivent également être minimisées. Ce que vous devez faire, c’est consulter votre code JavaScript et supprimer toutes les données redondantes telles que les commentaires de code, le code inutilisé, les sauts de ligne et les symboles d’espacement.
Et tout comme avec la minification CSS, le moyen le plus rapide et le moins pénible de supprimer les données inutiles de votre code consiste à utiliser un minificateur en ligne. UglifyJS est hautement recommandé. De plus, vous pouvez configurer un processus qui réduit les fichiers de développement et les enregistre dans un répertoire de production chaque fois que vous déployez une nouvelle version.
6) Encodage des images
Je pense qu’il est clair que plus la taille de votre contenu est petite, moins il faut de temps pour télécharger la ressource. L’optimisation des images est une autre activité extrêmement importante qui peut réduire la charge totale de votre page de 80%. De plus, l’activation de la compression réduit l’utilisation des données pour le client ainsi que le temps de rendu de vos pages.
Compresser chaque image que vous téléchargez sur votre site peut être un processus très fastidieux. Mais plus important encore, il est très facile de l’oublier. Par conséquent, il est toujours préférable d’automatiser la compression d’image et de l’oublier définitivement. Alors faites-vous une immense faveur et utilisez imagemin ou libvips pour votre processus de construction. N’oubliez pas que plus la taille du fichier de vos images est importante, plus l’expérience réseau que vous offrez à vos utilisateurs est fluide, en particulier sur les appareils mobiles.
7) compression de texte
Le contenu textuel de votre site Web est une autre chose qui peut augmenter la taille en octets des réponses du réseau. Et comme vous le savez déjà, moins le nombre d’octets à télécharger est élevé, plus votre page se charge rapidement.
Google recommande vivement de compresser toutes les données compressibles en gz, et tous les navigateurs modernes suggèrent une compression gzip pour toutes les requêtes HTTP. En réalité, le fait de compresser des ressources peut réduire la taille de la réponse transférée jusqu’à 90%. Cela réduira également la durée du premier rendu de vos pages, ainsi que l’utilisation des données par le client.
Veillez donc à consulter ces exemples de fichiers de configuration pour les serveurs les plus populaires. Après cela, recherchez votre serveur dans la liste, passez à la section gzip et confirmez que votre serveur est configuré avec les paramètres recommandés.
Au lieu de gzip, vous pouvez également utiliser Brotli, qui est l’un des formats de données sans perte les plus récents. Contrairement au format gzip, Brotli présente de bien meilleures caractéristiques de compression. Mais il y a un inconvénient: plus le niveau de compression est élevé, plus le navigateur aura besoin de ressources pour le faire. C’est pourquoi tous les avantages en termes de taille de Brotli seront complètement annulés par le temps de réponse du serveur. Par conséquent, je ne recommanderais pas d’aller au-delà du 4ème niveau de compression (Brotli a 10 niveaux de compression) pour les actifs dynamiques. Toutefois, avec les actifs statiques que vous pré-compressez à l’avance, vous pouvez implémenter le niveau de compression le plus élevé.
8) Préchargement des demandes de clé
Comme vous le savez, il appartient aux navigateurs de choisir les ressources à charger en premier. Par conséquent, ils tentent souvent de charger les ressources les plus importantes telles que CSS avant les scripts et les images, par exemple. Malheureusement, ce n’est pas toujours la meilleure façon de faire. En préchargeant les ressources, vous pouvez modifier la priorité de chargement du contenu dans les navigateurs modernes en leur indiquant ce dont vous aurez besoin ultérieurement.
À l’aide de la balise <link rel = « preload »>, vous pouvez informer le navigateur qu’une ressource est nécessaire dans le code responsable du rendu du contenu ci-dessus, et lui permettre d’extraire la ressource dès que possible.
Voici un exemple d’utilisation de la balise:
<link rel = « preload » as = « script » href = « super-important.js »>
<link rel = « précharge » as = « style » href = « critical.css »>
Veuillez noter que la ressource sera chargée avec la même priorité. La différence est que le téléchargement commencera plus tôt car le navigateur connaît le préchargement à l’avance. Pour des instructions plus détaillées, veuillez consulter ce guide sur la priorisation des ressources.
