Comment améliorer la performance On-page d'un site webflow?

Avoir un site performant est important pour de nombreuses raisons. Le chargement rapide d'un site participe à offrir une expérience utilisateur fluide. À l’inverse, de nombreuses études ont conclu que quelques secondes supplémentaires de temps de chargement des pages peuvent réduire les taux de conversion et d'acquisition.

Parallèlement, la vitesse de chargement est un facteur important lorsque Google classe votre site Web dans son index de recherche. En effet, la vitesse de chargement des pages est prise en compte comme facteur depuis 2010.

1. Mesurer la performance de son site webflow

1.1 Google Lighthouse : votre outil de mesure

Bien qu'il existe de multiples outils pour mesurer les performances d'un site Webflow ou d'une page, l'une des méthodes les plus courantes chez les freelances et les agences consiste à utiliser un logiciel d'analyse de performances automatisé tel que Google Lighthouse (ou Pagespeed).

Il s'agit d'un logiciel développé par Google qui analyse les sites Web sous de nombreux angles. Il fournit 6 facteurs qui influent tous sur la vitesse de chargement d'une page Web.

La façon la plus courante d'exécuter un diagnostique Google Lighthouse est probablement par le biais d'une extension Google Chrome, mais il peut également être utilisé en entrant une URL sur la page web Pagespeed Insight.

1.2. Les (Core) Web Vitals, ces indicateurs à prendre en compte

1.2.1. Core Web Vitals : la vitesse de chargement selon Google

Un terme couramment utilisé lorsqu'on parle de performances est celui de Web Vitals. C’est un ensemble de métriques (initiés par Google) qui mesure la qualité d'une page Web en termes de performances.

Parmi ces indicateurs, certains sont plus importants que d’autres. Les plus influants forment un sous-ensemble que l’on appelle les "Core Web Vitals" (ou CWV pour les intimes).

‍

1.2.2. TBT, LCP, CLS, FCP, Speed Index et TTT

• Total Blocking Time (30%) (CWV)
• Largest Contentful Paint (25%) (CWV)
• Cumulative Layout Shift (15%) (CWV)
• First Contentful Paint (10%) : combien de temps pour que premier contenu visuel s’affiche sur l’acran
• Speed Index (10%) : Durée pour que le contenu visible soit chargé
• Time to Interactive (10%)

Les pourcentages qui suivent chaque mesure de la liste représentent leurs pondérations dans la prise en compte du calcul du score totale de performance.

Comme vous pouvez le constater, les trois premières mesures de la liste font partie des Core web Vitals. En effet, leur pondération est plus importante que les autres.

Qu'est-ce que cela implique ? Pour faire simple, si vous avez décidé de travailler sur les problématiques de vélocité, commencez par vous concentrer sur les CWV.

1.3. Votre environnement nuance les résultats

Comme vous le voyez, il est très facile de passer votre site au scanner Lighthouse. Mais il faut garder en tête que le score affiché n'est pas forcément très précis. En effet, vous pourrez observer votre score lighthouse varier d’un jour à l’autre ou en fonction du terminal d’où vous réalisez le test.

Par exemple, vous exécutez Lighthouse en local sur votre ordinateur, le résultat sera affecté par de nombreux facteurs, tels que :

• Efficacité de votre matériel informatique
• Stabilité de votre connexion internet
• Distance physique entre vous et le serveur où est héberger votre site
• ...et bien d'autres choses encore.

Il est également important de mesurer votre site plusieurs fois, à la fois sur un ordinateur et sur un smartphone (Google le simule automatiquement sur Lighthouse lorsque celui-ci est exécuté dans un navigateur Google Chrome).

