WP Rocket SaaS: În spatele scenei

Publicat: 2024-09-12

Acest articol tehnic detaliază dezvoltarea și optimizarea unui crawler web capabil să proceseze peste 15.000 de pagini web pe minut folosind NodeJS, Puppeteer și BullMQ. Vă explicăm cum funcționează funcția Eliminare CSS neutilizat (RUCSS) și îmbunătățește performanța web prin eliminarea CSS inutile, îmbunătățirea timpilor de încărcare și creșterea valorilor cheie de performanță. De asemenea, descriem modul în care am abordat provocările inițiale, inclusiv procesarea ineficientă și problemele de stabilitate, prin folosirea Puppeteer pentru colectarea de resurse, personalizarea bibliotecilor JavaScript și implementarea unui sistem de așteptare cu BullMQ. În cele din urmă, subliniem modul în care am atins excelența operațională menită să menținem standarde de înaltă calitate, permițând inovarea rapidă și asistența eficientă pentru clienți.

Ce este RUCSS?

Funcția Eliminare CSS neutilizat (RUCSS) este concepută pentru a elimina toate CSS și foile de stil care nu sunt utilizate pe o pagină web, păstrând doar CSS-ul necesar pentru fiecare pagină. Odată aplicată optimizarea, site-ul dvs. web va furniza doar CSS-ul necesar pentru pagina specifică solicitată de un utilizator, ceea ce face ca pagina să se încarce mult mai rapid!

În medie, această optimizare a redus dimensiunea CSS-ului livrat cu 76%!

Beneficiile RUCSS

  • Dimensiune redusă a paginii : Minimizează dimensiunea totală a paginii web.
  • Mai puține solicitări HTTP : Reduce numărul de foi de stil CSS care trebuie încărcate.
  • Timpi de încărcare mai rapid : Îmbunătățește viteza de încărcare a paginii.
  • Valori vitale web de bază îmbunătățite : crește valorile cheie de performanță, cum ar fi Largest Contentful Paint (LCP), First Contentful Paint (FCP) și Cumulative Layout Shift (CLS).
  • Eliminarea CSS care blochează randarea : Împiedică CSS să întârzie redarea paginii.

Identificarea CSS neutilizate: o lovitură chirurgicală

Procesul de eliminare a CSS neutilizat este foarte complex: pentru fiecare regulă CSS pe care o eliminăm, trebuie să ne asigurăm că nu va fi niciodată necesară pe pagina respectivă; altfel, aspectul s-ar putea rupe! Trebuie să luați în considerare o mulțime de factori pentru a vă asigura că CSS-ul neutilizat este identificat în mod corespunzător:

  • Interacțiuni JavaScript : JavaScript modifică dinamic DOM și CSS. De exemplu, un pop-up poate apărea după un clic pe buton, introducând noi elemente DOM și reguli CSS. Gestionarea acestor interacțiuni este crucială pentru identificarea cu precizie a CSS-urilor utilizate și există mult mai multe glisoare, meniuri off-canvas și galerii.
  • Variații CSS și HTML : Temele și pluginurile WordPress introduc variații nesfârșite ale regulilor CSS. Este esențială gestionarea CSS imbricată, a cazurilor marginale și chiar a erorilor de sintaxă. Este necesară o analiză HTML precisă pentru a identifica și elimina eficient CSS neutilizat.
  • Dimensiuni viewport : Unele stiluri CSS sunt aplicate în anumite condiții la dimensiunea ecranului. Pentru a ne asigura că CSS poate fi difuzat corect utilizatorilor de dispozitive mobile și desktop, oferim CSS folosit pentru diferite dimensiuni de ecran și livrăm doar cel relevant pentru fiecare vizită. În plus, regulile de optimizare specifice se aplică stilurilor CSS receptive.

RUCSS ca soluție SaaS

