Nombreuses sont les entreprises à avoir voulu minimiser les coûts dans la création de leur site internet. Fait soi-même, où via une offre “votre site internet en 10 minutes”, le résultat est là, votre site est lent. Et pas qu’un peu ! Sur mobile, c’est à peine s’il est utilisable. Conséquence, vous êtes page 12 sur google et vous avez 90% de taux de rebond.
Ici je vous explique les raisons pour lesquels votre site est lent. Mais aussi les solutions dont vous disposez pour améliorer la vitesse de celui-ci.
Bien évidemment, si vous n’avez pas de temps à investir là-dedans, nous vous invitons à prendre contact avec nous dès maintenant ! Et si vous êtes une PME, peut être que vous êtes éligible à notre offre à 250€/mois pendant 1 an, ce serait dommage de passer à côté !
C’est quoi d’abord, un site lent ?
Un site défini comme lent peut l’être de plusieurs manières, chacune d’entre elle affectera négativement l’expérience de vos utilisateurs.
Long chargement à la première page
La première manière consiste à être lent au premier affichage. Ce sont les sites dont vous verrez un spinner ou une barre de chargement (et encore, quand il y en a…) progresser au fur et à mesure que les données arrivent. Parfois c’est un choix réfléchi, notamment dans le cas d’une web app, il est important qu’un maximum de choses soient prêtes à l’emploi sur la page. Ainsi on les précharge en avance pour fluidifier l’expérience de l’utilisateur. Mais bien souvent, ces loaders sont juste présents parce que le site est trop lent. Lorsque Burger King s’est développé en France par exemple, l’intégralité du site était chargé avant la première ouverture de page. Si vous consultiez le site avec un mobile et le réseau de l’époque, vous pouviez attendre une vingtaine de secondes avant de voir s’afficher la liste des burgers. Une fois la première page chargée, par contre, l’expérience était fluide.
Chargement à chaque nouvelle page
D’autres sites sont globalement lent à chaque ouverture de nouvelle page. On voit la page se “construire” sous nos yeux au fur et à mesure que les éléments se téléchargent. Image par image, les polices, les modules tiers, etc. En général, c’est sur ce genre de lenteurs qu’il est le plus simple d’agir, parce qu’elles témoignent d’une mauvaise gestion des ressources et du cache (trop lourdes, trop nombreuses, etc)
Lenteurs durant la navigation
Le troisième type de lenteur n’est pas directement lié au poids de votre page, mais plutôt à l’utilisation de votre processeur. Lorsque le site affiche de nombreuses animations, ou qu’il y a de trop nombreuses choses affichées, le site peut alors se mettre à “ramer”, notamment sur les téléphones de moyenne et basse gamme.
Comment savoir si votre site est lent ?
Pour les cas extrêmes, il suffit de les ouvrir pour s’en rendre compte, que ce soit sur un ordinateur gamer avec la fibre ou un portable de 2017 dans la cambrousse.
Mais bien souvent, un site va s’ouvrir correctement sur la plupart des appareils et ne pas présenter de symptômes. Pourtant, Google va les considérer comme lents.
Pagespeed Insights
Le meilleur moyen de vérifier que votre site est suffisamment performant est de vous rendre sur le site pagespeed insights. Ce site est un outil mis en place par Google qui vous permettra d’obtenir le “score” de votre site en 4 points: La performance, les bonnes pratiques, l’accessibilité et le SEO.
Nous vous conseillons de n’en laisser aucun de côté, surtout l’accessibilité, mais celui qui nous intéresse dans le cas de la vitesse de chargement est le score de performance. Ce qui est bien avec cet outil, c’est qu’il vous explique en même temps quels sont les points les plus critiques de votre site.
Cet outil est utilisé en interne aussi pour définir votre positionnement par Google, on peut donc en déduire qu’un bon score sur PSI impactera favorablement votre positionnement.
Les raisons pour lesquelles votre site est lent
Votre site peut être lent pour de nombreuses raisons. Ce dossier ne prétend pas en dresser une liste exhaustive, néanmoins nous ferons tout notre possible pour balayer les majeures raisons de cette lenteur.
Vos médias ne sont pas aux bonnes dimensions
Commençons par le plus facile. L’une des raisons les plus courantes pour lesquelles un site est lent est souvent que ses images ne sont pas aux bonnes dimensions.
Imaginez une page de liste d’articles de blog. Bien souvent, les cards des articles sont affichés par ligne de trois ou quatre sur ordinateur. Ainsi au maximum, en comptant quelques marges, vos images feront un cinquième de la largeur de l’écran, soit environ 400 pixels dans la majeure partie des cas.
Seulement, il arrive de voir dans ces cards des images en pleine résolution. Une photo de ce type peut peser dans les 4Mo, alors imaginez s’il y en a une vingtaine à charger…
Allons plus loin, lorsque vous ouvrez un article, sur ordinateur il est intéressant de les charger en grand format pour pouvoir les voir en pleine page, comme la plupart des gens ont la fibre aujourd’hui, en général, ce n’est pas un problème.
Mais sur mobile. L’écran est plus petit, la connexion souvent plus mauvaise. Il faut donc indiquer au navigateur, pour une même image à un même endroit du site, de la charger en deux formats différents selon le contexte d’utilisation. Comment faire ?
En fait c’est simple, il suffit d’utiliser les propriétés srcset et sizes de la balise img. Sur la plupart des CMS, il existent aussi des options permettant à l’upload de générer différents formats d’images qui seront utilisés dans le bon contexte.
Vos médias ne sont pas au bon format
Une autre cause de la lenteur de vos site peut aussi être dû à un problème de format. Par exemple. Si votre image n’a pas de transparence, il n’est pas nécessaire de la charger en PNG, format plus lourd que le JPEG.
Au delà de ça, il est important de se renseigner sur les nouveaux formats d’image et de vidéos qui offrent de plus en plus de performance en terme de légèreté sans pour autant sacrifier la qualité.
AVIF, WEBP, SVG, chacun de ces formats a un usage précis. Le format AVIF est généralement le plus léger, mais WEBP peut s’avérer plus performant lorsqu’on l’utilise en compression sans perte. Ainsi je vous conseille d’utiliser le premier pour de l’illustration basique et le second pour des images que vous souhaitez montrer en plus haute résolution.
Cas particulier pour le SVG puisqu’il s’agit d’images vectorielles. Une image classique est composée de pixels et la manière dont ils sont stockés définit le type de fichier. Un SVG, lui, est composé de vecteurs. Ainsi l’image est redessinée à chaque fois, faisant qu’on peut l’afficher dans la résolution que l’on souhaite. C’est un parfait format pour afficher des logos ou des icones par exemple.
En ce qui concerne les polices d’écritures, au delà du conseil de sobriété qui s’applique à toutes les composantes de votre site, on ne peut que vous conseiller de les charger au format WOFF2, format le plus léger et le mieux intégré sur les navigateurs modernes.
Votre site est rendu côté client
Changeons de sujet et passons à la nature même de votre site. On considère souvent qu’il y a trois types majeurs de sites internet, les sites rendus côté client, les sites rendus côté serveur et les sites rendus statiquement. La majorité des sites aujourd’hui sont rendus côté client, ce qui permet un maximum d’interactivité avec l’utilisateur. Le problème derrière est qu’il faut, à chaque nouveau chargement de la page, la reconstruire. La performance en est immanquablement impactée et votre SEO aussi.
Un site rendu côté serveur montrera plus de performance. C’est assez logique d’une certaine manière puisque vous n’envoyez que le résultat. Néanmoins un site rendu côté serveur vous demandera plus de ressources, il faut veiller à ne pas sous estimer la taille de son serveur afin de ne pas augmenter le temps de réponse.
Le dernier type de rendu et celui qui nous intéresse est le rendu statique. Le principe est de construire les pages de votre site en amont plutôt qu’à la demande. C’est très pratique notamment lorsqu’il s’agit de construire les pages d’un blog. Le problème de cette méthode est qu’on ne peut normalement pas personnaliser la page en fonction du contexte et de l’utilisateur.
Pour contrer les problèmes de chaque technique, nos sites utilisent à la fois les trois techniques de rendu. Tout ce qui peut être construit à l’avance sera rendu statiquement. Ce qui doit être chargé au chargement de la page mais personnalisé sera rendu côté serveur. Et enfin, ce qui peut être chargé en différé le sera côté client. Cette technique nous permet d’obtenir des résultats hallucinant en terme de performance !
Le code de votre site est mal optimisé
Mixer les méthodes de rendu pour optimiser le volume de ressources à charger c’est bien, mais ça ne sert à rien si vous chargez tout et n’importe quoi. Elles sont fantastiques toutes ces librairies react, mais on ne peut que vous conseiller de les utiliser avec parcimonie.
Par exemple, un classique est d’ajouter la librairie axios à son code pour faire ses requêtes Ajax côté client. Certes, axios est agréable à utiliser, mais avez-vous déjà regardé combien il pesait ? 27.3Kb minifié juste pour faire des fetch ? Alors que le bundle de react en pèse le quart, c’est ridicule !
Et axios n’est qu’un exemple, les librairies d’animation en l’occurrence peuvent être énormes, alors imaginez si vous en ajoutez plusieurs pour piocher des effets à droite ou à gauche ! Pesez le pour et le contre, mais des fois, il suffit juste de recoder certaines animations soi-même. C’est ce que nous avons fait d’ailleurs sur le site d’imageIN, toutes nos animations sont refaites à la main afin de réduire la taille de notre bundle.
Le code de votre site n’est pas minifié
Je vous parlais juste avant de la taille de bundle minifié d’axios, mais c’est quoi au fait du code minifié ? Si vous êtes développeur le code vous semblera être une évidence, mais pour les autres, sachez qu’un code minifié est un code qui a été réécrit pour utiliser le moins de caractère possible.
Par exemple, un morceau de code générant une calculatrice basique ressemblerait à ceci:
import React, { useState } from 'react';
function Calculator() {
const [input1, setInput1] = useState('');
const [input2, setInput2] = useState('');
const [result, setResult] = useState('');
const handleCalculate = (op) => {
const num1 = parseFloat(input1);
const num2 = parseFloat(input2);
switch(op) {
case '+':
setResult(num1 + num2);
break;
case '-':
setResult(num1 - num2);
break;
case '*':
setResult(num1 * num2);
break;
case '/':
setResult(num1 / num2);
break;
default:
break;
}
};
return (
<div>
<input
type="number"
value={input1}
onChange={e => setInput1(e.target.value)}
/>
<input
type="number"
value={input2}
onChange={e => setInput2(e.target.value)}
/>
<button onClick={() => handleCalculate('+')}>+</button>
<button onClick={() => handleCalculate('-')}>-</button>
<button onClick={() => handleCalculate('*')}>*</button>
<button onClick={() => handleCalculate('/')}>/</button>
<div>Result: {result}</div>
</div>
);
}
export default Calculator;
Une version avec une minification simple de ce code, elle, ressemblerait à ça:
import R,{useState} from 'react';function C(){const [a,b]=[useState(''),useState('')],[c,d]=a,[e,f]=b,[g,h]=useState('');const i=j=>{const k=parseFloat(c),l=parseFloat(e);switch(j){case '+':h(k+l);break;case '-':h(k-l);break;case '*':h(k*l);break;case '/':l!==0&&h(k/l);break;}return (<div><input type="number" value={c} onChange={m=>d(m.target.value)}/><input type="number" value={e} onChange={n=>f(n.target.value)}/><button onClick={()=>i('+')}>+</button><button onClick={()=>i('-')}>-</button><button onClick={()=>i('*')}>*</button><button onClick={()=>i('/')}>/</button><div>Result: {g}</div></div>);}}export default C;
Comme vous pouvez le voir, le code est résumé à sa plus simple version pour être le plus léger possible, ce qui confère une économie de taille lors de son chargement.
Vous ne gérez pas ou mal votre cache
Au début je vous parlais de taille d’images, de polices et du temps qu’il faut pour les charger. Mais pourquoi les chargeriez vous plusieurs fois ? Notamment les polices, celles-ci sont utilisées partout sur votre site, il serait donc ridicule de les recharger à chaque nouvelle page non ?
”Mettre en cache”, c’est stocker ces ressources sur le navigateur afin qu’elles puissent être réutilisées sans avoir à les recharger. Attention néanmoins à ne pas s’en servir à l’excès, un cache trop imposant rendrait votre page lourde et peu agréable à utiliser.
Une bonne gestion du cache améliore grandement votre score de performance sur pagespeed insights et donc aussi votre positionnement. De plus vos visiteurs auront une expérience d’utilisation plus fluide de votre site, ce qui augmente vos chances de conversion.
Votre site est hébergé sur un serveur qui met du temps à répondre
Je vous en parlais lorsque je disais plus tôt de ne pas sous estimer la taille de votre serveur si vous faites du rendu côté serveur, mais un serveur compétent c’est important. Chez Image IN, nous avons choisi de régler ce problème en choisissant de faire confiance à Gatsby Cloud et à son service de CDN, ce qui nous permet de diffuser le contenu des sites internet partout dans le monde et extrêmement rapidement.
Il n’y a pas de solution miracle pour améliorer la vitesse de votre serveur. Si vous gérez déjà correctement le cache et que votre serveur peine à tenir la charge, c’est qu’il est temps d’en changer et pourquoi pas revoir votre solution pour quelque chose de plus scalable.
Conclusion
Les raisons pour lesquelles votre site est lent sont nombreuses et les manières de l’améliorer plus encore. Si vous n’avez pas de compétences techniques particulièrement, nous vous conseillons d’investir dans celles d’un spécialiste qui saura identifier et résoudre vos problèmes.
En l’occurrence, nous vous invitons à nous contacter pour tous vos projets de création ou refonte de site internet. Le devis et gratuit, incluant un audit express de l’existant. Nous faisons une offre à 250€ par mois pendant un an pour les PME et faisons un tarif réduit général pour les associations et le secteur public. N’hésitez pas !