7 astuces d’optimisation pour un site performant

A l’instar du temps, les avancées technologiques ne cessent d’évoluer tout comme la tolérance des utilisateurs du Web. Si les enfants de la génération Y se contentaient d’un Nokia 3310 à 15 ans, ceux de la génération Z implorent leurs parents de leur acheter l’iPhone X à 10 ans. Cette notion de « tolérance » est identique quant à la vitesse de chargement d’un site Web. On utilise tous Internet, on navigue de sites en sites avec une facilité déconcertante et il n’y a rien de plus irritant qu’une page qui prend une éternité à se charger. Notre patience se limite progressivement, voilà pourquoi un site qui fonctionne à une vitesse optimale est devenu une priorité. 

Parce qu’on aimerait tous une homepage qui s’affiche aussi vite qu’un clic, voici 7 méthodes pour accélérer le chargement de votre site Web

1 / Activer la compression Gzip

La compression Gzip est un algorithme qui compresses les fichiers de votre site Web et permet un envoi plus rapide au destinataire. Une fois reçus, ces derniers sont décompressés par le navigateur de l’internaute.
C’est un « processus d’encodage d’informations en utilisant moins de bits » résume Ilya Grigorik, véritable gourou du développement Web.  

Compression GZIP

Pour faire simple, comparons la compression Gzip à un courrier plié en forme d’avion en papier. L’avion atteint plus facilement son destinataire qui n’aura qu’à le déplier pour lire en le contenu alors qu’une une lettre non pliée serait ralentie par le vent.

Les pages HTML et autres fichiers étant compressés, leurs tailles se voient au même titre réduites jusqu’à 70% tandis que leur vitesse de transmission se voit considérablement augmentée. Vous l’aurez compris, une fois activé sur le serveur, la compression Gzip est un des premiers outils permettant l’accélération du chargement de sa page Web.

2 / Choisissez le https (protocole HTTP2) plutôt que le http (protocole HTTP 1.0)

Depuis les années 1990, HTTP (HyperText Transfer Protocol) est le protocole phare qui permet le World Wide Web, les adresses Web et également le langage HTML. Sans son existence, on ne passerait pas nos soirées à regarder des vidéos de chats sur Youtube et on n’aurait jamais connu tous ces poètes émergents de Skyblog car le HTTP c’est tout bonnement ce qui permet le transfert de données d’un endroit A à un endroit B. Il permet l’Internet tel que nous le connaissons.

Le protocole HTTP est de type client-serveur, c’est-à-dire le serveur transmet ses données à un navigateur Web qui le retransmettra à un utilisateur. Étant donné que les pages Web et les différents formats de contenu multimédia requièrent constamment une vitesse de chargement plus élevée, ce protocole est devenu obsolète ce qui a mené à la création du HTTP 2.0.

Http et https

Comme son nom l’indique, ce n’est qu’une version 2 ; il n’y a aucun grand écart si ce n’est la quinzaine d’année qui sépare les deux (mais n’avons-nous pas attendu 20 ans pour la suite de la Poupée Chucky ???).

La différence entre les deux frères HTTP se fait surtout au niveau de leur relation avec le TCP (le protocole de contrôle des transmissions). Alors que l’un va ouvrir plusieurs connections parallèles et de manière simultanée vers le serveur, l’autre va plutôt regrouper tous ses échanges avec le serveur en une seule connexion. C’est donc le même principe que la compression : on optimise via ce protocole la vitesse de chargement de la page, surtout sur les terminaux mobiles qui possèdent des ressources plus limitées.

Le HTTP2 est maintenant proposé en standard chez tous les hébergeurs (ou plutôt : si votre hébergeur ne vous le propose pas, changez) mais pour en profiter il faut bien avoir son site en https. N’oubliez donc pas de mettre en place le https sur le serveur pour en bénéficier, ce serait dommage !

3 / Concaténez vos fichiers CSS et JS

Multiplier les fichiers engendre des coûts de temps, payés en millisecondes lors du chargement de la page.

Le concept repose sur l’assemblage de différents fichiers de même nature en un seul, afin d’avoir moins de fichiers finaux à télécharger lors du chargement d’une page Web.

  • Le TCP  : comme mentionné précédemment, le HTTP fonctionne avec le TCP un autre protocole qui gère la vitesse de transmission des données. Recourir à la concaténation vous permet d’envoyer un seul fichier, plutôt qu’une multitude de petits fichiers pour optimiser la vitesse de transmissions.
  • Les multiples connexions parallèles : le protocole HTTP permettant uniquement entre 8 et 12 téléchargement à la fois vers un serveur, la concaténation libère des canaux pour télécharger les autres datas composant la page.

