WP Rocket SaaS: Hinter den Kulissen

Dieser technische Artikel beschreibt die Entwicklung und Optimierung eines Webcrawlers, der mit NodeJS, Puppeteer und BullMQ über 15.000 Webseiten pro Minute verarbeiten kann. Wir erklären, wie die Funktion „Unused CSS entfernen“ (RUCSS) funktioniert und die Webleistung verbessert, indem sie unnötiges CSS eliminiert, Ladezeiten verbessert und wichtige Leistungsmetriken steigert. Wir beschreiben auch, wie wir die anfänglichen Herausforderungen, darunter ineffiziente Verarbeitung und Stabilitätsprobleme, angegangen sind, indem wir Puppeteer für die Ressourcensammlung genutzt, JavaScript-Bibliotheken angepasst und ein Warteschlangensystem mit BullMQ implementiert haben. Abschließend erläutern wir, wie wir operative Exzellenz erreicht haben, die auf die Aufrechterhaltung hoher Qualitätsstandards, die Ermöglichung schneller Innovationen und einen effizienten Kundensupport abzielt.

Was ist RUCSS?

Die Funktion „Nicht verwendetes CSS entfernen“ (RUCSS) dient dazu, alle nicht auf einer Webseite verwendeten CSS- und Stylesheets zu entfernen und nur das für jede Seite erforderliche CSS beizubehalten. Sobald die Optimierung angewendet wurde, liefert Ihre Website nur das benötigte CSS für die spezifische Seite, die ein Benutzer anfordert, wodurch die Seite viel schneller geladen wird!

Im Durchschnitt reduzierte diese Optimierung die Größe des gelieferten CSS um 76 %!

Vorteile von RUCSS

• Reduzierte Seitengröße : Minimiert die Gesamtgröße der Webseite.
• Weniger HTTP-Anfragen : Reduziert die Anzahl der CSS-Stylesheets, die geladen werden müssen.
• Schnellere Ladezeiten : Verbessert die Ladegeschwindigkeit der Seite.
• Verbesserte Core Web Vitals : Steigert wichtige Leistungskennzahlen wie Largest Contentful Paint (LCP), First Contentful Paint (FCP) und Cumulative Layout Shift (CLS).
• Beseitigung von Render-blockierendem CSS : Verhindert, dass CSS das Rendern der Seite verzögert.

Identifizierung ungenutzter CSS: ein chirurgischer Eingriff

Der Prozess des Entfernens nicht verwendeter CSS-Regeln ist sehr komplex: Für jede CSS-Regel, die wir entfernen, müssen wir sicherstellen, dass sie auf dieser Seite nie benötigt wird. Andernfalls könnte das Layout kaputt gehen! Sie müssen viele Faktoren berücksichtigen, um sicherzustellen, dass das nicht verwendete CSS ordnungsgemäß identifiziert wird:

• JavaScript-Interaktionen : JavaScript ändert DOM und CSS dynamisch. Beispielsweise könnte nach dem Klicken auf eine Schaltfläche ein Popup erscheinen, das neue DOM-Elemente und CSS-Regeln einführt. Der Umgang mit diesen Interaktionen ist entscheidend für die genaue Identifizierung des verwendeten CSS, und es gibt noch viele weitere Schieberegler, Off-Canvas-Menüs und Galerien.
• CSS- und HTML-Variationen : WordPress-Themes und -Plugins führen endlose Variationen von CSS-Regeln ein. Der Umgang mit verschachteltem CSS, Randfällen und sogar Syntaxfehlern ist unerlässlich. Um nicht verwendetes CSS effektiv zu identifizieren und zu entfernen, ist eine genaue HTML-Analyse erforderlich.
• Ansichtsfenstergrößen : Einige CSS-Stile werden unter bestimmten Bedingungen auf die Bildschirmgröße angewendet. Um sicherzustellen, dass CSS für Mobil- und Desktop-Benutzer korrekt bereitgestellt werden kann, stellen wir gebrauchtes CSS für verschiedene Bildschirmgrößen bereit und liefern bei jedem Besuch nur das relevante. Darüber hinaus gelten für responsive CSS-Stile bestimmte Optimierungsregeln.

RUCSS als SaaS-Lösung

Die Verarbeitung von Seitenressourcen und die Generierung von verwendetem CSS ist ressourcenintensiv. Die direkte Ausführung dieser Aufgaben auf Kundenwebsites kann sie verlangsamen und ist möglicherweise nicht auf allen Servern und Hostings durchführbar. Daher werden einige der fortschrittlichsten Funktionen von WP Rocket, wie zum Beispiel das Entfernen nicht verwendeter CSS, von unserem SaaS unterstützt. Diese Optimierungen werden auf unseren Servern auf Anfrage des WP Rocket-Plugins durchgeführt und die Ergebnisse werden dann automatisch auf Websites angewendet. Dieser Ansatz hat für Kunden einige große Vorteile:

