WP Rocket 3.17: migliora la tua metrica INP con il rendering lento automatico
Pubblicato: 2024-09-26Hai mai avuto la sensazione che il tuo sito web sia lento a rispondere, soprattutto se stai cercando di interagire con pagine di blog lunghe o pagine di prodotti di e-commerce? L'ottimizzazione delle prestazioni è impegnativa, e lo è ancora di più quando si tratta di migliorare metriche complesse relative all'esperienza utente, come Interaction to Next Paint (INP). INP è la nuova metrica Core Web Vital che misura la reattività della pagina web e svolge un ruolo chiave nel miglioramento della velocità, dell'esperienza utente e del SEO: in altre parole, non puoi ignorarla.
Se hai lavorato duramente per migliorare la velocità del tuo sito web e l'esperienza utente verso un voto INP migliore, sarai felice di saperne di più sulla nostra nuova versione principale e sulla sua nuovissima funzionalità automatizzata. Saluta WP Rocket 3.17!
La nostra nuova versione principale si concentra sull'ottimizzazione automatica del modo in cui il tuo sito web visualizza i contenuti mentre i visitatori scorrono. È particolarmente utile per blog, negozi online e qualsiasi sito con molti contenuti da esplorare.
Siamo entusiasti di presentare WP Rocket 3.17 per due motivi.
Innanzitutto, la nuova funzionalità migliorerà la metrica INP e la velocità percepita, soprattutto su mobile. Potrebbe anche avere un impatto positivo su altri parametri chiave come i gradi di Largest Contentful Paint e First Contentful Paint. L’ottimizzazione delle metriche relative all’esperienza utente può anche migliorare il tasso di conversione, che è l’obiettivo finale di rendere il tuo sito web più veloce, giusto?
Inoltre, WP Rocket è il primo plugin ad offrire un'ottimizzazione così potente e automatica su tutte le pagine del sito in modo accurato.
Scopri tutto nel nostro post sul blog, oppure guarda il video.
Cos'è il rendering e il suo impatto sulle prestazioni
Per capire come WP Rocket 3.17 può migliorare le prestazioni del tuo sito web, iniziamo spiegando il rendering. Quando la tua pagina web viene caricata, entra in gioco il rendering, ovvero il modo in cui il browser trasforma il codice del tuo sito web negli elementi visivi che gli utenti vedono sul loro schermo.
Il rendering del browser prevede diverse fasi che iniziano con il browser che riceve il file HTML e crea l'albero DOM, che è la rappresentazione della struttura ad albero della pagina web. L'ultima fase è la pittura: è quando il browser dipinge ogni elemento sullo schermo e gli utenti possono vedere la pagina web finita.
Come sempre accade con l'ottimizzazione delle prestazioni web, c'è un problema. In effetti, il processo di rendering può rappresentare una sfida in termini di prestazioni perché richiede che il browser gestisca molte attività contemporaneamente. Questa attività multitasking avviene su quello che viene chiamato thread principale, che è influenzato principalmente dai file JavaScript.
Quando il thread principale diventa troppo occupato, porta a compiti lunghi. Queste attività lunghe sono come ingorghi che rallentano la reattività della tua pagina e influenzano parametri come Interaction to Next Paint, un parametro fondamentale di Core Web Vital che misura la velocità con cui la tua pagina risponde alle interazioni degli utenti.
Rendering e prestazioni
Quando parliamo di rendering e del suo impatto sulle prestazioni, ci riferiamo soprattutto a due parti del processo: il rendering e la verniciatura, come hai visto nella sezione precedente. Queste sono le fasi in cui il browser lavora duramente per mostrare il contenuto sullo schermo e quelle che contribuiscono al punteggio INP e alla velocità percepita.
Esistono diverse variabili che possono influire sulle prestazioni durante questo processo. Per citarne alcuni: la dimensione del DOM, la velocità di esecuzione di JavaScript e le animazioni. Maggiore è il contenuto della pagina, più impegnativa è l'ottimizzazione del rendering.
Ora che sai che il rendering è fondamentale per la velocità e deve essere migliorato, impariamo come renderlo possibile.
Scopri la proprietà CSS per la visibilità dei contenuti
Un modo efficace per ottimizzare il rendering del browser, quindi velocità e reattività, è sfruttare la proprietà CSS di visibilità del contenuto. Questa proprietà dice al browser di non eseguire subito il rendering di tutte le parti di contenuto della pagina ma di attendere finché l'utente non sta per vederle.
Hai mai giocato ai videogiochi? Se è così, sai che il mondo intero non viene caricato in una volta. Invece, le nuove scene e il loro sfondo vengono visualizzati, o renderizzati, solo mentre avanzi. Questo è esattamente ciò che la proprietà CSS di visibilità del contenuto consente di fare.
Allora, come può essere d'aiuto? Utilizzando la visibilità dei contenuti, il browser ha meno lavoro da fare tutto in una volta. Invece di cercare di rendere tutto immediatamente, può concentrarsi su ciò che è più importante in questo momento. Ciò significa:
- Informa il browser di omettere il rendering di alcuni elementi finché non sono necessari, quindi il browser ha meno attività lunghe da gestire, soprattutto quando si tratta di rendering e pittura.
- La pagina si carica più velocemente perché le parti più visibili sono pronte rapidamente.
- La pagina risponde più rapidamente quando gli utenti interagiscono con essa.
Di conseguenza, il tuo sito web offre un’esperienza utente migliorata. I visitatori vedranno i tuoi contenuti più velocemente e potranno interagire con la pagina mentre scorrono e fanno clic.
La buona notizia è che la proprietà di visibilità del contenuto è ora supportata da tutti i principali browser. Ciò significa che questa potente funzionalità può migliorare le prestazioni di un sito Web per quasi tutti gli utenti, indipendentemente dal browser utilizzato.
Applicando la proprietà di visibilità del contenuto in WP Rocket 3.17, stiamo introducendo la funzionalità di rendering lento automatico. Continua a leggere per scoprire cosa comporta.
3.17: Introduzione del Lazy Rendering automatico
La nostra nuova versione principale rende possibile il rendering lento automaticamente. Come sempre per le nostre nuove versioni e miglioramenti, l'obiettivo è aiutarti a migliorare le prestazioni del tuo sito web nel modo più semplice, indipendentemente dalle tue competenze tecniche e se padroneggi le tecniche di ottimizzazione delle prestazioni web.
Ci concentriamo su funzionalità che possono avere un impatto significativo sulla velocità e sull'esperienza dell'utente e WP Rocket 3.17 non fa eccezione.
Innanzitutto, la nuova versione può migliorare significativamente il tuo punteggio INP, rendendo il tuo sito web più reattivo ai visitatori. Potrebbe anche migliorare leggermente i punteggi della Pittura con contenuto più grande e della Prima pittura con contenuto, anche se questo sarebbe un effetto collaterale più positivo.
La nuova funzionalità è sicura da implementare e non influenzerà mai i tuoi visitatori. Se un browser non supporta la proprietà di visibilità del contenuto perché è una versione precedente, non accadrà nulla, anche se è attivato WP Rocket 3.17.
Questa funzionalità è anche a basso rischio per il tuo sito web: è molto improbabile che rompa qualcosa.
Come nota a margine, abbiamo preso in considerazione l'idea di rilasciare una funzionalità del genere tre anni fa. A quel tempo, la funzionalità era basata su JavaScript e necessitava di un test a lungo termine per verificarne il potenziale impatto sulla SEO. Nel frattempo, la proprietà CSS di visibilità dei contenuti ha ricevuto maggiore supporto, offrendo una soluzione praticabile e più semplice. Con l'INP sempre più rilevante per l'ottimizzazione delle prestazioni web, il rilascio di questa funzionalità è diventato un gioco da ragazzi.
Come funziona il rendering lento automatico
Torniamo alla nostra analogia con i videogiochi.
Immagina di giocare. Man mano che muovi il tuo personaggio in avanti, il gioco esegue il rendering di nuove aree prima di raggiungerle. Questo è esattamente il modo in cui funziona il rendering lento automatico per il tuo sito web.
L'introduzione del lazy rendering automatico è stata resa possibile grazie al precedente, WP Rocket 3.16. La nostra versione precedente ha introdotto 2 miglioramenti cruciali:
- Abbiamo attivato la cache mobile separata per impostazione predefinita.
- Abbiamo introdotto il rilevamento e l'ottimizzazione delle immagini critiche (immagini sopra la piega) grazie ad un beacon che raccoglie informazioni reali sugli elementi da ottimizzare. La funzionalità 3.17 estenderà semplicemente ciò che il beacon traccia per fornire informazioni accurate sul layout e rendere possibile la nuova ottimizzazione.
Ed ecco cosa succede quando WP Rocket 3.17 è abilitato.
Quando un utente arriva sulla tua pagina, la nuova funzionalità non consentirà al browser di visualizzare tutto immediatamente. Al contrario, il browser visualizzerà gli elementi sulla pagina solo quando gli utenti sono vicini a quel punto della pagina, come il gioco carica l'area successiva solo quando ti avvicini ad essa. Più lunga è la pagina, più efficiente sarà il rendering lento.
Ecco perché la nuova versione è particolarmente vantaggiosa per:
- Pagine lunghe con molti contenuti, come post di blog o elenchi di prodotti.
- Pagine con elementi complessi che richiedono più tempo per il rendering, come animazioni non composite (ad esempio animazioni su tela e sfondi video).
WP Rocket è il primo plugin ad applicare accuratamente questa funzionalità automatica su tutte le tue pagine. Infatti, WP Rocket 3.17 analizza la struttura della pagina e rileva gli elementi a cui è possibile applicare il lazy rendering. Il plugin elabora ogni pagina individualmente, desktop e mobile separatamente, per essere sicuri di ottenere elementi accurati senza perdere alcuna opportunità.
Non è possibile contrassegnare l'opzione: non è necessario fare nulla per attivarla. Non appena WP Rocket verrà aggiornato alla 3.17, funzionerà.
Come il rendering lento può migliorare l'interazione con il grado di verniciatura successivo
Vediamo ora come WP Rocket 3.17 può migliorare il tuo grado INP.
Per prima cosa: secondo Google, una buona reattività significa che il tuo punteggio INP dovrebbe essere inferiore a 200 millisecondi.
Prima di immergerci nei risultati dei test che abbiamo eseguito, è anche importante sottolineare che i miglioramenti delle prestazioni che il tuo sito web può ottenere dipendono dal suo attuale livello di ottimizzazione. Se il tuo sito è già ben ottimizzato, potresti notare sottili miglioramenti nel tuo voto INP. Tuttavia, se c'è margine di miglioramento, potresti riscontrare un aumento più drammatico nel punteggio INP e nei voti LCP e FCP.
Per misurare il miglioramento delle prestazioni INP, ti consigliamo di utilizzare uno strumento come INP Debugger di DebugBear, che ti fornirà un quadro chiaro della reattività del tuo sito prima e dopo aver abilitato WP Rocket 3.17 e la sua funzione automatica Lazy Rendering.
Se ti stai chiedendo perché questa volta non utilizzeremo lo strumento PageSpeed Insights, che è basato su Lighthouse, è perché INP è una metrica di campo e viene calcolata sull'interazione. E Faro non lo misura, almeno per ora.
Diamo un'occhiata a un esempio reale per mostrarti i potenziali miglioramenti che WP Rocket 3.17 può apportare. Abbiamo testato un sito di e-commerce con molti contenuti da scorrere: più sezioni, immagini di prodotti ed elenchi di articoli. A scopo di test, abbiamo anche aggiunto un carico di lavoro JavaScript al sito Web per mantenere occupato il thread principale e verificare l'efficienza del rendering lento per migliorare la situazione.
Ecco cosa abbiamo trovato.
Prima di abilitare WP Rocket 3.17 con il Lazy Rendering automatico
Il risultato INP è 204ms. Come puoi vedere, il risultato evidenzia la necessità di miglioramento:
Da un punto di vista più tecnico, abbiamo analizzato anche il rendering del browser nella scheda Prestazioni di Chrome DevTool. Lo screenshot evidenzia le attività lunghe e il tempo necessario per il rendering: 2610 ms.
Dopo aver abilitato WP Rocket 3.17 con il Lazy Rendering automatico
Il risultato INP è ora 146ms. Questa volta il voto INP è in verde.
Questa volta, la scheda prestazioni di Chrome DevTool mostra come sono state ottimizzate le attività lunghe e il tempo di rendering è stato ridotto a 2325 ms.
Come puoi vedere, abbiamo testato esattamente la stessa pagina. L'unica differenza è che il secondo ha il Lazy Rendering automatico abilitato, mentre il primo no.
Il miglioramento è sostanziale. Siamo passati da una pagina con un punteggio INP arancione, che necessitava di miglioramenti, a una che mostra un risultato verde, consigliato per garantire reattività e offrire un'ottima esperienza utente.
Concludendo
Che tu gestisca un blog, un negozio online o qualsiasi altro tipo di sito web ricco di contenuti, WP Rocket 3.17 e la sua funzionalità di rendering lento possono migliorare automaticamente una metrica chiave come INP.
Aumentare l'INP migliora la reattività della pagina, quindi l'esperienza dell'utente. Questo può aiutarti a mantenere i visitatori sul tuo sito più a lungo e a farli convertire e tornare, ed è per questo che non dovresti trascurare la sua ottimizzazione.
Perché non vedere di persona come è possibile migliorare il grado INP? Aggiorna WP Rocket alla versione 3.17 o provalo. Ci piacerebbe sapere come funziona per te la nuova versione principale. Facci sapere nei commenti la tua esperienza con WP Rocket 3.17 e quali miglioramenti ottieni!