Le temps de chargement de votre site internet

Si les sites aujourd’hui ont la possibilité de proposer des choses innovantes pour l’utilisateur autant en terme de design que de fonctionnalités, cela se fait généralement au détriment du poids de la page qui va par conséquent s’alourdir, et donc augmenter le temps de chargement de cette dernière. Est-ce très grave ? Est-ce négligeable ? Peut t-on régler ces problèmes ? Voyons cela dans la suite de l’article.

Y a t-il un problème à avoir un site lourd ?

Il faut bien avouer qu’avoir un site lourd est problématique même aujourd’hui. Certes nous avons des débits internet de plus en plus élevés mais il ne faut pas oublier que la moitié des visites aujourd’hui se font sur mobile, et sur mobile les débits sont encore limités (à cause de la couverture réseau mobile en haut débit encore insuffisante aujourd’hui principalement). De ce fait, avoir une page trop lourde peut poser problème car votre utilisateur pourra être frustré de devoir attendre, là où tout aujourd’hui va très vite. Cependant on peut plus ou moins nuancer ceci et avoir des sites assez lourds, mais qui auront un but spécifique. Pour donner quelques exemple, les sites où la rapidité aura de l’importance seront les sites E-commerce et les sites “grands publics”, là où on cherche des informations, où l’on surfe tout simplement ou pour n’importe quelle raison. Cependant des sites sont volontairement lourds, car leur objectif sera de présenter des fonctionnalités / Design innovants, et généralement cela demande des ressources supplémentaires.  

Puis-je négliger la vitesse de chargement si mon site est déjà rapide ?

On pourrait penser que si notre site est rapide, il n’y a plus de travail à faire et que tout va bien dans le meilleur des mondes. Cependant ces quelques exemples vous feront surement relativiser :

• Yahoo a augmenté son trafic de 9% pour chaque 400 Millisecondes d’amélioration sur son temps de chargement
• Walmart a augmenté son taux de conversion de 2% pour chaque seconde d’amélioration sur son temps de chargement
• La collecte de fond pour la campagne de Barack Obama a connu une augmentation des dons de 14% en passant la vitesse de 5 à 2 secondes.
• Amazon rapporte une perte de revenue de 1% pour chaque 100 Millisecondes de chargement en plus.

Ce ne sont bien évidemment pas les seuls mais on voit que sur ces sites le temps de chargement a un impact non négligeable même quand on parle de Millisecondes. Alors je vous dirait que non, il ne faut pas négliger la vitesse de chargement de son site internet, même s’il vous paraît déjà rapide.  

Comment régler les problèmes de vitesse de chargement / poids de page ?

Baisser le temps de chargement de votre page et baisser le poids de sa page est possible et nous avons plusieurs actions à mener à différents endroits :

Compresser les images et utiliser une bonne taille

Sur votre site internet vous pouvez déjà compresser les images que vous utilisez. Ça semble être la base et pourtant encore aujourd’hui nous voyons des pages avec des photos sorties telles quelles de l’appareil photo qui font 8000px * 6000px pour une taille réelle d’affichage de 400px de large, et les propriétaires de site de s’étonner de la lenteur de leur site. Quand vous utilisez une image sur un site pensez à plusieurs choses :

1. Quelle est la taille maximale de l’encart qui contiendra l’image ? Vous n’avez pas besoin d’avoir une image de 400px*400px pour un encart de 300px*300px. Même si vous pensez que ça ne changera pas grand chose, dites vous que vous n’aurez pas qu’une seule image, et rappelez vous le cas Amazon !
2. Ai-je besoin de transparence ou pas ? Si vous enregistrez une image sans couche Alpha (de la transparence) en PNG , vous allez avoir un fichier très lourd rapidement. Préférez donc d’autres formats comme le JPG avec un degré de compression ajusté.
3. Quand vous enregistrez, préférez un enregistrement optimisé Web ; Photoshop permet par exemple de réduire le poids des images grâce à ça.

Combiner les images ensemble

Ensuite, on peut également utiliser des sprites CSS, le principe est simple, vous avez une image qui possède plusieurs images dedans. Généralement ce seront de petits icônes, des états de survol ou toute chose qui permet d’éviter de charger plusieurs images quand on peut en charger une et la placer avec du CSS. Ceci m’amène à une autre astuce qui est de réduire le nombre de requêtes HTTP. Chaque requête prend du temps, alors si vous avez la possibilité de les réduire, n’hésitez pas !

Compresser les fichiers CSS et JS

Ensuite, nous pouvons minifier les fichiers CSS et JS, quand nous le pouvons, afin de gagner quelques précieuses millisecondes. Généralement les librairies que vous pouvez utiliser proposent une version ‘min’, mais cette astuce est aussi applicable à du code spécifique développé pour l’occasion et qui s’avère être lourd. Avant de minifier un fichier il faut toutefois bien vérifier que tout fonctionne correctement, des erreurs peuvent survenir rapidement si par exemple un développeur ne fini jamais ses instructions JS par un point virgule mais avec un retour de ligne ; la minification fera alors planter le script.

Un hébergement performant

Ensuite la solution surement la plus coûteuse est d’utiliser un serveur dédié performant. Grâce à lui votre site gagnera énormément en performance par rapport à un hébergement mutualisé. Cependant est-ce nécessaire de posséder un serveur dédié pour un simple site vitrine quand on sait que la différence de prix est de l’ordre (au minimum) de 40 euros par mois supplémentaires ?

Pour conclure

Et Google dans tout ça ? Il en pense quoi ? Je n’en ai pas parlé et pour cause, une seule phrase suffit à expliquer cela : Malgré ce qu’on peut lire sur de nombreux sites affirmant “La vitesse d’un site internet est un facteur de référencement !”, cette affirmation est tout bonnement fausse ou du moins volontairement exagéré, car seul 1% des sites sont concernés (les sites très très lents), pour le reste Google ne privilégie pas plus votre voisin que vous pour un site 100ms plus rapide ou plus lent, AMP mis à part.