WP Rocket SaaS: dietro le quinte

Pubblicato: 2024-09-12

Questo articolo tecnico descrive in dettaglio lo sviluppo e l'ottimizzazione di un web crawler in grado di elaborare oltre 15.000 pagine web al minuto utilizzando NodeJS, Puppeteer e BullMQ. Spieghiamo come funziona la funzionalità Rimuovi CSS non utilizzati (RUCSS) e migliora le prestazioni web eliminando CSS non necessari, migliorando i tempi di caricamento e aumentando i parametri chiave delle prestazioni. Descriviamo anche come abbiamo affrontato le sfide iniziali, inclusi problemi di elaborazione e stabilità inefficienti, sfruttando Puppeteer per la raccolta di risorse, personalizzando le librerie JavaScript e implementando un sistema di accodamento con BullMQ. Infine, descriviamo come abbiamo raggiunto l'eccellenza operativa volta a mantenere standard di alta qualità, consentendo una rapida innovazione e un efficiente supporto ai clienti.

Cos'è il RUCSS?

La funzione Rimuovi CSS non utilizzati (RUCSS) è progettata per eliminare tutti i CSS e i fogli di stile non utilizzati su una pagina Web, conservando solo i CSS necessari per ciascuna pagina. Una volta applicata l'ottimizzazione, il tuo sito web fornirà solo il CSS necessario per la pagina specifica richiesta dall'utente, rendendo il caricamento della pagina molto più rapido!

In media, questa ottimizzazione ha ridotto la dimensione del CSS consegnato del 76%!

Vantaggi di RUCSS

  • Dimensioni pagina ridotte : riduce al minimo le dimensioni complessive della pagina web.
  • Meno richieste HTTP : riduce il numero di fogli di stile CSS che devono essere caricati.
  • Tempi di caricamento più rapidi : migliora la velocità di caricamento della pagina.
  • Miglioramenti dei Core Web Vitals : aumenta i parametri chiave delle prestazioni come Largest Contentful Paint (LCP), First Contentful Paint (FCP) e Cumulative Layout Shift (CLS).
  • Eliminazione dei CSS di blocco del rendering : impedisce ai CSS di ritardare il rendering della pagina.

Identificazione dei CSS non utilizzati: un attacco chirurgico

Il processo di rimozione dei CSS inutilizzati è molto complesso: per ogni regola CSS che rimuoviamo, dobbiamo assicurarci che non sarà mai necessaria su quella pagina; altrimenti il ​​layout potrebbe rompersi! È necessario prendere in considerazione molti fattori per garantire che il CSS non utilizzato sia correttamente identificato:

  • Interazioni JavaScript : JavaScript modifica dinamicamente DOM e CSS. Ad esempio, dopo aver fatto clic su un pulsante potrebbe apparire un popup che introduce nuovi elementi DOM e regole CSS. Gestire queste interazioni è fondamentale per identificare con precisione i CSS utilizzati e ci sono molti più dispositivi di scorrimento, menu fuori quadro e gallerie.
  • Variazioni CSS e HTML : temi e plugin WordPress introducono infinite variazioni delle regole CSS. La gestione dei CSS annidati, dei casi limite e persino degli errori di sintassi è essenziale. È necessaria un'analisi HTML accurata per identificare e rimuovere in modo efficace i CSS inutilizzati.
  • Dimensioni del viewport : alcuni stili CSS vengono applicati in alcune condizioni sulle dimensioni dello schermo. Per garantire che i CSS possano essere offerti correttamente agli utenti mobili e desktop, forniamo CSS usati per varie dimensioni di schermo e forniamo solo quello pertinente per ogni visita. Inoltre, agli stili CSS reattivi si applicano regole di ottimizzazione specifiche.

RUCSS come soluzione SaaS

