Ne faites pas attendre vos visiteurs : réduisez la taille de vos pages web

Dans un site web, la taille des pages est à prendre en compte : en toute logique, plus elle est petite, plus la page s'affiche vite. En effet, la vitesse de chargement d'une page web est un élément important car les internautes sont vraiment sensibles au temps de chargement d'une page.

Selon une étude de Akamai, une page est abandonnée si elle n'est pas chargée en moins de deux secondes et pour chaque seconde supplémentaire, le taux d'abandon augmente de 5,8 %.

[Guide] Comment planifier et réussir la refonte d'un site web ?

De plus, Google tient compte de la vitesse de chargement des sites dans son classement des résultats de recherche, afin d'offrir une meilleure expérience aux utilisateurs.

Autrement dit, pour rester en haut du classement dans les résultats de recherche, votre entreprise doit s'attacher à fournir une expérience rapide et optimisée sur tous les appareils. Pour éviter que votre site web ne perde du traffic, voici tout ce que vous devez savoir sur la taille des pages et comment la réduire. 

Qu'est-ce que la taille d'une page web ?

La taille d'une page, ou « le poids » d'une page, fait référence à la taille globale d'une page web spécifique. Cela inclut tous les fichiers utilisés pour la créer : le code HTML, les images, les feuilles de style, les scripts et autres médias.

Quelle taille ne pas dépasser ?

Pour vous aider à évaluer le poids de votre page, HubSpot a étudié les tests de performance effectués par Yottaa, une entreprise de logiciel d'optimisation d'application.

En juillet 2015, Yottaa a testé la performance de 25 URLs de plusieurs sites web du COS HubSpot à l'aide de connexions internet câblées (dans un navigateur Chrome) et de connexions 3G/4G (avec un iPhone). 

Les résultats ont montré que le poids moyen d'une page sur le COS HubSpot était de 2,43 Mo. En tenant compte d'une étude récente de Soasta indiquant que le poids moyen d'une page dépasse maintenant 2 Mo, ce chiffre s'inscrit dans la tendance actuelle du web.

Toutefois, n'oubliez pas que le poids de vos pages dépend aussi de votre entreprise ou de votre secteur d'activité. Si, par exemple, votre site d'e-commerce présente un large éventail de photos, il est fort probable que vos pages seront plus lourdes. En tout état de cause, l'objectif est de rester dans la moyenne ou en dessous.

5 conseils pour réduire la taille de vos pages 

En suivant quelques bonnes pratiques, la taille de vos pages web peut être facilement réduite.

1 - Redimensionnez et compressez vos images

Les images sont souvent l'un des facteurs qui contribuent à la taille des pages. Si vous voulez la réduire, il faut redimensionner toutes les images inutilement lourdes. 

Quand vous chargez des photos sur votre site, n'oubliez pas que leurs dimensions ne doivent jamais dépasser la taille du conteneur. Si ce dernier a une largeur maximale de 500 pixels, il n'y a généralement aucune raison de télécharger une image de 1 000 pixels de largeur. 

Mais que faire si vous voulez offrir une image haute résolution que vos visiteurs pourront partager et télécharger ? Il est recommandé, dans ce cas, de télécharger une photo dont la taille correspond exactement à celle du conteneur, avec un lien hypertexte vers la version haute résolution, pour éviter d'alourdir votre page.

Une autre manière de réduire la taille d'une image consiste à la compresser. Vous réduisez ainsi la taille de son fichier, et le temps de chargement de la page par la même occasion. 

Voici quelques-uns des outils de compression les plus populaires :

Si vous utilisez HubSpot, le COS inclut une fonction de compression et de redimensionnement automatique des images : si un utilisateur charge une image de 5 000 x 5 000 pixels qui n'est affichée sur le site web qu'en 500 x 500, le redimensionnement automatique de l'image réduira le temps de chargement du navigateur. La compression de l'image, de son côté, réduit la taille du fichier tout en conservant la qualité de l'image téléchargée.

Le meilleur moyen d'alléger votre page consiste toutefois à éliminer autant d'images superflues que possible, mais pour celles qui doivent rester, les conseils ci-dessus devraient vous aider.

2 - Utilisez des sprites CSS 

Vous savez maintenant qu'une page qui contient une multitude d'images, surtout de grande taille, va voir son temps de chargement s'allonger.

