10 façons simples d'augmenter la vitesse du site Web en 2020

La vitesse des pages était autrefois l'un des piliers de base de la conception Web. Dernièrement, il a malheureusement été relégué au second plan en raison de l'augmentation de la bande passante de l'Internet ("alors pourquoi s'embêter ?") et de l'adoption de frameworks frontaux modernes. Cependant, la vitesse du site Web est toujours essentielle à l'expérience utilisateur et à la monétisation, et son impact sur votre site est probablement beaucoup plus important que vous ne le pensez.

L'effet de l'optimisation de votre site Web pour la vitesse en ce qui concerne la monétisation des publicités et l'expérience utilisateur ne peut pas être exagéré. Pour savoir si votre site se comporte bien en termes de vitesse, vous pouvez utiliser l'outil d'audit Chrome ou utiliser des outils tels que GTmetrix ou l'outil de développement de Google.

Dans cet article, nous allons devenir un peu techniques, en vous guidant à travers les dix actions de base qui accéléreront votre site Web pour 2020, ce qui se traduira par une meilleure UX et une meilleure monétisation.

Faites travailler votre serveur pour vous

Une configuration correcte de votre serveur peut grandement améliorer les performances de vitesse. Deux configurations faciles dont vous avez besoin pour vous assurer d'avoir :

1. Compression activée - assurez-vous que la compression GZIP est activée pour tous vos fichiers texte (HTML, JS, CSS, ETC….).
2. HTTP2 – Si votre serveur peut prendre en charge HTTP2, assurez-vous de l'activer.C'est un excellent moyen d'améliorer les performances sans avoir à modifier quoi que ce soit sur le site.
   Découvrez cette démonstration sympa de HTTP2 par Vodien.

Utiliser le chargement paresseux

Le chargement différé est le processus de chargement du contenu uniquement lorsqu'il est sur le point d'être affiché. Cela réduira le téléchargement de nombreux contenus supplémentaires auxquels l'utilisateur n'aura peut-être jamais accès et libérera le navigateur pour améliorer considérablement les performances. La bonne nouvelle est qu'il existe de nombreux packages prêts à l'emploi qui peuvent vous aider à charger rapidement du contenu paresseux. Mieux encore, à partir de Chrome 76 (juillet 2019), le Lazy Loading est intégré nativement à HTML. Ajoutez simplementloading= »lazy » à la balise, et vous avez terminé.

Réduisez la taille de vos fichiers

Minification - Il s'agit du processus de suppression des espaces et des commentaires du code.Ils sont essentiels pour rendre le code lisible pour les humains, mais les ordinateurs n'en ont pas besoin. La réduction peut réduire la taille du fichier de plus de 70 %. Vous devez minifier tous vos fichiers HTML, CSS et JS. Assurez-vous simplement de conserver les originaux au cas où vous auriez besoin d'apporter des modifications. Aujourd'hui, chaque IDE majeur a des plugins qui réduiront vos fichiers pour vous. Si vous utilisez un package comme React, la minification est livrée avec le secouage d'arbres intégré.

Fractionnement des fichiers - Assurez-vous que vos fichiers ne contiennent que ce dont ils ont besoin.Le fractionnement des fichiers permet de réduire la taille des fichiers et de rendre votre projet beaucoup plus facile à gérer.

Optimiser les images

Dimensionner correctement les images – La conception Web réactive est devenue la norme, ce qui entraîne l'affichage d'images dans différentes tailles en fonction de l'écran.Nous pouvons utiliser cela à notre avantage et conserver quelques tailles différentes pour nos images. Il n'est pas nécessaire de télécharger un fichier volumineux si l'image ne peut pas afficher tous ces pixels. La balise image et l'attributsrcsetle rendent super facile à faire.

Ce guide vous guidera à travers quelques bonnes pratiques et des implémentations simples pour dimensionner les images de manière réactive.

Formats de nouvellegénération - Les nouveaux formats d'image qui sont désormais pris en charge sur la plupart des navigateurs peuvent réduire considérablement la taille des fichiers (pas seulement pour les photos).Le format WebP ouvert de Google, par exemple, peut réduire entre 64 % et 92 % la taille du fichier. Dans le cas ci-dessous, nous utilisons des fichiers WebP de 2 tailles différentes et ajoutons une image jpg de secours pour les navigateurs qui ne prennent pas en charge WebP.

Sprites d'image - Un sprite d'image est une image composée de plusieurs petites images.L'utilisation d'un sprite d'image pour tous vos boutons\logo réduira le nombre d'appels au serveur dont vous avez besoin pour charger une page. Si vous utilisez HTTP/1.1, cela améliorera le temps de chargement.

Implémenter une politique de cache côté client

