Se vedi un errore nel Rapporto Segnali web essenziali del tuo sito che riporta un Problema LCP: tempo superiore a 4 s (dispositivi desktop), ecco cosa puoi provare a fare per risolvere.
Aggiornamento (2024)
Gli aspetti operativi relativi a questa metrica sono da sempre controversi, al punto che Google stessa ha riconosciuto che i parametri che venivano utilizzati in precedenza per misurare questo aspetto nello specifico erano fallati. Un articolo molto illuminante su web.dev (link) ha chiarito solo in tempi molto recenti una serie di aspetti basilari. Di suo, leggiamo, la metrica LCP indica il tempo di rendering del blocco di immagine o di testo più grande visibile nell’area visibile, relativo alla prima visita dell’utente alla pagina.
Va pertanto considerato il tempo per visualizzare la pagina al netto della cache, per la prima volta in cui viene elaborata la stessa, senza considerare gli “alleggerimenti” del carico che sono previsti dalla cache stessa, comunque sia stata implementata, solo dalle volte successive alla prima che proviamo ad aprirla. Non c’entra, quindi, con la semplice attivazione della cache. Il blocco di immagine o di testo più grande è nello specifico, un tag come <img>, <video>, <svg> / <image>, uno sfondo caricato via CSS con url() oppure, ancora, un blocco di testo (a livello di blocco). Bisogna considerare il più grande presente nella pagina, quindi ad esempio per ottimizzare le pagine degli articoli del sito bisognerà intervenire sull’immagine dell’articolo stesso, assicurandosi primariamente che non sia troppo grande o che, in alternativa, sia caricata in formato ottimizzato (spesso webp è un buon compromesso per farlo, se non è troppo complesso farlo funzionare sul proprio server web).
A livello di prestazioni, leggiamo ancora, LCP include il tempo di unload dalla pagina precedente, il tempo di configurazione della connessione, il tempo di reindirizzamento e il tempo per il primo byte (TTFB), tutti elementi significativi se misurati sul campo e che possono generare differenze tra le misurazioni sul campo e quelle di laboratorio. Il problema di migliorare LCP si ridurrebbe quindi, in linea di massima:
- a migliorare il TTFB;
- a ridurre i tempi di accesso alla rete (es. adottando Cloudflare);
- ad ottimizzare/ridurre l’immagine più grande presente nell’articolo (anche articoli troppo lunghi possono causare il problema e vanno, per questo, spezzati, ridotti e/o paginati)
Che cosa indica questo errore?
Questo errore è abbastazan difficile da trattare, in genere: se è vero che dipende dalla “lentezza del sito”, pensare che si tratti solo di questo è abbastanza semplicistico e spesso non risolutivo. La notifica Problema LCP: tempo superiore a 4 s (dispositivi desktop) indica questo:
- c’è un problema su uno specifico URL del sito (lato desktop, ovviamente)
- esiste un problema LCP, acronimo di Largest Contentful Paint ovvero Visualizzazione elemento di massima dimensione.
Google utilizza ad oggi il seguente criterio per stilare i rating dei Segnali web essenziali, che combinano problemi di usabilità del sito con quelli di velocità di caricamento non solo del server ma anche delle singole componenti HTML del DOM (CSS, JS, PHP ecc.).
| Considerato “veloce” |
Richiede miglioramenti | Scadente | |
|---|---|---|---|
| LCP | al massimo 2,5 s | al massimo 4 s | più di 4 s |
| FID | al massimo 100 ms | al massimo 300 ms | più di 300 ms |
| CLS | al massimo 0,1 | al massimo 0,25 s | più di 0,25 |
Se la classica contromisura in questi casi è quella di cambiare hosting e prendere un server più veloce, spesso questo non basta nel 100% dei casi per risolvere il problema. Per risolvere un LCP bisogna, infatti, intervenire sulla struttura interna del sito a livello di componenti e plugin usati, e a volte anche di tema grafico.
L’errore viene notificato tipicamente nella search console di Google, ma può apparire anche all’interno del tool per il PageSpeed Insights. Gli URL notificati in questa veste possono, in teoria, ricevere un ranking più basso a livello di Google, tanto più che i Segnali web essenziali sono ormai, da aprile 2021, un fattore di posizionamento SEO a tutti gli effetti.
Cosa vuol dire LCP
LCP è un concetto forse poco intuitivo e ben poco visuale, utilizzato all’interno del cosiddetto CrUX di Google Chrome per definire usabilità effettiva del sito mediante un algoritmo di rating. La Largest Contentful Paint rappresenta, intuitivamente parlando, il tempo richiesto per visualizzare l’elemento più grande della pagina web nell’area del dispositivo, senza effettuare scrolling.
In genere, tale elemento è quasi sempre un’immagine di copertina (se troppo grande, ad esempio) oppure un video oppure, ancora, un testo di heading di dimensioni troppo grandi. LCP è anche una metrica aggregata (LCP agg) e rappresenta lo stato del 75% delle visite rilevate al sito, solo per i siti che già producano abbastanza visite, ovviamente.
Come risolvere il problema
Non esiste una strategia one shot o a “colpo sicuro” per risolvere questo problema, purtroppo: in genere bisogna valutare caso per caso, e deve essere il webmaster (o possibilmente chi ha realizzato il sito o il theme) a risolvere. Alcune strategie che si possono usare in questi casi sono:
- ridimensionamento delle immagini (via GIMP e photoshop, non semplicemente da CSS);
- eliminazione del JS e del CSS di troppo o che genera errori o inutili attese:
- attivazione cache su video o immagini (mediante CDN, per esempio).
Non mi meraviglierebbe troppo che anche effettuando le modifiche iniziali non cambi nulla: questo dipenda da una sorta di feature (o di bug) del PSI che tende a funzionare male o dare un’idea fuorviante se testiamo lo stesso URL più volte. In genere io procedo a fare debug a campione, su vari URL diversi, anche per avere un’idea generale e perchè di solito le modifiche che faccio dovrebbero intervenire su tutto il sito e non solo sulle singole pagine.
Se avete voglia di sperimentare e siete abbastanza esperti, potete usare il plugin di gestione degli asset CSS e JS, che (almeno per i siti fatti in WordPress) spesso si rivela risolutivo.
👇 Da non perdere 👇
- 📈 Analizza Cellulari 📱
- 🔐 AI che dolor, Chat
- 🎯 Targetizza Database SQL 🗄
- 📊 Analizza Errori più comuni 📛
- 🚧 Costruisci Evergreen 📟
- 👩💻 Programma Gratis 🎉
- 💻 Configura Hosting a confronto 💑
- 🔒 Conosci Hosting reti e domini 💻
- 👩💻 Tapioca Informatica 🖥
- 💻 Iconizza Internet 💻
- 🔒 Gestisci Lavoro 🔧
- 💡 Mostra Marketing & SEO 🌪
- 🔑 Apprendi Meteo ⛅
- 🤯 Visiona Mondo Apple 🍎
- 🔍 Supervisiona Mondo Domini 🌐
- 🚀 Metti in cloud monitoraggio servizi online 📈
- 🔮 Anatomizza Nuove tecnologie 🖥
- 🔒 Antani PEC e firma digitale 📩
- 👀 Prematura Programmare 🖥
- 🎮 Lonfa Scrivere 🖋
- 🔒 Conosci Servizi di SMS 📶
- 👀 Guarda Sicurezza informatica e privacy digitale 🖥
- 🎮 Ricorda Siti web 🌎
- 🤖 Ottimizza Spiegoni 🎓
- 🧠 Neuralizza Svago 🎈
- 📡 Quantizza Usare Excel 🌀
- 🤖 Sovrascrivi Windows 😲
- 🎨 Personalizza Wireless 🚁
- 🔑 Decifra WordPress 🤵
- 💬 Il nostro canale Telegram: iscriviti
- 🔵 Cos’è un assioma
- 🔵 GitHub: cos’è un Git e come funziona
- 🟢 Cos’è un assioma
