WP Rocket SaaS : dans les coulisses

Cet article technique détaille le développement et l'optimisation d'un robot d'exploration Web capable de traiter plus de 15 000 pages Web par minute à l'aide de NodeJS, Puppeteer et BullMQ. Nous expliquons comment la fonctionnalité Remove Unused CSS (RUCSS) fonctionne et améliore les performances Web en éliminant les CSS inutiles, en améliorant les temps de chargement et en améliorant les indicateurs de performances clés. Nous décrivons également comment nous avons relevé les défis initiaux, notamment les problèmes de traitement inefficace et de stabilité, en tirant parti de Puppeteer pour la collecte de ressources, en personnalisant les bibliothèques JavaScript et en implémentant un système de file d'attente avec BullMQ. Enfin, nous décrivons comment nous avons atteint l'excellence opérationnelle visant à maintenir des normes de qualité élevées, permettant une innovation rapide et un support client efficace.

Qu’est-ce que le RUCSS ?

La fonctionnalité Remove Unused CSS (RUCSS) est conçue pour éliminer tous les CSS et feuilles de style non utilisés sur une page Web, en ne conservant que le CSS nécessaire à chaque page. Une fois l’optimisation appliquée, votre site Web ne fournira que le CSS nécessaire pour la page spécifique demandée par un utilisateur, ce qui rendra le chargement de la page beaucoup plus rapide !

En moyenne, cette optimisation a réduit la taille du CSS livré de 76% !

Avantages du RUCSS

• Taille de page réduite : minimise la taille globale de la page Web.
• Moins de requêtes HTTP : réduit le nombre de feuilles de style CSS à charger.
• Temps de chargement plus rapides : améliore la vitesse de chargement de la page.
• Enhanced Core Web Vitals : améliore les indicateurs de performances clés tels que Largest Contentful Paint (LCP), First Contentful Paint (FCP) et Cumulative Layout Shift (CLS).
• Élimination du CSS bloquant le rendu : empêche le CSS de retarder le rendu de la page.

Identifier les CSS inutilisés : une frappe chirurgicale

Le processus de suppression des CSS inutilisés est très complexe : pour chaque règle CSS que nous supprimons, nous devons nous assurer qu'elle ne sera jamais nécessaire sur cette page ; sinon, la mise en page pourrait se briser ! Vous devez prendre en compte de nombreux facteurs pour garantir que le CSS inutilisé est correctement identifié :

• Interactions JavaScript : JavaScript modifie dynamiquement le DOM et le CSS. Par exemple, une fenêtre contextuelle peut apparaître après un clic sur un bouton, introduisant de nouveaux éléments DOM et règles CSS. La gestion de ces interactions est cruciale pour identifier avec précision les CSS utilisés, et il existe de nombreux autres curseurs, menus hors canevas et galeries.
• Variations CSS et HTML : les thèmes et plugins WordPress introduisent des variations infinies de règles CSS. La gestion des CSS imbriqués, des cas extrêmes et même des erreurs de syntaxe est essentielle. Une analyse HTML précise est nécessaire pour identifier et supprimer efficacement les CSS inutilisés.
• Tailles des fenêtres : Certains styles CSS sont appliqués sous certaines conditions sur la taille de l'écran. Pour garantir que les CSS peuvent être correctement servis aux utilisateurs mobiles et de bureau, nous fournissons les CSS utilisés pour différentes tailles d'écran et ne livrons que celui qui est pertinent pour chaque visite. De plus, des règles d'optimisation spécifiques s'appliquent aux styles CSS réactifs.

RUCSS en tant que solution SaaS

Le traitement des ressources de la page et la génération du CSS utilisé nécessitent beaucoup de ressources. Effectuer ces tâches directement sur les sites Web des clients peut les ralentir et peut ne pas être réalisable sur tous les serveurs et hébergements. Par conséquent, certaines des fonctionnalités les plus avancées de WP Rocket, telles que les CSS supprimés et inutilisés, sont optimisées par notre SaaS. Ces optimisations sont effectuées sur nos serveurs à la demande du plugin WP Rocket, et les résultats sont ensuite appliqués automatiquement aux sites Web. Cette approche présente de grands avantages pour les clients :

