7 façons d'accélérer votre site web dès maintenant

Avant toute chose, il est essentiel de savoir précisément si votre site est rapide ou lent. Nous avons déjà établi que la cible idéale se situe entre 2 et 3 secondes de chargement. Malheureusement pour les internautes du monde entier, la majorité des sites n’atteignent pas cet objectif. En effet, Google a analysé des centaines de milliers de pages d’atterrissage dans 126 pays et a constaté que 70 % d’entre elles mettaient jusqu’à sept secondes à charger.

Aïe.

C’est lamentable. La mauvaise nouvelle, c’est qu’il y a littéralement des millions de marketeurs en ligne qui laissent de l’argent sur la table. Beaucoup d’argent. S’ils savaient combien, ils en pleureraient sûrement. La bonne nouvelle, c’est qu’il ne devrait pas être trop difficile de sortir votre site web de la médiocrité et de le faire entrer dans la catégorie des sites qui chargent en trois secondes ou moins.

Comment savoir combien de temps met réellement votre site à charger ? Rendez-vous sur l’outil de test Pingdom – c’est gratuit – et entrez l’URL de votre site. Quelques secondes (ou plus) plus tard, vous aurez tous les détails. Il sera alors temps de retrousser vos manches et de passer à l’action.

#1 Rendez votre serveur heureux avec moins de requêtes HTTP

Ce petit texte sur votre site ne demande pratiquement aucun effort pour être téléchargé sur le navigateur d’un visiteur. Ce qui crée des ralentissements, ce sont tous les autres éléments qui entrent en jeu : scripts, images, vidéos et feuilles de style. Pour chaque type d’élément affiché sur une page web, une requête séparée est envoyée au serveur pour le télécharger. Les webdesigners font souvent l’erreur de simplement mettre trop de “contenu” sur une page. Sans s’en rendre compte, ils consomment une quantité incroyable de bande passante et, au final, se retrouvent dans les 70 % de sites qui prennent plus de quatre secondes à charger.

Si vous vous dites “Je dois réduire les requêtes HTTP”, vous avez raison ! C’est vraiment aussi simple que cela. Moins de requêtes HTTP signifie, toutes choses égales par ailleurs, un site qui charge plus vite. Cela veut aussi dire qu’il faut vraiment réfléchir aux éléments présents sur votre site et à leur utilité réelle. Chacun d’eux implique une requête serveur distincte.

Vous êtes curieux du nombre de requêtes que votre site effectue actuellement ? Consultez les résultats détaillés de Pingdom, vous y trouverez la réponse. Qu’est-ce qui est “trop” ? Il n’y a pas de règle absolue. Analysez votre site et décidez si un élément est vraiment indispensable. Sinon, supprimez-le.

#2 Optimisez ces images qui volent votre bande passante

Aux débuts de l’ère Internet, les images étaient rares et le texte régnait en maître. Avec l’évolution des technologies, notamment en matière de vitesse de connexion, les propriétaires de sites ont tendance à abuser des images. Bien utilisées, ce n’est pas une mauvaise stratégie. Rien n’attire autant l’attention d’un visiteur qu’une image séduisante (palmiers et chiots fonctionnent bien !).

Le problème, c’est que les photos issues de deux sources courantes – les smartphones et les banques d’images en ligne – font souvent plusieurs mégaoctets et engloutissent la bande passante comme un monstre affamé. Une fois que vous en insérez quelques-unes dans des dizaines ou des centaines d’articles, votre site ralentit considérablement.

Heureusement, la solution est simple : utilisez un éditeur graphique comme Photoshop ou Pixlr (une alternative en ligne gratuite), si vous ne souhaitez pas investir dans un logiciel coûteux. Pour les grandes images, privilégiez généralement le format .jpeg (.jpg) et essayez de réduire la taille à 100 kilooctets ou moins. Évidemment, on pourrait écrire des volumes entiers sur la résolution d’image, mais pour l’instant, retenez que réduire le poids des fichiers accélérera votre site.

#3 Mise en cache du navigateur = visiteurs fidèles satisfaits

Si le serveur le demande, la plupart des navigateurs peuvent “cacher” ou enregistrer des fichiers en mémoire temporaire jusqu’à leur prochaine utilisation. Voici comment cela fonctionne :

• Un visiteur arrive pour la première fois sur votre site.
• Le serveur demande au navigateur de “retenir” certains éléments statiques comme les logos, images et textes.
• Lors de sa prochaine visite, ces éléments cachés s’affichent quasi instantanément, ce qui ravit le visiteur.

En gros, le navigateur affiche rapidement les éléments statiques sans avoir besoin de les re-télécharger. Les éléments dynamiques (modifiés) nécessitent une requête serveur afin d’obtenir la version la plus récente, ce qui prend un peu plus de temps.

L’intérêt – et ce qui rend les visiteurs heureux – c’est qu’ils peuvent déjà voir du contenu pendant que le reste se charge. Afficher des images ou du texte est préférable à un grand espace blanc avec un sablier qui tourne, et augmente la probabilité que votre visiteur reste assez longtemps pour voir le contenu dynamique. Si l’expression “mise en cache du navigateur” vous donne envie de fuir, appelez le support technique de votre hébergeur et demandez-leur de la configurer pour vous.

#4. Compressez votre site web

Les estimations varient en ligne mais, pour un site non compressé, il est généralement possible de réduire la taille totale des fichiers de 50 à 90 % grâce à la magie de Gzip. Des fichiers plus petits consomment moins de bande passante et se chargent plus vite. Gzip est un format open source qui compresse tous les fichiers de votre site dans une archive compacte.

Quand un navigateur demande le site, il reçoit un fichier nommé par exemple index.html.gz au lieu du traditionnel index.html. Une fois ce fichier optimisé reçu, le navigateur le décompresse rapidement et l’affiche à vos visiteurs.

