Éviter les désastres du CMS : Comment améliorer les performances du site Web

Personne n'aime… attendre… attendre …. attends …

Avoir un site qui fonctionne comme un super-héros numérique est un impératif commercial, en particulier lorsque vous faites une première impression auprès d'un client potentiel qui recherche votre organisation.

Les statistiques de performances de site Web suivantes devraient faire peur à chaque développeur et ingénieur de site, sans parler de votre équipe de marketing de marque :

• Un utilisateur sur deux abandonnera un site s'il met plus de quatre secondes à se charger. Source : BBC.
• Un délai d'une seconde entraîne une baisse de 16 % de la satisfaction des utilisateurs. Source : Load Storm.
• Cinquante-trois pour cent des visites de sites mobiles sont abandonnées si les pages mettent plus de trois secondes à se charger. Source : Google.

Vous avez peut-être remarqué de mauvaises performances du site lorsque vous vérifiez les mesures de performances Core Web Vitals de Google, mais vous ne savez pas comment y remédier ?

Lorsque votre entreprise est en jeu, vous ne pouvez pas vous permettre d'envoyer de nouvelles affaires ailleurs et de ternir votre marque en laissant votre système de gestion de contenu (CMS) offrir une mauvaise expérience numérique.

Ci-dessous, nous diagnostiquons cinq coupables courants de ralentissement et comment améliorer les performances du site Web à l'aide d'un CMS agile comme WordPress VIP.

Tout d'abord, que se passe-t-il réellement lorsque vous chargez une application Web ?

C'est une grosse demande pour n'importe quel navigateur, qui doit immédiatement passer à la vitesse supérieure, en effectuant une multitude d'actions en quelques millisecondes. Voici la maigre courtoisie de Mozilla :

1. Le navigateur se rend sur le serveur DNS et trouve la véritable adresse du serveur sur lequel le site Web vit.
2. Le navigateur envoie un message de requête HTTP au serveur, lui demandant d'envoyer une copie du site Web au client. Ce message, ainsi que toutes les autres données envoyées entre le client et le serveur, sont envoyés via votre connexion Internet à l'aide de TCP/IP.
3. Si le serveur approuve la demande du client, le serveur envoie au client un message « 200 OK », ce qui signifie : « Bien sûr, vous pouvez consulter ce site Web ! C'est ici." Il commence alors à envoyer les fichiers du site Web au navigateur sous la forme d'une série de petits morceaux appelés paquets de données.
4. Le navigateur assemble les petits morceaux dans une page Web complète et vous l'affiche.

Remarque : Bien sûr, ce n'est pas aussi facile que tout cela. Il y a une multitude d'étapes plus petites entre chacune d'entre elles. Pour l'instant, examinons cinq raisons principales pour lesquelles la "lenteur" se produit et comment notre CMS WordPress VIP les atténue.

Alors, qu'est-ce qui cause une expérience de navigation lente ?

Coupable 1. Manque de PoPs et de CDN

Plus que probablement, votre entreprise est mondiale. Cela augmente le défi logistique d'assurer des connexions rapides, cohérentes et stables pour les utilisateurs sur une variété de types de connexion sur une variété d'appareils.

Alors, qu'est-ce que cela signifie pour votre application ?

Lorsqu'une demande réseau est initiée à partir de l'étape 2 ci-dessus, la demande passe par plusieurs sauts de réseau. Un saut est un terme de réseautage informatique qui fait référence au nombre de routeurs traversés par un paquet, de sa source à sa destination.

En conséquence de ces sauts de l'emplacement géographique d'un utilisateur à votre serveur, il peut y avoir un temps supplémentaire vécu par vos utilisateurs lors du chargement. Cela peut être atténué en servant le contenu plus près de votre visiteur, via un réseau de diffusion de contenu (CDN) et des points de présence (PoP).

La réponse WordPress VIP :

Le CDN de WordPress VIP est un réseau mondial de PoP de périphérie et d'origine qui sert votre site à des clients mondiaux, aussi rapidement, efficacement et de manière fiable que possible. Cette disponibilité localisée se produit automatiquement dès que nos serveurs périphériques sont informés du nouveau contenu de votre application. Cela signifie qu'il n'y a pas de configuration supplémentaire à gérer par votre équipe, ce qui les soulage de se concentrer sur d'autres tâches.

Coupable 2. Médias non optimisés

Ces images de haute qualité que tout le monde prend aujourd'hui avec les derniers appareils mobiles sont très belles ! Autrement dit, jusqu'à ce qu'ils soient utilisés comme vignettes sur votre page d'accueil.

