Comment réduire le temps de chargement de mes pages en 4 étapes ?

vitesse de chargement

Le monde numérique a parfois ses paradoxes.
En voilà un: le 8X champion olympique, Usain Bolt, court le 100 mètres en 9 secondes 58.

Le rapport avec le SEO ? Il est devenu un cas d’école, malgré lui, parce que son site web est un enfer digital avec un indice de vitesse moyen de 23,4 secondes.

Ouch… Le champion jamaïcain met presque 3X fois de temps à charger une seule page de son site qu’à courir 100 mètres !

J’aimerais que son conseiller en communication me lise !

Alors, comment pouvez vous aller plus vite qu’Usain Bolt ?

Optimiser le format de vos images

Tout d’abord, ce qui consomme souvent le plus de données sur une page web, c’est son contenu visuel.
On utilise tous des images de fonds ou des illustrations pour renforcer l’esthétique et l’ergonomie de nos contenus.
L’important c’est de veiller à ce que l’image soit dimensionnée dans un format correct et proportionnel à son contenant.

Si vos images n’ont qu’un but esthétique, pensez à faire des économies :

  • Privilégiez le format JPG. Ne mettez des PNG uniquement si vous avez besoin d’un fond transparent ou pour des illustrations très précises (exemple: site d’un photographe)
  • Ayez des dimensions d’images qui soit adaptés au contenant. On évite le format fond d’écran au milieu d’un tout petit cadre pour faire joli… Je peux vous suggérer cet outil en ligne qui permet de redimensionner vos images de façon simple et précise.
  • 60% des pages visitées du web le sont à partir d’un support mobile. D’où l’importance d’avoir aussi des images qui soient responsives, donc adaptées à tout support.

Compresser ses ressources

À force de se compléter, les langages informatiques se multiplient aujourd’hui et se dupliquent parfois. Il devient alors nécessaire de revenir à des codes sources plus minimalistes.
Une technologie CSS ou JavaScript trop complexe rend souvent la tâche lourde pour que Google parcoure votre site.

Divers solutions vous permettent d’optimiser très facilement le code source de votre page.
Si vous votre site est géré sur WordPress, je peux vous recommander le plugin Autoptimize. Disponible en français, il vous corrigera vos duplications et extensions de code très facilement et avec peu de déchet.
Rien ne remplacera la solution manuelle de l’édition par un développeur, mais un plugin gratuit suffira pour vous faire économiser de précieuses secondes de chargement.

Si votre site n’est pas crée sur un CMS, rassurez-vous, la compression automatique existe aussi. Il suffit de rentrer vos lignes de codes sur ce site: Minifer.
Copier et remplacer votre correction dans les fichier de votre hébergeur.

Et le résultat sera déjà pas mal !

Paramétrer un cache navigateur

Un cache navigateur est le processus de stockage de données dans une zone de stockage de données temporaire et rapide. Cela permet au site web de les retrouver plus rapidement par la suite, donc réduire le temps de chargement.

Paramétrer un cache vous sera utile pour offrir une navigation plus fluide à l’utilisateur. Ne comptez pas que là-dessus, parce qu’un cache de fichiers lourds, reste lourd ! Mais servez-vous en.

Pour WordPress, je recommande le plugin W3 Total Cache. Les plugins gratuits se valent à peu près tous et suffisent, sauf pour un gros site, si vous dépassez la centaine de pages produits.

Pour installer et configurer W3 Total Cache, je vous laisse suivre pas à pas le très bon tuto du vidéaste Sommers’ Advisors.
En 2 minutes, c’est fait. Il va droit au but.

Si vous n’avez pas WordPress et/ou si vous souhaitez éviter de vous surcharger de plugin (ce que je vous conseille également !). Ne partez pas, il existe encore une solution: le Cache-Control.

  1. Copier le code ci-dessous
  2. Coller le sur votre fichier .htaccess
# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpe?g|png|gif|swf|css|gz)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
<FilesMatch "\.(js)$">
Header set Cache-Control "max-age=2592000, private"
</FilesMatch>
<filesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=7200, public"
</filesMatch>
# Enleve le cache pour les ressources dynamiques
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>
# END Cache-Control Headers

Tester ses Insights

Maintenant que votre site web est sur le starting-block du sprint, il vous reste à trouver un bon chronomètre.

Dans la série des outils gratuits et utiles pour booster vôtre référencement sur Internet, je vous recommande PageSpeed Insight, qui est un outil natif de Google pour mesurer la performance de votre site.

Google n’est pas là pour vous piéger (enfin pas sur ce sujet-là…). Il va vous recommander étapes par étapes quels sont vos axes d’améliorations.

Enfin, ne vous mettez pas la pression non plus.
Le chargement d’une page n’influe que modérément le référencement de votre page.
En revanche, un site très lent est extrêmement repoussant pour l’utilisateur et votre taux de conversion va chuter très bas.

Donc surveillez ça, des metrics autour de 4 ou 5 secondes maximum sur mobile pour un score Insight au minimum de 65 me semblent convenables.


Construisons ensemble votre visibilité

%d blogueurs aiment cette page :