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

À l'occasion du 10e anniversaire de , j'ai expliqué que l'infrastructure d'hébergement avait été considérablement améliorée grâce à notre partenaire d'hébergement Web, HostGator.

Peu de temps après, j'ai commencé à recevoir des courriels de lecteurs me demandant de partager des détails sur la manière dont nous avons fait en sorte que devienne extrêmement rapide.

Oui, 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.

Dans cet article, je vous expliquerai comment nous avons conçu WordPress plus rapidement que les générateurs de sites statiques et les plates-formes CMS sans tête.

Accélérer   - Dans les coulisses

Remarque: Cet article est un peu plus technique que ce que nous publions généralement sur . Pour les utilisateurs non avertis, je vous recommande de suivre notre guide ultime sur la manière d’accélérer WordPress.

Contexte

Dernièrement, WordPress a reçu beaucoup de reproches de la part des développeurs «modernes», où ils disent que WordPress est lent.

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

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

Certains ont même entamé le processus de migration vers un système de gestion de contenu sans tête parce qu'ils lisaient des études de cas sur la façon dont d'autres ont obtenu d'importantes améliorations de la 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 vont s'accumuler dans le futur.

J’ai donc pris comme défi de prouver qu’un grand site de contenu WordPress tel que peut se charger aussi vite, sinon plus vite que la plupart des générateurs de sites statiques modernes.

Vous pouvez m'appeler vieille école, mais à la fin de la journée, un site statique n'est qu'une page en cours de chargement.

Résultats

Avant de passer à l'infrastructure d'hébergement WordPress exacte, aux configurations de serveur et aux plug-ins, je pense qu'il est utile de partager les résultats.

Voici la rapidité avec laquelle la page d’accueil se charge sur Pingdom à partir de leur serveur à Washington, DC:

  Page d'accueil Pingdom

En fonction de l'heure et du lieu de votre visite, ce résultat varie entre 400 et 700 ms, ce qui est assez rapide pour une page d'accueil.

Voici un test que j'ai exécuté pour une seule page de publication, car il contient de plus grandes images et plus de contenu:

  Single Posts Test de vitesse de page de Pingdom

Nous avons également obtenu un score parfait de «100» au test de vitesse de page Google pour les ordinateurs de bureau. Bien que nous puissions encore améliorer notre score mobile.

  Google Page Test de vitesse

Les résultats ci-dessus concernent les pages 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 est presque instantané (nous en parlerons plus tard).

À des fins 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 site statique populaire que beaucoup de développeurs vantent:

Gatsby Page d'accueil Pingdom

Voici le résultat du test de vitesse de la page d'accueil de Netlify, un hôte de site statique populaire, recommandé par de nombreux développeurs. Notez qu'ils ont la moitié du nombre de demandes et que leur taille de page est de 30% de , mais que le chargement est toujours plus lent que notre page d'accueil.

Netlify Page d'accueil Pingdom

La vitesse de la page d'accueil de Contentful, le système de gestion de contenu sans tête (CMS), qui explique «comment les entreprises offrent de meilleures expériences numériques», n'est tout simplement pas optimisé. C'était le site Web le plus lent que nous avons testé.

Page d'accueil content

Je partage ces statistiques non pas pour discréditer les autres cadres, mais plutôt pour donner une idée du fait que toutes les nouvelles choses ne sont pas aussi brillantes qu’elles peuvent 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 plate-forme ne sera aussi proche 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

En ce qui concerne la vitesse du site Web, rien ne joue un rôle plus important que votre infrastructure d’hébergement Web.

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

Au fur et à mesure de la croissance de notre site Web, nous avons mis à niveau leur hébergement VPS, puis leurs serveurs dédiés.

Au cours de la dernière décennie, j'ai eu la chance de travailler en étroite collaboration avec plusieurs des membres de leur équipe et ils font désormais partie intégrante de la famille .

Alors, quand j'ai relevé le défi de rendre 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 m'ont proposé de m'aider à mettre en place une configuration d'hébergement d'entreprise unique en son genre pour .

