Comment garder votre site rapide en 6 étapes faciles.

Voici quelques techniques d’accélération de la vitesse du site Web à ne pas manquer.

Si votre site Web n’est pas chargé dans les 3 secondes, vous risquez de perdre des revenus potentiels et de manquer un meilleur classement dans les moteurs de recherche. De même, s’il n’est pas suffisamment sécurisé, vous donnez la possibilité aux pirates de traquer votre site Web pour des pertes de réputation et d’affaires.

Par conséquent, on ne peut échapper aux ajustements de sécurité et de performances pour une expérience utilisateur meilleure et sûre.

Ainsi, lorsque nous parlons d’optimisation des performances, nous entendons des choses comme activer la compression, réduire les fichiers, mettre en cache, utiliser des thèmes légers, conserver un minimum de plugins, etc.

Ils vont bien, mais il y a tellement plus que nous avons répertoriés dans cet article que vous pouvez appliquer à n’importe quelle plate-forme, comme WordPress, Joomla, Magento, Drupal, Node.js, etc.

Voyons ce que vous avez déjà et ce que vous n’avez pas.

Bon forfait d’hébergement

Parfois, la seule erreur que vous faites est de choisir un mauvais hébergeur et un plan d’hébergement mutualisé.

Mais personnellement, je pense qu’il ne s’agit pas de mauvais hôtes. Il s’agit principalement d’abonnements d’hébergement ultra bon marché.

Quelque chose ne va pas lorsque vos factures d’hébergement mensuelles coûtent moins qu’une tasse de café.

Supposons que l’hébergement mutualisé soit un bus surpeuplé dans lequel personne ne veut entrer mais qui s’y glisse de toute façon à cause d’un tarif « attractif ».

Les choses les plus lucratives à propos de l’hébergement mutualisé sont les remises de lancement et l’opacité sans précédent sur le nombre de sites Web partageant un seul serveur.

Permettez-moi de vous dire ceci ; ces nombres sont normalement dans les centaines.

Cela entraîne de fréquents goulots d’étranglement des performances des voisins bruyants, et une grande partie de ces sites Web ne vivent jamais assez pour voir la première page d’une recherche Google.

En conclusion, passez aux VPS ou aux serveurs dédiés pour les projets qui comptent.

Réseau de diffusion de contenu

CDN, abréviation de réseau de diffusion de contenu, vient en deuxième position après avoir choisi un bon forfait d’hébergement Web.

Ceci est nécessaire pour toute personne ayant un public mondial. La raison en est que vous ne pouvez pas héberger un site Web partout ; il reste stationné à un seul endroit. Ainsi, la distance joue un rôle important lorsqu’un utilisateur japonais tente d’accéder à votre site Web hébergé à New York, aux États-Unis.

Cependant, l’abonnement à un CDN comme Cloudflare prend en charge ce problème de localisation. Un CDN héberge des copies de vos sites Web sur son réseau de serveurs et répond aux demandes du serveur le plus proche. Cela réduit la charge sur un serveur central unique qui peut être situé à des océans l’un de l’autre.

De plus, sur la base du CDN, vous pourriez bénéficier d’une sécurité plus élevée que ce qu’un hébergeur ordinaire peut offrir.

Activer IPv6

IPv6 est plus rapide que IPv4. LinkedIn a constaté une amélioration de 40 % en Europe et Facebook d’environ 10 à 15 % en accédant via IPv6.

Veuillez consulter le graphique d’adoption d’IPv6 à l’échelle mondiale par Google.

Environ 42 % des utilisateurs se connectent à Google via IPv6, mais il n’y a que 21,2 % de sites Web compatibles IPv6.

Fait intéressant, Cloudflare a constaté que les pages Web compatibles IPv6 se chargent 27 % plus rapidement que leurs homologues IPv4.

Alors, votre site Web est-il IPv6 ? Pas certain! Vous pouvez le tester en ligne.

Si ce n’est pas le cas, voici comment procéder.

La plupart des fournisseurs de CDN comme Cloudflare, Incapsula, CacheFly, AKAMAI proposent IPv6. Vous pouvez vérifier le panneau de configuration pour les activer.

Si vous n’utilisez pas CDN et l’hébergement sur VPS comme Linode, DigitalOcean, etc., reportez-vous à ceci pour autoriser IPv6 dans les serveurs Web Nginx et Apache.

Avoir IPv6 ne nuit à rien et serait amusant pour un gain rapide d’environ 10 % de diminution du temps de chargement des pages.

Optez pour HTTP/3 ou HTTP/2

HTTP est la technologie évolutive utilisée pour charger des pages Web lorsque nous visitons une URL dans les navigateurs Web.

Tout a commencé avec HTTP/0.9 en 1991 et a été suivi de mises à jour comme HTTP/2 et le meilleur HTTP/3 actuel.

HTTP/2 a apporté de nombreux avantages par rapport à HTTP/1.1, notamment :

  • Poussée du serveur
  • Multiplexage
  • Priorisation des ressources
  • Compression d’en-tête
  • Faible latence

À l’heure actuelle, il est utilisé par 39,3 % des sites Web et est sept fois plus rapide que HTTP/1.1. En passant à HTTP/2, vous pouvez vous attendre à réduire le temps de chargement des pages jusqu’à 30 à 40 %.

Vérifiez si votre site Web est compatible HTTP/2.

Cependant, HTTP/2 a ses propres problèmes.

