Comment optimiser la vitesse de votre site Webflow ? Techniques & astuces

Qu'est-ce qui ralentit votre site ?

Avant de commencer à appliquer les conseils pour optimiser votre site Web, vous devez identifier ce qui pourrait le ralentir. Il existe de nombreuses façons différentes d'analyser les métriques de vitesse de votre page, mais l'une des plus courantes est Google's PageSpeed Insights (PSI), introduit en 2009 et commencé à être appliqué comme un facteur dans le classement de votre site Web. Une autre manière de mesurer la performance de votre site est d'utiliser Lighthouse via les outils de développement de la console Chrome. Assurez-vous de toujours vérifier que vous analysez en mode "Incognito" pour éviter toute interférence inutile.

Google's PSI et Lighthouse rapportent les métriques suivantes sur votre site :

• First Contentful Paint (FCP) : Mesure le temps depuis le début du chargement de votre page jusqu'à ce que n'importe quelle partie du contenu de la page soit rendue à l'écran.

• Speed Index (SI) : Mesure la rapidité avec laquelle le contenu de votre page est chargé et visible pour l'utilisateur.

• Largest Contentful Paint (LCP) : Mesure la rapidité avec laquelle le contenu principal de votre page est chargé.

• Total Blocking Time (TBT) : Mesure le temps total pendant lequel votre page était bloquée, empêchant l'utilisateur d'interagir avec elle.

• Cumulative Layout Shift (CLS) : Mesure le déplacement inattendu des éléments pendant que votre page est rendue.

• First Input Delay (FID) : Mesure le temps depuis qu'un utilisateur fait quelque chose sur votre site (comme cliquer sur un bouton) jusqu'au moment où le navigateur est réellement capable de répondre à cette interaction.

• Interaction to Next Paint (INP) : Mesure la capacité de votre site à gérer les interactions des visiteurs (chaque fois qu'un utilisateur clique sur quelque chose, la page doit être prête à répondre rapidement).

• Time to First Byte (TTFB) : Mesure le temps dans lequel le serveur répond à une demande.

Avertissement : Assurez-vous de vérifier les résultats à la fois pour les ordinateurs de bureau et les mobiles, car il pourrait y avoir différents domaines nécessitant une optimisation.

Mais peu importe la méthode que vous finissez par utiliser, l'objectif reste le même - s'assurer que vous restez dans la zone verte. Alors, commençons et voyons ce qui peut être fait pour rendre votre Webflow plus rapide.

Optimisation par défaut de Webflow

Grâce à l'hébergement CDN ultra-rapide de Webflow et au fait qu'ils n'exécutent aucun add-on ou plugin supplémentaire, beaucoup est déjà pris en charge par défaut. Voici certaines des fonctionnalités intégrées par Webflow pour améliorer les performances :

• Option de minification CSS/HTML/JS (à activer ou désactiver pour chacun).
• Chargement différé des images par défaut (ne couvre pas les images d'arrière-plan).
• Ajuste automatiquement vos images pour différentes tailles d'écran.
• Génère et stocke des pages statiques pour les éléments de votre collection CMS.
• Configure l'option de préchargement des liens ("prefetch" ou "prerender").
• Active un chargement de police plus fluide (réglez sur "swap" dans les paramètres d'affichage de la police).

Et bien que Webflow travaille constamment à l'amélioration de leur service, ce n'est pas suffisant si vous voulez un site hautement performant. Il y a tellement plus que vous pouvez faire par vous-même.

Étapes supplémentaires pour une performance maximale du site web

Si vous voulez que votre site Webflow soit ultra-rapide, voici l'opportunité de prendre les choses en main et de le réaliser. En appliquant les conseils de cet article, vous serez capable d'améliorer vos taux de conversion, de réduire les taux de rebond et de maximiser l'expérience utilisateur.

Il y a beaucoup de choses que vous pouvez faire pour améliorer la performance de votre site web et rester dans la zone verte, ce qui signifie que vous améliorerez très probablement vos taux de conversion et l'expérience utilisateur globale. Tout cela vous rapportera plus d'argent.

1. Scripts tiers

Les scripts tiers exécutés sur votre site web sont l'une des causes les plus courantes de la lenteur des performances du site, car ils ne sont pas optimisés et sont souvent très lourds. Mais en même temps, la plupart des sites modernes ne peuvent pas s'en passer - le moins que vous utilisez probablement, ce sont les analyses. Personnellement, je ne peux pas imaginer avoir un site web sans savoir ce qui s'y passe.

• Tous les scripts ne doivent pas s'exécuter sur toutes les pages.
• Déplacez les scripts de <head> à <footer>.
• Ajoutez les attributs "async" ou "defer".
• Intégrez si le code est petit.
• Retardez le chargement du script.
• Chargez les scripts en fonction des conditions.

2. Images

Les images sont l'un des éléments les plus lourds de votre page et offrent le plus de possibilités d'amélioration. Webflow gère une petite partie de cela par défaut, mais ce n'est que la pointe de l'iceberg.

• Utilisez le format WebP.
• Chargez paresseusement les images.
• N'utilisez pas d'images d'arrière-plan.
• Utilisez des SVG pour les images vectorielles.
• Intégrez les petits SVG.

3. Polices

Certaines des fonctionnalités par défaut de Webflow sont déjà axées sur l'optimisation de vos polices, mais il reste encore quelques astuces à faire.

• N'utilisez pas trop de polices.
• Préchargez les polices.

4. Vidéos

Les vidéos sont une histoire sans fin de performances lentes sur Webflow. Leur solution native peut diminuer la qualité vidéo et certains utilisateurs ont même signalé que les vidéos optimisées sortaient plus grandes. Pas du tout amusant.

5. Organisation du site web

Beaucoup d'améliorations peuvent réellement provenir de simples actions routinières que vous devriez effectuer régulièrement.

Nettoyage :

Si vous supprimez juste des éléments ou des pages, les classes ne sont pas réellement supprimées et elles continuent de fonctionner avec votre fichier CSS. Vous devriez régulièrement faire le ménage dans le "Gestionnaire de style" et supprimer les éléments inutilisés. Faites de même pour les brouillons inutilisés et les animations dans l'onglet "Interactions".

Activez la mise en cache du navigateur :

Les navigateurs mettent en cache les ressources localement une fois qu'elles ont été téléchargées (pour qu'elles puissent être utilisées dans le futur). Assurez-vous donc d'activer la mise en cache du navigateur dans les paramètres côté serveur et de configurer la date d'expiration.

Organisez les styles :

L'une de vos pratiques les plus courantes devrait être d'organiser les styles et de les réutiliser autant que possible. Définissez les polices, tailles de texte, couleurs, marges et paddings par défaut au niveau racine.

Désactivez les fonctionnalités que vous n'utilisez pas :

Webflow active des fonctionnalités e-commerce supplémentaires sur votre site web, mais elles sont chargées avec du code JavaScript supplémentaire et des pages pré-construites. Vous pouvez donc imaginer que cela rend votre site beaucoup plus lourd et plus lent.

Concentrez-vous sur la première section :

La première section visible de votre site web est la plus importante car elle doit tout charger d'un coup. Rendez-la légère, sans images ou avec très peu de petites images, des animations légères et des effets de code/dégradé (évitez les animations Lottie lourdes).

Continuez les tests :

Tester constamment la performance de votre site web est l'un des meilleurs conseils que vous recevrez. Les rapports dépendent de votre réseau, matériel, temps de réponse du serveur, extensions de navigateur et tout logiciel que vous exécutez, il est donc vraiment important que vous réalisiez ces analyses plus d'une fois (5-10 au moins pour des résultats optimaux).