Comment booster la vitesse de chargement des pages sur WPBeginner (6 astuces dévoilées)

Au cas où vous ne le sauriez pas encore… Google a apporté d’importantes modifications à ses métriques de performance des sites Web, appelées Google Core Web Vitals.

L’applicationWeb Vitals du cœur comprend désormais le système stable Interaction to Next Paint (INP), qui remplace le First Input Delay (FID).

Beaucoup de nos lecteurs ont demandé comment nous maintenons des temps de chargement rapides sur WPBeginner. Nous suivons les pratiques d’optimisation standard, mais nous prenons des mesures supplémentaires pour gérer notre trafic élevé.

Dans cet article, nous allons partager ces astuces supplémentaires pour booster la vitesse de chargement de vos pages, dont beaucoup peuvent être appliquées à n’importe quel site.

Voici un aperçu rapide de tous les éléments dont nous parlerons dans cet article :

Pourquoi la vitesse de chargement des pages est-elle importante ?

La vitesse de chargement des pages est la vitesse à laquelle votre site web s’affiche lorsqu’un utilisateur clique sur un lien vers celui-ci.

Notre objectif est de faire en sorte que les utilisateurs/utilisatrices obtiennent rapidement les informations dont ils/elles ont besoin. Un site qui se charge plus rapidement rend les utilisateurs/utilisatrices heureux car ils peuvent obtenir immédiatement les informations qu’ils recherchent.

En revanche, un site qui se charge lentement peut les obliger à quitter le site. C’est ce que nous voulons éviter sur tous nos sites. Les utilisateurs sont plus susceptibles de devenir des abonnés/abonnés ou des clients/clientes s’ils restent plus longtemps sur votre site.

Les utilisateurs sont 36 % plus susceptibles de quitter (rebondir) un site web si celui-ci met 3 secondes à se charger. Et ils sont 90 % plus susceptibles de quitter un site web dont le chargement prend 5 secondes ou plus.

Source: ThinkWithGoogle

Voici d’autres raisons pour lesquelles la vitesse de chargement des pages est si importante :

• Amélioration de l’engagement des utilisateurs/utilisatrices : Un site à chargement rapide maintient l’intérêt des internautes, ce qui leur permet d’accéder rapidement aux informations. Les utilisateurs/utilisatrices qui passent plus de temps sur un site sont plus susceptibles de dépenser ou de convertir.
• Améliore le classement dans les moteurs de recherche : En raison de l’amélioration de l’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.
• Renforcement de la confiance et de l’autorité : Un site à chargement rapide semble plus fiable et plus professionnel, ce qui peut vous aider à convaincre les utilisateurs d’acheter auprès de votre entreprise.

En résumé, la vitesse de chargement des pages améliore l’expérience globale de l’utilisateur avec une satisfaction et un engagement des clients/clientes 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 de WordPress.

En outre, nous avons pris quelques mesures supplémentaires pour stimuler 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 et voir votre score Google Core Web Vitals, utilisez alors l’outil PageSpeed Insights.

Saisissez/saisie l’URL que vous souhaitez tester et cliquez sur le bouton « Analyser ».

L’outil analysera la page web pendant quelques secondes et vous montrera ensuite les résultats du test.

Examinons maintenant les étapes que nous avons suivies pour obtenir ce score de performance.

1. Plate-forme 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’un des principaux hébergeurs comme Bluehost ou Hostinger.

Cependant, WPBeginner est un site web plus important avec un volume de trafic élevé. Les plans d’hébergement partagés ou VPS sont trop limités à cette échelle.

C’est pourquoi WPBeginner est hébergé sur l’Enterprise Cloud Infrastructure de SiteGround, qui fonctionne sur la 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 la plateforme Google Cloud, qui est connectée au réseau de pointe de Google, garantissant les vitesses les plus rapides depuis tous les points du globe.
• Il 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 ultra-rapide, MySQL plus rapide et la compression Brotli, donnent un coup de pouce supplémentaire à la performance.
• Nous avons une expérience de première main avec l’équipe d’assistance de SiteGround. L’expertise de leurs ingénieurs, les temps de réponse rapides et la serviabilité générale nous ont toujours impressionnés.

