Comment optimiser la vitesse de chargement d'un site Webflow ?

Qu'est-ce que la vitesse de chargement ?

La vitesse de chargement d'un site, correspond au temps en secondes que mettra votre page à s'afficher. Cette donnée est à prendre en compte et surveiller avant de publier votre site.

‍

Un temps de chargement trop long pourra avoir plusieurs impacts :

• Sur l'expérience utilisateur et la fidélisation de vos utilisateurs

• Sur l'indexation de votre site et votre référencement naturel

• Baisse du nombre de visiteurs

• Baisse du taux de conversion

‍

Pourquoi optimiser la vitesse de chargement d'un site web ?

Il est devenu primordial d'optimiser la vitesse de chargement de votre site. Premièrement pour votre référencement naturel. Mais aussi pour l'expérience utilisateur. En effet, la plupart des utilisateurs quittent un site web s'il met plus de 3 secondes à se charger. Si vos pages mettent trop de temps à charger, vous risquez d'avoir un taux de rebond élevé, et perdre une grande partie de vos audience.

Le classement de votre dans les résultats de recherche dépendra de l'expérience que vous offrirez à vos utilisateurs.

‍

Comment vérifier la vitesse de chargement de votre site ?

Vous pouvez accéder gratuitement à un certain nombre d'outils gratuits pour vérifier la vitesse de votre site. Le plus connu et le plus efficace est PageSpeed Insights, de Google. Il donne accès à des suggestions, avec les éléments à corriger, à envisager, et règles adoptées.

Vous pouvez aussi utiliser GTmetrix, Dare Boost ou Pingdom.

‍

Comment optimiser la vitesse de chargement ?

Redimensionner et compresser vos images

Le poids de vos images est l'un des aspects les plus importants du temps de chargement de vos pages. Il n'est pas nécessaire d'ajouter des images en qualité optimale, notamment si elles sont petites. Vous risquez d'impacter le temps de chargement, en chargeant des ressources inutiles.

‍

Vous pouvez optimiser la qualité de vos images en les compressant. Cela n'aura pas d'impact sur la qualité visuelle.

Pour compresser vos images, vous pouvez utiliser iLoveIMG, ou autre outil similaire.

‍

Le format de vos images sera aussi important pour optimiser votre site Webflow. Le bon format dépendra du type d'image et de l'emplacement dédié. Les photos peuvent être utilisées au format JPEG. Pour les logos, utilisez le format SVG pour les logos et icônes pour les adapter à n'importe quel format, sans impacter leur qualité.

‍

Optimiser vos fonts

Les fonts ajoutées à votre projet peuvent elles aussi impacter la vitesse de chargement de votre site Webflow. Afin de ne pas impacter le temps de chargement de vos pages, vous devez partir sur de bonnes bases :

• Vos fonts doivent être optimisées avec un logiciel dédié, avant d'être ajoutées à votre projet Webflow

• Les fonts Google doivent être téléchargées et chargées manuellement afin d'éviter de charger les scripts inutilisés

‍

Différer vos scripts

Vous pouvez configurer vos scripts Webflow pour les différer. Cela peut être fait via du custom code, ou sous le Page Setting, où le script a été utilisé. En différant vos scripts non-essentiels, vous pourrez améliorer la vitesse de chargement de votre site. Pour cela, ajoutez "defer" dans la code personnalisé, avant la balise src. Le defer indiquera au navigateur de charger la page en simultané du script.

‍

Réduire votre custom code

L'une des clés aussi très importante pour réduire le temps de chargement de votre site Webflow, est de réduire les fichiers JavaScript et CSS. Cette étape permet de supprimer tous les caractères et éléments inutiles dans le code. Le code sera rationalisé, puisqu'il utilisera des noms de variables et de fonctions plus courts.

Ajouter de nombreuses fonctionnalités à votre site ou à une page n'est pas nécessaire. En effet, les éléments inutiles peuvent réellement alourdir votre page, et ralentir la vitesse de chargement.

‍

Supprimer les styles, classes et animations inutilisées

Lors du développement de votre site Webflow, il est possible que vous créiez des styles, classes et animations, que vous n'utiliserez finalement pas. Le problème, c'est que cela freine le temps de chargement de vos pages. Pour l'optimiser, vous pouvez utiliser l'outil clean-up panel Webflow pour supprimer automatiquement les classes et animations inutilisées.

‍

Chez Octolio, nous prenons en compte tous ces éléments. En tant qu'agence de création de site Webflow, nous souhaitons offrir à chacun de nos clients des solutions performantes.

‍