Ils ont mis les meilleurs ingénieurs de Bluehost et de l’équipe HostGator à travailler en étroite collaboration avec moi pour faire de un succès fulgurant.

Voici un aperçu de la configuration de l’hébergement :

Infrastructure d'hébergement

Comme vous pouvez le constater, il s’agit d’une configuration multi-serveurs répartie sur deux régions géographiques (Texas et Utah). Au total, 9 serveurs ne comprennent pas le cloud de l'équilibreur de charge. Chaque serveur est un processeur Xeon-D à 8 cœurs (16 threads) avec 32 Go de RAM et 2 x SSD de 1 To (configuration RAID).

Nous utilisons la plate-forme Google d'équilibrage de la charge dans le nuage de Google, ce qui nous permet d'avoir un équilibrage automatique et un équilibrage de la charge transparents dans le monde entier.

Une fois le matériel configuré avec la synchronisation des données en place, l'équipe Bluehost et HostGator ont collaboré pour optimiser les configurations de serveur pour WordPress. J'espère que certaines de ces optimisations feront bientôt partie des futurs plans d'hébergement WordPress :)

Résumé de la configuration du serveur

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

Nous utilisons Apache pour notre logiciel de serveur Web, car l’équipe le connaît mieux. Je ne participerai pas au débat NGINX vs Apache.

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

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

Nous utilisons également le cache d’objets avec memcache. Nous pouvons ainsi améliorer le temps de réponse des hits de page non mis en cache et des temps de réponse des autres API dans la zone d’administration de WordPress pour les utilisateurs connectés (nos rédacteurs). Voici un onglet de charge réseau de notre écran «Tous les messages» dans l’administrateur de WordPress:

Écran d'édition   Post

Pour mettre en perspective, notre expérience dans la zone d’administration est maintenant deux fois plus rapide que celle que nous avions 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 la réplication, le basculement et l’équilibrage de la charge de la base de données.

Il existe également de nombreuses autres configurations qui nous aident en termes de performances et d’évolutivité, telles que HTTP / 2 et HSTS pour une connexion et un cryptage plus rapides, la possibilité d’alimenter des serveurs supplémentaires dans de nouvelles régions en cas de panne du centre de données, etc.

Je sens que je ne rends pas justice à l’étonnante configuration que l’équipe a construite, mais sachez que ma principale force est le marketing. Oui, je suis un blogueur qui écrit à propos de WordPress, mais bon nombre des optimisations techniques proposées dépassent largement mon niveau de rémunération.

Ils ont été réalisés par des ingénieurs très intelligents dans l’équipe Endurance, dont David Collins (architecte en chef d’Endurance / CTO de HostGator), Mike Hansen (développeur WordPress principal) 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 distribution de contenu (CDN) et votre pare-feu pour applications Web (WAF).

Bien que cela soit répertorié comme trois éléments distincts, de nombreuses entreprises proposent désormais ces solutions dans un plan intégré tel que Sucuri, Cloudflare, MaxCDN (StackPath), etc.

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

DNS est alimenté par DNS Made Easy (même entreprise que Constellix). Ils sont systématiquement classés comme les fournisseurs de DNS les plus rapides au monde. L’avantage de DNS Made Easy est que je peux diriger le trafic mondial lorsqu'un centre de données spécifique de mon CDN ou de mon réseau WAF ne fonctionne pas correctement pour assurer une disponibilité maximale.

Notre CDN est alimenté par MaxCDN (StackPath). Ils nous permettent essentiellement de servir nos ressources statiques (images, fichiers CSS et JavaScripts) à partir de leur vaste réseau de serveurs à travers le monde.

Nous utilisons Sucuri comme pare-feu pour nos 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 crois qu'ils ont la meilleure solution de pare-feu WordPress sur le marché.

Lorsque vous travaillez sur les optimisations de la vitesse des sites Web, chaque milliseconde compte. C’est pourquoi l’utilisation de ces fournisseurs de solutions associée à notre nouvelle infrastructure d’hébergement Web fait une énorme différence.

Pour illustrer cela, voici la ventilation en cascade de .com vs GatsbyJS.org vs CloudFlare.com:

Répartition en cascade des demandes sur