Procesarea resurselor paginii și generarea CSS utilizate necesită un consum mare de resurse. Efectuarea acestor sarcini direct pe site-urile web ale clienților le poate încetini și este posibil să nu fie fezabilă pe toate serverele și găzduirile. Prin urmare, unele dintre cele mai avansate funcții ale WP Rocket, cum ar fi CSS neutilizat eliminat, sunt alimentate de SaaS. Aceste optimizări sunt efectuate pe serverele noastre la solicitări de la pluginul WP Rocket, iar rezultatele sunt apoi aplicate automat site-urilor web. Această abordare are câteva avantaje mari pentru clienți:

  • Efectuați optimizarea intensivă a resurselor și reduceți sarcina de pe serverele utilizatorului.
  • Oferiți îmbunătățiri cât mai curând posibil și abordați rapid feedback-ul.
  • Observați și remediați în mod proactiv problemele și erorile fără a aștepta un bilet de asistență.
  • Asigurați-vă că toți utilizatorii beneficiază de cele mai recente versiuni fără nicio actualizare la nivelul clientului.
  • Repetați rapid și implementați îmbunătățiri fără a fi nevoie să actualizați pluginul WP Rocket.

Cum arată în culise?

WP Rocket SaaS vizitează și optimizează până la 20.000 de pagini pe minut, procesându-și CSS și imaginile de deasupra paginii! Pentru a face acest lucru, operăm în mod constant mii de browsere web pe aproximativ 40 de servere diferite pentru a răspunde tuturor solicitărilor utilizatorilor în decurs de 2 minute. Pentru a realiza acest lucru, echipa noastră folosește tehnologii de ultimă generație, inclusiv NodeJS, Django, Redis, CockroachDB și Kubernetes și le operează cu echipe group.One.

Principalele provocări tehnice

1. Colectarea resurselor paginii

Folosim pe scară largă Puppeteer, o bibliotecă Node care oferă un API de nivel înalt pentru a controla browserele Chrome sau Chromium fără cap. Acest instrument este esențial pentru strategia noastră de colectare a resurselor datorită capacității sale de a reda paginile web la fel ca un utilizator real, asigurându-se că toate elementele dinamice sunt capturate. Oferă multe funcții puternice pe care ne bazăm pentru a optimiza procesul, cum ar fi controlul dimensiunii ferestrei de vizualizare, interceptările solicitărilor și așa mai departe.

2. Procesarea resurselor paginii

Deoarece temele și pluginurile WordPress utilizează o mare varietate de CSS și JavaScript, aveam nevoie de o soluție robustă pentru a procesa aceste fișiere.

După ce am testat multe metode de procesare a resurselor paginii, cum ar fi Webpack, PostCSS și CleanCSS, am decis în cele din urmă să bifurcăm și să menținem propria bibliotecă JavaScript personalizată pentru a ne potrivi mai bine cerințelor noastre specifice. Aceasta include gestionarea cazurilor marginale, regulile CSS imbricate și problemele de sintaxă găsite în numeroase teme și pluginuri WordPress pentru a asigura că optimizarea poate fi efectuată în mod fiabil pentru toți utilizatorii noștri.

3. Reglarea fină cu experiența echipei noastre

Procesarea CSS poate fi foarte dificilă și riscul este mare de a rupe aspectul paginii dacă nu se acordă suficientă atenție procesului. Echipa noastră are cunoștințe extinse despre teme populare WordPress și constructori de pagini, precum și feedback constant de la sute de mii de utilizatori despre compatibilitatea cu cele mai recente tendințe WordPress. Prin urmare, am dezvoltat un sistem dinamic de listare sigură pentru colegii noștri de echipă pentru a actualiza direct regulile de procesare CSS ale SaaS nostru în timp real pentru a ne adapta continuu optimizările și pentru a crește compatibilitatea în fiecare zi.

4. Gestionarea unui flux de mii de pagini pe minut

Pentru a gestiona fluxul de 15.000 de pagini web pe minut, am implementat un sistem de așteptare folosind BullMQ. Acest sistem oferă:

  • Procesare asincronă pentru a descărca procesul de optimizare de la plugin într-un backend asincron.
  • Echilibrarea încărcăturii și managementul concurenței : Distribuiți sarcinile pe mai multe servere, permițând SaaS să gestioneze eficient un număr mare de adrese URL și să se scaleze ușor.
  • Fiabilitate și toleranță la erori : Toate sarcinile trimise și rezultatele acestora sunt salvate odată ce sunt disponibile. Acest lucru oferă rezistență în cazul în care unul dintre serverele noastre eșuează sau dacă site-ul web al utilizatorului nu poate prelua rezultatele imediat.
  • Prioritizare : cozile BullMQ pot fi folosite pentru a prioritiza sarcinile, asigurându-se că sarcinile mai importante sunt procesate mai întâi. De exemplu, optimizarea paginilor de pornire este prioritară pentru a permite utilizatorilor noștri să vadă imediat îmbunătățirile de pe pagina lor de pornire și să o testeze imediat cu Pagespeed!