Par exemple, il souffre d’un blocage en tête de ligne. Ici, tout problème de connexion TCP peut entraîner le blocage de tous les flux. Mais avec le HTTP/3 basé sur UDP, une seule perte de paquet n’affecte pas tous les autres flux.

De plus, HTTP/3 permet une latence plus faible en évitant l’établissement de liaison TLS lors des reconnexions. Dans l’ensemble, HTTP/3 apporte tous les avantages de HTTP/2 mais sans la traînée associée.

Vérifiez si votre site Web est compatible HTTP/3.

Vous pouvez vérifier la prise en charge de HTTP/3 ou HTTP/2 auprès de votre hébergeur. Alternativement, votre fournisseur CDN peut avoir un simple basculement vers votre version HTTP préférée.

Optimisation des images

Personne ne veut traverser un mur de texte qui fait des images une partie inévitable de chaque page Web. D’autre part, avoir des images sur une page Web la rend lourde et augmente le temps de chargement de la page.

Ainsi, la solution demande de servir des images dans un format relativement plus léger comme WebP ou AVIF. Non seulement cela réduit considérablement la taille (plus de 80% dans certains cas), mais la qualité de sortie reste essentiellement la même.

Désormais, soit vous pouvez convertir et télécharger directement dans ces formats de nouvelle génération. Ou, abonnez-vous à un service de conversion tiers, comme Optimole, pour le faire à la volée.

Réduisez les requêtes HTTP excessives

Un site Web ne se charge jamais en un seul morceau. Au lieu de cela, chaque élément, le texte, les images, CSS, JavaScript, etc., se présente sous la forme de requêtes HTTP.

Et toutes choses égales par ailleurs, une page Web avec moins de non. des requêtes HTTP se chargent plus rapidement qu’une en ayant plusieurs.

En conclusion, il est dans notre intérêt de réduire au maximum le nombre de requêtes HTTP.

D’après mon expérience personnelle de WordPress, je peux dire que choisir un thème léger comme Generate Press aide. De plus, réduire le nombre de plugins contribue également à avoir un site web rapide et sécurisé.

Cependant, c’est un sujet à part entière qui mérite une attention particulière.

Plus précisément, cochez cette case pour faire moins de requêtes HTTP si vous avez un site Web WordPress.

Passer aux polices sécurisées pour le Web

Nous voulons tous que nos sites Web soient uniques et conviviaux. Et la première étape consiste à passer à une police différente.

Et heureusement, il existe quelques options gratuites, notamment les polices Google. Cependant, cela ajoutera plusieurs requêtes HTTP. Et pour aggraver les choses, votre site Web reviendra aux polices système si le serveur de polices tiers se déconnecte un jour.

Pour contrer cela, certains webmasters hébergent eux-mêmes des polices sur leurs sites Web, un mouvement vers l’autonomie. Cependant, il ajoute toujours un fichier qui doit être chargé depuis votre serveur vers l’appareil de l’utilisateur. Cela signifie des requêtes HTTP supplémentaires, qui entraînent une baisse des performances, aussi minime soit-elle.

Par conséquent, il existe certaines polices sécurisées pour le Web que vous pouvez utiliser pour une expérience la plus rapide possible sans risquer un échange de polices lors d’une panne de serveur. Ces polices sont appelées polices système et sont courantes sur les PC Windows, les Mac, les systèmes Linux, iOS, Android, etc.

Voici quelques polices Web sécurisées :

  • Arial
  • Verdana
  • Trébuchet-MS
  • Tahoma
  • Times New Roman
  • Géorgie
  • Impact, etc…

Tirer parti de la mise en cache

La mise en cache signifie stocker les données localement. Cela garantit le chargement de site Web le plus rapide possible lors des revisites. Et il est souvent recommandé par les experts de déployer la mise en cache pour réduire les temps de chargement.

Par exemple, WordPress possède de nombreux plugins de cache, tels que WP Fastest Cache. Alternativement, on peut déployer la mise en cache du navigateur en éditant le fichier .htaccess.

Cependant, il est basé sur la plate-forme et il peut y avoir différentes façons de l’implémenter.

Chargement asynchrone

Ceci est une autre page directement issue de mon expérience WordPress personnelle. En fait, ce qui s’est passé, c’est que Google Search Console a émis un avertissement concernant plus de 40 articles de blog qui ont échoué au test Web Vitals de base.

Core Web Vitals est l’évaluation de la page de Google et est important pour tous ceux qui essaient de se classer haut sur son moteur de recherche.

Pour mieux comprendre cela, consultez cette analyse Pagespeed sur l’un des articles de toptips.fr :

Grâce à nos développeurs WordPress, il a passé ces tests avec brio.

Mais sur mon projet personnel, j’échouais particulièrement dans Largest Contentful Paint (LCP) et First Contentful Paint (FCP). Plus précisément, le LCP était de 3,3 secondes et le FCP d’environ 2,4 secondes.

Étant un blogueur avec une formation non informatique, je ne pouvais pas l’optimiser au-delà d’un point. A mon échelle, je cochais toutes les bonnes cases : thème premium, pas de plugins supplémentaires, polices système, images WebP, hébergement cloud, etc.

Ce qui a aidé, c’est une seule bascule dans le plugin WordPress Jetpack boost :

En un mot, il charge le Javascript tiers de manière asynchrone en attachant des attributs asynchrones ou différés sur les balises