Vous serez surpris de constater à quel point les résultats peuvent varier entre un ordinateur de bureau et un appareil mobile (où la vitesses d'accès à internet est limitée, surtout en 3G et 4G).

2. Optimiser la performance de son site Webflow

Les développeurs vous diront que l’on manque de contrôle lorsque l’on crée son site sur un CMS. Cependant, il est important de se rappeler que Webflow fournit un certain nombre de fonctionnalités d'amélioration automatiquement performances.

Voici quelques exemples :

• Diffusion via des CDN
• Minimisation du code
• Transcodage vidéo
• Fonctions de nettoyage des scripts CSS et Javascript non exploité
• Génération de sites statiques avec CMS
• Livraison d'images responsive
• etc...

‍

‍

Cependant, ces fonctionnalités ne suffisent pas toujours à garantir une vitesse de chargement optimisée, en particulier sur les appareils mobiles.

Et c'est pourquoi j'ai écrit ce guide. Pour m'aider à améliorer les sites sur lesquels je travaille.

Passons en revue quelques-uns des problèmes de performance les plus courants dans Webflow et comment nous pourrons les résoudre.

2.1. L'impact des libraries Javascript/CSS tierces sur le chargement

Bien que je ne dispose d'aucune donnée pour étayer l'affirmation suivante, je reste absolument certain que c'est le point qui pose le plus de problèmesaux utilisateurs de Webflow lorsqu'il s'agit de sites web peu performants. C'est pourquoi cette étape est en tête de liste.

Le code d'un site web doit être téléchargé, compilé et exécuté par le navigateur. Bien que Webflow semble bien gérer le code Javascript et CSS généré en natif, l'importation de bibliothèques tierces peut affecter considérablement les performances.

‍

2.1.1 Garder uniquement le necessaire

La première question à se poser est de savoir si vous avez vraiment besoin de toutes les librairies importées sur votre site Webflow.

Sommes-nous sûrs que l’on a besoin de cet effet “machine à écrire” générée par une bibliothèque Javascript de 200 Ko ? A-t-on besoin de 5 logiciels d'analyse?

La façon la plus simple pour ne pas avoir ce problème est d'adopter une approche minimaliste en ce qui concerne les bibliothèques et les paquets externes.

Jetez un coup d'œil à la taille des fichiers de toutes vos bibliothèques importées et supprimez toutes celles qui ne sont pas necessaires.

‍

2.1.2. N’importez pas de scripts externes sur la totalité du site

L'importation de scripts dans les paramètres de votre site est logique lorsque vous tirez parti des outils d'analyse ou d'autres éléments similaires qui sont destinés à être utilisés sur chaque page de votre site webflow.

Cependant, si vous importez une animation qui n'est vraiment nécessaire que sur votre page d'accueil, il est vraiment important de conserver le script dans les paramètres de cette page uniquement.

‍

2.1.3. Placez vos imports Javascript dans l'espace "Before </body> tag"

Le code d'une page Web est analysé de haut en bas par le navigateur. Cela signifie que si vous laissez vos importations de script dans la balise head, elles doivent être entièrement téléchargées et analysées avant même de commencer à analyser le code HTML de la page.

‍

‍

Il est donc préférable de l'importer en bas de la page, à moins qu'il n'y ait une très bonne raison de ne pas le faire.

‍

2.1.4 Utilisez les attributs “defer” ou a“sync”

C'est un point important. Pour chaque script que vous importez, vous avez la possibilité d'utiliser deux attributs : defer ou async. Je n'entrerai pas dans les détails, mais les deux sont utilisés pour éliminer le blocage du rendu lors du chargement des scripts (ça bloquera moins le chargement).

2.2. Optimiser ses ressources graphiques ou “Asset”

Le deuxième soucis le plus courant, à mon humble avis, est lié à tous les assets qui sont couramment utilisés sur les sites Web de nos jours. Par asset, je veux dire: images, vidéos, polices de caractères, animations, etc.

Chaque ko est important lorsqu'il s'agit de performances sur le web. L'utilisation de ressources inutilement volumineuses devient peu à peu un énorme problème lorsque la taille des fichiers commence à s'accumuler.

Jetons un coup d'œil aux types d’assets les plus courants dans les sites webflow.

2.2.1. Paramétrer les images

Les différents formats d’image

Le choix du bon type de fichier pour vos visuels est extrêmement important.

• SVG doit être choisi pour tous les “graphiques vectoriels”. Ce type de fichier est vraiment compact puisqu'il s'agit essentiellement de mathématiques de points et de remplissages et de tout ce qu'il contient.
• JPG/JPEG doit être choisi pour tout type d'image/photographie traditionnelle qui ne nécessite pas un arrière-plan transparent. Ce format est plus petit que le PNG et permet une forte compression (nous y reviendrons bientôt).
• Le format PNG doit être choisi pour toute image nécessitant un fond transparent. C'est aussi simple que cela.

Webp : Compresser les images pour un meilleur chargement

Pour réduire la taille de vos fichiers, nous conseillons de les convertir et les compresser au format WebP. Ce format plutot récent conserve qualité d'un visuel tout en la comprimant dans un fichier de taille réduite. Cependant, tous les navigateurs ne prennent pas encore en compte ce format là.

L’avantage est que Webflow a depuis peu un outil de conversion intégré.

‍

‍

Donner des dimensions aux images

Même si Webflow propose automatiquement des images de taille adaptée en fonction de la taille de l'écran du visiteur, vous devez faire en sorte que la taille de toutes les images soit aussi proche possible de la résolution dont elles ont besoin.

Le lazy loading est votre ami

Webflow règle automatiquement le paramètre de chargement de chaque image sur "lazy", ce qui permet un chargement initial plus rapide de la page. Toutefois, veillez à ne pas charger de manière paresseuse les images situées au-dessus du pli, ainsi que les icônes initialement cachées (dans les modales, par exemple), etc.

‍

‍

Eviter de miser sur les images comme background

Étant donné que les images d'arrière-plan ne peuvent pas recevoir d'attribut srcset (responsive), Webflow n'est pas en mesure de créer des versions responsive des images d'arrière-plan.

Par conséquent, vous devriez probablement limiter l'utilisation des images d'arrière-plan et utiliser plutôt le "véritable" élément image.

2.2.2. - Bien utiliser les vidéos

Quel format privilégier pour ses vidéos?

Il est recommandé que les vidéos sur le web soient au format MPEG-4 . Veillez à les exporter et à les mettre en ligne dans ce format.

Eviter l'élément d'intégration vidéo natif de Webflow

Pour une raison quelconque, Webflow importe des bibliothèques Javascript supplémentaires et d'autres choses étranges lorsqu'il utilise son élément d'intégration vidéo natif.

Par conséquent, assurez-vous d'opter pour un élément d'intégration réel dans lequel vous pouvez coller le code que YouTube/Vimeo/Autres services vous fournissent.

‍

‍

2.2.3. Faire les bons choix concernant ses polices d'écriture

Télécharger vos polices manuellement

Vous savez comment vous pouvez sélectionner une police Google (et Adobe je crois) dans les paramètres du site de votre projet ? Oui? Ne faites pas ça.

Cela va récupérer la police depuis Google Font, créant une requête supplémentaire que le visiteur doit faire avant de charger la page.

Téléchargez plutôt la ou les polices que vous souhaitez utiliser, téléchargez-les via les paramètres du site et veillez à conserver le paramètre "display : swap".

‍

‍

Si possible, opter pour des “System fonts”

Toutes les polices doivent être téléchargées par le visiteur, à l'exception de celles qui sont peut-être déjà installées sur son ordinateur.

Si votre conception le permet, essayez d'utiliser l'une des polices système les plus couramment installées, telles que Arial, Verdana, Helvetica, etc.

En savoir plus sur les polices sûres pour le web.

Limiter le nombre de polices dans votre Design system

Si vous jetez votre dévolu sur des polices non-native (Google, Adobe et autres), essayez de limiter le nombre de polices différentes que vous utilisez.

La différence entre le chargement d'une seule police et celui de cinq polices différentes peut être énorme en termes de vitesse de chargement.

2.2.4 Optimiser les Animations Lottie

Selon Jared Stanley, qui a écrit un article intitulé Improving Site Performance by Optimizing Lottie Animations, une seule animation Lottie a fait passer les éléments DOM d'une page de 600 à plus de 2000.

Je ne m'étendrai pas sur le processus d'optimisation de Lottie, car je ne suis pas un professionnel du motion graphic, mais lisez son article pour en savoir plus.

2.2.5 Pré-connecter les assets à la bonne source

Voici une étape un peu plus technique dans notre voyage d'optimisation.

Si vous avez déjà utilisé Google Lighthouse sur une page Web, vous avez peut-être reçu la recommandation "Preconnect to required origins".

Cette recommandation peut ressembler à quelque chose comme ceci :

‍

‍

Cela signifie que Lighthouse a reconnu un ou plusieurs domaines de ressources externes (images, scripts, etc.) qui sont en cours de chargement et qui doivent être prioritaires lors du chargement de la page.

Comment résoudre ce problème ? Eh bien, en ajoutant l'une des simples petites lignes de code suivantes à la section head de notre site Web :

- <link rel="preconnect" href="https://assets.website-files.com">

- <link rel="dns-prefetch" href="https://assets.website-files.com">

Veuillez noter que si vous utilisez d'autres CDN tiers ou similaires, vous voulez tous les ajouter également.

Vous pouvez lire plus de détails sur le choix du CDN en consultant l'article sur Web.dev.

Fait amusant, c'est en fait quelque chose que Wordpress fait d'emblée pour tous les domaines tiers qui fournissent des actifs. ET donc Wordpress est, sur point, meilleur que webflow. Comme quoi, tout arrive.

3. Améliorer sa manière de developper

Webflow est un service web, qui est destiné à générer du code. Or, à l'heure actuelle, je ne me souviens pas avoir jamais vu ou utilisé un constructeur de site web qui ne génère pas de code gonflé d'une manière ou d'une autre. Cela inclut Webflow.

Cependant, il existe un certain nombre de techniques de développement web qui peuvent nous aider à garder le code aussi simple et propre que possible. Passons-les en revue une par une.

3.1. Utiliser les fonctions de nettoyage de Webflow

Webflow dispose de deux fonctions de nettoyage du code généré :

‍

‍

La suppression des classes inutilisées La fonction de suppression des interactions inutilisées Prenez l'habitude de les utiliser chaque fois que vous publiez après avoir apporté des modifications importantes à votre site Webflow.

3.2. Évitez les frameworks utilitaires CSS

Ce point est peut-être un peu controversé, mais les frameworks utilitaires qui contiennent des classes prédéfinies ne devraient probablement pas être utilisés si vous recherchez des performances maximales et un code aussi propre que possible.

La raison en est que vous ne pouvez pas utiliser la fonction de nettoyage CSS si vous souhaitez conserver toutes les classes actuellement inutilisées pour une utilisation ultérieure.

3.3. Concentrez-vous sur la création de classes CSS réutilisables

Afin de garder le code CSS aussi léger que possible, il est très important de se concentrer sur la création de code modulaire réutilisable (ou dans ce cas, de no-code).

L'application d'un système de conception tel que la méthodologie de conception atomique peut certainement contribuer à ce que tout soit structuré et basé sur des composants, au lieu de créer de nouvelles classes pour chaque élément.

L'utilisation de conventions de dénomination des classes telles que le Client FirstL’ peut également aider à rester structuré.

3.4. Animations/interactions réutilisables

Comme pour le point précédent, s'assurer de réutiliser les animations et les interactions entre les éléments est crucial pour garder le code Javascript aussi léger que possible.

‍

3.5. Minimiser l'utilisation totale des animations

Vous avez probablement vu des sites Web développés avec Webflow qui sont remplis à ras bord d'animations et d'interactions sur la plupart, voire la totalité, des éléments.

Ce n'est pas seulement désagréable d'un point de vue esthétique, mais cela crée également une énorme quantité de Javascript généré qui doit être téléchargé et analysé lors du chargement de la page. Ce n'est pas drôle.

‍

‍

Voilà, c'est fait. Comme vous le voyez, il y a pas mal de choses à faire pour améliorer la vélocité de vos sites Web créés avec Webflow.

Nous espérons que vous avez trouvé de nouvelles informations qui vous aideront à atteindre la perfection en matière de performances.

Si vous avez d'autres trucs et astuces que vous souhaitez partager, n'hésitez pas à nous écrire, nous sommes toujours preneurs de tips :)

C'était Julien. Je suis fatigué et je m'en vais.

‍