Comment nous avons rendu WordPress plus rapide que les générateurs de sites statiques (Étude de cas – Accélérer WPBeginner)

Lorsque nous avons célébré notre dixième anniversaire, j'ai partagé que notre infrastructure d'hébergement avait reçu une mise à niveau massive. Depuis lors, de nombreux lecteurs m'ont envoyé un e-mail pour me demander exactement comment nous avions fait pour que notre site se charge si rapidement.

Il est vrai que notre site se charge plus rapidement que la plupart des générateurs de sites statiques. Dans certains cas, il surpasse même les sites Google AMP.

Il ne s'agit pas seulement de droits de vantardise. Je veux partager les techniques exactes que notre équipe utilise pour que WordPress fonctionne à son apogée absolu.

Dans ce guide, je vous donnerai un aperçu exclusif des coulisses de notre configuration. Vous apprendrez comment nous avons optimisé WordPress pour surpasser les plateformes headless.

Note : Cet article est plus technique que notre contenu habituel. Si vous n'êtes pas un expert en technologie, je vous recommande de lire notre guide ultime sur la façon d'accélérer WordPress.

Contexte

Dernièrement, WordPress a mauvaise réputation auprès des développeurs « modernes », qui disent que WordPress est lent.

La déclaration est généralement suivie de "vous devriez passer à un générateur de site statique JAMstack comme GatsbyJS". D'autres dans le monde de l'entreprise diront que vous devriez passer à un CMS headless comme Contentful.

Plusieurs de mes amis entrepreneurs très prospères ont commencé à me demander si c'était vrai.

Certains ont même commencé le processus de migration vers un CMS headless parce qu'ils avaient lu des études de cas sur la façon dont d'autres ont obtenu d'énormes améliorations de vitesse en passant de WordPress à des générateurs de sites statiques.

Cela a été très frustrant pour moi car je savais qu'ils perdaient des dizaines de milliers de dollars en coûts de migration. Sans parler des coûts de personnalisation sans fin qui s'accumuleront à l'avenir.

J'ai donc relevé le défi de prouver qu'un grand site de contenu WordPress comme WPBeginner peut se charger aussi rapidement, sinon plus rapidement, que la plupart des générateurs de sites statiques modernes.

Vous pouvez m'appeler à l'ancienne, mais en fin de compte, un site statique n'est qu'une page chargée depuis le cache.

Résultats

Avant de plonger dans l'infrastructure d'hébergement WordPress exacte, les configurations de serveur et les plugins, je pense qu'il est utile de partager les résultats.

Voici la rapidité de chargement de la page d'accueil de WPBeginner sur Pingdom depuis leur serveur de Washington, DC :

Selon l'heure de la journée et l'endroit d'où vous vérifiez, ce résultat variera entre 400 ms et 700 ms, ce qui est assez rapide pour une page d'accueil.

Voici un test que j'ai effectué pour une page d'article unique, car elle contient des images plus grandes et plus de contenu :

Nous avons également obtenu un score parfait de « 100 » dans le test de vitesse de page Google pour ordinateur. Bien que nous ayons encore une marge d'amélioration pour le score mobile.

Les résultats ci-dessus concernent les pages mises en cache, qui sont ce que nos lecteurs et les robots des moteurs de recherche obtiennent lorsqu'ils consultent notre site Web. Le temps de chargement perçu de WPBeginner est quasi instantané (plus à ce sujet plus tard).

À titre de comparaison, voici un résultat de test de vitesse pour la page d'accueil de Gatsby. Il s'agit d'un générateur de sites statiques populaire dont de nombreux développeurs font l'éloge :

Voici le résultat du test de vitesse de la page d'accueil de Netlify, un hôte de site statique populaire que de nombreux développeurs recommandent. Notez qu'ils ont moitié moins de requêtes, et que leur taille de page représente 30 % de celle de WPBeginner, et pourtant, elle se charge toujours plus lentement que notre page d'accueil.

