Comment assurer des performances exceptionnelles aux sites web

À quand remonte la dernière fois que vous avez vérifié les performances de votre site web ? Si ça remonte à plus de cinq minutes, vous négligez l’une des choses les plus importantes à faire pour améliorer les taux de rebond, le classement Google, les conversions et les revenus. Dans cet article, nous passons en revue les choses à faire pour assurer une expérience utilisateur rapide.

Pourquoi les performances du site web sont-elles importantes ?

Peu importe les efforts et le temps que vous avez consacrés au développement de votre interface utilisateur, à la génération d’un contenu de qualité, à la commercialisation de votre site ou à la qualité de vos produits, si votre site web est lent, les affaires vont souffrir. Les utilisateurs commencent à évaluer votre site dès qu’ils cliquent sur un lien. Des recherches ont montré que si le chargement des pages est ralenti de seulement 500 millisecondes, les utilisateurs commencent à se poser des questions. Une page à chargement lent affecte les utilisateurs de plusieurs façons, comme décrit par Tammy Everts dans son livre Time is Money: the Business Value of Web Performance.

Les sites web lents induisent une perte de confiance dans une marque.
Les pages à chargement lent favorisent une perception négative de l’interface utilisateur (UI) et des services et produits proposés.
Si le passage à la caisse est lent et maladroit, la confiance diminue et le taux d’abandon augmente.
Les taux de rebond augmentent. À 3 secondes, 45 % des utilisateurs sont déjà passés chez un concurrent.
Les clients ne reviennent pas.
Les revenus souffrent de la baisse des conversions et des paniers moins chargés.
La vitesse de la page affecte le référencement.

Comme vous pouvez le voir, avoir des pages à chargement rapide est tout aussi important que tous les autres aspects de votre commerce et de votre site web ; malheureusement, de nombreuses marques accordent une priorité moindre aux performances et leur activité en souffre.

Pourquoi la vitesse des sites web se réduit-elle avec le temps ?

Espérons que vous avez commencé par un site web performant. Vous avez établi un budget de performances et vous l’avez tenu, mais vous constatez maintenant que vos performances ont chuté. Vous n’êtes pas seul. De nombreux professionnels du web se sont retrouvés dans le même cas. Examinons quelques-unes des raisons pour lesquelles les performances de votre site web peuvent se dégrader avec le temps.

Introduction d’images, de fichiers CSS et de scripts non optimisés
Ajout d’images, de scripts et de fichiers CSS (nouveaux ou modifiés) qui dépassent la taille et la quantité décrites dans le budget de performance.
Des requêtes en quantité excessive. Chaque élément nécessite une nouvelle requête à traiter par le serveur et c’est du temps en plus.
Plan d’hébergement web. Vous avez peut-être atteint la charge maximale admissible par votre plan, ou d’autres sites sur un plan d’hébergement partagé absorbent la bande passante disponible, ou bien vous avez besoin de rajouter des serveurs supplémentaires pour répondre à la charge.
Infrastructure vieillissante. Vos serveurs web et votre matériel de support deviennent lents en raison de l’usure ou parce qu’ils ne peuvent pas gérer le trafic croissant.
Le contenu tiers utilise plus de bande passante et de temps de traitement que prévu.
Les navigateurs évoluent avec le temps. Les changements peuvent entraîner des temps de chargement plus lents, il vous faut donc suivre de près les performances des navigateurs à mesure qu’elles évoluent.

En fait, il y a de nombreuses raisons pour lesquelles les performances des sites web diminuent avec le temps et les professionnels du développement web les plus expérimentés ont du mal à maintenir la rapidité des sites web.

Créer une culture de performance web

L’une des premières choses à faire pour le maintien d’un site web rapide est de faire de la performance une priorité pour l’ensemble de l’entreprise.

Un web rapide pour tous les utilisateurs

Travaillant dans le domaine de la technologie, nous avons tendance à utiliser des technologies de pointe. En cherchant à adopter les appareils et les pratiques de développement les plus récents et les plus efficaces, nous oublions parfois que beaucoup de nos utilisateurs n’ont pas accès à des appareils et réseaux rapides. Pour ces utilisateurs, il est nécessaire de concevoir et tester sur toutes sortes d’appareils, de connexions et de navigateurs.

Trouvez un ancien appareil et utilisez-le. Simulez un mauvais réseau et des processeurs lents et rendez votre projet résilient. Déterminez quels appareils utilisateurs accèdent à votre site et faites des choix en fonction de ces appareils.

José M. Pérez

Un design basé sur la performance, aujourd’hui et pour l’avenir

Toute prise de décision concernant le site web ou l’application doit être faite du point de vue de la performance Comment cette nouvelle fonctionnalité affectera-t-elle les performances du site ? Vous devez tester chaque nouvelle technique, API ou bibliothèque pour voir comment elle affecte les performances avant de l’incorporer au site web.

Tout le monde mobilisé

Mettre l’accent sur la performance demande de l’engagement et du temps. Cet engagement pourrait nécessiter certains sacrifices, à condition d’avoir gagné le soutien de toutes les parties prenantes avec un dossier béton. Il faut éduquer l’équipe sur la technologie et les décisions prises en matière de performances, et l’inciter à améliorer la performance des tests.

Intégrez les tests de performances à votre workflow CI/CD

