WP Rocket SaaS: za kulisami

Opublikowany: 2024-09-12

W tym artykule technicznym szczegółowo opisano rozwój i optymalizację robota sieciowego zdolnego przetwarzać ponad 15 000 stron internetowych na minutę przy użyciu NodeJS, Puppeteer i BullMQ. Wyjaśniamy, jak działa funkcja Usuń nieużywane CSS (RUCSS) i zwiększa wydajność sieci, eliminując niepotrzebne CSS, skracając czas ładowania i zwiększając kluczowe wskaźniki wydajności. Opisujemy również, jak poradziliśmy sobie z początkowymi wyzwaniami, w tym problemami z niewydajnym przetwarzaniem i stabilnością, wykorzystując Puppeteer do gromadzenia zasobów, dostosowując biblioteki JavaScript i wdrażając system kolejkowania za pomocą BullMQ. Na koniec opisujemy, w jaki sposób osiągnęliśmy doskonałość operacyjną mającą na celu utrzymanie wysokich standardów jakości, umożliwienie szybkich innowacji i skuteczną obsługę klienta.

Co to jest RUCSS?

Funkcja Usuń nieużywany CSS (RUCSS) ma na celu wyeliminowanie wszystkich CSS i arkuszy stylów, które nie są używane na stronie internetowej, zachowując tylko CSS niezbędny dla każdej strony. Po zastosowaniu optymalizacji Twoja witryna będzie dostarczać tylko potrzebne CSS dla konkretnej strony, o którą prosi użytkownik, dzięki czemu strona ładuje się znacznie szybciej!

Ta optymalizacja zmniejszyła rozmiar dostarczonego CSS średnio o 76%!

Korzyści z RUCSS

  • Zmniejszony rozmiar strony : Minimalizuje całkowity rozmiar strony internetowej.
  • Mniej żądań HTTP : zmniejsza liczbę arkuszy stylów CSS, które należy załadować.
  • Szybsze czasy ładowania : Poprawia prędkość ładowania strony.
  • Ulepszone podstawowe wskaźniki internetowe : Zwiększa kluczowe wskaźniki wydajności, takie jak największa zawartość treściowa (LCP), pierwsza zawartość treściowa (FCP) i skumulowane przesunięcie układu (CLS).
  • Eliminacja CSS blokującego renderowanie : zapobiega opóźnianiu renderowania strony przez CSS.

Identyfikacja niewykorzystanego CSS: uderzenie chirurgiczne

Proces usuwania nieużywanego CSS jest bardzo złożony: w przypadku każdej usuwanej reguły CSS musimy mieć pewność, że nie będzie ona nigdy potrzebna na tej stronie; w przeciwnym razie układ może się zepsuć! Aby mieć pewność, że nieużywany CSS zostanie prawidłowo zidentyfikowany, należy wziąć pod uwagę wiele czynników:

  • Interakcje JavaScript : JavaScript dynamicznie zmienia DOM i CSS. Na przykład po kliknięciu przycisku może pojawić się wyskakujące okienko wprowadzające nowe elementy DOM i reguły CSS. Obsługa tych interakcji ma kluczowe znaczenie dla dokładnej identyfikacji używanego CSS, a istnieje o wiele więcej suwaków, menu poza płótnem i galerii.
  • Odmiany CSS i HTML : Motywy i wtyczki WordPress wprowadzają nieskończone odmiany reguł CSS. Obsługa zagnieżdżonych CSS, przypadków brzegowych, a nawet błędów składniowych jest niezbędna. Do skutecznego identyfikowania i usuwania nieużywanych CSS wymagana jest dokładna analiza HTML.
  • Rozmiary rzutni : niektóre style CSS są stosowane w pewnych warunkach do rozmiaru ekranu. Aby zapewnić prawidłowe wyświetlanie CSS użytkownikom telefonów komórkowych i komputerów stacjonarnych, udostępniamy używane CSS dla różnych rozmiarów ekranów i dostarczamy tylko odpowiedni CSS przy każdej wizycie. Dodatkowo, w przypadku responsywnych stylów CSS obowiązują określone zasady optymalizacji.

RUCSS jako rozwiązanie SaaS

Przetwarzanie zasobów strony i generowanie używanego CSS wymaga dużych zasobów. Wykonywanie tych zadań bezpośrednio na stronach internetowych klientów może je spowolnić i może nie być wykonalne na wszystkich serwerach i hostingach. Dlatego niektóre z najbardziej zaawansowanych funkcji WP Rocket, takie jak usunięty nieużywany CSS, są obsługiwane przez naszą SaaS. Optymalizacje te są przeprowadzane na naszych serwerach na żądanie wtyczki WP Rocket, a wyniki są następnie automatycznie stosowane na stronach internetowych. Takie podejście ma kilka ogromnych korzyści dla klientów:

  • Przeprowadź optymalizację wymagającą dużych zasobów i zmniejsz obciążenie serwerów użytkowników.
  • Jak najszybciej dostarczaj ulepszenia i szybko reaguj na opinie.
  • Aktywnie obserwuj i naprawiaj problemy i błędy, nie czekając na zgłoszenie do pomocy technicznej.
  • Upewnij się, że wszyscy użytkownicy korzystają z najnowszych wersji bez konieczności aktualizacji po stronie klienta.
  • Wykonuj szybkie iteracje i wdrażaj ulepszenia bez konieczności aktualizowania wtyczki WP Rocket.

