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

Lors du 10e anniversaire de WPBeginner, j'ai partagé que notre infrastructure d'hébergement avait reçu une énorme mise à niveau grâce à notre partenaire d'hébergement Web, HostGator. Par la suite, bon nombre de nos lecteurs se sont demandé comment nous avions rendu WPBeginner si rapide, et j'ai commencé à recevoir des e-mails demandant les détails.

Oui, WPBeginner se charge plus rapidement que la plupart des générateurs de sites statiques et, dans certains cas, plus rapidement que les sites Google AMP également. Il ne s'agit pas seulement de se vanter ; il s'agit de partager les techniques exactes que nous avons utilisées pour que WordPress atteigne son apogée.

Dans cet article, je vous donnerai un aperçu exclusif des coulisses de la façon dont nous avons optimisé WordPress pour qu'il soit plus rapide que les générateurs de sites statiques et les plateformes CMS headless.

Remarque : Cet article est un peu plus technique que ce que nous publions habituellement sur WPBeginner. Pour les utilisateurs non techniques, je recommande de suivre 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.

Cette affirmation 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.

C'était très frustrant pour moi car je savais qu'ils gaspillaient 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 exacte d'hébergement WordPress, 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 effectuez la vérification, 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 » au 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, 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ébergeur de sites statiques populaire que de nombreux développeurs recommandent. Notez qu'ils ont deux fois moins de requêtes, et que la taille de leur page représente 30 % de celle de WPBeginner, et pourtant elle se charge plus lentement que notre page d'accueil.

La vitesse de chargement de la page d'accueil de Contentful, le CMS headless qui « permet aux entreprises d'offrir 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 appropriée et des optimisations 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'entreprises 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 un client 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 a grandi, 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 répartition de charge. Chaque serveur est un CPU Xeon-D avec 8 cœurs (16 threads), 32 Go de RAM et 2 x 1 To de SSD (configuration RAID).

Nous utilisons la plateforme de répartition de charge Google Cloud, afin de bénéficier d'une mise à l'échelle automatique et d'une répartition de charge transparentes, 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. My hope is 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 comme logiciel de serveur web car l'équipe le connaît mieux. Je n'entrerai pas dans le débat NGINX vs Apache.

Nous utilisons PHP 7.2 avec des pools PHP-FPM, afin de pouvoir gérer des charges élevées de processus et de requêtes. Si votre société d'hébergement n'utilise pas PHP 7+, vous manquez une optimisation de vitesse sérieuse.

Nous utilisons la mise en cache Opcode avec un réchauffeur de cache avancé pour garantir qu'aucun utilisateur réel ne devrait rencontrer une vue de page non mise en cache.

Nous utilisons également la mise en cache d'objets avec memcache, afin d'améliorer le temps de réponse pour les accès aux pages non mises en cache et d'autres temps de réponse API dans la zone d'administration WordPress pour les utilisateurs connectés (nos rédacteurs). Voici un onglet de répartition de charge réseau de notre écran « Tous les articles » dans l'administration WordPress :

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 matière 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 choses distinctes, de nombreuses entreprises proposent désormais ces solutions dans un forfait groupé, comme 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 entreprise 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 globale lorsqu'un centre de données spécifique sur mon CDN ou WAF ne fonctionne pas correctement, afin d'assurer une disponibilité maximale.

Notre CDN est alimenté par MaxCDN (maintenant StackPath CDN). Ils nous permettent essentiellement de servir nos actifs statiques (images, fichiers CSS et JavaScript) à partir de leur 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 leur performance globale est tout simplement incroyable. 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 :

Remarquez 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 plus de tout ce que j'ai mentionné ci-dessus, nous trompons é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 le préchargement de cette page à ce moment précis, de sorte que lorsque l'utilisateur clique réellement sur le lien, une grande partie du travail lourd est déjà effectuée. Cela donne l'impression au cerveau humain que le temps de chargement du site web est quasi instantané.

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

Ce script est plutôt sympa. 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 cours de 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.

Actuellement, nous n'effectuons aucun chargement différé pour les images, mais je prévois de l'ajouter dans un avenir proche maintenant que Google intègre le chargement différé dans Chrome 76.

Il existe également un ticket dans le cœur de WordPress pour ajouter cette fonctionnalité à tous les sites (j'espère vraiment que cela se produira bientôt), afin que je n'aie pas à écrire un plugin personnalisé.

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.

Avant de tirer la mauvaise conclusion que trop de plugins WordPress sont mauvais, je veux vous faire savoir qu'il y a 62 plugins actifs sur le site WPBeginner.

Ce que vous devez faire, c'est combiner les fichiers CSS et JavaScript lorsque c'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 fonctionnalité de minification.

Vous pouvez également suivre les instructions dans 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.

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 le reste des sites de produits 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 ouvrent également la voie à mon retrait définitif 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, donc cela me rend pratiquement inutile de toute façon puisque je ne suis plus très à l'aise avec la ligne de commande.

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

Premièrement, la mise à jour de WordPress n'est pas aussi simple en raison de la synchronisation/réplication du serveur. Lorsque nous avons mis à jour mon blog personnel (SyedBalkhi.com) vers WordPress 5.2, les fichiers de mise à jour ne se sont pas correctement synchronisés sur l'un des nœuds web, et le débogage a pris beaucoup plus de temps que prévu. Nous travaillons à la création d'un meilleur processus de construction/test pour cela.

Deuxièmement, nous devons avoir une meilleure communication entre les équipes car nous avons eu une petite crise avec des mauvaises configurations de l'équilibreur de charge qui ont entraîné une interruption. Pour aggraver les choses, j'étais en plein 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 d'exploitation standard (SOP) 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é apportées à WPBeginner deviendront une partie standard des plans HostGator Cloud et hébergement WordPress Bluehost.

Je pense que cela va sans dire que si vous êtes juste en train de créer 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 offrent é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.

Si vous êtes une entreprise de taille moyenne ou une grande 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.

Tout d'abord, 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 à adresser une mention spéciale à Steven Job (fondateur de DNSMadeEasy) pour avoir rapidement répondu à mes questions et m'avoir aidé à mieux comprendre certains paramètres. Je tiens également à mentionner Tony Perez et Daniel Cid de Sucuri pour avoir toujours été là pour moi.

Enfin, je tiens à rendre une reconnaissance spéciale à Chris Christoff. Il est le co-fondateur de MonsterInsights, et il a eu la gentillesse de m'aider dans 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é chez Bluehost ou HostGator est le point de départ idéal. Vous pourrez toujours améliorer votre offre à mesure que votre site se développe.

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 de son importance 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 WordPress et outils que je recommande pour tous les sites WordPress. Vous pourriez également vouloir jeter un œil à Le guide de WPBeginner, qui répertorie les plugins et outils que nous utilisons pour gérer le site Web WPBeginner aujourd'hui.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.