L'elaborazione delle risorse della pagina e la generazione di CSS utilizzati richiedono un uso intensivo delle risorse. L'esecuzione di queste attività direttamente sui siti Web dei clienti può rallentarli e potrebbe non essere fattibile su tutti i server e hosting. Pertanto, alcune delle funzionalità più avanzate di WP Rocket, come i CSS rimossi non utilizzati, sono alimentate dal nostro SaaS. Tali ottimizzazioni vengono eseguite sui nostri server su richiesta del plug-in WP Rocket e i risultati vengono quindi applicati automaticamente ai siti Web. Questo approccio presenta alcuni grandi vantaggi per i clienti:

  • Esegui l'ottimizzazione ad uso intensivo di risorse e riduci il carico sui server dell'utente.
  • Fornire miglioramenti il ​​prima possibile e affrontare rapidamente il feedback.
  • Osserva e risolvi in ​​modo proattivo problemi ed errori senza attendere un ticket di supporto.
  • Assicurati che tutti gli utenti traggano vantaggio dalle versioni più recenti senza alcun aggiornamento sul lato client.
  • Itera rapidamente e distribuisci miglioramenti senza dover aggiornare il plug-in WP Rocket.

Cosa succede dietro le quinte?

WP Rocket SaaS sta visitando e ottimizzando fino a 20.000 pagine al minuto, elaborando i relativi CSS e immagini Above-the-fold! Per fare ciò, utilizziamo costantemente migliaia di browser Web su circa 40 server diversi per soddisfare tutte le richieste dei nostri utenti entro 2 minuti. Per raggiungere questo obiettivo, il nostro team sta sfruttando tecnologie all'avanguardia tra cui NodeJS, Django, Redis, CockroachDB e Kubernetes e le gestisce con i team group.One.

Le principali sfide tecniche

1. Raccolta delle risorse della pagina

Utilizziamo ampiamente Puppeteer, una libreria Node che fornisce un'API di alto livello per controllare i browser Chrome o Chromium headless. Questo strumento è essenziale per la nostra strategia di raccolta delle risorse grazie alla sua capacità di visualizzare le pagine web proprio come farebbe un utente reale, garantendo che tutti gli elementi dinamici vengano catturati. Offre molte potenti funzionalità su cui facciamo affidamento per ottimizzare il processo, come il controllo delle dimensioni del viewport, le intercettazioni delle richieste e così via.

2. Elaborazione delle risorse della pagina

Poiché i temi e i plugin di WordPress utilizzano un'ampia varietà di CSS e JavaScript, avevamo bisogno di una soluzione solida per elaborare questi file.

Dopo aver testato molti metodi per elaborare le risorse della pagina, come Webpack, PostCSS e CleanCSS, abbiamo finalmente deciso di creare un fork e mantenere la nostra libreria JavaScript personalizzata per soddisfare meglio i nostri requisiti specifici. Ciò include la gestione di casi limite, regole CSS nidificate e problemi di sintassi riscontrati in numerosi temi e plug-in WordPress per garantire che l'ottimizzazione possa essere eseguita in modo affidabile per tutti i nostri utenti.

3. Ottimizzazione con l'esperienza del nostro team

L'elaborazione dei CSS può essere molto complicata e il rischio di interrompere il layout della pagina è elevato se non viene prestata sufficiente attenzione al processo. Il nostro team ha una vasta conoscenza dei temi WordPress e dei page builder più diffusi, oltre al feedback costante di centinaia di migliaia di utenti sulla compatibilità con le ultime tendenze di WordPress. Pertanto, abbiamo sviluppato un sistema dinamico di elenchi sicuri per consentire ai nostri colleghi di team di aggiornare direttamente le regole di elaborazione CSS del nostro SaaS in tempo reale per adattare continuamente le nostre ottimizzazioni e aumentare la compatibilità ogni giorno.

4. Gestire un flusso di migliaia di pagine al minuto

Per gestire il flusso di 15.000 pagine web al minuto, abbiamo implementato un sistema di code utilizzando BullMQ. Questo sistema offre:

  • Elaborazione asincrona per scaricare il processo di ottimizzazione dal plugin a un backend asincrono.
  • Bilanciamento del carico e gestione della concorrenza : distribuisci le attività su più server, consentendo al SaaS di gestire un gran numero di URL in modo efficiente e di scalare facilmente.
  • Affidabilità e tolleranza agli errori : tutte le attività inviate e i relativi risultati vengono salvati una volta disponibili. Ciò fornisce resilienza nel caso in cui uno dei nostri server si guasti o se il sito Web dell'utente non è in grado di recuperare immediatamente i risultati.
  • Prioritizzazione : le code BullMQ possono essere utilizzate per dare priorità alle attività, garantendo che le attività più importanti vengano elaborate per prime. Ad esempio, l'ottimizzazione delle home page ha la priorità per consentire ai nostri utenti di vedere immediatamente i miglioramenti sulla loro home page e testarli subito con Pagespeed!