Notez que l’heure DNS, l’heure SSL, l’heure de connexion et l’attente de sont toutes de qualité supérieure par rapport à ces autres sites Web populaires. Chacune de ces améliorations contribue à donner les meilleurs résultats.

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

Vous avez sans doute remarqué le temps de chargement quasi instantané lorsque vous parcourez les publications et les pages .

En plus de tout ce que j'ai mentionné ci-dessus, nous trichons également le temps de latence en utilisant un script appelé instant.page qui utilise le préchargement juste à temps.

Fondamentalement, avant qu'un utilisateur clique sur un lien, il doit passer la souris sur ce lien. Lorsqu'un utilisateur a survolé pendant 65 ms (très courte période), un utilisateur sur deux clique sur le lien.

Le script Instant.page commence à précharger cette page à ce moment-là. Ainsi, lorsque l'utilisateur clique sur le lien, le gros du travail est déjà bien fait. Cela fait que le cerveau humain perçoit le temps de chargement du site Web comme presque instantané.

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

Script de page instantané

Ce script est plutôt chouette. Je recommande fortement de consulter leur site Web et de cliquer sur le bouton «Testez votre vitesse de clic» pour voir comment il trompe le cerveau.

Optimiser les images pour le Web

Bien que de nouveaux formats d’image soient développés, 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'image à l'aide de plugins tels que Optimole ou EWWW Image Optimizer.

Cependant, je préfère personnellement que l’équipe le fasse manuellement, nous ne téléversons donc pas de gros fichiers sur le serveur.

Nous ne faisons actuellement aucun chargement paresseux pour les images, mais je prévois de l'ajouter dans un proche avenir, maintenant que Google prend en charge le chargement paresseux intégré à Chrome 76.

Il existe également un ticket dans le noyau de WordPress pour ajouter cette fonctionnalité sur tous les sites (en espérant vraiment que cela se produise bientôt), je n’ai donc pas besoin d’écrire un plugin personnalisé.

Limiter les requêtes HTTP + Meilleures pratiques

Réduire les requêtes HTTP interdomaines

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, voyez comment les plugins WordPress peuvent affecter le temps de chargement de votre site.

Maintenant, avant de conclure à tort que trop de plugins WordPress sont mauvais, je tiens à vous informer que 62 plugins actifs sont en cours d’exécution sur le site Web .

Ce que vous devez faire est de combiner les fichiers CSS et JavaScript dans la mesure du possible afin de réduire les demandes HTTP. Certains plugins de mise en cache WordPress tels que WP Rocket peuvent le faire automatiquement avec leur fonctionnalité de minification.

Vous pouvez également suivre les instructions de cet article pour le faire manuellement, comme l’a fait notre équipe chez .

Outre les requêtes HTTP ajoutées par les plug-ins et les thèmes, vous devez également prendre en compte les scripts tiers que vous ajoutez sur votre site Web, car chaque script aura une incidence sur la vitesse de votre site Web.

Par exemple, si vous exécutez de nombreux scripts publicitaires ou des scripts de reciblage, ils ralentiront votre site. Vous voudrez peut-être utiliser un outil tel que Google Tag Manager pour charger conditionnellement les scripts uniquement lorsqu'ils sont nécessaires.

Si vous êtes un site Web financé par la publicité, comme TechCrunch ou TheNextWeb, vous ne pouvez pratiquement rien faire à ce sujet, car la suppression des publicités n’est pas une option.

Heureusement, ne compte pas sur des scripts publicitaires tiers pour gagner de l'argent. Vous voulez voir comment gagne de l'argent? Voir mon article de blog sur les revenus .

