La mise en place et la gestion d’un site Web ou d’un projet de commerce électronique sont excellentes – cependant, votre travail est loin d’être terminé une fois que votre site est opérationnel.

Sans une surveillance appropriée de la santé et des performances, votre site Web en subira les conséquences – qui peuvent être bien plus importantes qu’une simple vitesse de chargement lente.

Tournons notre attention vers un scénario hypothétique et idéal où tous les sites Web du monde fonctionnent comme ils le devraient. Saviez-vous qu’au-delà de la montée en flèche de la satisfaction des utilisateurs, nous contribuerions également à un meilleur environnement ?

Les sites Web peu performants ont non seulement un impact sur quiconque les crée ou les utilise, mais ils laissent également une empreinte carbone plus importante.

Selon le Website Carbon Calculator, les sites Web ont une empreinte carbone et la page Web moyenne émet 0,5 gramme de dioxyde de carbone par vue. C’est juste la médiane.

Lorsque l’on regarde la moyenne, qui prend également en compte les sites Web très polluants, ce nombre monte à 0,9 gramme.

Outre les problèmes à l’échelle mondiale, un site Web malsain et insuffisamment performant vous coûtera du temps, de l’argent et des revenus. La santé d’un site Web est similaire à la nôtre : il est facile de le négliger et difficile de l’améliorer.

Vous devez connaître les principaux composants qui composent la santé du site Web pour mener des pratiques de surveillance appropriées afin de réduire le temps de traitement.

Avec l’émergence de créateurs de sites Web rapides et faciles, la création de sites Web est devenue accessible à tous. Tout ce que vous avez à faire est de vous inscrire, de choisir un domaine, de choisir votre modèle et le tour est joué ! Vous avez un site Web en quelques secondes.

Cependant, de nombreux propriétaires de sites Web rejettent le fait que la création d’un site Web n’est que la première étape. Le maintien des performances et la surveillance de la santé sont également cruciaux.

Et sur cette note, examinons quelques indicateurs essentiels de santé et de performance du site Web : ce qu’ils sont, comment les surveiller et comment apporter des améliorations.

Aspects à surveiller pour un score de santé de site Web élevé

Vitals Web de base

Score de santé élevé du site Web via Core Web Vitals

Google PageSpeed Insights

Les premières mesures que vous devez prendre en compte lors de la réalisation de tests de performances sont vos Core Web Vitals. Ces indicateurs de performance montrent la vitesse, la stabilité et la réactivité, vous aidant à comprendre la qualité de l’expérience utilisateur de votre site Web.

Plusieurs outils suivent vos Core Web Vitals, mais de nombreux propriétaires de sites Web se tournent vers un outil simple : Google PageSpeed ​​Insights.

Après avoir entré votre URL dans l’outil, un rapport vous sera présenté indiquant si vous avez réussi votre test Core Web Vitals et tout autre aspect que vous devez surveiller. Voici les trois mesures clés que vous verrez :

La plus grande peinture de contenu (LCP)

Visez un score de 2,5 secondes ou moins.

Si votre score est supérieur à 2,5 secondes, cela peut indiquer ce qui suit : votre serveur est à la traîne, les temps de chargement des ressources ne sont pas à la hauteur, vous avez un nombre élevé de JavaScript et de CSS bloquant le rendu, ou le rendu est lent côté client.

Premier délai d’entrée (FID)

Visez un score de 100 millisecondes ou moins.

Si votre score dépasse ce délai, vous devrez peut-être réduire l’impact du code tiers, réduire le temps d’exécution de JavaScript, minimiser le travail du thread principal, limiter les tailles de transfert et limiter le nombre de demandes.

Décalage de mise en page cumulé (CLS)

Visez un score de 0,1 ou moins.

Si votre score dépasse cela, vous pouvez éviter les changements de mise en page aléatoires en incluant des attributs de taille sur votre contenu visuel et vidéo (ou en réservant l’espace avec des boîtes de rapport d’aspect CSS). Évitez de chevaucher votre contenu et faites attention lorsque vous animez vos transitions.

Bloqueurs de vitesse de page

