1 - Redimensionner et compresser vos images
L'un des aspects les plus lourds du temps de chargement d'un site Web concerne la taille des images. Il est inutile d'affiche une image 4K dans un petit encart, vous perdez considérablement du temps de chargement à charger des ressources inutiles. Par ailleurs, il est possible d'abaisser la qualité d'une image sans en altérer le visuel à l'oeil humain : pour ce faire il faut compresser vos images.
Il convient de noter qu'il existe de nombreux outils permettant de compresser correctement vos images, voici un exemple d'outil : iloveimg.
2 - Utiliser le bon format d'image (SVG,PNG,JPEG)
Le format des image pour votre site webflow est important car les images de votre site jouent un rôle important dans la vitesse de chargement des pages et l'expérience globale de vos visiteurs.
Pour vous aider à choisir le bon format, cela dépend du type d'image et de l'objectif final. Les photos devraient utiliser un format de fichier JPEG, tandis que les logos et les illustrations simples devraient utiliser des fichiers PNG ou SVG.
N'oubliez pas que les formats JPEG et PNG peuvent aussi avoir la même qualité et une taille de fichier plus petite avec le format moins connu, WebP.
3 - Différer les scripts dans webflow
Les scripts utilisés sur votre site peuvent être configurés pour être différés. Cela peut être fait sous le code personnalisé de Project Setting et aussi sous Page Setting où le script a été utilisé.
Le "defer" indique au navigateur de ne pas attendre le script et de charger la page pendant que le script continue à se charger en arrière-plan. Cela peut être fait en ajoutant "defer" dans le code personnalisé avant la balise src.
Ainsi, en différant les scripts non-essentiels, vous verrez une amélioration de la vitesse de chargement.
4 - Minimiser le custom code
Une autre tactique efficace pour réduire le temps de chargement d'un site webflow, consiste à réduire les fichiers JavaScript et CSS. La minimisation est un processus qui supprime tous les caractères, commentaires et espaces inutiles dans le code, et utilise des noms de variables et de fonctions plus courts, ce qui permet de rationaliser le code.
Moins il y a d'octets de données dans votre code, plus la vitesse de chargement des pages est optimisée.
5 - Lazy load en scroll
Webflow est configuré par défaut pour charger les images de manière paresseuse, mais il arrive parfois que des images soient échappées ou que par erreur nous finissions par modifier leur chargement. Ainsi, en chargeant vos images "on scroll" vous réduisez considérablement le temps de chargement de votre page.
Voici la procédure à suivre :
Paramètres de l'image → Load → Lazy : Loads on scroll.
6 - Optimiser les fonts
Certaines Fonts peuvent être responsable à hauteur de 10% de la vitesse de chargement d'un site webflow. C'est pourquoi il important de consacrer du temps pour les optimiser.
Il y a deux choses à considérer avec les fonts :
- Les fonts doivent être optimisées avec un logiciel comme Fontforge avant d'être téléchargées dans un projet Webflow.
- Les fonts Google doivent être téléchargées et chargées manuellement pour éviter de charger des scripts inutiles.
7 - Retirer les styles qui ne sont pas utilisés
Nous créons des styles et des classes pendant le développement, mais nous finissons souvent par les supprimer des éléments. Or, qu'ils soient liés ou non à un élément, ces styles et ces classes augmentent la taille de stockage du site.
Voici la procédure à suivre :
Style Manager → Clean Up → Remove
8 - Supprimer les animations et déclencheurs qui ne sont pas utilisés
Pendant le développement, il arrive de créer des animations et des déclencheurs qui à la fin du projet ne seront pas publiés. L'idée est donc de supprimer ces scripts inutiles pour alléger le chargement de la page
Voici la procédure à suivre :
Interactions → Clean Up → Delete