En effet, chaque image génère une requête auprès du serveur, ce qui ralentit l'ensemble du processus. 

C'est là que les sprites CSS entrent en jeu. Un sprite CSS fait référence à un ensemble d'images que l'on combine pour ne former qu'un seul fichier image. Vous utilisez ensuite la CSS pour n'afficher que la partie de l'image combinée que vous voulez voir, et réduisez ainsi le nombre de requêtes serveur nécessaires pour le chargement de la page. 

Voici une explication plus visuelle. L'exemple A inclut des fichiers image séparés pour chacune des icônes de navigateur, représentant 70,7 Ko. L'exemple B utilise les sprites CSS (une seule image qui utilise la CSS pour en afficher des portions) et montre exactement les mêmes informations. La taille totale de ces images est deux fois moins élevée que dans l'exemple A. 

website-loading-examples-french.png

Source : Tutorial Republic

3 - Supprimez les polices personnalisées superflues

Les polices personnalisées donnent de la personnalité à vos pages et permettent à votre entreprise de se distinguer, mais elles alourdissent votre site. 

Si un développeur web utilise une police personnalisée et qu'elle n'est pas installée sur le système d'exploitation de l'utilisateur, ce dernier doit la télécharger en même temps que le contenu du site.

Par exemple, Twitter utilise la police Gotham en trois styles : light, book et medium. Leur poids représente 154 Ko au total.

Autrement dit, si vous cherchez à alléger votre page, il peut être judicieux de réévaluer le nombre de polices personnalisées que vous utilisez. Si une ou deux polices personnalisées n'ont pas vraiment d'impact, une utilisation excessive pourrait réduire la vitesse de chargement des pages.

4 - Minifiez vos ressources

Pourriez-vous minifier l'une de vos ressources ? 

La minification fait référence au processus de suppression des données inutiles ou redondantes d'une ressource sans en affecter le traitement par le navigateur. Par exemple, des commentaires et du formatage de code, du code inutilisé, des noms de variables et de fonctions raccourcis, etc. 

Voici comment minifier vos ressources selon Google

HTML

Générez une version optimisée de votre code HTML à l'aide de l'outil PageSpeed Insights. Utilisez cette analyse pour exécuter votre page HTML et explorer la règle de minification HTML. Enfin, cliquez sur « Voir le contenu optimisé » pour accéder au code HTML minifié.

CSS

Essayez les outils suivants :

JavaScript 

Essayez les outils suivants :

5 - Utilisez un réseau de diffusion de contenu

Un réseau de diffusion de contenu (ou CDN pour Content Delivery Network) fait référence à un système interconnecté de serveurs cache qui utilisent la proximité géographique comme critère de diffusion du contenu web. 

Si tous les éléments de votre site web sont hébergés à Lyon, cela est une bonne nouvelle pour les habitants du Rhône-Alpes, voire de toute la France. Mais qu'en est-il des visiteurs consultant votre site depuis Montréal ? Il est fort probable que vos pages se chargeront beaucoup moins vite pour eux, simplement parce que la distance avec votre serveur est plus importante.

Un CDN permet de contourner le problème en stockant les éléments de votre site web à plusieurs endroits de la planète pour que tout le monde puisse y accéder rapidement.

Note : même si cela ne réduit pas nécessairement le poids de votre page, sa vitesse de chargement s'en trouvera tout de même améliorée.

Évaluation préalable

Avant de commencer à appliquer ces conseils, il vaut mieux avoir une idée de l'ampleur du travail. Pour tester la vitesse et la taille de votre site web, essayez l'outil Dareboost.

Pour obtenir un rapport plus détaillé de la performance globale de votre site, essayez le Website Grader de HubSpot. Vous recevrez un rapport personnalisé gratuit qui évaluera votre site en fonction d'indicateurs clés tels que la performance, la compatibilité sur mobile, le SEO et la sécurité.

Si, après cette analyse, le design et le fonctionnement de votre site web ne répondent toujours pas aux besoins de votre entreprise, utilisez ce guide gratuit pour planifier en toute simplicité la refonte de votre site web.

Le guide indispensable pour la refonte de votre site

 

Téléchargez ce guide gratuit pour planifier la refonte de votre site web en toute simplicité.

Vous avez aimé cet article ? Partagez-le avec vos collègues ou amis :