• Führen Sie eine ressourcenintensive Optimierung durch und reduzieren Sie die Belastung der Benutzerserver.
• Liefern Sie Verbesserungen so schnell wie möglich und reagieren Sie schnell auf Feedback.
• Beobachten und beheben Sie Probleme und Fehler proaktiv, ohne auf ein Support-Ticket warten zu müssen.
• Stellen Sie sicher, dass alle Benutzer von den neuesten Versionen profitieren, ohne dass ein clientseitiges Update erforderlich ist.
• Führen Sie schnelle Iterationen durch und stellen Sie Verbesserungen bereit, ohne das WP Rocket-Plugin aktualisieren zu müssen.

Wie sieht es hinter den Kulissen aus?

WP Rocket SaaS besucht und optimiert bis zu 20.000 Seiten pro Minute und verarbeitet deren CSS- und „above-the-fold“-Bilder! Zu diesem Zweck betreiben wir ständig Tausende von Webbrowsern auf ca. 40 verschiedenen Servern, um alle unsere Benutzeranfragen innerhalb von 2 Minuten zu bearbeiten. Um dies zu erreichen, nutzt unser Team modernste Technologien wie NodeJS, Django, Redis, CockroachDB und Kubernetes und betreibt diese mit Group.One-Teams.

Die wichtigsten technischen Herausforderungen

1. Seitenressourcen sammeln

Wir verwenden häufig Puppeteer, eine Node-Bibliothek, die eine High-Level-API zur Steuerung kopfloser Chrome- oder Chromium-Browser bereitstellt. Dieses Tool ist für unsere Strategie zur Ressourcensammlung unerlässlich, da es Webseiten genau wie ein echter Benutzer rendern kann und sicherstellt, dass alle dynamischen Elemente erfasst werden. Es bietet viele leistungsstarke Funktionen, auf die wir uns verlassen, um den Prozess zu optimieren, wie z. B. die Steuerung der Ansichtsfenstergröße, das Abfangen von Anforderungen usw.

2. Seitenressourcen verarbeiten

Da WordPress-Themes und -Plugins eine Vielzahl von CSS und JavaScript verwenden, benötigten wir eine robuste Lösung zur Verarbeitung dieser Dateien.

Nachdem wir viele Methoden zur Verarbeitung der Seitenressourcen getestet hatten, wie z. B. Webpack, PostCSS und CleanCSS, entschieden wir uns schließlich, unsere eigene angepasste JavaScript-Bibliothek abzuzweigen und zu verwalten, um unseren spezifischen Anforderungen besser gerecht zu werden. Dazu gehört die Behandlung von Randfällen, verschachtelten CSS-Regeln und Syntaxproblemen, die in zahlreichen WordPress-Themes und -Plugins auftreten, um sicherzustellen, dass die Optimierung für alle unsere Benutzer zuverlässig durchgeführt werden kann.

3. Feinabstimmung mit der Expertise unseres Teams

Die Verarbeitung von CSS kann sehr schwierig sein und es besteht ein hohes Risiko, dass das Seitenlayout beschädigt wird, wenn dem Prozess nicht genügend Sorgfalt gewidmet wird. Unser Team verfügt über umfangreiche Kenntnisse über beliebte WordPress-Themes und Seitenersteller sowie über ständiges Feedback von Hunderttausenden Benutzern zur Kompatibilität mit den neuesten WordPress-Trends. Aus diesem Grund haben wir für unsere Teamkollegen ein dynamisches Safelisting-System entwickelt, um die CSS-Verarbeitungsregeln unseres SaaS direkt in Echtzeit zu aktualisieren, um unsere Optimierungen kontinuierlich anzupassen und die Kompatibilität jeden Tag zu erhöhen.

4. Verwalten eines Flusses von Tausenden Seiten pro Minute

Um den Datenfluss von 15.000 Webseiten pro Minute zu bewältigen, haben wir mithilfe von BullMQ ein Warteschlangensystem implementiert. Dieses System bietet:

• Asynchrone Verarbeitung , um den Optimierungsprozess vom Plugin auf ein asynchrones Backend zu verlagern.
• Lastausgleich und Parallelitätsmanagement : Verteilen Sie Aufgaben auf mehrere Server, sodass SaaS eine große Anzahl von URLs effizient verarbeiten und einfach skalieren kann.
• Zuverlässigkeit und Fehlertoleranz : Alle übermittelten Aufgaben und ihre Ergebnisse werden gespeichert, sobald sie verfügbar sind. Dies sorgt für Ausfallsicherheit, falls einer unserer Server ausfällt oder die Website des Benutzers die Ergebnisse nicht sofort abrufen kann.
• Priorisierung : BullMQ-Warteschlangen können zur Priorisierung von Aufgaben verwendet werden, um sicherzustellen, dass wichtigere Aufgaben zuerst verarbeitet werden. So steht beispielsweise die Optimierung von Homepages im Vordergrund, damit unsere Nutzer die Verbesserungen auf ihrer Homepage sofort sehen und diese gleich mit Pagespeed testen können!