Jak to wygląda za kulisami?

WP Rocket SaaS odwiedza i optymalizuje do 20 tys. stron na minutę, przetwarzając ich CSS i obrazy widoczne na ekranie! W tym celu stale obsługujemy tysiące przeglądarek internetowych na około 40 różnych serwerach, aby obsługiwać wszystkie żądania użytkowników w ciągu 2 minut. Aby to osiągnąć, nasz zespół wykorzystuje najnowocześniejsze technologie, w tym NodeJS, Django, Redis, CockroachDB i Kubernetes, i obsługuje je w zespołach group.One.

Kluczowe wyzwania techniczne

1. Gromadzenie zasobów strony

Szeroko korzystamy z Puppeteer, biblioteki Node, która zapewnia API wysokiego poziomu do kontrolowania bezgłowych przeglądarek Chrome lub Chromium. To narzędzie jest niezbędne dla naszej strategii gromadzenia zasobów ze względu na jego zdolność do renderowania stron internetowych tak, jak zrobiłby to prawdziwy użytkownik, zapewniając przechwycenie wszystkich elementów dynamicznych. Oferuje wiele zaawansowanych funkcji, na których polegamy w celu optymalizacji procesu, takich jak kontrola rozmiaru rzutni, przechwytywanie żądań i tak dalej.

2. Przetwarzanie zasobów strony

Ponieważ motywy i wtyczki WordPress wykorzystują szeroką gamę CSS i JavaScript, potrzebowaliśmy solidnego rozwiązania do przetwarzania tych plików.

Po przetestowaniu wielu metod przetwarzania zasobów strony, takich jak Webpack, PostCSS i CleanCSS, w końcu zdecydowaliśmy się na rozwidlenie i utrzymanie naszej własnej, dostosowanej biblioteki JavaScript, aby lepiej odpowiadała naszym specyficznym wymaganiom. Obejmuje to obsługę przypadków brzegowych, zagnieżdżonych reguł CSS i problemów ze składnią występujących w wielu motywach i wtyczkach WordPress, aby zapewnić niezawodną optymalizację dla wszystkich naszych użytkowników.

3. Dopracowanie dzięki wiedzy naszego zespołu

Przetwarzanie CSS może być bardzo trudne i istnieje duże ryzyko uszkodzenia układu strony, jeśli proces nie zostanie potraktowany z należytą starannością. Nasz zespół posiada rozległą wiedzę na temat popularnych motywów WordPress i narzędzi do tworzenia stron, a także stałą informację zwrotną od setek tysięcy użytkowników na temat zgodności z najnowszymi trendami WordPress. Dlatego opracowaliśmy dynamiczny system bezpiecznej listy dla naszych członków zespołu, aby bezpośrednio aktualizować reguły przetwarzania CSS w naszej SaaS w czasie rzeczywistym, aby stale dostosowywać nasze optymalizacje i codziennie zwiększać kompatybilność.

4. Zarządzanie przepływem tysięcy stron na minutę

Aby obsłużyć przepływ 15 000 stron internetowych na minutę, wdrożyliśmy system kolejkowy wykorzystujący BullMQ. System ten oferuje:

  • Przetwarzanie asynchroniczne w celu przeniesienia procesu optymalizacji z wtyczki na asynchroniczny backend.
  • Równoważenie obciążenia i zarządzanie współbieżnością : rozdzielaj zadania na wiele serwerów, umożliwiając SaaS wydajną obsługę dużej liczby adresów URL i łatwe skalowanie.
  • Niezawodność i tolerancja błędów : Wszystkie przesłane zadania i ich wyniki są zapisywane, gdy tylko będą dostępne. Zapewnia to odporność na wypadek awarii jednego z naszych serwerów lub gdy witryna internetowa użytkownika nie jest w stanie natychmiast pobrać wyników.
  • Priorytetyzacja : Kolejki BullMQ mogą służyć do ustalania priorytetów zadań, zapewniając, że ważniejsze zadania zostaną przetworzone w pierwszej kolejności. Na przykład priorytetem jest optymalizacja stron głównych, aby nasi użytkownicy mogli natychmiast zobaczyć ulepszenia na swojej stronie głównej i od razu przetestować je za pomocą Pagespeed!

