“Pourquoi mon site web est lent ? Pourquoi mon score PageSpeed Insights et mes temps de chargement sont mauvais ?”. Des questions que vous vous êtes peut-être déjà posées et pour lesquelles vous cherchez toujours la réponse. Parmi les nombreuses techniques d’optimisation webperf, certaines vous permettent d’améliorer la vitesse perçue pour une meilleure UX. En effet, vous pouvez optimiser la vitesse en tant que telle (autrement dit, vos performances brutes), et vous pouvez aussi jouer sur la sensation de vitesse perçue par les utilisateurs lorsqu’ils visitent une page.
Alors, comment améliorer la vitesse perçue ? Un peu d’illusion, beaucoup de technique… on vous explique les détails.
1. Optimiser l’affichage des images
Le Progressive JPEG
D’abord, vous pouvez transformer vos images JPG en Progressive JPG. De cette façon, une grande image peut s’afficher rapidement, d’abord en basse résolution, puis les détails s’ajoutent au fur et à mesure.
Cette technique permet aux images de grande taille d’être visibles le plus vite possible, plutôt que de laisser un espace vide qui donnerait l’impression que la page n’est pas prête ou qu’il n’y a rien à cet emplacement.
Le lazyloading
Autre technique d’optimisation d’image pour améliorer le temps de chargement et avoir des pages web rapides : le lazyloading. Elle consiste à afficher en priorité les images au-dessus de la ligne de flottaison. Les images suivantes ne sont chargées que lorsque l’utilisateur scrolle sur la page.
2. Optimiser l’affichage du texte
Au moment d’afficher du texte sur une page web, si la font associée n’est pas disponible immédiatement, vous pouvez indiquer au navigateur ce qu’il doit faire grâce à ce qui s’appelle “la propriété font-display”. Cette propriété permet de décider comment les fonts sont appliquées (ou non), en fonction de leur temps de chargement. Vous obtiendrez alors 2 comportements possibles selon le choix de la propriété font-display :
- le FOUT (Flash Of Unstyled Text) : le navigateur affiche le texte sans style avant d’y appliquer la bonne font. Cela contribue à la perception de vitesse car le texte s’affiche plus tôt pour l’utilisateur, même si la font n’est pas encore chargée.
- Le FOIT (Flash Of Invisible Text) : le navigateur n'affiche pas le texte tant que la font n'est pas chargée, et le texte reste donc invisible d’ici là. Certains navigateurs attendent maximum 3 secondes avant d’afficher le texte malgré tout, afin d’éviter un SPOF (Single Point Of Failure).
3. Optimiser le traitement du CSS
Les fichiers CSS sont des éléments critiques pour l’affichage de la page puisqu’ils conditionnent la création des éléments nécessaires à son premier rendu. Pour que ce rendu se produise le plus tôt possible et optimiser vos temps de chargement, le navigateur doit pouvoir récupérer ces fichiers au plus vite. Pour l’aider :
- Placez les fichiers CSS en haut du code HTML dans la balise <head>, avant les balises <script>. Cela permet d’éviter l’attente de l'exécution de fichier script bloquant pour l’analyse du fichier CSS.
- Remplacez les instructions @import dans les fichiers CSS par le fichier importé lui-même. De cette façon, le fichier CSS pourra être découvert beaucoup plus tôt par le navigateur.
4. Différer les JavaScript (JS)
JavaScript est partout sur le web ! Pourtant, ces scripts demandent du temps au navigateur pour être récupérés, analysés et exécutés, et ils peuvent venir de tiers sur lesquels l’éditeur d’un site internet n’a pas la main. D’ailleurs, 94 % des sites contiennent des Third Parties, et ils peuvent avoir un impact sur les performances de votre site.
Mais comment les optimiser pour qu’ils impactent le moins possible la vitesse de chargement d’une page ? Il faut “organiser” le chargement des ressources de façon à ce que le JavaScript ne soit pas bloquant pour le rendu de la page.
Ainsi, selon que ces scripts sont critiques ou non (s’ils sont utiles à des éléments essentiels pour les utilisateurs), vous pouvez indiquer au navigateur ce qu’il doit charger avant ou après le rendu de la page. On parle alors de différer le chargement des JavaScript, ou DeferJS. De cette façon, le navigateur identifie le JS, le télécharge, mais ne l’exécute qu’une fois que les éléments prioritaires sont affichés.
5. S’appuyer sur un système de cache intelligent
Une page web contient des éléments statiques ainsi que des éléments dynamiques, tels que des données personnalisés, le panier sur des sites e-commerce…
Les éléments statiques peuvent facilement faire l’objet d’une mise en cache pour éviter au navigateur de les charger à chaque nouvelle visite ; mais c’est plus subtil pour des éléments dynamiques car ils peuvent évoluer au cours de la navigation ou d’une visite à l’autre.
Mais alors, comment faire pour mettre une page en cache puisqu’elle contient les deux ? Il suffit de distinguer les éléments dynamiques des éléments statiques, et mettre ces derniers en cache. Vous gagnez ainsi du temps pour l’affichage des éléments statiques qui peuvent apparaître plus vite à l’écran, pour un chargement plus rapide.
Les éléments dynamiques pourront être chargés en un second temps, mais d’ici là, la page aura déjà commencé à se remplir et l’utilisateur sera rassuré sur le fait qu’elle est disponible.
6. Précharger les ressources statiques
Nous venons d’aborder les ressources statiques d’une page, celles qui peuvent être mises en cache. Sachez qu’il est possible d’aller encore plus loin en préchargeant les ressources d’une page avant même d’avoir reçu le premier octet de contenu !
En effet, une page HTML contient des liens vers des ressources statiques externes qui doivent être extraites avant leur utilisation. Le fait de mettre ces liens à la disposition du navigateur le plus tôt possible contribue à minimiser la latence perçue : c’est ce que nous faisons à avec le “Early hint”. Ce sont encore de précieuses millisecondes gagnées pour donner une impression de vitesse encore plus forte à vos visiteurs.
Maintenant que vous avez vu ces techniques qui permettent d’améliorer la vitesse perçue, vous devez vous demander comment les appliquer sur votre site web pour qu’il soit rapide...
Comment appliquer les techniques d’optimisation webperf pour une meilleure expérience utilisateur ?
Vous pouvez appliquer ces techniques par vous-mêmes à condition d’avoir les compétences et le temps pour. Cela étant, gardez en tête que les bonnes pratiques webperf évoluent vite, et que toute modification sur votre site internet peut éventuellement nécessiter de tout recommencer. C’est donc un travail de veille et de mise à jour constant.
Un audit technique de votre site web peut vous mettre le pied à l’étrier pour ensuite confier les développements à vos équipes en interne ou à des prestataires. Vous serez ainsi assurés de partir sur de bonnes bases et dans la bonne direction. C’est par exemple ce qu’a fait Uni-Médias (éditeur de sites médias), qui a fait appel à nos experts pour améliorer son score Page Speed. L’optimisation de la vitesse des pages a contribué à multiplier le trafic par 6 en 2 ans.
Enfin, pour gagner du temps, soulager vos ressources, mais aussi votre budget, vous pouvez automatiser l’application des bonnes pratiques et des techniques d’optimisation webperf. Les 6 techniques que nous venons de voir sont entièrement automatisables grâce à notre solution SaaS.
Dans ce cas, vous n’avez pas besoin de développer quoi que ce soit en interne, le moteur le fait pour vous ! Par ailleurs, les performances sont maintenues durablement sur toutes vos pages même en cas d’évolution de votre site web. Vous pouvez ainsi vous concentrer sur votre cœur de métier.
Le site Trigano Store témoigne d’ailleurs des avantages qu’il a retirés de l’automatisation des optimisations webperf : les équipes techniques et métier sont soulagées, le site web a pu endiguer la perte des ventes à cause de pages trop lentes, et les pics de charge sont dorénavant absorbés en toute sérénité.
Vous souhaitez savoir quelles sont les autres techniques
d’optimisation webperf que nous proposons ?
