{"id":1312,"date":"2022-07-28T18:21:16","date_gmt":"2022-07-28T18:21:16","guid":{"rendered":"https:\/\/www.bhoost.com\/it\/?p=1312"},"modified":"2023-12-07T17:23:51","modified_gmt":"2023-12-07T17:23:51","slug":"fpc-first-contentful-paint","status":"publish","type":"post","link":"https:\/\/www.bhoost.com\/it\/corewebvitals\/fpc-first-contentful-paint\/","title":{"rendered":"FCP &#8211; First Contentful Paint &#8211; Il primo contenuto visivo stampato"},"content":{"rendered":"<p><span style=\"font-weight: 400\">First Contentful Paint (FCP) \u00e8 una delle sei metriche monitorate nella sezione <\/span><b>Performance<\/b><span style=\"font-weight: 400\"> del rapporto Lighthouse. Ogni metrica cattura alcuni aspetti della velocit\u00e0 di caricamento della pagina.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Il faro mostra FCP in pochi secondi:<\/span><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 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-69ff206f362ec\" 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-69ff206f362ec\"  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\/fpc-first-contentful-paint\/#Cosa_misura_FCP\" >Cosa misura FCP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.bhoost.com\/it\/corewebvitals\/fpc-first-contentful-paint\/#In_che_modo_Lighthouse_determina_il_tuo_punteggio_FCP\" >In che modo Lighthouse determina il tuo punteggio FCP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.bhoost.com\/it\/corewebvitals\/fpc-first-contentful-paint\/#Come_migliorare_il_tuo_punteggio_FCP\" >Come migliorare il tuo punteggio FCP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.bhoost.com\/it\/corewebvitals\/fpc-first-contentful-paint\/#Tracciamento_di_FCP_sui_dispositivi_di_utenti_reali\" >Tracciamento di FCP sui dispositivi di utenti reali<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.bhoost.com\/it\/corewebvitals\/fpc-first-contentful-paint\/#Come_migliorare_il_tuo_punteggio_di_Performance_complessivo\" >Come migliorare il tuo punteggio di Performance complessivo<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Cosa_misura_FCP\"><\/span><span style=\"font-weight: 400\">Cosa misura FCP <\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400\">FCP misura quanto tempo impiega il browser per eseguire il rendering del primo contenuto DOM dopo che un utente ha navigato sulla tua pagina. Immagini, elementi non bianchi <\/span><span style=\"font-weight: 400\">&lt;canvas&gt;<\/span><span style=\"font-weight: 400\">e SVG sulla tua pagina sono considerati contenuti DOM; nulla all&#8217;interno di un iframe <\/span><i><span style=\"font-weight: 400\">non \u00e8<\/span><\/i><span style=\"font-weight: 400\"> incluso.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"In_che_modo_Lighthouse_determina_il_tuo_punteggio_FCP\"><\/span><span style=\"font-weight: 400\">In che modo Lighthouse determina il tuo punteggio FCP <\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400\">Il tuo punteggio FCP \u00e8 un confronto tra il tempo FCP della tua pagina e i tempi FCP per siti Web reali, basato sui <\/span><a href=\"https:\/\/httparchive.org\/reports\/loading-speed#fcp\"><span style=\"font-weight: 400\">dati dell&#8217;archivio HTTP<\/span><\/a><span style=\"font-weight: 400\"> . Ad esempio, i siti con prestazioni nel novantanovesimo percentile rendono FCP in circa 1,2 secondi. Se l&#8217;FCP del tuo sito web \u00e8 di 1,2 secondi, il tuo punteggio FCP \u00e8 99. Consulta <\/span><a href=\"https:\/\/web.dev\/performance-scoring\/#metric-scores\"><span style=\"font-weight: 400\">Come vengono determinati i punteggi delle metriche<\/span><\/a><span style=\"font-weight: 400\"> per sapere come vengono impostate le soglie del punteggio di Lighthouse.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Questa tabella mostra come interpretare il tuo punteggio FCP:<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><span style=\"font-weight: 400\">Tempo FCP<\/span><\/p>\n<p><span style=\"font-weight: 400\">(in secondi)<\/span><\/td>\n<td><span style=\"font-weight: 400\">Codificazione del colore<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400\">0\u20131,8<\/span><\/td>\n<td><span style=\"font-weight: 400\">Verde (veloce)<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400\">1.8\u20133<\/span><\/td>\n<td><span style=\"font-weight: 400\">Arancio (moderato)<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400\">Oltre 3<\/span><\/td>\n<td><span style=\"font-weight: 400\">Rosso (lento)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400\">Consulta il post sul <\/span><a href=\"https:\/\/web.dev\/performance-scoring\"><span style=\"font-weight: 400\">punteggio delle prestazioni di Lighthouse<\/span><\/a><span style=\"font-weight: 400\"> per sapere come viene calcolato il punteggio delle prestazioni complessive della tua pagina.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Come_migliorare_il_tuo_punteggio_FCP\"><\/span><span style=\"font-weight: 400\">Come migliorare il tuo punteggio FCP <\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400\">Un problema particolarmente importante per FCP \u00e8 il tempo di caricamento dei caratteri. Dai un&#8217;occhiata alla sezione <\/span><a href=\"https:\/\/web.dev\/font-display\"><span style=\"font-weight: 400\">Assicurati che il testo rimanga visibile durante il caricamento del webfont<\/span><\/a><span style=\"font-weight: 400\"> per i modi per accelerare il caricamento dei font.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tracciamento_di_FCP_sui_dispositivi_di_utenti_reali\"><\/span><span style=\"font-weight: 400\">Tracciamento di FCP sui dispositivi di utenti reali <\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400\">Per informazioni su come misurare quando si verifica effettivamente l&#8217;FCP sui dispositivi dei tuoi utenti, consulta la pagina <\/span><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/user-centric-performance-metrics\"><span style=\"font-weight: 400\">sulle metriche delle prestazioni incentrate sull&#8217;utente di Google. <\/span><\/a><span style=\"font-weight: 400\">La sezione <\/span><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/user-centric-performance-metrics#tracking_fpfcp\"><span style=\"font-weight: 400\">Tracking FP\/FCP<\/span><\/a><span style=\"font-weight: 400\"> descrive come accedere a livello di codice ai dati FCP e inviarli a Google Analytics.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Per ulteriori informazioni sulla raccolta delle metriche degli utenti reali, consulta Google <\/span><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/navigation-and-resource-timing\/\"><span style=\"font-weight: 400\">Valutazione delle prestazioni di caricamento nella vita reale con navigazione e tempistica delle risorse .<\/span><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Come_migliorare_il_tuo_punteggio_di_Performance_complessivo\"><\/span><span style=\"font-weight: 400\">Come migliorare il tuo punteggio di Performance complessivo <\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400\">A meno che tu non abbia un motivo specifico per concentrarti su una metrica particolare, di solito \u00e8 meglio concentrarti sul miglioramento del tuo punteggio di Performance complessivo.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Utilizza la sezione <\/span><b>Opportunit\u00e0<\/b><span style=\"font-weight: 400\"> del rapporto Lighthouse per determinare quali miglioramenti avranno pi\u00f9 valore per la tua pagina. Pi\u00f9 significativa \u00e8 l&#8217;opportunit\u00e0, maggiore sar\u00e0 l&#8217;effetto che avr\u00e0 sul tuo punteggio di Performance. Ad esempio, lo screenshot di Lighthouse di seguito mostra che l&#8217; <\/span><a href=\"https:\/\/web.dev\/render-blocking-resources\"><span style=\"font-weight: 400\">eliminazione delle risorse che bloccano il rendering<\/span><\/a><span style=\"font-weight: 400\"> produrr\u00e0 il miglioramento maggiore:<\/span><\/p>\n<p><strong>Consulta la <a href=\"https:\/\/web.dev\/lighthouse-performance\">pagina di destinazione Audit delle prestazioni<\/a> per scoprire come affrontare le opportunit\u00e0 identificate nel rapporto Lighthouse.<\/strong><\/p>\n<p><strong>Fonte \/ Source:<\/strong> <a href=\"https:\/\/web.dev\/first-contentful-paint\/\" target=\"_blank\" rel=\"noopener\">https:\/\/web.dev\/first-contentful-paint\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>First Contentful Paint (FCP) \u00e8 una delle sei metriche monitorate nella sezione Performance del rapporto Lighthouse. Ogni metrica cattura alcuni [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1729,"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-1312","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\/FCP-Core-Web-Vitals.png","uagb_featured_image_src":{"full":["https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/FCP-Core-Web-Vitals.png",1280,720,false],"thumbnail":["https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/FCP-Core-Web-Vitals-150x150.png",150,150,true],"medium":["https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/FCP-Core-Web-Vitals-300x169.png",300,169,true],"medium_large":["https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/FCP-Core-Web-Vitals-768x432.png",768,432,true],"large":["https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/FCP-Core-Web-Vitals-1024x576.png",768,432,true],"1536x1536":["https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/FCP-Core-Web-Vitals.png",1280,720,false],"2048x2048":["https:\/\/www.bhoost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/FCP-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":251,"uagb_excerpt":"First Contentful Paint (FCP) \u00e8 una delle sei metriche monitorate nella sezione Performance del rapporto Lighthouse. Ogni metrica cattura alcuni [&hellip;]","_links":{"self":[{"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/posts\/1312","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=1312"}],"version-history":[{"count":6,"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/posts\/1312\/revisions"}],"predecessor-version":[{"id":1611,"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/posts\/1312\/revisions\/1611"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/media\/1729"}],"wp:attachment":[{"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/media?parent=1312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/categories?post=1312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bhoost.com\/it\/wp-json\/wp\/v2\/tags?post=1312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}