La vitesse de la page d'accueil de Contentful, le CMS headless, qui est « la façon dont les entreprises offrent de meilleures expériences numériques », n'est pas du tout optimisée. C'était le site web le plus lent que nous ayons testé.

Je partage ces statistiques non pas pour discréditer les autres frameworks, mais plutôt pour donner une perspective indiquant que toutes les nouveautés ne sont pas aussi brillantes qu'elles peuvent le paraître.

WordPress, avec une infrastructure d'hébergement et des optimisations appropriées, peut être aussi rapide que n'importe quel générateur de site statique. De plus, aucune autre plateforme ne s'approchera du niveau de flexibilité que WordPress offre aux propriétaires d'entreprise grâce à son vaste écosystème de plugins et de thèmes.

Infrastructure d'hébergement WPBeginner

En matière de vitesse de site web, rien ne joue un rôle plus important que votre infrastructure d'hébergement web.

Comme beaucoup d'entre vous le savent déjà, je suis client de HostGator depuis 2007. J'ai lancé le blog WPBeginner en 2009 sur un petit compte d'hébergement mutualisé HostGator.

Au fur et à mesure que notre site Web grandissait, nous sommes passés à leur hébergement VPS, puis à des serveurs dédiés.

Au cours de la dernière décennie, j'ai eu l'occasion de travailler en étroite collaboration avec de nombreux membres de leur équipe, et ils sont devenus une extension de la famille WPBeginner.

Alors, lorsque j'ai relevé le défi de rendre WPBeginner plus rapide que les générateurs de sites statiques, je me suis tourné vers eux pour obtenir de l'aide.

J'ai partagé ma vision avec leur équipe de direction, et ils ont proposé de m'aider à construire une configuration d'hébergement d'entreprise unique en son genre pour WPBeginner.

Ils ont mis les meilleurs ingénieurs des équipes Bluehost et HostGator à travailler en étroite collaboration avec moi pour rendre WPBeginner ultra rapide.

Voici un aperçu de la configuration d'hébergement de WPBeginner :

Comme vous pouvez le voir, il s'agit d'une configuration multi-serveurs répartie sur deux régions géographiques (Texas et Utah). Il y a un total de 9 serveurs, sans compter le cloud de l'équilibreur de charge. Chaque serveur est un CPU Xeon-D avec 8 cœurs (16 threads), avec 32 Go de RAM et 2 x 1 To de SSD (configuration RAID).

Nous utilisons la plateforme Google Cloud Load Balancing, ce qui nous permet d'avoir une mise à l'échelle automatique et un équilibrage de charge transparent dans le monde entier.

Once the hardware was set up with proper data syncing in place, the Bluehost and HostGator teams worked together to optimize the server configurations for WordPress. I hope that some of these optimizations will soon make it into future WordPress hosting plans

Résumé de la configuration des serveurs

Résumer les configurations de serveurs de cette configuration complexe en quelques paragraphes est très difficile, mais je ferai de mon mieux.

Nous utilisons Apache pour notre logiciel de serveur Web car l'équipe le connaît mieux. Je n'entrerai pas dans le débat NGINX vs Apache.

À l'époque, nous utilisions PHP 7.2 ainsi que des pools PHP-FPM (une méthode qui aide le serveur à traiter efficacement le trafic intense). Aujourd'hui, si votre société d'hébergement n'utilise pas PHP 8.1 ou une version supérieure, vous manquez d'optimisations de vitesse sérieuses et de mises à jour de sécurité importantes.

Nous avons utilisé la mise en cache Opcode (qui enregistre le code PHP compilé pour que le serveur fonctionne plus rapidement) avec un réchauffeur de cache avancé pour garantir qu'aucun utilisateur réel ne verrait une page non mise en cache.

Nous avons également utilisé la mise en cache d'objets avec memcache. La mise en cache d'objets enregistre les requêtes de base de données, ce qui nous permet d'améliorer considérablement le temps de réponse pour les accès aux pages non mises en cache et d'accélérer la zone d'administration de WordPress pour les utilisateurs connectés (nos rédacteurs).