Plusieurs facteurs peuvent affecter la vitesse de chargement de votre site Web. Cependant, si vous avez un budget limité en temps et que vous souhaitez d’abord vous concentrer sur les principaux coupables, portez une attention particulière aux facteurs suivants :

  • Code JavaScript et CSS inutilisé.
  • Code JavaScript et CSS bloquant le rendu.
  • Code JavaScript et CSS non minifié.
  • Grandes tailles de fichiers image (plus d’informations ci-dessous).
  • Trop de chaînes de redirection.

Afin d’améliorer le chargement des fichiers JavaScript et CSS, pensez à les précharger.

Une autre option consisterait à activer les premiers conseils, qui indiquent au navigateur dans la réponse du serveur HTTP quelles ressources il doit commencer à télécharger en tirant parti du « temps de réflexion du serveur », accélérant ainsi le chargement de la page.

Pour tester votre site Web :

  1. Accédez à https://pagespeed.web.dev/
  2. Entrez l’URL de la page que vous souhaitez numériser.

Je vous recommande de choisir d’abord votre page d’accueil.

Un autre outil pratique est WebPageTest.org, qui affiche également vos Core Web Vitals et d’autres mesures qui peuvent vous aider à améliorer considérablement les performances et la santé de votre site Web. De plus, c’est gratuit !

Collez simplement une URL de page dans le champ de recherche affiché sur le site, et il effectuera un test complet à partir d’un emplacement par défaut.

Vous pouvez également vous inscrire en tant qu’utilisateur et choisir parmi une liste d’emplacements pour tester votre site Web à partir de différents pays, appareils et navigateurs.

WebPageTest vous montrera exactement où en est votre site Web en termes de performances et ce qui pourrait le ralentir grâce à un résumé des performances composé de quatre sections clés : opportunités et expériences, métriques observées, mesures des utilisateurs réels et exécutions individuelles.

métriques observées

Chez UCRAFT, nous utilisons une combinaison d’outils tels que PageSpeed ​​Insights, Chrome Dev Tools, WebPageTest et plusieurs autres, pour acquérir une compréhension claire de ce sur quoi nous devons travailler en ce qui concerne les performances de notre site Web – d’autant plus que l’industrie SaaS est déjà très compétitif.

Éléments de design

éléments de design

Lorsque nous pensons aux performances du site Web et à la surveillance de la santé, nous laissons généralement cela à l’équipe technique.

Mais que diriez-vous si je vous disais comment vous concevez votre site Web, et les éléments que vous choisissez peuvent faire ou défaire votre performance ?

C’est vrai – il est temps d’impliquer l’équipe de conception.

Optimisation des images

Les images sont excellentes, mais elles peuvent ralentir votre site Web si elles ne sont pas correctement dimensionnées. Assurez-vous de redimensionner vos images et évitez de télécharger des fichiers géants lorsqu’ils ne seront pas affichés dans leur intégralité.

De même, compressez vos images et essayez différents types de fichiers comme WebP, JPEG 2000 et JPEG XR au lieu d’opter pour des fichiers JPEG ou PNG plus lourds.

Envisagez d’implémenter le chargement paresseux natif pour vous assurer que les images sont chargées lorsque l’utilisateur les visualise, au lieu de les charger toutes en même temps.

Presque tous les navigateurs, y compris Chrome, Safari et Firefox, prennent en charge l’attribut loading= »lazy » sur ou , qui indique au navigateur de les charger lorsque l’utilisateur se rapproche d’eux.

Assurez-vous de ne pas charger paresseusement les images au-dessus de la ligne de flottaison, car cela dégraderait le score LCP de votre page, et Google recommande d’utiliser l’attribut fetchpriority=”high” sur les images au-dessus de la ligne de flottaison pour améliorer le LCP.

Si vous utilisez cet attribut, pas besoin de précharger les images. Vous devez précharger ou définir l’attribut « fetchpriority » sur les images au-dessus du pli.

Tirez également parti de la réactivité de l’attribut « srcset » pour charger des images correctement dimensionnées en fonction de la taille de l’écran et évitez de charger des images redondantes sur de petits écrans. Cela aidera grandement à améliorer le score LCP.

Polices

