Comment nous augmentons la vitesse de chargement des pages sur WPBeginner (6 conseils révélés)
Au cas où vous ne le sauriez pas encore… Google a apporté des modifications importantes aux mesures de performances de son site Web appelées Google Core Web Vitals.
Core Web Vitals vous aide à mesurer la rapidité avec laquelle votre site Web se charge, à quelle vitesse il devient visible et à quelle vitesse il est prêt pour vos utilisateurs.
Google a annoncé que l'Interaction to Next Paint (INP) est désormais une métrique Core Web Vital stable et a officiellement remplacé le First Input Delay (FID).
Beaucoup de nos lecteurs nous ont demandé comment nous gérions ces changements et avons réussi à obtenir la meilleure vitesse de chargement de page possible sur WPBeginner.
Nous utilisons toutes les meilleures pratiques standards d’optimisation des performances WordPress. Cependant, WPBeginner génère beaucoup de trafic, nous prenons donc également quelques mesures supplémentaires pour garantir la meilleure expérience utilisateur.
Dans cet article, nous révélerons les conseils supplémentaires que nous utilisons pour augmenter la vitesse de chargement des pages sur WPBeginner. La plupart d’entre eux peuvent être utilisés sur n’importe quel site Web avec un minimum d’effort.
Remarque : Cet article fait partie de notre série WPBeginner Insider, dans laquelle nous partageons l'expertise, les conseils et les outils que nous utilisons pour développer notre entreprise. WPBeginner Insider est publié un jeudi sur deux.
Voici un bref aperçu de tous les éléments dont nous discuterons dans cet article :
Pourquoi la vitesse de chargement des pages est-elle importante ?
La vitesse de chargement des pages correspond à la vitesse à laquelle votre site Web apparaît lorsqu'un utilisateur clique sur un lien vers celui-ci.
Un site Web à chargement plus rapide rend les utilisateurs heureux car ils peuvent obtenir immédiatement les informations dont ils ont besoin. D’un autre côté, un site Web qui se charge lentement peut les obliger à partir.
Les utilisateurs sont 36 % plus susceptibles de quitter (rebondir) un site Web si le chargement prend 3 secondes. Et ils sont 90 % plus susceptibles de quitter les sites Web dont le chargement prend 5 secondes ou plus.
Voici quelques autres raisons pour lesquelles la vitesse de chargement des pages est si importante :
Améliore l'engagement des utilisateurs : un site Web à chargement rapide maintient l'engagement des visiteurs, leur permettant d'accéder rapidement aux informations. Lorsque les utilisateurs passent plus de temps sur un site, ils sont plus susceptibles de dépenser ou de convertir.
Améliore le classement des moteurs de recherche : en raison d'une meilleure expérience utilisateur, les moteurs de recherche favorisent les sites Web à chargement rapide en les classant plus haut.
Crucial pour les utilisateurs mobiles : la vitesse est particulièrement importante pour la navigation mobile. Les utilisateurs mobiles sont deux fois plus susceptibles de quitter un site Web lent que les utilisateurs d'ordinateurs de bureau.
Renforce la confiance et l'autorité : un site à chargement rapide semble plus fiable et professionnel, ce qui peut vous aider à convaincre les utilisateurs d'acheter auprès de votre entreprise.
Pour résumer, la vitesse de chargement des pages améliore l'expérience utilisateur globale avec une satisfaction et un engagement client plus élevés.
Comment nous améliorons la vitesse de chargement des pages sur WPBeginner
Nous appliquons toutes les meilleures pratiques standard de notre manuel d’optimisation des performances et de la vitesse WordPress.
De plus, nous avons également pris quelques mesures supplémentaires pour améliorer davantage les performances de WordPress sur WPBeginner.
Voici une capture d'écran récente de notre optimisation des performances avant et après les techniques que nous avons mises en œuvre.
Si vous souhaitez effectuer un test similaire pour votre site Web et voir votre score Google Core Web Vitals, utilisez l'outil PageSpeed Insights. Entrez simplement l'URL que vous souhaitez tester et cliquez sur le bouton « Analyser ».
L'outil analysera la page Web pendant quelques secondes, puis vous montrera les résultats du test.
Examinons maintenant les étapes que nous avons suivies pour atteindre ce score de performance.
1. Plateforme d'hébergement plus rapide
Avec des années d’expérience dans la gestion d’entreprises basées sur WordPress, nous avons appris l’importance de choisir le meilleur hébergement WordPress.
Pour les petits sites Web, vous pouvez commencer avec l’une des meilleures sociétés d’hébergement comme Bluehost ou Hostinger.
Cependant, WPBeginner est un site Web plus grand avec un volume de trafic élevé. Les plans d'hébergement partagé ou VPS sont trop limités à cette échelle.
C'est pourquoi WPBeginner est hébergé sur l'infrastructure cloud d'entreprise de SiteGround, qui fonctionne sur Google Cloud Platform.
Pourquoi nous utilisons SiteGround
L'infrastructure d'hébergement de niveau entreprise de SiteGround comporte plusieurs couches de redondances, ce qui garantit une disponibilité maximale.
Il fonctionne sur Google Cloud Platform, qui est connecté au réseau de pointe de Google, garantissant les vitesses les plus rapides depuis tous les points du monde.
Cela réduit les coûts et les difficultés liés à la gestion de serveurs d'hébergement dédiés individuels.
Les améliorations internes de SiteGround, telles que PHP ultrarapide, MySQL plus rapide et la compression Brotli, offrent une amélioration supplémentaire des performances.
Nous avons une expérience directe de travail avec l'équipe d'assistance de SiteGround. L'expertise de leurs ingénieurs, les temps de réponse plus rapides et la serviabilité globale nous ont toujours impressionnés.
Pour plus de détails, vous pouvez consulter notre article expliquant pourquoi WPBeginner est passé à l'hébergement SiteGround.
La meilleure partie est que tous ces avantages de SiteGround ne se limitent pas à leurs entreprises clientes. Tous les comptes d'hébergement partagé SiteGround sont également hébergés sur Google Cloud Platform.
Actuellement, ils offrent également une remise généreuse aux utilisateurs WPBeginner disposant d’un nom de domaine gratuit. Cela commence à 2,99 $par mois, ce qui est tout à fait abordable si l'on considère la technologie et le niveau de service fourni.
→ Cliquez ici pour réclamer cette offre exclusive SiteGround ←
2. DNS Cloudflare
Dans un précédent article de WPBeginner Insider, nous avons partagé notre étude de cas sur le passage de Sucuri à Cloudflare.
Outre la sécurité, l'utilisation du DNS Cloudflare donne à WPBeginner un avantage significatif en termes de performances.
Le DNS (Domain Name System) est comme un répertoire téléphonique pour les sites Web.
Lorsque vous saisissez l’adresse d’un site Web dans votre navigateur ou cliquez sur un lien, un service DNS recherche le nom de domaine et dirige votre site Web vers l’adresse IP de ce site Web particulier.
Normalement, les sites Web utilisent les serveurs de noms de leur société d’hébergement pour gérer le DNS. Ceux-ci ne sont pas aussi rapides que Cloudflare, qui permet une résolution DNS à la périphérie du réseau dans chacun de leurs centres de données répartis dans plus de 310 villes dans le monde.
Pourquoi nous utilisons Cloudflare DNS
Résolution DNS la plus rapide - Le réseau mondial de Cloudflare permet de résoudre le DNS à l'emplacement le plus proche de n'importe quel utilisateur.
Sécurité intégrée - Étant donné que tout le trafic passe par Cloudflare DNS, leur pare-feu d'application Web (WAF) est capable d'atténuer et de bloquer rapidement les attaques DDoS, le spam, les robots inutiles, les injections SQL, les tentatives de piratage, etc. .
Livraison CDN - Leur réseau met automatiquement en cache les actifs statiques et les sert via leur réseau mondial, ce qui accélère le chargement des sites Web. Et comme cela se produit au niveau DNS, vous n’avez pas besoin d’avoir des sous-domaines distincts pour les actifs CDN.
Nous utilisons le forfait Entreprise, mais pour les sites Web plus petits, Cloudflare propose un CDN et un DNS gratuits, qui font essentiellement la même chose avec moins de fonctionnalités.
3. Optimisation des performances à l'aide de WP Rocket
Pour une optimisation supplémentaire des performances, nous utilisons WP Rocket, qui est l'un des meilleurs plugins de mise en cache WordPress du marché. Cela signifie qu'il enregistre des copies de votre site Web afin que les pages se chargent plus rapidement pour les visiteurs réguliers.
Ce que nous aimons le plus dans WP Rocket, c'est qu'il s'agit du plugin d'optimisation des performances WordPress le plus complet, nous n'avons donc besoin que d'un seul outil pour gérer de nombreuses tâches différentes.
Pourquoi nous utilisons WP Rocket
Préchargement du cache - Généralement, un plugin de cache attend qu'un utilisateur visite une page pour en créer une copie en cache. WP Rocket maintient automatiquement votre cache prêt, ce qui fait une grande différence dans le temps de chargement des pages.
Mise en cache du navigateur : le stockage d'éléments statiques tels que des images, JavaScript et CSS dans le cache du navigateur accélère le chargement des pages vues ultérieures.
Optimisation des fichiers - WP Rocket vous aide à réduire et à optimiser la livraison de fichiers statiques comme JavaScript et les feuilles de style. Rendre ces fichiers plus petits réduit considérablement le temps de chargement global de la page.
Nous avons partagé notre expérience détaillée avec ce plugin dans notre revue WP Rocket avec les avantages et les inconvénients.
Quels paramètres utilisons-nous dans WP Rocket ?
Nous avons les paramètres WP Rocket suivants activés :
Mise en cache pleine page
Optimisation des fichiers (minification des fichiers JS et CSS et fourniture de CSS critiques)
JavaScript différé (retard de chargement de JS, ce qui permet de résoudre le problème de blocage du rendu)
Chargement paresseux des images et des fichiers multimédias
Besoin d'aide pour utiliser ces paramètres sur votre site ? Nous avons un guide étape par étape sur la configuration de WP Rocket pour obtenir les meilleurs résultats.
4. Mise en file d'attente de JavaScript et CSS
Nous optimisons la livraison des fichiers JavaScript et CSS avec WP Rocket, mais avant cela, nous nous assurons que notre site Web charge uniquement les fichiers JavaScript et CSS nécessaires à une page.
Le moyen le plus simple de le faire est d’utiliser des plugins et des thèmes WordPress qui suivent les meilleures pratiques de codage WordPress. Ces développeurs ne chargeront un script qu'en cas de besoin.
Cependant, parfois, un développeur de plugins ou de thèmes ne peut pas prendre cette décision à votre place. Ils peuvent charger des scripts globalement pour une meilleure expérience utilisateur.
Chez WPBeginner, nous avons des développeurs internes pour examiner ce problème. Nous supprimons les scripts et CSS inutiles, puis les mettons en file d'attente si nécessaire.
⚠️Remarque : Il sera difficile pour les utilisateurs débutants sans compétences en codage d'y parvenir. Tenter de le faire pourrait endommager votre site ou provoquer un comportement inattendu.
Cependant, les utilisateurs ayant une compréhension de base du codage WordPress peuvent le faire en suivant ces étapes.
Tout d’abord, vous devez trouver les scripts inutiles. Le moyen le plus simple de savoir quels scripts et feuilles de style sont chargés consiste à utiliser le plugin Query Monitor.
Il vous montrera les fichiers JavaScript et CSS chargés sur une page, et vous pourrez alors déterminer lesquels sont inutiles.
Pour retirer un script de la file d'attente, vous devez utiliser le handle de script comme indiqué dans Query Monitor. Après cela, vous pouvez utiliser le code suivant pour le retirer de la file d'attente :
function prefix_remove_scripts() {
if ( is_front_page() ) {
wp_dequeue_script( 'plugin-script-handle' );
}
}
add_action( 'wp_print_scripts', 'prefix_remove_scripts', 100 );
De même, pour supprimer les feuilles de style inutiles, vous pouvez utiliser le code suivant :
/**
* Remove unnecessary stylesheets
*/
function prefix_remove_styles() {
if ( is_front_page() ) {
wp_dequeue_style( 'stylesheet-handle' );
}
}
add_action( 'wp_enqueue_scripts', 'prefix_remove_styles', 100 );
Pour plus de détails, consultez notre tutoriel sur la façon d'ajouter correctement JavaScript et CSS dans WordPress.
5. Déchargement des styles de l'éditeur de blocs
Nous utilisons l'éditeur de blocs WordPress par défaut sur WPBeginner. Il est extrêmement rapide et l’équipe de développement principale de WordPress consacre beaucoup de temps et de ressources à l’amélioration de ses performances.
Pour améliorer encore les performances, nous déchargeons certains des styles d'éditeur de blocs que nous n'utilisons pas sur WPBeginner.
Cela réduit la taille du DOM et permet aux navigateurs de traiter plus rapidement la page demandée.
Dans la terminologie des navigateurs, le DOM est comme la carte des éléments et sous-éléments d'une page (titres, texte, images, feuilles de style, scripts, etc.)
Un DOM plus grand signifie que le navigateur passera un peu plus de temps à le traiter. Un DOM plus petit est rapidement traité.
Cependant, le gain de performances n’est pas si important et nous ne le recommandons pas à la plupart des utilisateurs disposant de petits sites Web WordPress.
6. Diverses améliorations des performances
Outre les conseils mentionnés ci-dessus, nous avons également mis en place les meilleures pratiques pour garantir de meilleures vitesses de chargement des pages.
En voici quelques-uns que vous pouvez facilement mettre en œuvre sur votre site Web :
Images optimisées - Notre équipe veille à ce que les captures d'écran, les images et les médias que nous téléchargeons soient hautement optimisés pour réduire la taille du fichier. Consultez notre guide sur la façon d’optimiser les images pour WordPress.
Optimiser les tâches Cron - Les tâches Cron sont des tâches WordPress planifiées qui s'exécutent en arrière-plan pour vérifier les mises à jour, publier des publications planifiées, etc. Les plugins WordPress peuvent également ajouter leurs propres processus en arrière-plan. L'optimisation des tâches cron réduit la charge du serveur et améliore les performances.
Réduire les requêtes HTTP externes : certains plugins et outils que vous utilisez peuvent devoir charger des fichiers à partir de domaines externes. Un trop grand nombre de ces demandes peut augmenter le temps de chargement des pages. Pour résoudre ce problème, vous pouvez consulter notre tutoriel sur la façon de désactiver les fichiers CSS et JavaScript de vos plugins.
Pour une présentation plus détaillée de ces méthodes et d’autres stratégies visant à améliorer le temps de chargement de vos pages, vous pouvez suivre notre guide complet de vitesse et de performances WordPress.
Nous espérons que cet article vous a expliqué comment augmenter la vitesse de chargement des pages sur vos propres sites Web. Vous voudrez peut-être également voir comment nous développons notre liste de diffusion ou consulter notre guide de référencement WordPress pour augmenter votre trafic organique.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.