5 idées pour améliorer la vitesse de chargement d’un site web

3 secondes, c’est la durée maximale d’attente d’un internaute devant un site internet qui peine à se charger. Une page web lente augmente donc le taux de rebond, tout en impactant négativement le trafic. Deux facteurs qui nuisent au référencement naturel du site internet (SEO), et donc à sa performance commerciale. Une page web trop lourde dessert également le travail de scan des robots du moteur de recherche Google.

Comment faire, dans ce cas, pour améliorer la vitesse de chargement d’un site web ? Plusieurs raisons expliquent pourquoi une page web prend du temps à charger. Sa lourdeur a parfois des raisons connues, comme des fichiers médias trop lourds. Elle peut aussi trouver sa cause dans des éléments moins visibles. Voici 5 conseils faciles à mettre en œuvre sur votre site internet pour augmenter la vitesse de chargement de vos pages web. 

1. Diminuer le poids des vidéos 

Un site web lent à charger s’explique souvent par la lourdeur de ses contenus médias, et notamment de ses fichiers vidéos. Réduire le poids des vidéos fait donc partie d’une démarche plus large d’optimisation de son site internet. C’est aussi ce qui va permettre à votre interface de s’afficher efficacement sur les smartphones, et donc de prouver sa dimension mobile responsive. 

Quelle taille dois faire une vidéo pour ne pas ralentir ma page web ? On considère en général qu’une résolution de 1080p, voire même de 720p convient. Cela correspond à une largeur de 1 920 pixels x 1 080 pixels de hauteur. Le poids d’une vidéo dépend cependant aussi d’autres paramètres, tels que : 

• son ratio : 16/9 ou 4/3 par exemple ;
• sa profondeur en bpp ou “bits per pixel” ; 
• sa fréquence, parfois exprimée en “frames per seconds”, ou IPS pour “images par seconde” ; 
• son extension, comme le format mp4 – le plus léger -, ou les formats .mov ou .avi ; 
• son débit.

Pour réduire le poids d’une vidéo sur un site web sans nuire à sa qualité, vous pouvez donc jouer sur chacun de ces critères. Vous pouvez aussi choisir de compresser votre vidéo via un outil comme Adobe Premiere, ou l’héberger sur un autre site internet tel que Youtube ou Dailymotion.

Besoin d’un exemple ? Découvrez notre travail de conception digitale sur différents sites internet créés avec de la vidéo.

2. Compresser les images pour accélérer le chargement des pages web

Tout comme celui des vidéos, le poids des images impacte fortement la vitesse de chargement d’un site web. Plusieurs pistes pour réduire la taille des illustrations sans réduire leur qualité visuelle : 

• Misez sur des visuels d’une résolution de 72 à 76 ppp (“pixel”/“point par pouce”) ou dpi (“dot per inch”).
• Choisissez bien votre extension d’image. Le format JPEG est le plus ancien, la plupart des navigateurs le décrypte donc facilement. Il se plie bien à l’affichage des photographies haute définition. Il se compresse par ailleurs mieux que le format PNG. 
• Si vos outils de graphisme vous le permettent, optez pour le format proposé par Google, le WebP : un format d’illustration qualitatif et léger, facile à compresser. Notez cependant que tous les navigateurs ne le lisent pas. 
• Pour enregistrer une image inférieure à un poids de 100 Ko sur Photoshop, penser à la fonction “enregistrer pour le web”. Cette fonctionnalité permet de réduire de 40% le niveau de qualité de l’illustration, un niveau qui ne nuit pas à son affichage sur écrans. 

Il existe en outre plusieurs pistes pour compresser vos images sans perdre le minimum de définition nécessaire : 

• passer sur Aperçu dans Mac, onglet “Ajuster la taille” ;
• utiliser Photo sur PC ; 
• confier vos illustrations à des solutions gratuites en ligne comme ImageRecycle, Kraken ou Imagify.

3. Supprimer l’inutile pour baisser le volume de requêtes HTTP 

Améliorer la vitesse de chargement d’un site web peut aussi passer par l’élimination d’éléments moins visibles des utilisateurs. 

Les requêtes HTTP, ou “Hypertext Transfer Protocol”, permettent la communication entre les navigateurs de vos visiteurs (Chrome, Firefox, etc.) et le serveur qui héberge votre page web. Dès que le serveur de votre site reçoit ce type de requête, il transmet aux navigateurs les fichiers qui renferment les contenus de votre site. Il s’agit là d’un fonctionnement indispensable pour que votre site web s’affiche sur un navigateur. 

Là où le bât blesse, c’est que plus votre site internet comprend de fichiers, plus le navigateur de l’internaute transfert des requêtes HTTP. En conséquence, votre site internet prend plus de temps à se charger. Pour contourner cette problématique, il convient d’éliminer les éléments invisibles aux visiteurs et inutiles en termes d’expérience utilisateur. 

Vous pouvez aussi recourir à un Content Delivery Network, ou CDN. Ce dispositif a l’avantage de mettre en cache certains contenus demandés par l’internaute et de les distribuer rapidement, sans passer par le serveur. Pour y voir plus clair, consultez notre glossaire du développeur web. 

4. Hiérarchiser les chargements avec le lazy loading 

Pour optimiser le chargement d’une page web, une bonne stratégie consiste à prioriser les éléments visuels qui doivent s’afficher dès ouverture de la page. Il faut donc aussi définir ceux qui peuvent attendre une action de l’internaute pour s’afficher. 

Vous pouvez par exemple choisir de ne pas charger les ressources CSS et JS positionnées sous la ligne de flottaison tant que le visiteur ne scrolle pas. Vous pouvez aussi opter pour des menus déroulants qui ne s’affichent qu’au clic, ou des boutons de partage sur les réseaux sociaux qui n’apparaissent qu’au survol de certains endroits.

Cette pratique s’appelle le lazy-loading, ou “chargement paresseux”. Il s’agit de conditionner l’affichage de certains éléments d’une page web à un action de l’internaute. Un bon outil pour maximiser vos performances web. 

5. Minifier le code pour améliorer la vitesse de chargement du site web

Quand un développeur web code une page, il y laisse toute une série d’éléments non-indispensables. Ceux-ci lui servent principalement à faciliter la relecture de son code : sauts de ligne, espaces et autres séparateurs. 

Pour afficher cette page web, cependant, le navigateur lit ce code au format texte. Plus ce dernier est long, plus la page internet peine à charger. C’est pourquoi nous vous conseillons de « modifier » votre code pour améliorer la vitesse de chargement de votre site web. Minifier consiste à simplifier le code, c’est-à-dire à le délester de tous ces éléments inutiles laissés par le développeur.

Cette modification s’applique aussi bien à du JavaScript qu’à du CSS ou du HTML. Notons d’ailleurs qu’il existe des plugins dédiés à la minification sur la plupart des CMS, et notamment sur WordPress. Pariez sur un plugin gratuit comme Cache Enabler, LiteSpeed Cache ou Flying Analytics by WP Speed Matters.

Lire aussi : Quel CMS choisir pour créer son site internet ? 

Voilà pour les astuces qui permettent d’améliorer la vitesse de votre site internet en y faisant de petites modifications. Sachez qu’il existe aussi plusieurs techniques pour booster ses performances en agissant cette fois sur l’hébergement et les optimisations serveur. Vous pouvez aussi obtenir des données d’actions pertinentes en vous appuyant sur un test de vitesse. Si nos conseils vous intéressent dans le cadre d’une problématique précise, n’hésitez pas à nous soumettre votre projet pour obtenir le devis de notre équipe de développement et de conception web.