Eccellenza operativa

Costruire un sistema scalabile e affidabile per SaaS è essenziale per la facilità e l'efficienza dei clienti e per gestire il numero crescente di utenti e il volume crescente di richieste di elaborazione delle pagine. Ecco uno sguardo approfondito ai passaggi che ci hanno permesso di raggiungere tale eccellenza.

1. Architettura scalabile

WP Rocket è utilizzato su milioni di siti Web in tutto il mondo in qualsiasi momento. Pertanto, il nostro SaaS deve rimanere disponibile e funzionare come previsto in ogni momento. Il servizio è ospitato su più di 40 server fisici situati in diverse regioni. Sono orchestrati con Kubernetes per facilitare la distribuzione, il dimensionamento e la gestione dei cicli di vita del contenitore. Facciamo affidamento su funzionalità potenti come sondaggi di attività, aggiornamenti continui e scalabilità automatica per conferire resilienza al servizio e mantenere i tempi di attività in tutte le circostanze. Inoltre, un servizio gateway personalizzato esegue la gestione dei lavori e applica la sicurezza API (limitazione della velocità, autenticazione, ecc.).

2. Monitoraggio e avvisi

Tutti questi servizi e server sono costantemente monitorati e osservati con metriche tecniche tramite Prometheus e Grafana, nonché con metriche funzionali, per garantire che il servizio sia stabile e fornisca le migliori prestazioni ai nostri utenti. Un monitoraggio approfondito ci consente di garantire che il tasso di successo rimanga elevato mantenendo bassa la durata del lavoro e l'efficienza di ottimizzazione migliore della categoria. Gli avvisi provenienti da strumenti come Prometheus e Metabase ci consentono di reagire in tempo reale nel caso in cui qualcosa non si comporti come previsto.

3. Osservabilità per aiutare i nostri clienti

Anche se lavoriamo duramente per rendere il nostro SaaS facile da usare per i nostri clienti, alcune difficoltà possono verificarsi in configurazioni molto complesse con firewall, regole di sicurezza o siti Web WordPress con molti plugin o temi in conflitto, ad esempio. Grazie all'approccio SaaS, il nostro team di supporto è dotato di strumenti interni tramite Metabase per accedere ai dati relativi a un determinato utente e osservare i suoi lavori e risultati di ottimizzazione, permettendoci così di identificare rapidamente i possibili problemi. Sono quindi in grado di ripetere, modificare, perfezionare e ottenere feedback in tempo reale con PostMan e Metabase. Di conseguenza, possono aiutare i clienti in difficoltà in modo efficiente e persino adattare direttamente le regole di ottimizzazione SaaS per sbloccare gli utenti.

4. Test automatizzati e integrazione continua

Mantenere standard di qualità elevati mantenendo un tasso di consegna significativo può essere una sfida per gli ingegneri. Risolviamo questo problema con un'automazione affidabile attraverso la quale viene eseguita ogni modifica del codice. Dai test automatizzati all'implementazione con un solo pulsante in produzione, sfruttiamo anche il mirroring, i meccanismi di rilascio shadow e le implementazioni di rilascio progressivo. Tutti questi potenti approcci consentono al nostro team di ingegneri di prosperare e continuare a innovare senza mettere a rischio la qualità del servizio. La maggior parte di tutto questo è automatizzato, quindi non abbiamo nemmeno bisogno di pensarci e ci concentriamo su ciò che conta: creare le migliori funzionalità per i nostri utenti!

Concludendo

Per riassumere, lo sviluppo e l'ottimizzazione del web crawler utilizzando NodeJS, Puppeteer e BullMQ ha portato a una soluzione altamente efficiente e scalabile per l'elaborazione di oltre 15.000 pagine web al minuto. Affrontando le sfide iniziali e sfruttando strumenti e metodologie avanzati, abbiamo creato un sistema robusto che migliora significativamente le prestazioni web attraverso la funzionalità Remove Unused CSS (RUCSS). L'integrazione continua, i test automatizzati e l'attenzione alla scalabilità e all'affidabilità garantiscono che il nostro servizio rimanga di prim'ordine, fornendo agli utenti tempi di caricamento più rapidi e una migliore esperienza web complessiva.