Voici un onglet d'équilibrage de charge réseau de notre écran « Tous les articles » dans l'administration de WordPress à l'époque :

Pour vous donner une idée, notre expérience de la zone d'administration est maintenant 2 fois plus rapide qu'auparavant.

Pour notre serveur de base de données, nous sommes passés de MySQL à MariaDB, qui est un clone de MySQL mais plus rapide et meilleur. Nous sommes également passés de HyperDB à LudicrousDB car cela nous aide à améliorer notre réplication de base de données, notre basculement et notre équilibrage de charge.

Il existe également de nombreuses autres configurations qui nous aident en termes de performance et de scalabilité, telles que HTTP/2 et HSTS pour une connexion plus rapide + chiffrement, la possibilité de démarrer des serveurs supplémentaires dans de nouvelles régions en cas de panne de centre de données, etc.

J'ai l'impression de ne pas rendre justice à l'incroyable configuration que l'équipe a mise en place, mais sachez que ma principale force réside dans le marketing. Oui, je suis un blogueur qui écrit sur WordPress, mais bon nombre des optimisations techniques ici dépassent largement mes compétences.

Ils ont été réalisés par des ingénieurs très intelligents de l'équipe Endurance, dont David Collins (architecte en chef d'Endurance / CTO de HostGator), Mike Hansen (développeur principal de WordPress), et d'autres que je remercierai dans la section des crédits ci-dessous.

CDN, WAF et DNS

Outre l'hébergement Web, les autres domaines qui jouent un rôle important dans la vitesse de votre site Web sont votre fournisseur DNS, votre réseau de diffusion de contenu (également appelé CDN) et votre pare-feu d'application Web (WAF).

Bien que je l'aie listé comme trois éléments distincts, de nombreuses entreprises proposent désormais ces solutions dans un forfait groupé, telles que Sucuri, Cloudflare, MaxCDN (maintenant StackPath CDN), etc.

Comme je veux avoir un contrôle maximal et répartir les risques, j'utilise trois entreprises distinctes pour gérer chaque partie efficacement.

Le DNS de WPBeginner est alimenté par DNS Made Easy (la même société que Constellix). Ils sont constamment classés parmi les fournisseurs DNS les plus rapides au monde. L'avantage de DNS Made Easy est que je peux effectuer une redirection de trafic mondial lorsqu'un centre de données spécifique sur mon CDN ou WAF ne fonctionne pas correctement afin d'assurer un temps de disponibilité maximal.

Notre CDN était alimenté par MaxCDN (plus tard connu sous le nom de StackPath CDN, qui est maintenant abandonné). Ils nous permettaient essentiellement de servir nos actifs statiques (images, fichiers CSS et JavaScript) à partir d'un vaste réseau de serveurs à travers le monde.

Nous utilisons Sucuri comme notre pare-feu d'applications Web. En plus de bloquer les attaques, ils agissent également comme une autre couche de CDN, et leurs performances globales sont tout simplement incroyables. Je pense qu'ils ont la meilleure solution de pare-feu WordPress sur le marché.

Lorsque vous travaillez sur l'optimisation de la vitesse d'un site web, chaque milliseconde compte. C'est pourquoi l'utilisation de ces fournisseurs de solutions combinée à notre nouvelle infrastructure d'hébergement web fait une énorme différence.

Pour illustrer, voici la répartition en cascade de WPBeginner.com vs GatsbyJS.org vs CloudFlare.com :

Notez que le temps DNS, le temps SSL, le temps de connexion et le temps d'attente de WPBeginner sont tous excellents par rapport à ces autres sites Web populaires. Chacune de ces améliorations se cumule pour offrir les meilleurs résultats.

Instant.page, Images Optimisées et autres meilleures pratiques

L'une des choses que vous avez peut-être remarquées est le temps de chargement quasi instantané lorsque vous parcourez les articles et les pages de WPBeginner.