Le temps de chargement des pages peut être considérablement amélioré en demandant au navigateur de conserver les fichiers qu'il a déjà téléchargés. Ceci est pertinent pour les fichiers internes et externes.

Fichiers internes – Ce sont des fichiers réutilisables sur votre site comme des feuilles de style et des logos.Il est d'usage de définir la date d'expiration sur 1 an pour les fichiers qui ne changent pas, tels que les logos, le CSS général et les images avec des identifiants uniques. Si vous avez des fichiers que vous prévoyez de modifier plus souvent, vous pouvez définir une date d'expiration appropriée.

Packages externes – Par exemple, si votre site utilise le package bootstrap, au lieu de télécharger le package sur votre site Web, vous avez la possibilité d'utiliser le CDN.Si vous faites cela, même la première fois que l'utilisateur visite votre site Web, il n'aura probablement pas besoin de télécharger le package car il s'agit d'un package populaire et a peut-être déjà été téléchargé à partir d'un autre site.

Tirez parti de la mise en cache côté serveur

L'idée est la même que dans la mise en cache frontale, évitant à votre serveur de travailler sur des choses qu'il a déjà créées ou qu'il utilise souvent. Si vous avez un site de contenu, vous ne voulez pas que votre base de données soit consultée chaque fois qu'un utilisateur accède au site Web, en raison de la lenteur des performances et des coûts de la base de données. Étant donné que tous les utilisateurs vont voir les mêmes articles, vous pouvez le mettre en cache une fois et continuer à servir la version mise en cache jusqu'à ce que des modifications y soient apportées.

De nombreux packages différents peuvent vous aider, selon la conception de votre serveur. Et, bien sûr, vous pouvez concevoir votre propre mise en cache pour répondre à vos besoins spécifiques.

Utiliser les CDN

Les réseaux de diffusion de contenu contactent votre serveur, mettent en cache la réponse, puis la diffusent localement à vos utilisateurs. À première vue, ils semblent très chers. Cependant, configurer correctement vos CDN devrait réduire vos coûts de service tout en améliorant considérablement les performances.

Évitez les redirections

Évitez les redirections ! Les redirections sont un moyen sûr de tout ralentir. Parfois, ils sont nécessaires, comme lorsque vous redirigez les utilisateurs vers la version sécurisée de votre site (HTTP VS HTTPS) ou lorsque vous déplacez du contenu sur votre site Web mais que vous souhaitez que vos anciens liens SEO continuent à mener au contenu.

Si vous utilisez des redirections, assurez-vous d'éviter les redirections enchaînées. Une redirection chaînée est une redirection qui mène à une autre redirection. Si vous devez rediriger, assurez-vous de ne rediriger qu'une seule fois !

Hiérarchiser et supprimer l'activité de blocage de rendu

Le rendu fait référence au chargement, et lorsque vous regardez votre page Web, la plus haute priorité pour un chargement rapide est les parties au-dessus du pli. Étant donné que le HTML est lu de haut en bas, il est important de pousser les choses qui ne sont pas importantes pour la vue de la première page au-delà des choses qui le sont.

Par exemple, si vous avez une balise JS pour l'analyse, vous pouvez la placer dans le pied de page. De cette façon, vous vous assurez que le navigateur de l'utilisateur traite d'abord les choses que l'utilisateur peut voir et reporte d'autres choses pour plus tard.

Choisissez judicieusement vos partenaires

Sur le web, comme dans la vie, le plus important est de choisir les bons partenaires. Vous pouvez rationaliser votre site et avoir un beau site Web conçu pour fonctionner rapidement. Mais avec un partenaire publicitaire qui ralentit le chargement du site, vous créez une expérience utilisateur intrusive. Il y a un an, nous avons commencé à travailler avec un éditeur dans l'industrie de l'esport, et nous avions du mal à monétiser le site. Après un examen attentif du site, nous avons trouvé un bloc d'annonces si lent qu'il provoquait l'expiration de tous les autres partenaires publicitaires du site. Une fois que le site a supprimé ce partenaire publicitaire, le RPM global par page du site a quadruplé !

Continue d'apprendre

Dans cet article, nous n'avons couvert que quelques conseils rapides. Alors, assurez-vous d'aller plus loin pour des performances accrues. De plus, notre écosystème est en constante évolution. Si vous êtes arrivé jusqu'ici, vous savez probablement qu'il y a toujours quelque chose de nouveau à apprendre.

Je vous conseille de jeter un œil aux deux liens ci-dessous. Je pense qu'ils sont un bon point de départ.

https://www.udacity.com/course/browser-rendering-optimization–ud860

https://medium.com/swlh/what-the-amp-augmenting-my-own-site-with-accelerated-mobile-pages-amp-52927bab7cb8