• Effectuez une optimisation gourmande en ressources et réduisez la charge sur les serveurs des utilisateurs.
• Apportez des améliorations dès que possible et répondez rapidement aux commentaires.
• Observez et corrigez de manière proactive les problèmes et les erreurs sans attendre un ticket d'assistance.
• Assurez-vous que tous les utilisateurs bénéficient des dernières versions sans aucune mise à jour côté client.
• Itérez rapidement et déployez des améliorations sans avoir besoin de mettre à jour le plugin WP Rocket.

À quoi ça ressemble dans les coulisses ?

WP Rocket SaaS visite et optimise jusqu'à 20 000 pages par minute, en traitant leur CSS et leurs images au-dessus de la ligne de flottaison ! Pour ce faire, nous exploitons constamment des milliers de navigateurs Web sur environ 40 serveurs différents pour répondre à toutes les demandes de nos utilisateurs en 2 minutes. Pour y parvenir, notre équipe exploite des technologies de pointe, notamment NodeJS, Django, Redis, CockroachDB et Kubernetes, et les exploite avec les équipes group.One.

Les principaux défis techniques

1. Collecte des ressources de page

Nous utilisons largement Puppeteer, une bibliothèque Node qui fournit une API de haut niveau pour contrôler les navigateurs Chrome ou Chromium sans tête. Cet outil est essentiel pour notre stratégie de collecte de ressources grâce à sa capacité à restituer les pages Web comme le ferait un utilisateur réel, garantissant que tous les éléments dynamiques sont capturés. Il offre de nombreuses fonctionnalités puissantes sur lesquelles nous comptons pour optimiser le processus, telles que le contrôle de la taille de la fenêtre d'affichage, les interceptions de requêtes, etc.

2. Ressources de la page de traitement

Étant donné que les thèmes et plugins WordPress utilisent une grande variété de CSS et JavaScript, nous avions besoin d'une solution robuste pour traiter ces fichiers.

Après avoir testé de nombreuses méthodes pour traiter les ressources de la page, telles que Webpack, PostCSS et CleanCSS, nous avons finalement décidé de créer et de maintenir notre propre bibliothèque JavaScript personnalisée pour mieux répondre à nos besoins spécifiques. Cela inclut la gestion des cas extrêmes, des règles CSS imbriquées et des problèmes de syntaxe rencontrés dans de nombreux thèmes et plugins WordPress afin de garantir que l'optimisation puisse être effectuée de manière fiable pour tous nos utilisateurs.

3. Affiner avec l'expertise de notre équipe

Le traitement du CSS peut être très délicat et le risque est élevé de casser la mise en page si le processus n'est pas suffisamment soigné. Notre équipe possède une connaissance approfondie des thèmes et des créateurs de pages WordPress populaires, ainsi que des commentaires constants de centaines de milliers d’utilisateurs sur la compatibilité avec les dernières tendances WordPress. Par conséquent, nous avons développé un système de liste sécurisée dynamique pour nos coéquipiers afin de mettre à jour directement les règles de traitement CSS de notre SaaS en temps réel afin d'adapter continuellement nos optimisations et d'augmenter la compatibilité chaque jour.

4. Gérer un flux de milliers de pages par minute

Pour gérer le flux de 15 000 pages Web par minute, nous avons mis en place un système de file d'attente utilisant BullMQ. Ce système propose :

• Traitement asynchrone pour décharger le processus d'optimisation du plugin vers un backend asynchrone.
• Équilibrage de charge et gestion de la concurrence : répartissez les tâches sur plusieurs serveurs, permettant au SaaS de gérer efficacement un grand nombre d'URL et d'évoluer facilement.
• Fiabilité et tolérance aux pannes : toutes les tâches soumises et leurs résultats sont enregistrés dès qu'ils sont disponibles. Cela assure la résilience en cas de panne de l'un de nos serveurs ou si le site Web de l'utilisateur n'est pas en mesure de récupérer les résultats immédiatement.
• Priorisation : les files d'attente BullMQ peuvent être utilisées pour prioriser les tâches, garantissant que les tâches les plus importantes sont traitées en premier. Par exemple, l'optimisation des pages d'accueil est priorisée pour permettre à nos utilisateurs de voir immédiatement les améliorations sur leur page d'accueil et de la tester immédiatement avec Pagespeed !

Excellence opérationnelle

Construire un système évolutif et fiable pour SaaS est essentiel pour la simplicité et l'efficacité des clients, ainsi que pour gérer le nombre croissant d'utilisateurs et le volume croissant de demandes de traitement de pages. Voici un aperçu approfondi des étapes qui nous ont permis d’atteindre une telle excellence.

1. Architecture évolutive

WP Rocket est utilisé à tout moment sur des millions de sites Web dans le monde. Par conséquent, notre SaaS doit rester disponible et fonctionner comme prévu à tout moment. Le service est hébergé sur plus de 40 serveurs physiques situés dans différentes régions. Ils sont orchestrés avec Kubernetes pour faciliter le déploiement, la mise à l'échelle et la gestion des cycles de vie du conteneur. Nous nous appuyons sur des fonctionnalités puissantes telles que des sondes d'activité, des mises à jour progressives et une mise à l'échelle automatique pour apporter la résilience au service et maintenir la disponibilité en toutes circonstances. De plus, un service de passerelle personnalisé effectue la gestion des tâches et applique la sécurité de l'API (limitation de débit, authentification, etc.).

2. Surveillance et alerte

Tous ces services et serveurs sont constamment surveillés et observés avec des métriques techniques via Prometheus et Grafana, ainsi que des métriques fonctionnelles, pour garantir la stabilité du service et offrir les meilleures performances à nos utilisateurs. Une surveillance approfondie nous permet de garantir que le taux de réussite reste élevé tout en maintenant une durée de travail faible et une efficacité d'optimisation optimale. Les alertes d'outils comme Prometheus et Metabase nous permettent de réagir en temps réel au cas où quelque chose ne se comporterait pas comme prévu.

3. L'observabilité pour aider nos clients

Bien que nous travaillions dur pour rendre notre SaaS facile à utiliser pour nos clients, certaines difficultés peuvent survenir dans des configurations très complexes avec des pare-feu, des règles de sécurité ou des sites Web WordPress avec de nombreux plugins ou thèmes contradictoires, par exemple. Grâce à l'approche SaaS, notre équipe de support est équipée d'outils internes via Metabase pour accéder aux données liées à un utilisateur donné, et observer ses travaux et résultats d'optimisation, nous permettant ainsi d'identifier rapidement les problèmes possibles. Ils sont ensuite capables de répéter, d'ajuster et d'affiner et d'obtenir des commentaires en temps réel avec PostMan et Metabase. En conséquence, ils peuvent aider efficacement les clients en difficulté et même ajuster directement les règles d'optimisation SaaS pour débloquer les utilisateurs.

4. Tests automatisés et intégration continue

Maintenir des normes de qualité élevées tout en conservant un taux de livraison important peut constituer un défi pour les ingénieurs. Nous résolvons ce problème grâce à une automatisation fiable par laquelle passe chaque modification de code. Des tests automatisés au déploiement en production à l’aide d’un seul bouton, nous exploitons également la mise en miroir, les mécanismes de libération fantôme et les déploiements progressifs de versions. Toutes ces approches puissantes permettent à notre équipe d’ingénierie de prospérer et de continuer à innover sans mettre en péril la qualité du service. La plupart de ces opérations sont automatisées, de sorte que nous n'avons même pas besoin d'y penser et de nous concentrer sur ce qui compte : créer les meilleures fonctionnalités pour nos utilisateurs !

Conclusion

Pour résumer, le développement et l'optimisation du robot d'exploration Web à l'aide de NodeJS, Puppeteer et BullMQ ont conduit à une solution hautement efficace et évolutive pour traiter plus de 15 000 pages Web par minute. En relevant les défis initiaux et en tirant parti d'outils et de méthodologies avancés, nous avons créé un système robuste qui améliore considérablement les performances Web grâce à la fonctionnalité Supprimer les CSS inutilisés (RUCSS). L'intégration continue, les tests automatisés et l'accent mis sur l'évolutivité et la fiabilité garantissent que notre service reste de premier ordre, offrant aux utilisateurs des temps de chargement plus rapides et une expérience Web globale améliorée.