Excelența Operațională

Construirea unui sistem scalabil și fiabil pentru SaaS este esențială pentru ușurința și eficiența clienților și pentru gestionarea numărului tot mai mare de utilizatori și a volumului tot mai mare de cereri de procesare a paginilor. Iată o privire în profunzime asupra pașilor care ne-au permis să atingem o asemenea excelență.

1. Arhitectură scalabilă

WP Rocket este utilizat în orice moment pe milioane de site-uri web din întreaga lume. Prin urmare, SaaS trebuie să rămână disponibil și să funcționeze conform așteptărilor în orice moment. Serviciul este găzduit pe peste 40 de servere fizice situate în diferite regiuni. Sunt orchestrate cu Kubernetes pentru a ușura implementarea, scalarea și gestionarea ciclurilor de viață ale containerului. Ne bazăm pe funcții puternice, cum ar fi sonde de viață, actualizări continue și scalare automată pentru a aduce reziliență serviciului și pentru a menține timpul de funcționare în toate circumstanțele. În plus, un serviciu de gateway personalizat efectuează gestionarea lucrărilor și impune securitatea API (limitarea ratei, autentificarea etc.).

2. Monitorizare și alertă

Toate aceste servicii și servere sunt monitorizate și observate în mod constant cu metrici tehnice prin Prometheus și Grafana, precum și metrici funcționale, pentru a ne asigura că serviciul este stabil și oferă cea mai bună performanță utilizatorilor noștri. Monitorizarea aprofundată ne permite să ne asigurăm că rata de succes rămâne ridicată, menținând în același timp durata de lucru scăzută și eficiența optimizării cea mai bună din clasă. Alertele de la instrumente precum Prometheus și Metabase ne permit să reacționăm în timp real în cazul în care ceva nu se comportă conform așteptărilor.

3. Observabilitate pentru a ne ajuta clienții

Deși lucrăm din greu pentru a face SaaS ușor de utilizat pentru clienții noștri, pot apărea unele dificultăți în configurații foarte complexe cu firewall-uri, reguli de securitate sau site-uri web WordPress cu multe plugin-uri sau teme conflictuale, de exemplu. Datorită abordării SaaS, echipa noastră de asistență este echipată cu instrumente interne prin Metabase pentru a accesa datele referitoare la un anumit utilizator și pentru a observa sarcinile și rezultatele de optimizare ale acestuia, permițându-ne astfel să identificăm rapid posibilele probleme. Ei pot apoi să repete, să modifice și să ajusteze fin și să obțină feedback în timp real cu PostMan și Metabase. Drept urmare, pot ajuta clienții care se luptă în mod eficient și chiar pot ajusta direct regulile de optimizare SaaS pentru a debloca utilizatorii.

4. Testare automată și integrare continuă

Menținerea standardelor de înaltă calitate, păstrând în același timp o rată de livrare semnificativă, poate fi o provocare pentru ingineri. Rezolvăm această problemă cu o automatizare fiabilă prin care trece fiecare modificare de cod. De la testarea automată până la implementarea cu un singur buton în producție, folosim, de asemenea, oglindirea, mecanismele de eliberare a umbrelor și lansările de lansare progresivă. Toate aceste abordări puternice permit echipei noastre de ingineri să prospere și să continue să inoveze fără a pune în pericol calitatea serviciului. Cele mai multe dintre acestea sunt automatizate, astfel încât nici măcar nu trebuie să ne gândim la asta și să ne concentrăm pe ceea ce contează: construirea celor mai bune funcții pentru utilizatorii noștri!

Încheierea

Pentru a rezuma, dezvoltarea și optimizarea crawler-ului web folosind NodeJS, Puppeteer și BullMQ a condus la o soluție extrem de eficientă și scalabilă pentru procesarea a peste 15.000 de pagini web pe minut. Abordând provocările inițiale și valorificând instrumente și metodologii avansate, am creat un sistem robust care îmbunătățește semnificativ performanța web prin funcția Eliminare CSS neutilizat (RUCSS). Integrarea continuă, testarea automată și concentrarea pe scalabilitate și fiabilitate asigură faptul că serviciul nostru rămâne de top, oferind utilizatorilor timpi de încărcare mai rapidi și experiențe web îmbunătățite.