La vitesse de chargement d’une page internet est critique pour votre référencent, c’est écrit noir sur blanc dans les consignes générales du moteur de recherche Google. De plus, ils utilisent la version mobile du site pour fixer leur note, dont les critères de jugement sont encore plus exigeants.
Pour tester la rapidité de chargement de votre site, il existe plusieurs méthodes gratuites efficaces. La plus simple est PageSpeed Insights proposé par Google, la plus complète est Pingdom Website Speed Test, et la plus pratique est d’ouvrir sa page dans une fenêtre privée avec Google Chrome, puis suivre Afficher -> Options pour les développeurs -> Outils de développement -> Audit -> Run Audits.
Voici 5 conseils à suivre lors de la création de votre site internet pour améliorer significativement la vitesse de chargement de vos pages.
1 – Optimiser les images
Les fichiers les plus lourds à charger d’un site internet sont généralement les images. Comment les optimiser? Pensez d’abord à adapter vos images à la taille de l’écran de l’utilisateur. Il est inutile de servir une image de 4000px de large sur un écran mobile de 450px. Dans WordPress, vous pouvez facilement définir des images différentes selon la taille de l’écran, ou directement via CSS par une requête media (@media screen).
Ensuite, pensez à compresser les images à un niveau assez acceptable pour ne rien voir à l’oeil nu. Il existe plein de solutions gratuites pour le faire facilement, je pense notamment à Compressjpeg.com ou iloveimg.com.
2 – La ligne de flottaison et le Lazy Loading
La ligne de flottaison est une ligne imaginaire qui se situe en bas de l’écran de l’affichage de l’internaute. Tout ce qui se situe en dessus représente les éléments qui s’affichent en premier sur un écran (First Contentful Paint) et auxquels il faut donner la priorité.
Lorsqu’un internaute appelle une page, celle-ci ne s’affiche que lorsque tous les éléments ont été chargés. La technique du lazy loading consiste à retarder le chargement de tout ce qui vient après cette ligne, pour afficher les premiers éléments le plus rapidement possible. Ainsi, les images, les vidéos et les iframes (comme les cartes google maps) ne sont chargée que lorsque l’internaute défile plus bas sur la page.
Il existe de nombreuses extensions WordPress pour cela, comme a3 Lazy Load qui est simple, légère et polyvalente. Sinon, Andrea Verlicchi propose de la documentation très complète pour faire du lazy loading soi-même.
3 – Optimiser les ressources CSS et JS
Les fichiers CSS servent à la mise en forme de votre site, et le JS à lui donner une touche de magie. Il convient tout d’abord de minifier les fichiers, c’est à dire de supprimer tous les commentaires, les espaces superflus et les fonctions à double. Le potentiel de gain en terme de poids peut représenter plus de la moitié de la taille du fichier! Le site CSS Minifier propose de le faire gratuitement pour le CSS et pour le JavaScript.
Ensuite, on revient à la notion de ligne de flottaison. Les fichiers qui sont nécessaires au bon affichage du First Contentful Paint doivent être placés dans <head>, tout le reste doit être placés au bas de la page pour un chargement différé.
Par ailleurs, posez-vous la question de la nécessité de vos fichiers ou de vos extensions WordPress. Utilisez-vous vraiment toutes les ressources ou pourriez-vous vous passer de quelques unes? Lorsque vous utilisez des icônes, arrangez-vous pour n’utiliser qu’une seule famille d’icônes afin d’éviter de charger toute la collection.
4 – Utiliser la mise en cache
Lorsqu’un internaute visite une page web, le navigateur enregistre certains éléments comme les images, les vidéos, les fichiers css, le javascript, etc. Lors d’une deuxième visite, le navigateur va utiliser ces fichiers au lieu de les demander à nouveau au serveur, ce qui aura pour effet d’accélérer significativement la vitesse de chargement.
Il est possible de déterminer la durée pendant laquelle le navigateur va stocker ces fichiers, accélérant au passage le chargement de la page lors de la deuxième visite. Pour ce faire, rendez-vous sur les réglages de votre serveur. WordPress propose de le faire plus simplement via de nombreuses extensions.
5 – Activer la compression
Aujourd’hui la capacité de calcul de nos ordinateurs est bien supérieure à la vitesse de transfert des données via internet. C’est pourquoi il est intéressant de compresser toutes les données qui transitent par le serveur. Pour ce faire, rendez-vous sur les réglages de votre serveur et activez deflate et/ou Gzip selon les possibilités qui vous sont offertes.
Bonus – WordPress
Il existe une extension WordPress remarquable et gratuite qui s’appelle Hummingbird, développée par WPMUDEV, elle gère tout ce que je viens de vous décrire ci-dessus : Compression, LazyLoad, optimisation d’image, de css et de js, mise en cache, et la version gratuite est très complète sans nécessiter aucune compétence de code.
Faites appel à un expert WordPress dès aujourd’hui !
Notre équipe est prête à transformer votre présence en ligne et à propulser votre entreprise vers de nouveaux sommets. Profitez de notre expertise en création, refonte, dépannage et référencement de sites web pour maximiser votre visibilité et attirer de nouveaux clients. Ne perdez plus une minute, contactez-nous dès maintenant pour une consultation gratuite et découvrez comment nous pouvons vous aider à atteindre vos objectifs en ligne. Contactez-nous!