Le CSS et le JS se concaténant très facilement, il vous suffit juste de créer et mettre bout à bout le fichier final possédant le contenu et les fichiers initiaux. Ainsi, seul le fichier le plus gros sera calculé à vitesse proportionnelle mais le reste sera téléchargé à la vitesse  maximale.

4 / Ayez le contrôle du cache navigateur :

Le chargement du site sera moins couteux car il y aura moins d’appel au serveur et offrira donc un affichage plus rapide.

Le cache navigateur est une option qui permet de sauvegarder les données réutilisables à la consultation d’une page de site Web. Il sert notamment à charger plus rapidement une page Web déjà consultée auparavant en chargeant certains contenus de la version préalablement enregistrés dans le cache de votre navigateur. En d’autres termes, il évite au navigateur de demander une nouvelle requête au serveur pour consulter cette page si une version a déjà été mémorisée.

Attention toutefois, il est nécessaire en parallèle de déterminer une durée de conservation de données, car l’accumulation de ces dernières engendrera l’effet inverse de ce que vous désirez. En effet, la saturation des datas va tout bonnement ralentir le chargement de la page.

5 / Activez votre cache serveur : 

Le cache est un espace de données grande vitesse qui stocke un ensemble de sous-données de manière à ce qu’elles soient rapidement réutilisées lors de leur demandes. La mise en cache permet d’accéder et réutiliser efficacement ces mêmes data qui ont été conservées au préalable. L’exemple le plus commun demeure lorsque l’on vous demande si vous souhaitez enregistrer vos identifiants et vos mots de passe, qui seront déjà présents lors de votre prochaine connexion.

Le principe repose sur le stockage des données mises en cache sur la RAM, le premier niveau de mémoire, la mémoire vive, afin d’accélérer les performances de récupération des datas et d’éviter que cette récupération passe par des couches de stockages plus profondes, donc plus lentes.

Ainsi, le fait de simplement charger les données enregistrées en local sans encore les télécharger en ligne booste les transferts de données et permettent un affiches des contenus web plus rapide.

6 / Utilisez des images WebP plutôt que les autres formats traditionnels (JPEG, PNG, etc.) :

Toujours dans la même logique d’utiliser des fichiers légers pour optimiser le temps de chargement d’une page Web, nous retrouvons le format WebP qui fait parler de lui sur le Net. Introduit en 2010 par Google, ce format a été conçu par la multinationale spécialement pour le Web.

Le format Webp

Il exploite principalement un algorithme de compression avec perte ce qui permet une réduction du poids des fichiers medias.

Selon Google, ce format moderne est 25 à 34% plus petit qu’une image JPEG lorsqu’il est compressé avec perte et demeure tout de même 26% plus petit qu’une image JPEG même lorsqu’il est sans perte. C’est pour cela que l’utilisation du WebP doit systématiquement être envisagé et favorisé lors du développement d’une page WebP d’autant plus qu’il est déjà compatible avec les moteurs de recherche les plus utilisés du Web.

7 / Mettez en place un CDN

Un CDN ou Content Delivery Network (et non Crédit du Nord) désigne un ensemble de serveurs dispersés dans le monde et mis en relation à travers une connexion Internet. Essentiel pour développer votre application ou votre site  à l’international, il demeure avant tout un excellent moyen d’optimiser la vitesse de chargement de votre page Web.

Le principe est extrêmement simple. Ce serait très embêtant de se déplacer jusqu’à la mairie au centre-ville pour juste remplir de la paperasse. Cela prendrait du temps aux citoyens et les bureaux seraient complètement saturés. C’est la raison pour laquelle il existe des relais de mairiedispersés dans chaque recoin d’une commune. L’objectif ; gagner du temps !

Le CDN reprend le même schéma. Afin d’éviter que la requête d’un utilisateur ait à parcourir la distance totale entre la device et le lieu d’hébergement, il va être transmis au point de relais le plus proche, géographiquement parlant, avant d’être redirigé vers le serveur principal.

Il est donc évident que l’hébergement principal sera soulagé et offrira à l’utilisateur une vitesse de chargement relativement plus rapide.