Leçons apprises (jusqu'à présent) + Mes dernières pensées

Il s’agit d’une toute nouvelle infrastructure d’hébergement et je suis persuadée que je vais apprendre énormément de leçons supplémentaires.

Jusqu'ici, j'aime les améliorations de la vitesse, car cela nous a permis d'améliorer notre classement en référencement et que notre domaine d'administration est beaucoup plus rapide.

Avec la nouvelle configuration multiserveurs, nous avons introduit un nouveau flux de travail de déploiement pour amener à égaler le reste des sites de produits Awesome Motive.

Cela signifie que nous disposons désormais du contrôle de version approprié et que des mesures ont été mises en place pour m'empêcher d'être irresponsable (ajout de plugins sans tests appropriés, mise à jour des plugins à partir du tableau de bord sans tests, etc.).

Ces changements ont également ouvert la voie pour que je quitte enfin le développement et confie les rênes du site à notre équipe de développement.

Je résiste à cela depuis des années, mais je pense que le moment approche et que je dois juste l'accepter.

La nouvelle configuration n’a ni cPanel ni WHM, ce qui me rend pratiquement inutile de toute façon puisque je ne maîtrise plus très bien la ligne de commande.

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

Tout d’abord, la mise à jour de WordPress n’est pas aussi simple en raison de la synchronisation / réplication du serveur. Lorsque nous avons mis à niveau mon blog personnel (SyedBalkhi.com) vers WordPress 5.2, les fichiers de mise à jour ne se synchronisaient pas correctement sur l’un des nœuds Web et le débogage prenait beaucoup plus de temps que prévu. Nous travaillons à la construction d’un meilleur processus de construction / test pour cela.

Deuxièmement, nous devons améliorer la communication entre les équipes car nous avions une crise mineure due à des erreurs de configuration de l'équilibreur de charge, ce qui a entraîné des temps d'arrêt. Pire, j’étais sur un vol transatlantique avec Turkish Airlines et le WiFi ne fonctionnait pas.

Heureusement, tout a été réglé grâce au temps de réponse rapide de l'équipe d'accueil, mais cela nous a aidés à créer plusieurs nouvelles procédures standard d'exploitation (SOP) afin de mieux gérer l'incident à l'avenir.

Globalement, je suis très satisfait de la configuration et je sais que certaines des configurations / optimisations de la mise en cache qui ont été faites pour deviendront un élément standard des plans d’hébergement HostGator Cloud et Bluehost WordPress.

Je pense que cela devrait aller de soi que si vous démarrez simplement un site Web, un blog ou une boutique en ligne, vous n'avez PAS besoin de cette configuration d'entreprise sophistiquée.

Je vous recommande toujours de commencer modestement avec les plans partagés HostGator ou Bluehost comme je l'ai fait, puis de mettre à niveau votre infrastructure d'hébergement au fur et à mesure de la croissance de votre entreprise.

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

Par exemple, le plan standard 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.

Maintenant, si vous êtes une entreprise du marché intermédiaire / entreprise qui souhaite une configuration d'hébergement similaire, contactez-moi via notre formulaire de contact. Je peux vous aider à vous diriger dans la bonne direction.

Remerciement spécial + Crédits

Merci HostGator et Bluehost

Tandis que dans l'article ci-dessus, j'ai énormément crié aux marques HostGator et Bluehost, je souhaite prendre un moment pour reconnaître et apprécier les personnes qui ont travaillé dans les coulisses pour y arriver.

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 à relever le défi.

Je souhaite é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 faire le travail difficile et y arriver.

Je souhaite remercier particulièrement Steven Job (fondateur de DNSMadeEasy) pour avoir répondu rapidement à mes questions et m'aider à mieux comprendre certains paramètres. Je veux aussi remercier Tony Perez et Daniel Cid à Sucuri pour avoir toujours mon dos.

Dernier point mais non le moindre, je souhaite accorder une reconnaissance particulière à Chris Christoff. Cofondateur de MonsterInsights, il a eu la gentillesse de m'aider lors de nombreux tests et déploiements.

J'espère vraiment que vous avez trouvé utile cette étude de cas en coulisse sur l'infrastructure d'hébergement . Vous voudrez peut-être également consulter notre guide ultime sur la manière d’accélérer WordPress, qui est bien plus convivial pour les débutants.

Prime: Voici les meilleurs plugins et outils WordPress que je recommande pour tous les sites WordPress.

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Gazouillement et Facebook.

Le post Comment nous avons créé WordPress plus rapidement que les générateurs de sites statiques (Étude de cas – Accélérer ) est apparu en premier sur .

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *