{"id":1329,"date":"2022-07-28T18:32:45","date_gmt":"2022-07-28T18:32:45","guid":{"rendered":"https:\/\/www.bhoost.com\/it\/?p=1329"},"modified":"2023-12-07T17:23:24","modified_gmt":"2023-12-07T17:23:24","slug":"lcp-largest-contentful-paint-il-contenuto-visivo-piu-grande-stampato","status":"publish","type":"post","link":"https:\/\/www.bhoost.com\/it\/corewebvitals\/lcp-largest-contentful-paint-il-contenuto-visivo-piu-grande-stampato\/","title":{"rendered":"LCP &#8211; Largest Contentful Paint &#8211; Il contenuto visivo pi\u00f9 grande stampato"},"content":{"rendered":"<p><span style=\"font-weight: 400\">Largest Contentful Paint (LCP) \u00e8 una metrica importante e incentrata sull&#8217;utente per misurare <\/span><span style=\"font-weight: 400\">la velocit\u00e0 di caricamento percepita<\/span><span style=\"font-weight: 400\"> perch\u00e9 segna il punto nella sequenza temporale di caricamento della pagina in cui \u00e8 probabile che il contenuto principale della pagina sia stato caricato:<\/span><\/p>\n<blockquote><p>Un LCP veloce aiuta a rassicurare l&#8217;utente sull&#8217;utilit\u00e0 della pagina.<\/p><\/blockquote>\n<p><span style=\"font-weight: 400\">Storicamente, \u00e8 stata una sfida per gli sviluppatori Web misurare la velocit\u00e0 con cui il contenuto principale di una pagina Web viene caricato ed \u00e8 visibile agli utenti.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Le metriche precedenti come <\/span><span style=\"font-weight: 400\">load<\/span><span style=\"font-weight: 400\"> o <\/span><span style=\"font-weight: 400\">DOMContentLoaded<\/span><span style=\"font-weight: 400\"> non sono buone perch\u00e9 non corrispondono necessariamente a ci\u00f2 che l&#8217;utente vede sul proprio schermo. E le metriche delle prestazioni pi\u00f9 recenti e incentrate sull&#8217;utente come <\/span><span style=\"font-weight: 400\">First Contentful Paint (FCP)<\/span><span style=\"font-weight: 400\"> catturano solo l&#8217;inizio dell&#8217;esperienza di caricamento. Se una pagina mostra una schermata iniziale o mostra un indicatore di caricamento, questo momento non \u00e8 molto rilevante per l&#8217;utente.<\/span><\/p>\n<p><span style=\"font-weight: 400\">In passato abbiamo consigliato metriche delle prestazioni come <\/span><span style=\"font-weight: 400\">First Meaningful Paint (FMP)<\/span><span style=\"font-weight: 400\"> e <\/span><span style=\"font-weight: 400\">Speed \u200b\u200bIndex (SI)<\/span><span style=\"font-weight: 400\"> (<\/span><b>entrambi disponibili in Lighthouse<\/b><span style=\"font-weight: 400\">) per aiutare a catturare pi\u00f9 esperienza di caricamento dopo la pittura iniziale, ma queste metriche sono complesse e difficili da spiegare e spesso sbagliati, nel senso che non si identificano ancora quando il contenuto principale della pagina \u00e8 stato caricato.<\/span><\/p>\n<p><span style=\"font-weight: 400\">A volte pi\u00f9 semplice \u00e8 meglio. Sulla base delle discussioni del <\/span><span style=\"font-weight: 400\">W3C Web Performance Working Group<\/span><span style=\"font-weight: 400\"> e della ricerca condotta presso Google, abbiamo scoperto che un modo pi\u00f9 accurato per misurare quando viene caricato il contenuto principale di una pagina \u00e8 guardare quando \u00e8 stato visualizzato l&#8217;elemento pi\u00f9 grande.<\/span><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Indice dei contenuti<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69f4c81852c3d\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f4c81852c3d\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.bhoost.com\/it\/corewebvitals\/lcp-largest-contentful-paint-il-contenuto-visivo-piu-grande-stampato\/#Cose_lLCP\" >Cos&#8217;\u00e8 l&#8217;LCP?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.bhoost.com\/it\/corewebvitals\/lcp-largest-contentful-paint-il-contenuto-visivo-piu-grande-stampato\/#Che_cose_un_buon_punteggio_LCP\" >Che cos&#8217;\u00e8 un buon punteggio LCP?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.bhoost.com\/it\/corewebvitals\/lcp-largest-contentful-paint-il-contenuto-visivo-piu-grande-stampato\/#Quali_elementi_vengono_presi_in_considerazione\" >Quali elementi vengono presi in considerazione?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.bhoost.com\/it\/corewebvitals\/lcp-largest-contentful-paint-il-contenuto-visivo-piu-grande-stampato\/#Come_viene_determinata_la_dimensione_di_un_elemento\" >Come viene determinata la dimensione di un elemento?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.bhoost.com\/it\/corewebvitals\/lcp-largest-contentful-paint-il-contenuto-visivo-piu-grande-stampato\/#Quando_viene_segnalata_la_vernice_piu_ricca_di_contenuti\" >Quando viene segnalata la vernice pi\u00f9 ricca di contenuti?<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.bhoost.com\/it\/corewebvitals\/lcp-largest-contentful-paint-il-contenuto-visivo-piu-grande-stampato\/#Tempo_di_caricamento_e_tempo_di_rendering\" >Tempo di caricamento e tempo di rendering<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.bhoost.com\/it\/corewebvitals\/lcp-largest-contentful-paint-il-contenuto-visivo-piu-grande-stampato\/#Come_vengono_gestite_le_modifiche_al_layout_e_alle_dimensioni_degli_elementi\" >Come vengono gestite le modifiche al layout e alle dimensioni degli elementi?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.bhoost.com\/it\/corewebvitals\/lcp-largest-contentful-paint-il-contenuto-visivo-piu-grande-stampato\/#Esempi\" >Esempi<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.bhoost.com\/it\/corewebvitals\/lcp-largest-contentful-paint-il-contenuto-visivo-piu-grande-stampato\/#Come_misurare_LCP\" >Come misurare LCP<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.bhoost.com\/it\/corewebvitals\/lcp-largest-contentful-paint-il-contenuto-visivo-piu-grande-stampato\/#Strumenti_sul_campo\" >Strumenti sul campo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.bhoost.com\/it\/corewebvitals\/lcp-largest-contentful-paint-il-contenuto-visivo-piu-grande-stampato\/#Strumenti_di_laboratorio\" >Strumenti di laboratorio<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.bhoost.com\/it\/corewebvitals\/lcp-largest-contentful-paint-il-contenuto-visivo-piu-grande-stampato\/#E_se_lelemento_piu_grande_non_fosse_il_piu_importante\" >E se l&#8217;elemento pi\u00f9 grande non fosse il pi\u00f9 importante?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.bhoost.com\/it\/corewebvitals\/lcp-largest-contentful-paint-il-contenuto-visivo-piu-grande-stampato\/#Come_migliorare_LCP\" >Come migliorare LCP<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Cose_lLCP\"><\/span><span style=\"font-weight: 400\">Cos&#8217;\u00e8 l&#8217;LCP? <\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400\">La metrica Largest Contentful Paint (LCP) riporta il tempo di rendering <\/span><span style=\"font-weight: 400\">dell&#8217;immagine o del blocco di testo<\/span><span style=\"font-weight: 400\"> pi\u00f9 grande visibile all&#8217;interno del viewport, rispetto a quando <\/span><span style=\"font-weight: 400\">\u00e8 iniziato il caricamento<\/span><span style=\"font-weight: 400\"> della pagina .<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Che_cose_un_buon_punteggio_LCP\"><\/span><span style=\"font-weight: 400\">Che cos&#8217;\u00e8 un buon punteggio LCP? <\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400\">Per fornire una buona esperienza utente, i siti dovrebbero sforzarsi di avere il contenuto pi\u00f9 grande di <\/span><b>2,5 secondi<\/b><span style=\"font-weight: 400\"> o meno. Per assicurarti di raggiungere questo obiettivo per la maggior parte dei tuoi utenti, una buona soglia da misurare \u00e8 il <\/span><b>75\u00b0 percentile<\/b><span style=\"font-weight: 400\"> dei caricamenti di pagina, segmentato tra dispositivi mobili e desktop.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1357 size-large\" src=\"https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-2-1024x275.png\" alt=\"\" width=\"768\" height=\"206\" srcset=\"https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-2-1024x275.png 1024w, https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-2-300x81.png 300w, https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-2-768x206.png 768w, https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-2.png 1482w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/p>\n<p><strong>Per ulteriori informazioni sulla ricerca e la metodologia alla base di questa raccomandazione, vedere: Definizione delle soglie delle metriche di Core Web Vitals<\/strong><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Quali_elementi_vengono_presi_in_considerazione\"><\/span><span style=\"font-weight: 400\">Quali elementi vengono presi in considerazione? <\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400\">Come attualmente specificato nella <\/span><span style=\"font-weight: 400\">Largest Contentful Paint API<\/span><span style=\"font-weight: 400\"> , i tipi di elementi presi in considerazione per Largest Contentful Paint sono:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">&lt;img&gt;<\/span><span style=\"font-weight: 400\">elementi<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">&lt;image&gt;<\/span><span style=\"font-weight: 400\">elementi all&#8217;interno di un <\/span><span style=\"font-weight: 400\">&lt;svg&gt;<\/span><span style=\"font-weight: 400\">elemento<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">&lt;video&gt;<\/span><span style=\"font-weight: 400\">elementi (viene utilizzata l&#8217;immagine del poster)<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Un elemento con un&#8217;immagine di sfondo caricata tramite la <\/span><span style=\"font-weight: 400\">url()<\/span><span style=\"font-weight: 400\">funzione (al contrario di un <\/span><span style=\"font-weight: 400\">gradiente CSS<\/span><span style=\"font-weight: 400\"> )<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Elementi a livello di blocco<\/span><span style=\"font-weight: 400\"> contenenti nodi di testo o altri elementi di testo a livello di inline figli.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">Nota, limitare gli elementi a questo set limitato era intenzionale per mantenere le cose semplici all&#8217;inizio. Ulteriori elementi (ad es <\/span><span style=\"font-weight: 400\">&lt;svg&gt;<\/span><span style=\"font-weight: 400\">. , <\/span><span style=\"font-weight: 400\">&lt;video&gt;<\/span><span style=\"font-weight: 400\">) possono essere aggiunti in futuro man mano che vengono condotte ulteriori ricerche.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Come_viene_determinata_la_dimensione_di_un_elemento\"><\/span><span style=\"font-weight: 400\">Come viene determinata la dimensione di un elemento? <\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400\">La dimensione dell&#8217;elemento riportato per Largest Contentful Paint \u00e8 in genere la dimensione visibile all&#8217;utente all&#8217;interno della finestra. Se l&#8217;elemento si estende al di fuori della finestra, o se uno qualsiasi degli elementi \u00e8 ritagliato o ha un <\/span><span style=\"font-weight: 400\">overflow<\/span><span style=\"font-weight: 400\"> non visibile , quelle porzioni non contano ai fini della dimensione dell&#8217;elemento.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Per gli elementi dell&#8217;immagine che sono stati ridimensionati dalla loro <\/span><span style=\"font-weight: 400\">dimensione intrinseca<\/span><span style=\"font-weight: 400\"> , la dimensione che viene segnalata \u00e8 la dimensione visibile o la dimensione intrinseca, a seconda di quale sia la pi\u00f9 piccola. Ad esempio, le immagini che vengono ridotte a una dimensione molto pi\u00f9 piccola della loro dimensione intrinseca riporteranno solo la dimensione in cui sono visualizzate, mentre le immagini che vengono allungate o espanse a una dimensione maggiore riporteranno solo le loro dimensioni intrinseche.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Per gli elementi di testo, viene considerata solo la dimensione dei relativi nodi di testo (il rettangolo pi\u00f9 piccolo che racchiude tutti i nodi di testo).<\/span><\/p>\n<p><span style=\"font-weight: 400\">Per tutti gli elementi non viene considerato alcun margine, riempimento o bordo applicato tramite CSS.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Determinare quali nodi di testo appartengono a quali elementi a volte pu\u00f2 essere complicato, specialmente per elementi i cui figli includono elementi inline e nodi di testo normale ma anche elementi a livello di blocco. Il punto chiave \u00e8 che ogni nodo di testo appartiene (e solo a) il suo elemento antenato a livello di blocco pi\u00f9 vicino. In <\/span><span style=\"font-weight: 400\">termini di specifica<\/span><span style=\"font-weight: 400\"> : ogni nodo di testo appartiene all&#8217;elemento che genera il <\/span><span style=\"font-weight: 400\">blocco che lo contiene<\/span><span style=\"font-weight: 400\"> .<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Quando_viene_segnalata_la_vernice_piu_ricca_di_contenuti\"><\/span><span style=\"font-weight: 400\">Quando viene segnalata la vernice pi\u00f9 ricca di contenuti? <\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400\">Le pagine Web spesso vengono caricate in pi\u00f9 fasi e, di conseguenza, \u00e8 possibile che l&#8217;elemento pi\u00f9 grande della pagina cambi.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Per gestire questo potenziale cambiamento, il browser invia un messaggio <\/span><span style=\"font-weight: 400\">PerformanceEntry<\/span><span style=\"font-weight: 400\">di tipo <\/span><span style=\"font-weight: 400\">largest-contentful-paint<\/span><span style=\"font-weight: 400\">che identifica l&#8217;elemento di contenuto pi\u00f9 grande non appena il browser ha dipinto il primo frame. Ma poi, dopo aver eseguito il rendering dei frame successivi, ne invier\u00e0 un altro <\/span><span style=\"font-weight: 400\">PerformanceEntry<\/span><span style=\"font-weight: 400\">ogni volta che l&#8217;elemento di contenuto pi\u00f9 grande cambia.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Ad esempio, in una pagina con testo e un&#8217;immagine eroe il browser potrebbe inizialmente eseguire il rendering del testo, a quel punto il browser invierebbe una <\/span><span style=\"font-weight: 400\">largest-contentful-paint<\/span><span style=\"font-weight: 400\">voce la cui <\/span><span style=\"font-weight: 400\">element<\/span><span style=\"font-weight: 400\">propriet\u00e0 probabilmente farebbe riferimento a <\/span><span style=\"font-weight: 400\">&lt;p&gt;<\/span><span style=\"font-weight: 400\">o <\/span><span style=\"font-weight: 400\">&lt;h1&gt;<\/span><span style=\"font-weight: 400\">. Successivamente, una volta terminato il caricamento dell&#8217;immagine dell&#8217;eroe, <\/span><span style=\"font-weight: 400\">largest-contentful-paint<\/span><span style=\"font-weight: 400\">verr\u00e0 inviata una seconda voce e la sua <\/span><span style=\"font-weight: 400\">element<\/span><span style=\"font-weight: 400\">propriet\u00e0 far\u00e0 riferimento a <\/span><span style=\"font-weight: 400\">&lt;img&gt;<\/span><span style=\"font-weight: 400\">.<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00c8 importante notare che un elemento pu\u00f2 essere considerato l&#8217;elemento di contenuto pi\u00f9 grande solo dopo che \u00e8 stato eseguito il rendering ed \u00e8 visibile all&#8217;utente. Le immagini non ancora caricate non sono considerate &#8220;renderizzate&#8221;. N\u00e9 i nodi di testo utilizzano i caratteri Web durante il <\/span><span style=\"font-weight: 400\">periodo di blocco dei caratteri<\/span><span style=\"font-weight: 400\"> . In questi casi un elemento pi\u00f9 piccolo pu\u00f2 essere segnalato come l&#8217;elemento di contenuto pi\u00f9 grande, ma non appena l&#8217;elemento pi\u00f9 grande termina il rendering, verr\u00e0 segnalato tramite un altro <\/span><span style=\"font-weight: 400\">PerformanceEntry<\/span><span style=\"font-weight: 400\">oggetto.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Oltre al caricamento tardivo di immagini e caratteri, una pagina pu\u00f2 aggiungere nuovi elementi al DOM man mano che nuovi contenuti diventano disponibili. Se uno di questi nuovi elementi \u00e8 pi\u00f9 grande del precedente elemento di contenuto pi\u00f9 grande, <\/span><span style=\"font-weight: 400\">PerformanceEntry<\/span><span style=\"font-weight: 400\">ne verr\u00e0 segnalato anche uno nuovo.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Se un elemento che \u00e8 attualmente l&#8217;elemento di contenuto pi\u00f9 grande viene rimosso dal viewport (o addirittura rimosso dal DOM), rimarr\u00e0 l&#8217;elemento di contenuto pi\u00f9 grande a meno che non venga visualizzato un elemento pi\u00f9 grande.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Prima di Chrome 88, gli elementi rimossi non erano considerati elementi di contenuto pi\u00f9 grandi e la rimozione dell&#8217;attuale candidato attiverebbe l&#8217; <\/span><span style=\"font-weight: 400\">largest-contentful-paint<\/span><span style=\"font-weight: 400\">invio di una nuova voce. Tuttavia, a causa dei modelli dell&#8217;interfaccia utente popolari come i caroselli di immagini che spesso rimuovevano elementi DOM, la metrica \u00e8 stata aggiornata per riflettere in modo pi\u00f9 accurato ci\u00f2 che gli utenti sperimentano. Vedere il <\/span><span style=\"font-weight: 400\">CHANGELOG<\/span><span style=\"font-weight: 400\"> per maggiori dettagli.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Il browser interromper\u00e0 la segnalazione di nuove voci non appena l&#8217;utente interagisce con la pagina (tramite tocco, scorrimento o pressione di un tasto), poich\u00e9 l&#8217;interazione dell&#8217;utente spesso cambia ci\u00f2 che \u00e8 visibile all&#8217;utente (il che \u00e8 particolarmente vero con lo scorrimento).<\/span><\/p>\n<p><span style=\"font-weight: 400\">A scopo di analisi, dovresti segnalare solo l&#8217;ultimo inviato <\/span><span style=\"font-weight: 400\">PerformanceEntry<\/span><span style=\"font-weight: 400\">al tuo servizio di analisi.<\/span><\/p>\n<p><b>Attenzione<\/b><\/p>\n<p><span style=\"font-weight: 400\">Poich\u00e9 gli utenti possono aprire le pagine in una scheda in background, \u00e8 possibile che la pittura pi\u00f9 ricca di contenuti non si verifichi fino a quando l&#8217;utente non mette a fuoco la scheda, il che pu\u00f2 essere molto pi\u00f9 tardi rispetto a quando l&#8217;hanno caricata per la prima volta.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Tempo_di_caricamento_e_tempo_di_rendering\"><\/span><span style=\"font-weight: 400\">Tempo di caricamento e tempo di rendering <\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400\">Per motivi di sicurezza, il timestamp di rendering delle immagini non viene esposto per le immagini multiorigine prive <\/span><span style=\"font-weight: 400\">Timing-Allow-Origin<\/span><span style=\"font-weight: 400\">dell&#8217;intestazione. Invece, viene esposto solo il loro tempo di caricamento (poich\u00e9 questo \u00e8 gi\u00e0 esposto tramite molte altre API Web).<\/span><\/p>\n<p><span style=\"font-weight: 400\">L&#8217; <\/span><span style=\"font-weight: 400\">esempio di utilizzo<\/span><span style=\"font-weight: 400\"> seguente mostra come gestire gli elementi il \u200b\u200bcui tempo di rendering non \u00e8 disponibile. Ma, quando possibile, \u00e8 sempre consigliabile impostare l&#8217; <\/span><span style=\"font-weight: 400\">Timing-Allow-Origin<\/span><span style=\"font-weight: 400\">intestazione, in modo che le tue metriche siano pi\u00f9 accurate.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Come_vengono_gestite_le_modifiche_al_layout_e_alle_dimensioni_degli_elementi\"><\/span><span style=\"font-weight: 400\">Come vengono gestite le modifiche al layout e alle dimensioni degli elementi? <\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400\">Per mantenere basso il sovraccarico di prestazioni del calcolo e dell&#8217;invio di nuove voci di prestazioni, le modifiche alle dimensioni o alla posizione di un elemento non generano nuovi candidati LCP. Vengono considerate solo la dimensione e la posizione iniziali dell&#8217;elemento nella finestra.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Ci\u00f2 significa che le immagini che inizialmente vengono visualizzate fuori dallo schermo e poi passano allo schermo potrebbero non essere riportate. Significa anche che gli elementi inizialmente renderizzati nella finestra che poi vengono spinti verso il basso, fuori dalla vista riporteranno comunque la loro dimensione iniziale nella finestra.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Esempi\"><\/span><span style=\"font-weight: 400\">Esempi <\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400\">Ecco alcuni esempi di quando il pi\u00f9 grande contenuto pittorico si verifica su alcuni siti Web popolari:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-large wp-image-1358\" src=\"https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Example2-1024x399.png\" alt=\"\" width=\"768\" height=\"299\" srcset=\"https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Example2-1024x399.png 1024w, https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Example2-300x117.png 300w, https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Example2-768x299.png 768w, https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Example2.png 1472w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1359 size-large\" src=\"https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Example1-1024x401.png\" alt=\"\" width=\"768\" height=\"301\" srcset=\"https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Example1-1024x401.png 1024w, https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Example1-300x118.png 300w, https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Example1-768x301.png 768w, https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Example1.png 1464w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/p>\n<p><span style=\"font-weight: 400\">In entrambe le linee temporali sopra, l&#8217;elemento pi\u00f9 grande cambia durante il caricamento del contenuto. Nel primo esempio, il nuovo contenuto viene aggiunto al DOM e questo cambia l&#8217;elemento pi\u00f9 grande. Nel secondo esempio, le modifiche al layout e il contenuto che in precedenza era il pi\u00f9 grande viene rimosso dalla finestra.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Anche se spesso accade che i contenuti caricati in ritardo siano pi\u00f9 grandi dei contenuti gi\u00e0 presenti nella pagina, non \u00e8 necessariamente cos\u00ec. I prossimi due esempi mostrano il disegno di contenuto pi\u00f9 grande che si verifica prima del caricamento completo della pagina.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Nel primo esempio, il logo di Instagram viene caricato relativamente presto e rimane l&#8217;elemento pi\u00f9 grande anche se vengono mostrati progressivamente altri contenuti. Nell&#8217;esempio della pagina dei risultati di ricerca di Google, l&#8217;elemento pi\u00f9 grande \u00e8 un paragrafo di testo che viene visualizzato prima del completamento del caricamento di qualsiasi immagine o logo. Poich\u00e9 tutte le singole immagini sono pi\u00f9 piccole di questo paragrafo, rimane l&#8217;elemento pi\u00f9 grande durante tutto il processo di caricamento.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Nel primo fotogramma della timeline di Instagram, potresti notare che il logo della fotocamera non ha un riquadro verde attorno. Questo perch\u00e9 \u00e8 un <\/span><span style=\"font-weight: 400\">&lt;svg&gt;<\/span><span style=\"font-weight: 400\">elemento e <\/span><span style=\"font-weight: 400\">&lt;svg&gt;<\/span><span style=\"font-weight: 400\">gli elementi non sono attualmente considerati candidati LCP. Il primo candidato LCP \u00e8 il testo nel secondo frame.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Come_misurare_LCP\"><\/span><span style=\"font-weight: 400\">Come misurare LCP <\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400\">L&#8217; LCP pu\u00f2 essere misurato <\/span><span style=\"font-weight: 400\">in laboratorio<\/span><span style=\"font-weight: 400\"> o <\/span><span style=\"font-weight: 400\">sul campo<\/span><span style=\"font-weight: 400\"> ed \u00e8 disponibile nei seguenti strumenti:<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Strumenti_sul_campo\"><\/span><span style=\"font-weight: 400\">Strumenti sul campo <\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Rapporto sull&#8217;esperienza utente di Chrome<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Approfondimenti sulla velocit\u00e0 della pagina<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Search Console (rapporto Core Web Vitals)<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">web-vitals<\/span><span style=\"font-weight: 400\">Libreria JavaScript<\/span><\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Strumenti_di_laboratorio\"><\/span><span style=\"font-weight: 400\">Strumenti di laboratorio <\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Strumenti di sviluppo di Chrome<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Faro<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Pagina WebTest<\/span><\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"E_se_lelemento_piu_grande_non_fosse_il_piu_importante\"><\/span><span style=\"font-weight: 400\">E se l&#8217;elemento pi\u00f9 grande non fosse il pi\u00f9 importante? <\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400\">In alcuni casi l&#8217;elemento (o gli elementi) pi\u00f9 importanti della pagina non \u00e8 lo stesso dell&#8217;elemento pi\u00f9 grande e gli sviluppatori potrebbero essere pi\u00f9 interessati a misurare i tempi di rendering di questi altri elementi. Ci\u00f2 \u00e8 possibile utilizzando l&#8217; <\/span><span style=\"font-weight: 400\">API Element Timing<\/span><span style=\"font-weight: 400\"> , come descritto nell&#8217;articolo sulle <\/span><span style=\"font-weight: 400\">metriche personalizzate<\/span><span style=\"font-weight: 400\"> .<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Come_migliorare_LCP\"><\/span><span style=\"font-weight: 400\">Come migliorare LCP <\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400\">L&#8217;LCP \u00e8 principalmente influenzato da quattro fattori:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Tempi di risposta del server lenti<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">JavaScript e CSS che bloccano il rendering<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Tempi di caricamento delle risorse<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Rendering lato client<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">Per un approfondimento su come migliorare l&#8217;LCP, vedere <\/span><span style=\"font-weight: 400\">Ottimizza LCP<\/span><span style=\"font-weight: 400\"> . Per ulteriori indicazioni sulle tecniche di performance individuali che possono anche migliorare l&#8217;LCP, vedere:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Applicare il caricamento istantaneo con il pattern PRPL<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Ottimizzazione del percorso di rendering critico<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Ottimizza il tuo CSS<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Ottimizza le tue immagini<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Ottimizza i caratteri web<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Ottimizza il tuo JavaScript<\/span><span style=\"font-weight: 400\"> (per i siti con rendering client)<\/span><\/li>\n<li>Fonte: <a href=\"https:\/\/web.dev\/lcp\/\">https:\/\/web.dev\/lcp\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Largest Contentful Paint (LCP) \u00e8 una metrica importante e incentrata sull&#8217;utente per misurare la velocit\u00e0 di caricamento percepita perch\u00e9 segna [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1731,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","footnotes":""},"categories":[50],"tags":[60],"class_list":["post-1329","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-corewebvitals","tag-corewebvitals"],"acf":[],"jetpack_featured_media_url":"https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Core-Web-Vitals.png","uagb_featured_image_src":{"full":["https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Core-Web-Vitals.png",1280,720,false],"thumbnail":["https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Core-Web-Vitals-150x150.png",150,150,true],"medium":["https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Core-Web-Vitals-300x169.png",300,169,true],"medium_large":["https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Core-Web-Vitals-768x432.png",768,432,true],"large":["https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Core-Web-Vitals-1024x576.png",768,432,true],"1536x1536":["https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Core-Web-Vitals.png",1280,720,false],"2048x2048":["https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/LCP-Core-Web-Vitals.png",1280,720,false]},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/www.bhoost.com\/it\/author\/andreasacca_vd0s1ik8\/"},"uagb_comment_info":0,"uagb_excerpt":"Largest Contentful Paint (LCP) \u00e8 una metrica importante e incentrata sull&#8217;utente per misurare la velocit\u00e0 di caricamento percepita perch\u00e9 segna [&hellip;]","_links":{"self":[{"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/posts\/1329","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/comments?post=1329"}],"version-history":[{"count":7,"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/posts\/1329\/revisions"}],"predecessor-version":[{"id":1766,"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/posts\/1329\/revisions\/1766"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/media\/1731"}],"wp:attachment":[{"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/media?parent=1329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/categories?post=1329"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/tags?post=1329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}