Aujourd’hui, un site rapide, n’est plus un « nice to have », mais un « must have ». J’ai accompagné pendant 3 ans, chez Fasterize, des sites e-commerce afin d’optimiser leur web performance. Au-delà de faire plaisir à l’algorithme de Google sur ce sujet, un site rapide a un impact sur le taux de transformation. De plus, vos utilisateurs vous remercieront 😉 car vous allez leur faire gagner du temps.

La web performance, qu'est-ce que c'est ?

La web performance, c’est un ensemble de bonnes pratiques pour afficher une page rapidement. C’est un sujet complexe qui demande des compétences multiples : intégration front-end, développement back-end, réseaux, infrastructure serveur, CDN, gestion de la politique de cache, etc. Pour commencer, voyons comment fonctionne votre navigateur pour afficher une page. Je vais vulgariser au maximum et pour les plus curieux, je vous propose de lire cet article.

• Le navigateur reçoit le code source de la page
• Le navigateur parcourt la page
• Le navigateur interprète le code pour afficher la page sur votre écran
• Une subtilité à comprendre. Si le navigateur découvre un élément dit « bloquant », par exemple, un fichier CSS ou JS, il va le télécharger et l’exécuter. Ce processus met sur pause le rendu de la page.

Un conseil pour analyser votre site, réalisez vos tests dans un contexte avec un faible réseau pour faire ressortir les points à optimiser. Par exemple, sur un smartphone en 3G. Votre objectif lorsque vous travaillez dans la web performance, c’est de donner au navigateur uniquement les éléments qui s’affichent sur le premier écran pour construire la page le plus rapidement possible.

Où se situe Webflow en matière de web performance ?

L’utilisation des outils no-code est un vrai sujet en termes de web performance. En choisissant de déléguer la génération de votre code, votre infrastructure serveur, votre stratégie de cache, vous n’êtes plus maître à bord. Je vous propose de nous intéresser, à l’outil no-code emblématique de l’écosystème, Webflow, pour voir comment il se comporte en termes de web performance. J’ai testé la page d’accueil de www.quable.com en lançant quelques tests dans un contexte mobile 3G avec un émulateur iPhone X. L’objectif est volontairement de dégrader les conditions du test pour faire ressortir les points à optimiser. Roulement de tambour. Webflow est un outil optimisé pour la web performance, mais il pourrait être encore meilleur si...

‍

‍
‍1 - Charger les ressources externes sur le même domaine

Webflow télécharge les ressources de type image, CSS et JS depuis un autre domaine : global-uploads.webflow.com. Ce mode de fonctionnement oblige le navigateur à faire une résolution DNS pour se connecter au serveur et récupérer les ressources. Comme vous pouvez le constater sur la capture ci-dessus, point numéro 1, cette connexion prend jusqu’à une seconde dans un contexte 3G ! Cette seconde pourrait être gagnée en téléchargeant les ressources sur le domaine principal en l’occurrence www.quable.com.

2 - Différer le chargement du JavaScript

Webflow ne diffère pas le fichier JavaScript principal. Ce type de fichier est considéré comme bloquant par le navigateur, si vous ne lui dites pas de le différer, par conséquent il va le télécharger puis l’exécuter. Regardez le point numéro 2, le fichier se charge et s’exécute (orange plus foncé, mais il bloque le rendu des images ci-dessous. C’est encore une seconde de perdue 🥲. Seconde mauvaise nouvelle, 40 % du JavaScript chargé n’est pas utilisé dans la page. Webflow pourrait donner la possibilité de différer le JavaScript (c’est déjà peut-être le cas néanmoins je n’ai pas trouvé) et bundleliser le JavaScript par template avec uniquement le JS utile à la page.

3 - Mettre en place du critical CSS

Webflow pourrait également mettre en place du critical CSS de manière automatique. Cette technique consiste à écrire directement dans le code source les styles CSS nécessaires pour afficher correctement la page au-dessus de la ligne de flottaison puis charger le fichier CSS de façon asynchrone. Comme le JavaScript, il pourrait bundleliser le CSS pour charger ensuite seulement les styles utilisés par le template. Sur la page d’accueil seul 23 % du CSS chargé est utilisé.

4 - Encoder les images au format WebP ou Avif

Webflow pourrait encoder les images au format WebP et Avif. Ces deux formats peuvent permettre de gagner jusqu’à -50 % sur le poids d’une image sans perte de qualité. Cette optimisation leur permettrait également d’économiser des ressources serveurs.

Webflow boosté aux hormones avec Fasterize

Ci-dessous, une comparaison des deux filmstrips. La seconde ligne correspond à l’affichage du site avec une partie des optimisations citées ci-dessus. Gardez en mémoire le fait que j’ai fait un test en 3G pour mettre en évidence les points d’amélioration. La page complète s’affiche en 2 secondes vs 5.5 secondes. À noter, qu’elle pourrait être affichée en 3 secondes en désactivant le lazyloading sur le logo et l’icône du menu. L’écart serait alors d’une seconde, c’est énorme quand on se bat contre des millisecondes.
‍

Vous pouvez consulter les deux Waterfalls :

Sans optimisation : https://wpt.fasterize.com/details.php?test=220209_N4_5&run=1

Avec optimisation : https://wpt.fasterize.com/details.php?test=220209_XY_6&run=3

Pour comprendre comment marche ce type de schéma, je vous propose de lire cet article

Au-delà des quelques points remontés, je voudrais souligner que Webflow est nativement un outil optimisé en matière de web performance. Gestion du cache, infrastructure serveur performante, activation du HTTP/2 montre que le sujet est pris au sérieux par les équipes de Webflow. Nul doute que les points remontés seront traités par les équipes de Webflow, car des solutions simples existent pour certaines optimisations.

Pour terminer, je voudrais saluer également le travail de l’intégrateur qui a réalisé ce site parce qu'au-delà de ce que peut faire Webflow en termes de web performance, c’est aussi le travail de l’intégrateur qui fera qu’un site sera rapide ou non.

Si vous avez des questions ou souhaitez échanger sur le sujet, n’hésitez pas à me contacter sur linkedIn.

Quelques sites et ressources dans le cas où vous désirez creuser le sujet :

https://calendar.perfplanet.com/2021/

https://www.webpagetest.org/

https://www.fasterize.com/fr/blog/

https://calibreapp.com/newsletter

‍