Un exemple ? La page d’accueil de Yahoo fait environ 101 ko non compressée et à peine 10 ko compressée. Oui, Gzip peut faire la même chose pour votre site.

Vous ne pouvez pas forcer un navigateur à accepter la version compressée, mais vous pouvez au moins configurer le serveur pour proposer les deux options. C’est très facile pour quelqu’un qui gère des serveurs. Si ce n’est pas votre cas, contactez simplement le support technique de votre hébergeur.

#5. Mais commencez par optimiser le CSS

L’optimisation ne concerne pas que les images, mais aussi les CSS (feuilles de style en cascade). Ouvrez un fichier CSS : que voyez-vous ? Beaucoup de code, bien sûr, mais aussi énormément d’espaces blancs. Les feuilles de style sont importantes, mais elles n’ont pas besoin d’être jolies à l’œil humain.

Regardez l’exemple ci-dessous. Tout est bien aligné, chaque ligne indique au navigateur comment afficher la page. Mais remarquez tout l’espace vide. Chaque espace rend le fichier plus gros. Répété des centaines ou milliers de fois, cela alourdit inutilement le fichier. Heureusement, vous n’avez pas besoin de tout supprimer à la main.

Il existe d’excellents outils en ligne comme le CSS Minifier gratuit, qui transforme un CSS standard comme ceci…

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

…en ceci.

p.uppercase{text-transform:uppercase}p.lowercase{text-transform:lowercase}p.capitalize{text-transform:capitalize}

En résumé, tout est rassemblé pour ne pas gaspiller d’espace. Quand vous cherchez à accélérer le téléchargement de votre site, chaque détail compte.

#6 Si seulement vous pouviez plier votre site web…

Parfois, Internet s’inspire du monde de la presse papier, et l’expression “au-dessus de la ligne de flottaison” (“above the fold”) en est un exemple. Si vous avez déjà vu des journaux pliés dans un kiosque, vous savez qu’on y affiche en haut les informations les plus importantes. Le reste, moins essentiel, reste caché.

C’est une excellente idée à reprendre dans l’organisation du code HTML de votre site, surtout pour le JavaScript (JS) qui a tendance à interrompre le chargement et l’affichage d’une page. Au lieu de placer le JS en haut du document, mettez-le en dernier dans la section body. Ainsi, tout le reste charge d’abord, et le visiteur peut déjà voir des images ou du contenu texte pendant que le script se télécharge.

Sinon, l’écran reste blanc tant que le JS n’est pas chargé. Les écrans blancs donnent très vite envie aux visiteurs impatients de partir. Donnez-leur de quoi patienter jusqu’à ce que les fonctionnalités JS soient prêtes. Preuve qu’on peut toujours apprendre des journaux du XXᵉ siècle !

#7 Choisissez autre chose que l’hébergement mutualisé

Que vous gériez une boutique e-commerce ou que votre site soit votre principal outil de promotion, l’objectif est le même : il doit charger vite. Un client potentiel qui attend trop longtemps s’en ira. Ce qu’on oublie souvent, c’est qu’un choix basique – le type d’hébergement – peut avoir un impact énorme sur la vitesse.

L’hébergement mutualisé est économique (parfois même gratuit) mais rarement optimal. Le revers de la médaille, c’est que l’hébergeur regroupe trop de sites sur un même serveur, ce qui nuit aux performances. Pire, les ressources (bande passante, stockage, puissance) sont partagées entre tous. Si un site consomme trop, les autres sont ralentis, figent ou deviennent inaccessibles.

Si votre site n’est pas un simple loisir, l’hébergement mutualisé n’est pas une bonne option.

Pour un site professionnel, il vaut mieux opter pour un serveur dédié ou un hébergement VPS (Virtual Private Server), qui garantissent des ressources réservées, sans se soucier des “voisins”.

De plus, avec un hébergement VPS (serveur privé virtuel) managé , par rapport à un non managé, vous bénéficiez d’un accompagnement supplémentaire de la part de votre hébergeur.

Pour toute PME sérieuse concernant sa présence en ligne, nous vous recommandons vivement d’explorer les alternatives à l’hébergement mutualisé.

Si tout cela vous semble trop technique, envisagez d’utiliser des solutions de création de sites web tierces. Ces applications permettent de créer un site de zéro grâce à une interface intuitive de glisser-déposer. Non seulement elles sont économiques, mais l’hébergement est entièrement pris en charge. Les sites hébergés de cette façon chargent généralement plus rapidement que sur votre propre serveur. Vous pouvez ainsi vous concentrer sur ce que vous faites de mieux : produire du contenu et développer votre audience.

Dernières réflexions

Pour prendre du recul et regarder la situation dans son ensemble, une planification minutieuse doit être la première étape lors de la création d’un site. Autrement dit, choisissez avec soin les éléments à intégrer. Sont-ils tous indispensables ? Privilégiez des thèmes légers (peu volumineux) et des plugins bien codés et vérifiés . En d’autres termes, pensez à la vitesse dès le début. Cela vous évitera d’avoir à bricoler plus tard quand vous réaliserez que votre site est devenu une bête lente et gourmande en bande passante.

Une chose est sûre : à mesure que les internautes deviennent plus exigeants – notamment sur l’audio, la vidéo et l’interactivité – la taille des fichiers ne cessera d’augmenter. Les propriétaires de sites doivent donc rester vigilants pour éviter de perdre en rapidité. La meilleure approche consiste à tester régulièrement et à rester constamment à l’affût de moyens d’optimiser votre présence en ligne pour qu’elle fonctionne toujours comme une machine bien huilée, telle que vous le souhaitez.