Performance du site : Concevoir un site web axé sur la performance
5 min
Dans cet article
- Optimiser l'ordre de chargement des éléments
- Concevoir le design d'une section performante au-dessus du pli
- Utiliser des pages dédiées
- Optimiser les images et les vidéos
- chargement paresseux
- Gérer les éléments supplémentaires
- FAQ
Créez un site Web rapide et attrayant en effectuant des choix de design qui priorisent les performances. Lorsque vous choisissez ce que vous souhaitez afficher en premier, où placer les images et les vidéos, et comment organiser votre contenu, vous aidez à charger vos pages rapidement et à permettre aux visiteurs de trouver plus facilement ce dont ils ont besoin. Utilisez ces suggestions ciblées sur les performances pour améliorer la vitesse de votre site, maintenir l'intérêt des visiteurs et offrir une expérience fluide et professionnelle sur n'importe quel appareil.
Optimiser l'ordre de chargement des éléments
Les éléments de votre site se chargent dans un ordre spécifique en fonction de leur type et de leur taille. Comprendre cette commande vous permet de hiérarchiser ce qui apparaît en premier et garantit une expérience optimale.
- Éléments statiques : Il s'agit du texte et des formes de base qui se chargent le plus rapidement. Ajoutez-les au-dessus du pli pour assurer une visibilité rapide.
- Éléments fluides : Les images et les vidéos entrent dans cette catégorie. Bien qu'ils ajoutent de la vie à votre site, ils peuvent ralentir les performances. Placez-les sous le pli si possible.
- Éléments interactifs : Les éléments tels que les iFrames, les animations et les applis tierces se chargent en dernier. Utilisez-les avec parcion et stratégie pour éviter les temps de chargement longs.
Suggestion :
Nous vous recommandons de prêter une attention particulière à la page d'accueil, car il s'agit généralement de la première page que vos visiteurs rencontrent.
Concevoir le design d'une section performante au-dessus du pli
La section au-dessus du pli fait référence à la zone de votre page Web visible avant que l'utilisateur ne commence à faire défiler. Comme il se charge en premier, il est essentiel de le garder léger et utile.
Éléments recommandés :
- Texte : Utilisez un texte succinct et percutant qui communique clairement l'objectif de votre page. Tenez-vous aux polices système et évitez l'utilisation excessive de familles et de poids de polices.
- Appels à l'action (CTA) : Incluez des boutons ou des liens clairs pour guider les actions de l'utilisateur, telles que « Acheter » ou « En savoir plus ». Évitez de placer des éléments perturbateurs à côté des CTA.
Éléments à minimiser :
- Images ou vidéos de grande taille
- Animations
- Surutilisation d’images haute résolution
Suggestion :
Utilisez des outils tels que Google PageSpeed Insights ou le tableau de bord Vitesse du site Wix pour vous assurer que le contenu au-dessus du pli est optimisé pour un chargement rapide.
Utiliser des pages dédiées
La surcharge de pages avec trop d'éléments affecte les performances, en particulier la page d'accueil. Créez plutôt des pages dédiées à des fonctionnalités ou des applis de site spécifiques.
Ajoutez des pages pour des fonctionnalités telles que les boutiques, les blogs ou les vidéos, et créez des liens vers eux à partir de la page d'accueil avec des boutons ou des éléments de menu. Limitez la longueur des pages à moins de huit écrans en publiant du contenu sur les pages de votre site et en réduisant les éléments inutiles.
Optimiser les images et les vidéos
Les fichiers médias ralentiront souvent les sites Web en raison de leurs tailles et de leur résolution importantes. Voici comment les gérer efficacement :
Images :
- Utilisez des formats légers comme WebP ou JPEG.
- Compressez les fichiers avant de les importer sur Wix.
- Présentez des images dans une galerie Pro pour une optimisation intégrée.
Vidéos :
- Hébergez des vidéos sur Wix Vidéo, YouTube ou Vimeo pour optimiser les performances.
- Évitez de placer les vidéos au-dessus du pli pour des chargements de page initiaux plus rapides.
chargement paresseux
Le chargement paresseux retarde le chargement des images et des vidéos jusqu'à ce qu'elles apparaissent dans la fenêtre de l'utilisateur, ce qui améliore les temps de chargement initiaux des pages. Cette fonctionnalité est automatiquement activée dans Wix mais fonctionne mieux lorsque les images et les vidéos sont placées dans des éléments pris en charge, comme des galeries ou des bandes, et qu'au-dessus du pli le contenu est conservé minimal pour une visibilité plus rapide.
Gérer les éléments supplémentaires
D'autres décisions de design peuvent également avoir un impact sur la vitesse et les performances de votre site :
- Boutons : Créez des boutons clairs et concis qui renvoient à du contenu pertinent ailleurs sur votre site. Par exemple, vous pouvez utiliser « Explorer le catalogue » ou « Voir plus de projets ».
- Code personnalisé : Assurez-vous que tout code personnalisé est optimisé et utilise des attributs tels que « defer » ou « async » pour réduire le décalage.
- Pagination ou boutons En voir plus : Spécialement pour les sites avec beaucoup d'articles, évitez d'afficher tous les articles à la fois sur une seule page. Mettez en place des fonctionnalités de pagination ou de chargement à la demande pour maintenir un chargement efficace.
Suggestions :
- Tester régulièrement : Utilisez Google PageSpeed Insights et le tableau de bord de la vitesse du site Wix pour surveiller et améliorer les performances.
- Donner la priorité au-dessus du contenu du pli : Assurez-vous que le contenu clé se charge rapidement en ajoutant des éléments légers et statiques.
- Minimiser les applis tierces : Utilisez uniquement les applis ou les widgets essentiels pour éviter les blocages inutiles.
FAQ
Cliquez sur une question ci-dessous pour en savoir plus.
Pourquoi mon site Wix est-il lent à se charger et comment puis-je améliorer sa vitesse ?
Pourquoi mon site mobile est-il plus lent que mon site sur ordinateur ?
Comment puis-je améliorer mon score Largest Contentful Paint (LCP) ?
Quel est le meilleur moyen d'afficher un grand nombre d'articles sans ralentir ma boutique ?