Operative Exzellenz

Der Aufbau eines skalierbaren und zuverlässigen Systems für SaaS ist für die Benutzerfreundlichkeit und Effizienz sowie für die Bewältigung der wachsenden Anzahl von Benutzern und des zunehmenden Volumens an Seitenverarbeitungsanfragen von entscheidender Bedeutung. Hier ist ein detaillierter Blick auf die Schritte, die es uns ermöglicht haben, solch eine Exzellenz zu erreichen.

1. Skalierbare Architektur

WP Rocket wird jederzeit auf Millionen von Websites weltweit eingesetzt. Daher muss unser SaaS jederzeit verfügbar bleiben und die erwartete Leistung erbringen. Der Dienst wird auf mehr als 40 physischen Servern in verschiedenen Regionen gehostet. Sie sind mit Kubernetes orchestriert, um die Bereitstellung, Skalierung und Verwaltung der Container-Lebenszyklen zu vereinfachen. Wir verlassen uns auf leistungsstarke Funktionen wie Liveness-Prüfungen, fortlaufende Updates und automatische Skalierung, um die Ausfallsicherheit des Dienstes zu erhöhen und die Betriebszeit unter allen Umständen aufrechtzuerhalten. Darüber hinaus übernimmt ein benutzerdefinierter Gateway-Dienst die Auftragsverwaltung und erzwingt die API-Sicherheit (Ratenbegrenzung, Authentifizierung usw.).

2. Überwachung und Alarmierung

Alle diese Dienste und Server werden ständig mit technischen Metriken durch Prometheus und Grafana sowie funktionalen Metriken überwacht und beobachtet, um sicherzustellen, dass der Dienst stabil ist und unseren Benutzern die beste Leistung bietet. Durch eine umfassende Überwachung können wir sicherstellen, dass die Erfolgsquote hoch bleibt und gleichzeitig die Auftragsdauer niedrig und die Optimierungseffizienz auf höchstem Niveau gehalten wird. Warnungen von Tools wie Prometheus und Metabase ermöglichen es uns, in Echtzeit zu reagieren, falls sich etwas nicht wie erwartet verhält.

3. Beobachtbarkeit, um unseren Kunden zu helfen

Während wir hart daran arbeiten, unser SaaS für unsere Kunden benutzerfreundlich zu gestalten, können bei sehr komplexen Setups mit Firewalls, Sicherheitsregeln oder WordPress-Websites mit vielen widersprüchlichen Plugins oder Themes einige Schwierigkeiten auftreten. Dank des SaaS-Ansatzes ist unser Support-Team über Metabase mit internen Tools ausgestattet, um auf Daten eines bestimmten Benutzers zuzugreifen und dessen Optimierungsaufgaben und -ergebnisse zu beobachten, sodass wir mögliche Probleme schnell identifizieren können. Anschließend sind sie in der Lage, mit PostMan und Metabase zu wiederholen, zu optimieren und zu verfeinern und Echtzeit-Feedback zu erhalten. Dadurch können sie Kunden in Schwierigkeiten effizient helfen und sogar die SaaS-Optimierungsregeln direkt anpassen, um die Benutzer freizuschalten.

4. Automatisierte Tests und kontinuierliche Integration

Die Aufrechterhaltung hoher Qualitätsstandards bei gleichzeitiger Aufrechterhaltung einer hohen Lieferrate kann für Ingenieure eine Herausforderung sein. Wir lösen dieses Problem mit einer zuverlässigen Automatisierung, die jede Codeänderung durchläuft. Von automatisierten Tests bis hin zur Ein-Knopf-Bereitstellung in der Produktion nutzen wir auch Spiegelung, Shadow-Release-Mechanismen und progressive Release-Rollouts. All diese leistungsstarken Ansätze ermöglichen es unserem Engineering-Team, erfolgreich zu sein und weiterhin Innovationen voranzutreiben, ohne die Qualität der Dienstleistung zu gefährden. Das meiste davon ist automatisiert, sodass wir nicht einmal darüber nachdenken müssen und uns auf das Wesentliche konzentrieren müssen: die Entwicklung der besten Funktionen für unsere Benutzer!

Einpacken

Zusammenfassend lässt sich sagen, dass die Entwicklung und Optimierung des Webcrawlers mit NodeJS, Puppeteer und BullMQ zu einer hocheffizienten und skalierbaren Lösung für die Verarbeitung von über 15.000 Webseiten pro Minute geführt hat. Durch die Bewältigung anfänglicher Herausforderungen und den Einsatz fortschrittlicher Tools und Methoden haben wir ein robustes System geschaffen, das die Webleistung durch die Funktion „Remove Unused CSS“ (RUCSS) erheblich verbessert. Kontinuierliche Integration, automatisierte Tests und ein Fokus auf Skalierbarkeit und Zuverlässigkeit stellen sicher, dass unser Service erstklassig bleibt und Benutzern schnellere Ladezeiten und ein insgesamt verbessertes Web-Erlebnis bietet.