L’intégration de la performance dans vos processus CI/CD (intégration continue/livraison continue) veut dire surveiller vos environnements de développement et d’acceptation par des processus automatisés afin de détecter tout problème lié aux performances avant que le développement ne s’occupe de nouveaux projets. Dès qu’un développeur soumet une modification, un nouveau build est lancé et à la fin de celui-ci les analyseurs de performances commencent les tests. En cas de problème, le moniteur avertit immédiatement l’équipe. Vous pouvez automatiser vos mises à jour de surveillance, et si vous avez un Point de contrôle privé, vous pouvez utiliser Uptrends pour surveiller vos environnements de développement et d’acceptation. Plus d’infos sur l’intégration d’Uptrends dans votre processus CI/CD.

Établir un budget de performance de site web

C’est comme payer vos factures, vous allouez chaque mois tant d’argent au logement, au transport, aux divertissements et aux dépenses diverses. Lorsqu’il n’y a plus d’argent, vous arrêtez de dépenser et pour que tout fonctionne, il faudrait éventuellement changer les priorités. Pour votre site web c’est pareil. Établissez un temps de chargement maximum et ne le dépassez pas. Jamais.

Pour ce faire, vous devez examiner de près tous les éléments.

Temps réseau : résolution DNS, temps de connexion, temps de redirection
Backend : temps de réception et de transmission
Temps de chargement : temps jusqu’au premier octet et temps de préparation de la page
Frontend : DOM et temps de rendu
Temps de téléchargement

Tous ces points sont à considérer pour chaque élément de page. Les allers-retours au serveur sont coûteux, donc la réduction du nombre de requêtes va contribuer à améliorer les performances. Vous pouvez également réduire le nombre de requêtes avec un fichier unique pour vos scripts et infos CSS. Mettez le script critique et le CSS pour le contenu au-dessus de la ligne de flottaison dans l’en-tête, le reste se chargera par la suite au besoin (Apprenez à charger CSS sans bloquer le rendu).

Vous disposez d’une grande boîte à outils pour les performances :

Utilisez les réseaux de distribution de contenu (CDN) pour réduire la latence du réseau.
Utilisez les browser hints (indications pour le navigateur): preload, prefetch, et preconnect.
Utilisez les Service workers (des scripts qui s’exécutent en arrière plan).
Activez la compression.
Optimisez les images et utilisez des sprites lorsque cela est possible.
Supprimez du CSS/code obsolète pour réduire la taille des fichiers.
Utilisez le cache du navigateur et définissez des timeouts plus longs.

Si vous voulez savoir par où commencer l’optimisation de votre site web, notre Outil de test de vitesse de site web vous fournira votre score PageSpeed Insights et des recommandations d’optimisation. Il y a plein d’options qui vous aideront à respecter votre budget de site web, mais le maintenir à ce niveau nécessite une maintenance continue.

Surveillez la vitesse de votre site web

La moindre modification du code, de l’infrastructure réseau ou du contenu peut entraîner un ralentissement soudain de votre site web. Pour garder un œil sur la vitesse de votre site web, vous avez besoin de la Surveillance de performances web. Le Full Page Check (FPC) d’Uptrends vous permet de simuler des expériences réelles :

À l’aide d’un navigateur actuel : Firefox, Chrome ou Internet Explorer.
La possibilité de simuler différents appareils et tailles d’écran.
Limiter la bande passante pour simuler différents types de connexion.

Le FPC mesure chaque requête et enregistre les temps pour la résolution DNS, les connect, handshake, send, wait et receive. Les résultats sont affichés dans un graphique en cascade pratique où vous pouvez rapidement voir les éléments défaillants, les goulots d’étranglement et d’autres problèmes spécifiques aux éléments tels que les réponses lentes des éléments tiers.

Vous pouvez afficher les détails de chaque en-tête de requête et de réponse.

Si vous choisissez le FPC augmenté (Full Page Check +), vous verrez également votre contenu ventilé en fonction du domaine. Vous pouvez rapidement voir les performances réparties en fonction du contenu tiers, de la réponse CDN et des vitesses de vos serveurs.

Le Full Page Check d’Uptrends vous permet de voir l’évolution de vos performances au fil du temps, et vous pouvez facilement repérer les pics et les tendances. Prévenir les problèmes plus importants tels que les serveurs défaillants et voir les effets d’autres systèmes s’exécutant en arrière-plan, tels que les mises à jour nocturnes d’une base de données.

Suivre l’expérience de vos visiteurs à l’aide de Real User Monitoring (RUM)

Un petit fichier de script dans l’en-tête de vos pages permet à Uptrends de collecter des informations sur l’environnement utilisateur et des métriques de chargement de page lors des visites du site. Uptrends agrège les données et vous permet de voir des métriques telles que le temps de téléchargement, le temps jusqu’au premier octet (TTFB) et le temps de préparation de page. Vos métriques seront affichées en fonction de l’emplacement de l’utilisateur, du type d’appareil, du système d’exploitation, du type de navigateur et de la page consultée. Vos tableaux de bord RUM vous permettent d’accéder facilement à l’expérience réelle de l’utilisateur. En savoir plus sur RUM.

Conclusion

Maintenir les performances de votre site web demande de la diligence. Vous devez concevoir ayant en tête la performance, planifier les améliorations futures et utiliser de nouveaux outils et techniques d’amélioration de la vitesse dès qu’ils deviennent disponibles, et vous devez surveiller vos métriques de performances en permanence. Uptrends a les outils pour vous aider à surveiller les performances de votre site depuis le développement jusqu’à la production. Si votre performance baisse, nos alertes dynamiques vous informeront.

Nous avons également les outils nécessaires pour vérifier la vitesse de vos API et applications web. La Surveillance d’API multi-étapes et la Surveillance des applications web vous donnent des données de performance sur chaque requête ainsi que l’interaction complète. Si vous souhaitez essayer Uptrends, nous proposons une période d’essai gratuit de 30 jours, sans engagement. Inscrivez-vous aujourd’hui !