Doskonałość operacyjna

Zbudowanie skalowalnego i niezawodnego systemu dla SaaS jest niezbędne dla łatwości i wydajności klientów oraz obsługi rosnącej liczby użytkowników i rosnącej liczby żądań przetwarzania stron. Oto szczegółowe spojrzenie na kroki, które pozwoliły nam osiągnąć taką doskonałość.

1. Skalowalna architektura

WP Rocket jest używany w milionach stron internetowych na całym świecie w dowolnym momencie. Dlatego nasza usługa SaaS musi być zawsze dostępna i działać zgodnie z oczekiwaniami. Usługa jest hostowana na ponad 40 serwerach fizycznych zlokalizowanych w różnych regionach. Są one koordynowane za pomocą Kubernetes, aby ułatwić wdrażanie, skalowanie i zarządzanie cyklami życia kontenera. Opieramy się na zaawansowanych funkcjach, takich jak sondy na żywo, aktualizacje kroczące i automatyczne skalowanie, aby zapewnić odporność usługi i utrzymać czas pracy w każdych okolicznościach. Dodatkowo niestandardowa usługa bramy zarządza zadaniami i wymusza bezpieczeństwo API (ograniczanie szybkości, uwierzytelnianie itp.).

2. Monitorowanie i ostrzeganie

Wszystkie te usługi i serwery są stale monitorowane i obserwowane za pomocą wskaźników technicznych za pośrednictwem Prometheus i Grafana, a także wskaźników funkcjonalnych, aby zapewnić stabilność usługi i najlepszą wydajność naszym użytkownikom. Dogłębne monitorowanie pozwala nam zapewnić wysoki wskaźnik powodzenia, przy jednoczesnym zachowaniu krótkiego czasu trwania zadania i najlepszej w swojej klasie wydajności optymalizacji. Alerty z narzędzi takich jak Prometheus i Metabase pozwalają nam reagować w czasie rzeczywistym, jeśli coś nie działa zgodnie z oczekiwaniami.

3. Obserwowalność, aby pomóc naszym klientom

Chociaż ciężko pracujemy, aby nasz SaaS był łatwy w obsłudze dla naszych klientów, pewne trudności mogą wystąpić w bardzo złożonych konfiguracjach z zaporami sieciowymi, regułami bezpieczeństwa lub witrynami WordPress z wieloma sprzecznymi wtyczkami lub motywami. Dzięki podejściu SaaS nasz zespół wsparcia wyposażony jest w wewnętrzne narzędzia poprzez Metabase umożliwiające dostęp do danych dotyczących danego użytkownika oraz obserwację jego zadań optymalizacyjnych i wyników, co pozwala nam na szybką identyfikację ewentualnych problemów. Następnie mogą powtarzać, poprawiać i dostrajać oraz uzyskiwać informacje zwrotne w czasie rzeczywistym za pomocą aplikacji PostMan i Metabase. W rezultacie mogą skutecznie pomagać klientom mającym problemy, a nawet bezpośrednio dostosowywać reguły optymalizacji SaaS, aby odblokować użytkowników.

4. Automatyczne testowanie i ciągła integracja

Utrzymanie wysokich standardów jakościowych przy jednoczesnym zachowaniu znacznej szybkości dostaw może być wyzwaniem dla inżynierów. Rozwiązujemy ten problem dzięki niezawodnej automatyzacji, przez którą przechodzi każda zmiana kodu. Od automatycznych testów po wdrażanie w środowisku produkcyjnym za pomocą jednego przycisku, wykorzystujemy także dublowanie, mechanizmy uwalniania w tle i stopniowe wdrażanie wersji. Wszystkie te skuteczne podejścia pozwalają naszemu zespołowi inżynieryjnemu rozwijać się i wprowadzać innowacje bez narażania jakości usług. Większość z nich jest zautomatyzowana, więc nie musimy nawet o tym myśleć i skupiać się na tym, co ważne: tworzeniu najlepszych funkcji dla naszych użytkowników!

Podsumowanie

Podsumowując, opracowanie i optymalizacja robota sieciowego przy użyciu NodeJS, Puppeteer i BullMQ doprowadziła do wysoce wydajnego i skalowalnego rozwiązania do przetwarzania ponad 15 000 stron internetowych na minutę. Stawiając czoła początkowym wyzwaniom i wykorzystując zaawansowane narzędzia i metodologie, stworzyliśmy solidny system, który znacznie poprawia wydajność sieci dzięki funkcji Usuń nieużywane CSS (RUCSS). Ciągła integracja, automatyczne testowanie oraz skupienie się na skalowalności i niezawodności zapewniają, że nasza usługa pozostaje na najwyższym poziomie, zapewniając użytkownikom krótszy czas ładowania i lepsze ogólne wrażenia z korzystania z Internetu.