Pour plus de détails, vous pouvez consulter notre article sur les raisons pour lesquelles WPBeginner est passé à l’hébergement SiteGround.

Actuellement, ils offrent également une généreuse réduction aux utilisateurs de WPBeginner avec un nom de domaine gratuit. L’abonnement commence à 2,99 $ par mois, ce qui est tout à fait abordable si l’on considère la technologie et le niveau de service fourni.

Le plus beau, c’est que les avantages de SiteGround ne se limitent pas aux clients/clientes d’entreprise. Tous les comptes d’hébergement partagé SiteGround sont également hébergés sur la plateforme Google Cloud.

2. DNS CloudFlare

Dans un article précédent 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 performance.

Le DNS (Domain Name System) est une sorte d’annuaire téléphonique pour les sites.

Lorsque vous entrez l’adresse d’un site web dans votre navigateur ou que vous 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 utilisent les serveurs de noms de leur entreprise d’hébergement pour gérer le DNS. Ceux-ci ne sont pas aussi rapides que Cloudflare, qui autorise la résolution DNS à la périphérie du réseau dans leurs centres de données répartis dans plus de 310 villes dans le monde.

Pourquoi nous utilisons les DNS de Cloudflare

• Résolution DNS la plus rapide : Le réseau mondial de Cloudflare permet de résoudre les DNS à l’emplacement le plus proche de n’importe quel utilisateur.
• Sécurité Version : Comme tout le trafic passe par le DNS de Cloudflare, leur pare-feu d’application web (WAF) est capable d’atténuer et de bloquer rapidement les attaques DDoS, les indésirables, les bots inutiles, les injections SQL, les tentatives de piratage, et bien plus encore.
• Livraison CDN – Leur réseau met automatiquement en cache les ressources statiques et les diffuse via leur réseau mondial, ce qui accélère le chargement des sites web. Et comme cela se passe au niveau du DNS, vous n’avez pas besoin d’avoir des sous-domaines distincts pour les ressources CDN.

Nous utilisons l’offre Entreprise, mais Cloudflare propose un CDN et un DNS gratuits pour les sites plus petits, qui font essentiellement la même chose avec moins de fonctionnalités.

3. Optimisation des performances avec WP Rocket

Pour une optimisation plus poussée des performances, nous utilisons WP Rocket, qui est l’une des meilleures extensions de performance WordPress sur le marché. Entre autres choses, il gère la mise en cache, ce qui signifie qu’il enregistre des copies de votre site afin que les pages se chargent plus rapidement pour les internautes récurrents.

Ce que nous aimons le plus à propos de WP Rocket, c’est qu’il s’agit du plugin d’optimisation des performances de WordPress le plus complet, de sorte que nous n’avons besoin que d’un seul outil pour gérer un grand nombre de tâches différentes.

Pourquoi nous utilisons WP Rocket

• Préchargement du cache – Habituellement, un plugin de cache attend qu’un utilisateur visite une page pour créer une copie en cache de celle-ci. WP Rocket garde 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 de ressources statiques telles que les images, JavaScript et CSS dans la mémoire cache du navigateur permet un chargement plus rapide des pages suivantes.
• Optimisation des fichiers – WP Rocket vous aide à minifier et optimiser la livraison de fichiers statiques comme JavaScript et les feuilles de style. La réduction de la taille de ces fichiers permet de réduire considérablement le temps de chargement de la page.

Nous avons partagé notre expérience détaillée avec ce plugin dans notre avis WP Rocket avec les avantages et les inconvénients.

Quels sont les paramètres utilisés dans WP Rocket ?

Nous avons activé les paramètres suivants de WP Rocket :