Ajouter une image 4K et la limiter à un conteneur de 100 × 100 pixels signifie que vos utilisateurs doivent charger l'intégralité de l'image 4K. Une seule image n'est pas vraiment inquiétante, mais pour les entreprises qui publient du contenu à grande échelle, le chargement de la page peut facilement exploser de manière exponentielle à mesure que le nombre d'articles dans une page d'index est élevé.

La réponse WordPress VIP :

Les applications sur WordPress VIP bénéficient automatiquement de tous les avantages des images en cache périphérique et du redimensionnement automatique des images sur les images téléchargées. De plus, les images peuvent être redimensionnées à la volée.

Coupable 3. Javascript et CSS non optimisés

Lors du chargement de fichiers volumineux, chaque bit et chaque demande compte. Si vous avez déjà optimisé le nombre de sauts de réseau nécessaires pour télécharger un fichier, le plus grand temps nécessaire à l'arrivée d'un fichier concerne l'ouverture et la fermeture des requêtes.

Pour résoudre ce problème, le développement Javascript et CSS moderne utilise souvent la minification et la concaténation.

La minification fait référence à la suppression de tous les caractères inutiles dans un fichier, normalement tous les espaces inutiles. Le but ici est de réduire le nombre total de bits transférés.
La concaténation est l'acte de coller plusieurs fichiers ensemble pour produire un fichier plus volumineux. Le but ici est de réduire le nombre de requêtes réseau.

La réponse WordPress VIP :

WordPress VIP concatène automatiquement les fichiers JavaScript et CSS pour réduire le nombre de requêtes qui se produisent lors du chargement d'une seule page. Les fichiers CSS sont minifiés et concaténés. Le crédit revient à notre plugin open-source de choix.

Les fichiers minifiés et concaténés sont ensuite mis en cache pendant 15 jours, ou jusqu'à ce qu'un changement soit détecté.

Coupable 4. Mauvaise utilisation du cache

Les caches sont un stockage temporaire spécial pour accélérer les choses. Ce qu'ils accélèrent dépend du type de cache.

Si vous n'utilisez pas une forme de mise en cache, vous risquez d'avoir un impact sérieux sur la vitesse de réponse de votre page lorsque votre application est en cours de chargement.

La réponse WordPress VIP :

WordPress VIP utilise plusieurs types de mise en cache différents :

• Cache d'objets — utilisé pour stocker les données au niveau de l'application. Cela permet de récupérer les données rapidement et efficacement sans toucher votre base de données. En bref, le cache d'objets empêche les calculs et/ou les requêtes étendus de prendre un temps de connexion précieux.
• Cache de requêtes : mise en cache mémoire légère des requêtes de base de données. Dans WordPress, toute requête de publication qui utilise l'API WP_Query bénéficie grandement de cette forme de mise en cache.
• Cache de page : stockage d'une page entièrement dessinée, stocké dans chaque emplacement PoP périphérique. Il s'agit du premier niveau de cache rencontré par la plupart des utilisateurs visitant votre application. Le cache de page permet à notre CDN de servir du contenu localisé sans que votre application n'exécute jamais une ligne de code.

Tous ces éléments fonctionnent en harmonie pour réduire les temps de réponse aux demandes.

Problème 5. Saturation de la connexion à la base de données

Lorsque le contenu et la base d'utilisateurs de votre application augmentent, les anciennes requêtes de base de données qui s'exécutaient correctement à l'origine peuvent désormais dégrader les performances.

Lorsque les requêtes prennent du temps à s'exécuter, cela occupe un siège dans la base de données jusqu'à la fin de la requête. Parfois, ces sièges se remplissent très rapidement, empêchant par la suite l'exécution d'autres requêtes. Cela se manifeste généralement par une dégradation des performances de l'application jusqu'à ce que la base de données fournisse 500 réponses.

La saturation des connexions peut se produire rapidement et de manière aléatoire, ce qui rend la cause fondamentale difficile à diagnostiquer.

La réponse WordPress VIP :

Dans le cadre du package de services WordPress VIP, nous fournissons un accès à New Relic, qui aide à diagnostiquer et à surveiller de manière proactive les problèmes potentiels comme ceux ci-dessus. Cela permet à votre équipe d'économiser du temps, de l'argent et la difficulté de sécuriser des outils et des ressources supplémentaires lorsque les secondes comptent.

En conclusion

Des sauts de réseau et du manque de présence de points à la saturation du contenu de la base de données, s'attaquer aux causes profondes des mauvaises performances du site Web devrait être une priorité P0 pour toute organisation avant-gardiste et son système de gestion de contenu. Après tout, faire cette bonne première impression auprès d'un public est primordial à l'ère numérique. Parce que la vitesse tue vraiment.

En savoir plus sur WordPress VIP ici.

Auteur

Michael Chan, ingénieur logiciel senior, WordPress VIP