Erreurs de création de site Webflow : 10 pièges à éviter

Synqro accompagne plus de 150 entreprises depuis 2019 en tant que Webflow Premium Partner. Les erreurs de création de site Webflow listées ici sont celles qui reviennent quand un site doit être repris ou refondu. Si vous débutez, commencez par notre guide Webflow pour débutants, puis revenez à cette liste avant de publier.

1. Créer des classes sans convention de nommage

Dans Webflow, chaque style vit dans une classe. Sans règle de nommage, on finit avec des classes comme div-block-27 ou heading-copy-3, des doublons et des combinaisons impossibles à relire. Le problème n'apparaît pas au lancement, mais à la première modification.

• Conséquence : modifier une classe casse un autre bloc, et un nouveau prestataire perd du temps à comprendre la logique.
• Correction : adoptez une convention dès le premier jour, par exemple Client-First de Finsweet, avec des classes de structure, des classes utilitaires et des noms explicites (section_hero, button-primary).

Les principes et les limites de cette convention sont détaillés dans notre article sur la méthode Client-First sur Webflow.

2. Traiter le responsive à la fin

Construire toutes les pages en desktop, puis « adapter » le mobile en fin de projet, multiplie les retouches. C'est aussi un risque SEO : depuis le 5 juillet 2024, Google explore les sites avec son robot smartphone, comme l'annonce le blog Google Search Central. Un contenu caché ou cassé sur mobile est un contenu que Google voit mal.

• Correction : vérifiez chaque section sur les breakpoints tablette et mobile au moment où vous la construisez, pas à la fin. Utilisez flexbox, grid et des unités relatives (rem, %) plutôt que des largeurs fixes en pixels.
• À surveiller : boutons trop petits pour le doigt, textes qui débordent, menus inutilisables, images qui dépassent de l'écran.

La méthode complète est dans notre guide du responsive design sur Webflow.

3. Négliger le SEO technique de base

Webflow fournit les réglages SEO natifs, mais ne les remplit pas pour vous. Les oublis les plus fréquents :

• Titres Hn : plusieurs H1 sur une page, ou des niveaux choisis pour leur taille visuelle et non pour la structure.
• Balises title et meta description : vides ou identiques d'une page à l'autre, surtout sur les pages CMS.
• Texte alternatif : absent sur les images porteuses de sens, ce qui pénalise l'accessibilité et la recherche d'images.
• Sitemap et indexation : sitemap automatique non activé, pages utilitaires (merci, mentions, guide de style) laissées indexables.

Correction : créez des champs SEO dans chaque Collection CMS, reliez-les aux réglages de la page modèle, et passez une checklist page par page avant publication. Notre stratégie SEO pour Webflow détaille l'ensemble.

4. Laisser s'accumuler les classes et les styles inutilisés

Même avec une convention, un projet accumule des classes orphelines au fil des essais. Elles alourdissent la feuille de style et rendent le panneau Style difficile à lire.

• Correction : utilisez régulièrement l'option de nettoyage des styles inutilisés du Style Manager, et figez les éléments répétés en composants plutôt qu'en copies.

Les composants, leurs propriétés et leurs variantes sont expliqués dans notre guide des composants Webflow personnalisés.

5. Importer des images non optimisées

Une photo de 4 000 pixels de large exportée telle quelle depuis un appareil ou Figma pèse souvent plusieurs mégaoctets. Sur une page d'accueil, c'est la première cause de lenteur.

• Dimensions : redimensionnez à la taille d'affichage réelle avant l'import.
• Format : convertissez les photos en WebP ou AVIF, directement depuis le panneau Assets de Webflow.
• Chargement : laissez le chargement différé (lazy) sur les images sous la ligne de flottaison, mais passez l'image principale du haut de page en chargement immédiat (eager), sinon elle retarde l'affichage.

Les règles de nommage et de texte alternatif sont dans notre guide d'optimisation des images pour le SEO.

6. Multiplier les animations sans objectif

Les interactions Webflow sont puissantes. Empilées sur chaque section, elles ralentissent l'affichage, décalent les éléments au chargement et fatiguent les visiteurs sensibles au mouvement.

• Règle simple : chaque animation doit guider l'attention, confirmer une action ou clarifier une transition. Sinon, supprimez-la.
• Stabilité : n'animez pas la position d'éléments visibles au chargement, cela dégrade le CLS.
• Accessibilité : respectez le réglage système « réduire les animations » (prefers-reduced-motion) pour les effets de parallaxe et de défilement.

7. Construire le blog en pages statiques au lieu du CMS

Dupliquer une page pour chaque article ou chaque étude de cas paraît plus rapide au début. Au dixième contenu, chaque changement de mise en page doit être refait à la main, et les métadonnées divergent.

• Correction : une Collection CMS par type de contenu, une page modèle, des champs SEO dédiés et des champs de référence (catégorie, auteur, service lié) pour générer le maillage interne automatiquement.
• Plan nécessaire : le CMS demande le plan Premium (25 $ par mois en facturation annuelle depuis mai 2026).

8. Ignorer les Core Web Vitals

Les Core Web Vitals mesurent la vitesse d'affichage, la réactivité et la stabilité visuelle. Selon la documentation web.dev de Google, une page est jugée bonne si 75 % des visites respectent ces seuils :

Mesurez avec PageSpeed Insights et le rapport Signaux Web essentiels de Search Console, qui s'appuient sur des données de visiteurs réels. Les correctifs sont détaillés dans notre guide des Core Web Vitals.

9. Oublier les redirections 301 lors d'une migration

Changer d'URL sans redirection renvoie une erreur 404 aux visiteurs, aux liens externes et à Google. La documentation Google Search Central sur les déménagements de site recommande une redirection permanente de chaque ancienne URL vers son équivalent le plus proche.

1. Exportez toutes les URL de l'ancien site (crawl, sitemap, pages qui reçoivent du trafic ou des liens).
2. Associez chaque URL à sa nouvelle page, une par une, sans tout renvoyer vers l'accueil.
3. Saisissez les règles dans l'onglet Publishing des réglages du site Webflow.
4. Sur un site multilingue, créez aussi les règles des sous-répertoires de langue : les redirections Webflow ne s'appliquent pas automatiquement aux slugs localisés.
5. Testez chaque règle après publication et suivez les erreurs dans Search Console.

Le détail des formats de règles est dans notre guide des redirections 301 sur Webflow.

10. Publier sans phase de recette

Un formulaire qui n'envoie rien, un lien vers l'adresse webflow.io ou une page mal affichée sur Safari se voient dès les premiers visiteurs. Une recette de quelques heures évite l'essentiel :

• Liens : aucun lien cassé, aucun lien vers le sous-domaine de test.
• Formulaires : envoi testé, notification reçue, message de confirmation clair.
• Navigateurs : Chrome, Safari et Firefox, sur ordinateur et sur mobile.
• Performance : un passage PageSpeed Insights sur les pages principales.
• Suivi : outils de mesure actifs et bandeau cookies conforme.

Tableau récapitulatif des 10 erreurs

Après le lancement, chez Synqro, nous faisons un bilan trimestriel du site pour reprioriser les corrections et les contenus. Si votre site Webflow cumule plusieurs de ces erreurs, notre agence Webflow peut l'auditer et vous dire ce qui mérite d'être corrigé en premier.