• Mise en cache complète des pages
• Optimisation des fichiers(minification des fichiers JS et CSS et livraison des CSS critiques)
• JavaScript deferred (retarder le 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

Vous avez besoin d’aide pour utiliser ces réglages sur votre site ? Nous avons un guide étape par étape pour configurer WP Rocket afin d’obtenir les meilleurs résultats.

4. Mise en file d’attente de JavaScript et CSS

Nous optimisons la distribution des fichiers JavaScript et CSS avec WP Rocket, mais avant cela, nous nous assurons que notre site charge uniquement les fichiers JavaScript et CSS nécessaires à une page.

Le moyen le plus simple d’y parvenir est d’utiliser des plugins et des thèmes WordPress qui respectent les meilleures pratiques de codage de WordPress. Ces développeurs ne chargeront un script qu’en cas de besoin.

Cependant, il arrive que le développeur d’un plugin ou d’un thème ne puisse pas prendre cette décision à votre place. Ils peuvent charger les scripts globalement pour une meilleure expérience utilisateur.

Chez WPBeginner, nous avons des développeurs/développeuses en interne qui se penchent sur ce problème. Nous déqueutons les scripts et CSS inutiles, puis nous les remettons en file d’attente là où c’est nécessaire.

Cependant, les utilisateurs ayant une compréhension de base du codage WordPress peuvent le faire en suivant les étapes suivantes.

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 est d’utiliser le plugin Query Monitor.

Il vous montrera les fichiers JavaScript et CSS chargés sur une page, et vous pourrez alors déterminer ceux qui sont inutiles.

Pour retirer un script de la file d’attente, vous devez utiliser la poignée de script comme indiqué dans Query Monitor. Ensuite, vous pouvez utiliser le code suivant pour le mettre en déshérence :

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 par défaut de WordPress sur WPBeginner. Il est extrêmement rapide, et l’équipe de développement 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 styles d’éditeurs/éditrices de blocs que nous n’utilisons pas sur WPBeginner.

Cela permet de réduire la taille du DOM et d’accélérer le traitement de la page demandée par les navigateurs.

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 traité rapidement.

Cependant, le gain de performance n’est pas très important et nous ne le recommandons pas à la plupart des utilisateurs de sites WordPress de petite taille.

6. Améliorations diverses des performances

Outre les conseils mentionnés ci-dessus, nous avons également mis en place des meilleures pratiques pour garantir une meilleure vitesse de chargement des pages.

En voici quelques-unes que vous pouvez facilement mettre en œuvre sur votre site web :

• Images optimisées – Notre équipe s’assure que les captures d’écran, les images et les médias que nous téléchargeons sont hautement optimisés pour réduire la taille du fichier. Consultez notre guide sur l ‘optimisation des images pour WordPress.
• Optimiser les tâches C ron – Les tâches Cron sont des tâches WordPress programmées qui s’exécutent en arrière-plan pour vérifier les mises à jour, publier des articles programmés, etc. Les plugins WordPress peuvent également ajouter leurs propres processus en arrière-plan. L’optimisation des tâches Cron permet de réduire la charge du serveur et d’améliorer les performances.
• Réduire les requêtes HTTP externes – Certains plugins et outils que vous utilisez peuvent avoir besoin de charger des fichiers à partir de domaines externes. Un trop grand nombre de ces requêtes peut augmenter le temps de chargement des pages. Pour y remédier, vous pouvez consulter notre tutoriel sur la manière de désactiver les fichiers CSS et JavaScript de vos plugins.

Vous pouvez suivre notre guide complet sur la vitesse et les performances de WordPress pour une présentation plus terminée de ces méthodes et d’autres stratégies visant à améliorer le temps de chargement de vos pages.

Nous espérons que cet article vous a donné des indications sur la manière d’améliorer la vitesse de chargement des pages de vos propres sites web. Vous voudrez peut-être aussi voir comment nous développons notre liste d’emails ou jeter un coup d’œil à notre guide de référencement WordPress pour augmenter votre trafic organique.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.