Comment optimiser votre site web pour de meilleures performances
Les performances web jouent un rôle crucial dans la navigation en ligne. Les sites performants améliorent la perception des marques, ce qui vous donne un avantage concurrentiel en ligne, et une raison de revenir pour les utilisateurs. Les sites plus rapides suscitent un engagement plus fort et retiennent les visiteurs plus longtemps, ce qui augmente les ventes et votre résultat net.
Afin de garantir une excellente expérience utilisateur, vous vous devez d’optimiser continuellement les performances de votre site - et c'est d'autant plus important depuis l'arrivée de nouveaux indicateurs de performance de Google, les Core Web Vitals (CWV) ou Signaux Web essentiels.
Les indicateurs CWV simplifient la mesure et le suivi des performances en évaluant trois facteurs du site qui ont un impact sur la vitesse des pages. En quoi cela vous concerne-t-il ? Google intègre les Core Web Vitals dans son algorithme de recherche, ce qui signifie que ces indicateurs peuvent jouer un rôle dans la façon dont le plus grand moteur de recherche du monde classe votre site.
Nous nous efforçons de toujours tenir à jour notre solution, et d’améliorer notre infrastructure, pour que les sites de nos utilisateurs chargent et fonctionnent aussi rapidement que possible. Cependant, de nombreux autres facteurs contribuent aux performances d’un site, comme les applications, le design et les médias - c’est sur ces aspects que vous devez vous pencher.
Dans cet article, nous allons vous présenter les différents les actions que vous pouvez mener pour améliorer les performances de votre site. Alors que les Core Web Vitals sont en passe de devenir le nouveau standard prenez dès maintenant une longueur d’avance.
Introduction
Priorités d’optimisation
Dans cette section, nous aborderons les aspects sur lesquels vous devez vous interroger et les enseignements que vous pouvez en tirer pour améliorer d’emblée les performances de votre site.
À quoi sert votre site ?
En ce qui concerne l’optimisation des performances web, une bonne règle de base consiste à considérer les objectifs de votre site. Cela vous aidera à comprendre le type d’expérience que vous voulez offrir à vos visiteurs et vous donnera une meilleure idée des actions que vous attendez d’eux lorsqu’ils explorent votre site.
Mesurez la vitesse de votre site
Avant de commencer, vérifiez le temps de chargement de votre site pour identifier ce qui peut le ralentir. Le nouveau tableau de bord Vitesse du site de Wix Analytics vous permettra de voir plus facilement les performances de votre site en fonction des données réelles des utilisateurs (ou données de terrain), ainsi que vos résultats PageSpeed Insight, basés sur des données de laboratoire, pour les ordinateurs et les appareils mobiles.
En mesurant régulièrement vos performances, vous disposerez les informations dont vous avez besoin pour optimiser au mieux votre site.
Que savez-vous des utilisateurs de votre site (et de leurs temps de chargement) ? Sont-ils dans des pays où le réseau est plus lent ? Utilisent-ils des appareils mobiles peu performants ? Si tel est le cas, vous pouvez envisager d’optimiser certains aspects de votre site pour garantir un temps de chargement optimal, quel que soit le réseau ou l’appareil utilisé.
Bien démarrer
Optimisez vos médias pour un chargement plus rapide
Les photos, les images et les vidéos peuvent rendre votre site web plus attrayant, mais aussi le ralentir. Pour garantir un chargement plus rapide, Wix optimise automatiquement les images et les vidéos pour vous : une version basse qualité des images (LQIP pour « low-quality image placeholders ») est créée - elles seront ensuite remplacées par des images de meilleure qualité lorsque vos visiteurs feront défiler la page - et le chargement des médias qui se trouvent en dehors de la zone affichée est retardé (ce que l'on appelle « lazy loading » ou chargement différé).
Voici quelques éléments à prendre en compte pour optimiser vos médias et améliorer les performances de votre site.
Utilisez des fichiers JPG au lieu de PNG lorsque c'est possible.
Les images JPG peuvent être jusqu’à 10 fois plus légères que les PNG : par conséquent, elles chargent beaucoup plus rapidement. Utilisez-les donc lorsque c’est possible. Réservez les PNG lorsque vous avez besoin d'images transparentes (ce qui n'est pas possible avec le format JPG), ou des images de très haute qualité.
Utiliser les fichiers SVG pour les formes, les icônes et les logos.
Tandis que les formats PNG et JPG sont bien pour les photos, le SVG est plus adapté aux formes et éléments de type illustration, comme les logos. Les fichiers SVG sont généralement beaucoup plus légers que les PNG et les JPG ; ils chargent également plus rapidement, car ils sont directement intégrés dans le HTML. De plus, ils conservent une apparence nette, quel que soit la taille d'affichage.
Nous recommandons d’utiliser des JPG/PNG uniquement lorsque l'image est TRÈS complexe, et que les dimensions sont plutôt petites - en particulier pour les formes qui s’affichent en dehors du champ de vision.
Évitez les GIF animés.
Les GIF, bien qu'attrayants et tendance, ont généralement une taille de fichier importante, et prennent donc du temps à charger. Si vous souhaitez ajouter des éléments animés à votre site, privilégiez le format vidéo, de plus petite taille et pouvant afficher le contenu avant d'être entièrement téléchargé. Utilisez les GIF pour les graphiques animés simples, ou les logos, ou si l’animation de votre contenu contient quelques images et sont de petite dimension (par exemple 100 x 100).
Conseil : obtenez de meilleures performances avec la VideoBox Wix
L’utilisation de la VideoBox au lieu de GIF animés permet de meilleures performances que les lecteurs vidéo externes tels que YouTube et Vimeo.
Optimisation des médias
Optimisation complémentaire des médias
Voici quelques conseils supplémentaires sur l’optimisation des médias pour améliorer vos performances web.
Regroupez les images lorsque c'est possible
Si vous utilisez des superpositions d’images, le fait de les regrouper en une seule peut réduire la taille totale du fichier. Cela peut, par la même occasion, vous permettre de vous libérer du besoin de transparence, et donc vous permettre d’utiliser un fichier JPG et non PNG.
Installez-vous et profitez d’un chargement différé
Wix utilise le « lazy loading », ou chargement différé, pour garantir des temps de chargement plus rapides et fluides. C’est le cas lorsqu’une image haute résolution est téléchargée et remplacée par un LQIP. Pour optimiser ce chargement différé, déplacez les images moins prioritaires plus bas sur la page afin qu’elles aient le temps de charger complètement.
Divisez les grandes images d’arrière-plan en sections
Les pages web peuvent s’étendre sur plusieurs écrans, et le navigateur peut attendre le chargement des grandes images d'arrière-plan, ce qui peut entrainer un retard. Pour accélérer les choses, divisez les grandes images d’arrière-plan en sections verticales, d’une longueur d’écran environ. De cette façon, le chargement différé peut aider votre page à charger plus rapidement, et les images ne seront téléchargées que lorsque l’utilisateur commencera à faire défiler la page.
Améliorez vos performances Web avec le lecteur vidéo Wix
Utilisez le lecteur vidéo intégré de Wix au lieu de lecteurs vidéo externes comme YouTube et Vimeo, afin de garantir de meilleures performances Web.
Alignez les couleurs d’arrière-plan avec celles de l’image primaire
Vous pouvez définir une couleur pour les images d’arrière-plan telles que les bandes et les colonnes. Cette couleur est visible lorsqu’elle est affichée derrière une image partiellement transparente et apparaît également avant le chargement de toute image. La sélection d’une couleur d’arrière-plan qui correspond à la couleur primaire de votre image peut également améliorer la façon dont les utilisateurs perçoivent la navigation sur votre page.
Un site web qui utilise le chargement différé (« lazy loading ») pour des temps de chargement optimaux
Optimisation complémentaire des médias
Conclusion
Many agencies aren’t upselling soon enough. And they’re risking premature customer churn because of it.
Knowing when to upsell a client can feel more art than science, but a study by Vendasta claims to have found the perfect time to expand your relationship with a client: 3 months.
Ninety days may seem like a short timeline to start upselling, but if a client is satisfied with your work in that time period then upselling can bring them more value quicker than they expected. Alternatively, if they’re not satisfied, it gives you a chance to recalibrate so you can keep their business. Both of those scenarios result in additional revenue you would have missed out on had you not initiated the conversation.
Upsells are easier to approach and able to start earlier than most agencies realize. Here are four critical steps that will help you upsell sooner successfully.
Optimisez votre texte
En général, un texte charge plus rapidement que des images, mais il existe des moyens d’optimiser enocre le texte et les polices de votre site.
Intégrez du texte au-dessus du champ de vision
Un texte au-dessus du champ de vision permet aux visiteurs de se renseigner sur votre site avant de défiler. Rendez-le attrayant et actionnable, afin que les internautes aient envie de continuer à explorer votre site. Les visiteurs risquent de quitter un site si le texte au-dessus du champ de vision n’est pas pertinent (ou pire, s’ils ont l’impression que la page n’est pas entièrement chargée parce qu’elle est vide). Par conséquent, utilisez judicieusement cet espace, et vos mots, pour avoir un impact et un engagement maximum.
Limitez vos polices d’écriture
Nous avons bien conscience de la dimension ludique des polices, mais utilisées en trop grand nombre, avec des poids et des tailles trop conséquents, elles peuvent s’afficher de façon désordonnée, rendre la lecture difficile et affecter les performances de votre page. Dans de nombreux cas, le texte ne devient visible que lorsqu’un fichier de police est téléchargé. Par conséquent, si plusieurs fichiers de police doivent être téléchargés par un utilisateur, le temps de chargement des pages peut être plus lent. Nous vous recommandons de limiter à cinq maximum le nombre des variations de police sur une page.
Ne téléchargez une police personnalisée qu’une seule fois
Si vous choisissez d’utiliser une police personnalisée, veillez à ne la pas télécharger plusieurs fois. En effet, cela entraînerait un téléchargement multiple pour la même page et nuirait donc aux performances de votre site et le ralentir. L’éditeur Wix propose une solution idéale pour télécharger les polices personnalisées que vous souhaitez utiliser tout en en continuant à optimiser votre temps de chargement.
Évitez le texte dans les images
L'utilisation conjointe de texte et d’images participe d'une navigation agréable, mais peut nuire à vos performances web. D'une part, les moteurs de recherche et les lecteurs d’écran ne peuvent pas détecter le texte intégré à une image. De plus, dans la plupart des cas, le texte est pixellisé et plus difficile à lire. Enfin, en ce qui concerne les performances, le texte n’est pas visible avant le chargement complet de l’image
Utilisez les animations de révélation avec parcimonie
Les animations de révélation peuvent attirer l’attention sur un contenu important et enrichir l’expérience de chargement. Mais lorsqu’elles sont utilisées de manière excessive, elles peuvent être gênantes. Pire encore, le texte restera illisible jusqu’à la fin des animations, ce qui augmentera le temps de chargement.
Veillez à un contraste fort
Lorsque vous utilisez du texte sur une image, veillez à ce qu’il y ait un fort contraste avec l’image sous-jacente et la couleur d’arrière-plan.
Exemple de la page d'accueil d'un site
Optimisation de texte
Quels autres éléments ralentissent votre site ?
Si vous constatez toujours des problèmes de performances sur votre site, voici quelques éléments supplémentaires à prendre en compte et à actualiser à des fins d’optimisation.
Examinez la complexité de votre site et la longueur de ses pages
La longueur des pages est un bon moyen d’évaluer l’expérience de chargement de votre site. Les pages de votre site s’étendent pour supporter la quantité de contenu que vous souhaitez publier, mais plus il y a de contenu sur une page, plus elle sera longue, et plus son chargement est long. Envisagez de diviser les pages trop longues en plusieurs plus courtes, avec un contenu spécifique.
Optimisez votre site pour mobile
Utilisez l’Éditeur mobile pour vous assurer que votre site s’affiche correctement sur tous les appareils. Choisissez une mise en page, ajoutez du contenu différent pour le mobile et le bureau, masquez le contenu moins important et réduisez le nombre d’éléments dans les galeries, les flux et les répéteurs.
Comprenez comment iFrames, Google Ads et les outils de suivi affectent votre site
Les intégrations de sites comme iFrames (qui télécharge du HTML supplémentaire et d’autres ressources) et Google Ads, peuvent avoir un impact négatif sur les performances web. Utilisez iFrames avec parcimonie et, si vous utilisez Google Ads, assurez-vous que toutes les cases sont visibles. Les outils de suivi et d’analyse (Tracking and analytics, T&A) peuvent également ralentir les choses. Ainsi, n’incluez que ceux qui sont nécessaires pour analyser la façon dont les visiteurs interagissent avec votre site. Vous pouvez également tester les performances de votre site avant et après (avec et sans) les pixels espions, afin de mieux évaluer l’impact qu’ils ont sur les performances de chargement de votre site.
Limitez votre utilisation des lightbox
Une lightbox est une fenêtre contextuelle qui s'ouvre automatiquement par-dessus le contenu de la page d'accueil. C’est un excellent moyen d’afficher des annonces importantes, comme des ventes spéciales ou l'inscription à votre newsletter, mais encore une fois, cela crée un délai avant que ce contenu principal de votre site ne soit visible. Gardez cela en tête et utilisez cet outil à bon escient.
Conclusion
Avec le déploiement des Core Web Vitals de Google dans le cadre de son algorithme de recherche, l’optimisation des performances doit toujours être une priorité. Chez Wix, nous nous efforçons toujours d’optimiser les performances des centaines de millions de sites hébergés sur notre plateforme en restant à l’affût des derniers développements en matière de performances.
Conseils généraux d’optimisation
Ready to learn more?
For an overview of website performance and to get your site up to speed, read our Intro to Performance article. Or to get a detailed understanding of Core Web Vitals, read our in-depth guide.
Author: Dan Shappir
Dan focuses on optimizing all sites hosted on Wix for speed. With over 25 years of software development experience, Dan has worked on systems ranging from multi-user games to missile trajectory simulations. He is a frequent speaker at technical conferences, a panelist on the JavaScript Jabber podcast and a member of the Google Chrome Advisory Board (CAB). Dan holds an M.Sc. in Computer Science.
Envie d’en savoir plus ?
Pour tout savoir sur les performances d’un site web et mettre votre site à niveau, consultez notre article « Introduction aux performances Web », et pour en savoir plus sur les Signaux Web essentiels, consultez notre guide détaillé.
Dan se concentre sur l’optimisation de la vitesse de tous les sites hébergés sur Wix. Fort de plus de 25 ans d’expérience dans le développement de logiciels, Dan a travaillé sur des systèmes allant des jeux multijoueurs aux simulations de tirs de missiles. Il intervient fréquemment lors de conférences techniques, participe au podcast JavaScript Jabber et est membre du comité consultatif de Google Chrome (CAB). Dan est diplômé d’un Master en sciences informatiques.
Auteur: Dan Shappir
Performance Tech Lead chez Wix.com