Les polices personnalisées extravagantes sont souvent difficiles à lire pour les utilisateurs sans vision 20/20, mais elles peuvent également ralentir considérablement votre site Web.

Remplacez les polices hébergées en externe par des polices plus sûres pour le Web et essayez les polices Google, tant qu’elles sont hébergées via le CDN de Google.

De plus, envisagez d’incorporer des polices variables dans l’esthétique générale de votre site Web, car cette spécification de police peut réduire considérablement la taille des fichiers de police.

Assurez-vous de précharger vos polices.

Animations/Fonctionnalités supplémentaires

Cela va sans dire : n’exagérez pas avec des animations, des vidéos, des effets spéciaux, des curseurs ou d’autres éléments fantaisistes.

C’est bien d’inclure des éléments interactifs ici et là, mais saturer votre site Web avec trop de « choses » en mouvement peut être frustrant pour les utilisateurs et vos serveurs.

N’utilisez pas d’animations non composées, car elles provoquent une nouvelle peinture de la page, ce qui augmente le travail du thread principal – et la page Web peut sembler visuellement instable lorsqu’elle se charge.

Solution PWA pour l’optimisation mobile

Pourquoi ne pas suivre l’intégralité de la route adaptée aux mobiles et transformer votre site mobile en une application Web progressive (PWA) ?

Étant donné que les PWA sont construites avec des service workers, elles chargent le contenu mis en cache plus rapidement. Non seulement cela, mais les PWA ressemblent à des applications mobiles natives, ce qui est excellent pour les performances et l’expérience utilisateur.

Mesures de performances techniques supplémentaires

Disponibilité

La disponibilité indique le bon fonctionnement de votre site Web.

Si votre site Web tombe en panne ou tombe fréquemment en panne, cela nuira à votre expérience utilisateur, à votre classement Google et, par conséquent, à vos revenus.

Si possible, visez une disponibilité de 99,999 % et testez votre site Web à partir de différents endroits.

Outils de surveillance de la disponibilité :

  • StatusCake.
  • Pingdom.
  • Meilleure disponibilité.
  • Robot de disponibilité.

Performances de la base de données

Si vous avez vérifié les bases et que votre site Web est toujours lent à répondre, cela peut être dû à de mauvaises performances de la base de données.

Vous pouvez vérifier cela en surveillant le temps de réponse de vos requêtes et en identifiant les requêtes de base de données qui prennent le plus de temps.

Une fois que vous avez fait cela, optimisez ! Vous pouvez utiliser des outils tels que Blackfire.io pour vous aider à identifier facilement les goulots d’étranglement et à trouver des solutions basées sur des données précises.

Matériel du serveur Web

Votre site Web peut être à la traîne si votre espace disque est rempli de fichiers journaux, d’images, de vidéos et d’entrées de base de données. Assurez-vous de surveiller régulièrement la charge de votre unité centrale de traitement (CPU), en particulier après avoir implémenté des mises à jour ou des modifications de conception.

Des outils tels que New Relic peuvent vous aider à améliorer l’ensemble de votre pile grâce à une surveillance et un débogage efficaces.

Visibilité de la recherche

Un grand nombre des mesures décrites ci-dessus ont déjà un impact significatif sur la visibilité de la recherche.

Ainsi, lorsque vous exécutez les pages de votre site Web via Google PageSpeed ​​Insights et que vous les optimisez, vous faites également des choses importantes pour votre référencement.

Vous pouvez également opter pour des outils d’exploration de sites Web tels que Semrush ou Sitechecker.pro, Screaming Frog, DeepCrawl, ou tout autre outil qui correspond le mieux à vos besoins.

Les robots d’exploration de sites Web aident à trouver tous les types de problèmes, tels que :

  • Liens brisés.
  • Images brisées.
  • Surveillez les principales métriques vitales du Web.
  • Chaînes de redirection.
  • Erreurs de données structurées.
  • Pages non indexées.
  • Titres et méta descriptions manquants.
  • Contenu mixte.