En dehors de toutes les choses que j'ai mentionnées ci-dessus, nous réduisons également la latence en utilisant un script appelé instant.page, qui utilise le préchargement juste à temps.

En gros, avant qu'un utilisateur ne clique sur un lien, il doit passer sa souris sur ce lien. Lorsqu'un utilisateur a survolé pendant 65 ms (une période de temps très courte), un sur deux cliquera effectivement sur le lien.

Le script Instant.page commence à précharger cette page à ce moment-là, donc lorsque l'utilisateur clique réellement sur le lien, une grande partie du travail acharné est déjà effectuée. Cela fait percevoir au cerveau humain le temps de chargement du site Web comme quasi instantané.

Pour activer Instant.page sur votre site, vous pouvez simplement installer et activer le plugin WordPress Instant Page.

Ce script est assez génial. Je vous recommande vivement de visiter leur site Web et de cliquer sur le bouton « testez votre vitesse de clic » pour voir comment il trompe le cerveau.

Optimisation des images pour le Web

Bien qu'il existe de nouveaux formats d'image en développement, tels que WebP, nous ne les utilisons pas encore. Au lieu de cela, nous demandons à tous nos rédacteurs d'optimiser chaque image à l'aide de l'outil TinyPNG.

Vous pouvez également automatiser la compression d'images à l'aide de plugins tels que Optimole ou EWWW Image Optimizer.

Cependant, je préfère personnellement que l'équipe le fasse manuellement, afin de ne pas téléverser de gros fichiers sur le serveur.

À l'époque, nous n'effectuions aucun chargement différé pour les images, mais nous avions prévu de l'ajouter une fois que Google aurait introduit la prise en charge native du chargement différé dans Chrome.

Heureusement, depuis WordPress 5.5, le chargement différé est désormais intégré directement dans le cœur de WordPress. Cela signifie qu'aujourd'hui, vous n'avez plus besoin d'un plugin personnalisé pour obtenir un chargement d'image différé de base sur votre site Web.

Limitation des requêtes HTTP + Bonnes pratiques

Selon les plugins WordPress que vous utilisez, certains ajouteront des fichiers CSS et JavaScript supplémentaires à chaque chargement de page. Ces requêtes HTTP supplémentaires peuvent devenir incontrôlables si vous avez beaucoup de plugins sur votre site web.

Pour plus de détails, consultez comment les plugins WordPress peuvent affecter le temps de chargement de votre site.

Maintenant, avant que vous ne tiriez la mauvaise conclusion que trop de plugins WordPress sont mauvais, je tiens à vous informer qu'il y a 62 plugins actifs sur le site Web WPBeginner.

Ce que vous devez faire, c'est combiner les fichiers CSS et JavaScript lorsque cela est possible pour réduire les requêtes HTTP. Certains plugins de mise en cache WordPress, comme WP Rocket, peuvent le faire automatiquement avec leur fonction de minification.

Vous pouvez également suivre les instructions de cet article pour le faire manuellement, ce que notre équipe chez WPBeginner a fait.

Outre les requêtes HTTP que les plugins et les thèmes ajoutent, vous devez également être conscient des autres scripts tiers que vous ajoutez à votre site Web, car chaque script aura un impact sur la vitesse de votre site Web.

Par exemple, si vous utilisez beaucoup de scripts publicitaires ou de scripts de reciblage, ils ralentiront votre site. Vous pourriez vouloir utiliser un outil comme Google Tag Manager pour charger les scripts conditionnellement, uniquement lorsqu'ils sont nécessaires.

Si vous avez un site web financé par la publicité comme TechCrunch ou TheNextWeb, alors il y a très peu que vous puissiez faire à ce sujet, car supprimer les publicités n'est pas une option.

Heureusement, WPBeginner ne dépend pas de scripts publicitaires tiers pour gagner de l'argent. Vous voulez voir comment WPBeginner gagne de l'argent ? Consultez mon article de blog sur les revenus de WPBeginner.

Leçons apprises (jusqu'à présent) + Mes réflexions finales

C'est une toute nouvelle infrastructure d'hébergement, et je suis sûr qu'il y aura des tonnes de leçons que j'apprendrai au fil du temps.

Jusqu'à présent, j'adore les améliorations de vitesse car elles nous ont aidés à améliorer nos classements SEO, et notre zone d'administration est beaucoup plus rapide.

Avec la nouvelle configuration multi-serveurs, nous avons introduit un nouveau flux de déploiement pour mettre WPBeginner au même niveau que les autres sites de produits d'Awesome Motive.

Ce que cela signifie, c'est que nous avons maintenant un contrôle de version approprié intégré, et des mesures sont en place pour m'empêcher d'être imprudent (c'est-à-dire ajouter des plugins sans tests appropriés, mettre à jour des plugins depuis le tableau de bord sans tests, etc.).

Ces changements ont également ouvert la voie à mon départ du développement et à la remise des rênes du site WPBeginner à notre équipe de développement.

J'ai résisté à cela pendant des années, mais je pense que le moment approche, et je dois simplement l'accepter.

La nouvelle configuration n'a pas de cPanel ni de WHM, ce qui me rend pratiquement inutile de toute façon, car je ne suis plus très à l'aise avec la ligne de commande.

Jusqu'à présent, nous avons tiré deux grandes leçons :

Premièrement, mettre à jour WordPress n'est pas aussi simple en raison de la synchronisation/réplication des serveurs. Lors d'une mise à jour majeure du cœur sur mon blog personnel (SyedBalkhi.com), les fichiers de mise à jour n'ont pas été correctement synchronisés sur l'un des nœuds Web, et le débogage a pris beaucoup plus de temps que prévu. Nous avons dû construire un meilleur processus de test pour cela.

Deuxièmement, nous devons avoir une meilleure communication entre les équipes car nous avons eu une crise mineure avec des mauvaises configurations de l'équilibreur de charge, ce qui a entraîné une interruption de service. Pour aggraver les choses, j'étais en vol transatlantique sur Turkish Airlines, et le WiFi ne fonctionnait pas.

Heureusement, tout a été résolu grâce au temps de réponse rapide de l'équipe d'hébergement, mais cela nous a aidés à créer plusieurs nouvelles procédures opérationnelles standard (POS) pour mieux gérer l'incident à l'avenir.

Dans l'ensemble, je suis très satisfait de la configuration, et je sais que certaines des configurations/optimisations de mise en cache qui ont été faites pour WPBeginner deviendront une partie standard des plans d'hébergement WordPress de HostGator Cloud et Bluehost.

Je pense que cela va sans dire que si vous démarrez un site web, un blog, ou une boutique en ligne, alors vous N'AVEZ PAS besoin de cette configuration d'entreprise sophistiquée.

Je recommande toujours de commencer petit avec les plans mutualisés HostGator ou Bluehost, comme je l'ai fait, puis d'améliorer votre infrastructure d'hébergement à mesure que votre entreprise se développe.

Vous pouvez appliquer bon nombre des optimisations que j'ai partagées ci-dessus à vos plans d'hébergement WordPress actuels.

Par exemple, le plan standard de Bluehost est déjà livré avec un plugin de mise en cache intégré que vous pouvez utiliser, et ils proposent également PHP 7 par défaut.

Vous pouvez combiner cela avec un CDN + WAF comme Sucuri pour accélérer considérablement votre site web.

Maintenant, si vous êtes une entreprise du marché intermédiaire / une entreprise qui souhaite une configuration d'hébergement similaire, veuillez me contacter via notre formulaire de contact. Je peux vous orienter dans la bonne direction.

Remerciements spéciaux + Crédits

Bien que dans l'article ci-dessus, j'aie beaucoup mentionné les marques HostGator et Bluehost, je tiens à prendre un moment pour reconnaître et apprécier les personnes individuelles qui ont travaillé en coulisses pour que cela se réalise.

Premièrement, je tiens à remercier l'équipe de direction d'Endurance, Suhaib, Mitch, John Orlando, Mike Lillie et Brady Nord d'avoir accepté de m'aider avec ce défi.

Je tiens également à remercier Mike Hansen, David Collins, Rick Radinger, Chris Miles, David Ryan, Jesse Cook, David Foster, Micah Wood, William Earnhardt, Robin Mendieta, Rod Johnson, Alfred Najem, et d'autres membres de l'équipe du centre de données pour avoir effectué le travail acharné et l'avoir concrétisé.

Je tiens à remercier tout particulièrement Steven Job (fondateur de DNSMadeEasy) pour avoir rapidement répondu à mes questions et m'avoir aidé à mieux comprendre certains paramètres. Je tiens également à remercier Tony Perez et Daniel Cid chez Sucuri pour avoir toujours été là pour moi.

Enfin, je tiens à rendre un hommage particulier à Chris Christoff. Il est le co-fondateur de MonsterInsights, et il a eu la gentillesse de m'aider avec une grande partie des tests et du déploiement.

Questions fréquemment posées (FAQ)

Nous comprenons que cela représente beaucoup d'informations techniques à assimiler. Voici les réponses à certaines des questions les plus fréquentes que nous recevons concernant la vitesse et les performances de WordPress.

Ai-je besoin d'une configuration d'hébergement complexe comme celle de WPBeginner pour avoir un site web rapide ?

Absolument pas. Cette étude de cas montre ce qui est possible au niveau de l'entreprise. Pour la plupart des utilisateurs, commencer avec un plan d'hébergement mutualisé de qualité de Bluehost ou HostGator est le point de départ idéal. Vous pouvez toujours améliorer votre offre à mesure que votre site grandit.

Quels sont les facteurs les plus importants pour la vitesse de WordPress ?

Les trois piliers de la vitesse d'un site web sont votre infrastructure d'hébergement web, la mise en cache et un réseau de diffusion de contenu (CDN). La maîtrise de ces trois éléments résoudra les plus grands goulots d'étranglement de performance pour la plupart des sites WordPress.

Puis-je rendre mon site WordPress rapide sans être un expert technique ?

Oui. Bien que cet article soit technique, vous n'avez pas besoin de tout comprendre. En suivant des guides pour débutants, en utilisant un bon plugin de mise en cache comme WP Rocket, et en optimisant vos images, vous pouvez avoir un impact énorme sur la vitesse de votre site sans aucune connaissance en codage.

L'utilisation de nombreux plugins ralentit-elle WordPress ?

Ce n'est pas le nombre de plugins, mais leur qualité qui compte. Un plugin bien codé aura un impact minimal. Cependant, des plugins mal codés peuvent ajouter du code et des requêtes de base de données inutiles qui ralentissent votre site.

Ressources supplémentaires pour améliorer les performances du site Web

Si cette étude de cas vous a été utile, nous avons d'autres guides qui vous expliquent étape par étape comment rendre votre site WordPress plus rapide. Consultez-les pour obtenir plus de conseils pratiques :

• Le guide ultime pour booster la vitesse et les performances de WordPress – Notre guide le plus complet pour les utilisateurs de tous niveaux afin d'améliorer la vitesse du site.
• Comment choisir le meilleur hébergement WordPress – Apprenez à choisir le bon fournisseur d'hébergement pour vos besoins et votre budget.
• Pourquoi vous avez besoin d'un CDN pour votre blog WordPress – Une explication détaillée du fonctionnement d'un CDN et pourquoi il est essentiel pour la vitesse.
• Le plan de WPBeginner – Consultez la liste complète des outils et plugins que nous utilisons pour gérer WPBeginner aujourd'hui.

Bonus : Voici les meilleurs plugins et outils WordPress que je recommande pour tous les sites WordPress. Vous voudrez peut-être aussi jeter un œil au plan de WPBeginner, qui liste les plugins et outils que nous utilisons pour gérer le site WPBeginner aujourd'hui.

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.