Assurez-vous que vous êtes prêt en ce qui concerne les points suivants :

  • Plan du site XML – Assurez-vous que votre sitemap est correctement formaté et vérifiez s’il est nécessaire d’effectuer des mises à jour et de soumettre à nouveau votre sitemap via Google Search Console.
  • Robots.txt – Assurez-vous d’utiliser un fichier robots.txt pour vos pages Web (HTML, PDF ou tout autre format non multimédia que les moteurs de recherche peuvent lire) afin de mieux gérer le trafic d’exploration, en particulier si vous pensez que votre serveur peut être submergé par les demandes de Google. chenille.

Sécurité et mise en cache du site Web

Obtenez votre certificat SSL !

Un site Web sain est un site Web sécurisé.

Même si votre site Web se charge au bon moment et obtient un score de 100/100, il est impossible que les utilisateurs (ou les moteurs de recherche) fassent confiance à votre site s’il ne commence pas par https://.

Un certificat SSL est essentiellement un code sur votre serveur qui établit une connexion cryptée, garantissant que les données de l’utilisateur restent sécurisées.

L’obtention d’un certificat SSL n’est pas un processus particulièrement difficile, mais il peut être long lorsqu’il est effectué manuellement.

Cependant, si vous utilisez un fournisseur d’hébergement bien établi tel que BlueHost, le plus souvent, votre fournisseur pourra émettre un SSL gratuit pour votre domaine.

Envisagez d’utiliser un CDN

Les réseaux de diffusion de contenu (CDN) sont des serveurs distribués fonctionnant à l’unisson pour fournir un contenu Internet rapide.

En d’autres termes, un CDN est un outil qui accélère les performances de votre site Web en conservant son contenu sur des serveurs proches des utilisateurs, quelle que soit leur situation géographique. Ceci est également connu sous le nom de mise en cache.

Si vous avez une présence mondiale, un CDN est indispensable ! Cela augmentera la vitesse de chargement de votre page, réduira vos coûts de bande passante, répartira votre trafic (réduisant les risques de panne de votre site) et augmentera la sécurité via des fonctionnalités telles que l’atténuation DDoS.

Les principaux acteurs du secteur incluent Cloudflare, Amazon Cloudfront et Google Cloud CDN. Cependant, il existe de nombreuses autres options, alors faites vos recherches et choisissez le meilleur CDN pour votre site Web et les besoins de votre entreprise.

Configurer le pare-feu d’application Web

Un pare-feu d’application Web (WAF) protège les applications Web en filtrant le trafic HTTP suspect. Il vise à empêcher les applications d’attaques telles que :

  • Contrefaçon intersite.
  • Script intersite (XSS).
  • Insertion de fichiers.
  • Injection SQL.

Vous trouverez ci-dessous une liste des pare-feu d’applications Web les plus populaires et les plus fiables :

  • Cloud Flare WAF.
  • Pare-feu GoDaddy.
  • Microsoft Azure.

Ou si vous utilisez WordPress, vous pouvez envisager d’installer des plugins tels que :

  • WordFence.
  • Sucuri.
  • Sécurité tout-en-un (AIOS).

Verdict

C’est un enveloppement ! Comme vous pouvez le constater, les performances et la santé du site Web dépendent de divers aspects.

Si votre site Web est à la traîne, la première étape logique consiste à vérifier vos Core Web Vitals et à voir ce que vous pouvez améliorer. Vous pouvez également consulter d’autres mesures techniques et les améliorer.

Le référencement est également vital pour la santé de votre site Web, alors vérifiez la visibilité de votre recherche, les liens et les bloqueurs de charge potentiels pour voir ce que vous pouvez améliorer.

Et n’oubliez pas non plus votre certificat SSL et la mise en cache.

La conception de votre site Web peut également avoir un impact sur la vitesse de chargement et les performances, en particulier si vous ou vos concepteurs aimez utiliser des éléments de conception lourds.

N’oubliez pas d’optimiser vos images, d’éviter les polices lourdes et d’utiliser les animations avec modération.

Davantage de ressources:

  • Comment utiliser le rapport Chrome UX pour améliorer les performances de votre site
  • 6 conseils pour booster les performances du Réseau Display de Google
  • Référencement technique avancé : un guide complet

Image en vedette : JulsIst/Shutterstock

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici