{"id":68951,"date":"2023-04-18T07:00:32","date_gmt":"2023-04-18T14:00:32","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=68951"},"modified":"2025-06-11T13:21:14","modified_gmt":"2025-06-11T20:21:14","slug":"approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/it\/approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it\/","title":{"rendered":"Approfondimento su PageSpeed Insights (Guida Completa e Consigli per Ottenere 100)"},"content":{"rendered":"\n<p>Su Internet, non c&#8217;\u00e8 limite di velocit\u00e0 \u2013 ma fortunatamente, c&#8217;\u00e8 un tachimetro.<\/p>\n\n\n<p>La velocit\u00e0 e le prestazioni del tuo sito web hanno un impatto significativo sul business. Possono migliorare il tuo posizionamento nei motori di ricerca e il SEO, aumentare l&#8217;interazione sul sito web e incrementare le conversioni \u2013 e i ricavi.<\/p>\n\n\n<p>Ma prima di poter ottimizzare la velocit\u00e0 del tuo sito web, devi sapere come si comporta.<\/p>\n\n\n<p>\u00c8 qui che entra in gioco <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\">PageSpeed Insights<\/a>.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights.jpg\" alt=\"Screenshot di PageSpeed Insights\" class=\"wp-image-40108 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-1024x576.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-768x432.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-1536x864.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-1200x675.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-730x411.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-1460x821.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-784x441.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-1568x882.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PageSpeed-Insights-877x493.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n<p>Questo strumento gratuito di Google ti aiuta a comprendere le prestazioni del tuo sito web, ma pu\u00f2 essere complicato da utilizzare inizialmente.<\/p>\n\n\n<p>Alla fine, cosa significano tutti questi termini e punteggi diversi? Come dovresti sapere cosa fare o da dove iniziare?<\/p>\n\n\n<p>Questa guida \u00e8 incentrata su cosa fare con i risultati del tuo rapporto PageSpeed Insights e su come lavorare strategicamente attraverso soluzioni specifiche per migliorare ciascuno dei tuoi punteggi, indipendentemente dai problemi che devono essere affrontati!<\/p>\n\n\n<p>Oggi, ti guideremo attraverso ciascuno dei fattori chiave e mostreremo strategie per migliorare le tue prestazioni con ognuno di essi.<\/p>\n\n\n<h2 id=\"h-what-is-google-pagespeed-insights\" class=\"wp-block-heading\">Cos&#8217;\u00e8 Google PageSpeed Insights?<\/h2>\n\n\n<p>PageSpeed Insights \u00e8 uno strumento che testa, misura e riporta le prestazioni del tuo sito web. Cattura dati essenziali su come gli utenti sperimentano e interagiscono con il tuo sito analizzando elementi come la velocit\u00e0 del sito, il tempo di caricamento e l&#8217;esperienza utente.<\/p>\n\n\n<p>Oltre a valutare il tuo sito web su una serie di metriche chiave di prestazione, PageSpeed Insights esegue una gamma di diagnostica e raccomanda anche specifiche azioni da intraprendere per aiutarti a migliorare le prestazioni del tuo sito web.<\/p>\n\n\n<p>PageSpeed Insights \u00e8 alimentato dal <a href=\"https:\/\/developers.google.com\/search\/blog\/2018\/11\/pagespeed-insights-now-powered-by#:~:text=Historically%2C%20these%20tools%20have%20used,Lighthouse%20as%20its%20analysis%20engine.\" target=\"_blank\" rel=\"noopener\">motore di analisi open-source di Google, Lighthouse<\/a>.<\/p>\n\n\n<p>Quello che rende PageSpeed Insights particolarmente importante per i webmaster e i marketer \u00e8 che le prestazioni del sito sono strettamente collegate all&#8217;esperienza utente (UX), SEO, traffico, conversioni e tutti gli altri KPI che contano di pi\u00f9 per l&#8217;azienda.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Prestazioni Del Sito Web<\/h3>\n    <p>Le prestazioni di un sito web si riferiscono alla velocit\u00e0 e all&#8217;uptime del sito. Un sito con prestazioni migliori avr\u00e0 tempi di caricamento pi\u00f9 rapidi, funzioner\u00e0 pi\u00f9 fluidamente e avr\u00e0 poco o nessun tempo di inattivit\u00e0.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/website-performance\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leggi di pi\u00f9                    <\/a>\n\n<\/div>\n\n\n<p>Ottenere il 100% su PageSpeed Insights \u00e8 un po&#8217; come ottenere il massimo dei punti al tuo SAT.<\/p>\n\n\n<p>Non significa necessariamente che andrai benissimo all&#8217;universit\u00e0, ma ti d\u00e0 sicuramente un vantaggio.<\/p>\n\n\n<h2 id=\"h-page-speed-and-seo\" class=\"wp-block-heading\">Velocit\u00e0 Della Pagina E SEO<\/h2>\n\n\n<p>Rispondiamo prima alla domanda principale.<\/p>\n\n\n<p>S\u00ec, la velocit\u00e0 e le prestazioni del tuo sito web possono influenzare l&#8217;ottimizzazione per i motori di ricerca (SEO).<\/p>\n\n\n<p>In particolare, le prestazioni scarse possono <i>nuocere<\/i> al tuo SEO. \u00c8 utile pensare ai tuoi PageSpeed Insights come a un &#8220;regolatore&#8221; per il tuo sito web. Se i tuoi punteggi sono bassi, significa che il sito web \u00e8 lento, il che rallenta anche la tua crescita nei SERP (Search Engine Results Page)!<\/p>\n\n\n<p>Google ha <a href=\"https:\/\/developers.google.com\/search\/blog\/2020\/05\/evaluating-page-experience\" target=\"_blank\" rel=\"noopener\">dichiarato pubblicamente che utilizza i segnali di velocit\u00e0 del sito web<\/a>, che chiama &#8220;esperienza della pagina&#8221;, come fattore di ranking SEO.<\/p>\n\n\n<p>Ci sono tre fattori centrali inclusi nell&#8217;algoritmo di ricerca che Google definisce <a href=\"https:\/\/www.dreamhost.com\/blog\/improve-core-web-vitals\/\" target=\"_blank\" rel=\"noopener\">Core Web Vitals<\/a>:<\/p>\n\n\n<ol class=\"wp-block-list\">\n<li>Caricamento &#8211; Largest Contentful Paint (LCP)<\/li>\n\n\n\n<li>Interattivit\u00e0 &#8211; First Input Delay (FID)<\/li>\n\n\n\n<li>Stabilit\u00e0 Visiva &#8211; Cumulative Layout Shift (CLS)<\/li>\n\n\n<\/ol>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Cosa Sono i Core Web Vitals?<\/h3>\n    <p>I Core Web Vitals (CWV) sono stati sviluppati da Google e rappresentano un trio di metriche per l&#8217;esperienza utente progettate per aiutare a creare un&#8217;esperienza di navigazione web pi\u00f9 veloce, accessibile e di qualit\u00e0 superiore. Le tre metriche dei Core Web Vitals includono il Largest Contentful Paint (LCP), il First Input Delay (FID) e il Cumulative Layout Shift (CLS).<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/seo\/core-web-vitals\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leggi Di Pi\u00f9                    <\/a>\n\n<\/div>\n\n\n<p>Tutti questi fattori misurano la rapidit\u00e0 con cui il tuo sito web si carica e la velocit\u00e0 e la qualit\u00e0 dell&#8217;esperienza utente, che possono anche influenzare l&#8217;accessibilit\u00e0.<\/p>\n\n\n<p>Questi tre fattori fanno parte dei sei parametri totali misurati da PageSpeed Insights.<\/p>\n\n\n<h2 id=\"h-how-pagespeed-insights-works\" class=\"wp-block-heading\">Come Funziona PageSpeed Insights<\/h2>\n\n\n<p>Ora che abbiamo capito il chi, cosa, dove e perch\u00e9&#8230; tutto ci\u00f2 che resta \u00e8 il <i>come<\/i>.<\/p>\n\n\n<p>Come funziona PageSpeedInsights e come utilizzi le informazioni che fornisce?<\/p>\n\n\n<p>Prima di tutto, una breve spiegazione su come funziona lo strumento dietro le quinte, direttamente da Google:<\/p>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cPageSpeed Insights fornisce sia dati di laboratorio che dati sul campo relativi a una pagina. I dati di laboratorio sono utili per il debug dei problemi, poich\u00e9 vengono raccolti in un ambiente controllato. Tuttavia, potrebbero non catturare i colli di bottiglia del mondo reale. I dati sul campo sono utili per catturare la vera esperienza utente nel mondo reale &#8211; ma dispongono di un insieme pi\u00f9 limitato di metriche.\u201d<\/p>\n\n\n<\/blockquote>\n\n\n<p>In altre parole, PageSpeed Insights considera due aspetti.<\/p>\n\n\n<p>Innanzitutto, i computer di Google caricano il tuo sito web per vedere come funziona.<\/p>\n\n\n<p>In secondo luogo, poich\u00e9 i computer di Google non sono gli stessi di un laptop che potresti usare a casa o al lavoro, esaminano un registro di dati storici degli utenti reali che hanno visitato il tuo sito negli ultimi 28 giorni. (Questi dati provengono dal Chrome User Experience Report, spesso chiamato &#8220;CrUX&#8221;, e sono raccolti dagli utenti che utilizzano il browser Chrome.)<\/p>\n\n\n<p>Poi, PageSpeed Insights combina questi due test e valuta il tuo sito web in base a come potrebbero esperirlo gli utenti reali.<\/p>\n\n\n<p>Il punteggio PageSpeed Insights \u00e8 una raccolta di metriche sulle prestazioni del tuo sito che evidenzia quali aree sono buone e quali potrebbero necessitare di miglioramenti.<\/p>\n\n\n<p>Ci sono 6 punteggi da conoscere:<\/p>\n\n\n<ol class=\"wp-block-list\">\n<li>Primo Dipinto Significativo (FCP)<\/li>\n\n\n\n<li>Ritardo Primo Inserimento (FID)<\/li>\n\n\n\n<li>Dipinto Pi\u00f9 Grande Significativo (LCP)<\/li>\n\n\n\n<li>Spostamento Cumulativo del Layout (CLS)<\/li>\n\n\n\n<li>Interazione al Prossimo Dipinto (INP)<\/li>\n\n\n\n<li>Tempo al Primo Byte (TTFB)<\/li>\n\n\n<\/ol>\n\n\n<p>Ognuno di questi indicatori viene misurato e poi valutato secondo il livello di prestazione.<\/p>\n\n\n<p>Quando esegui un rapporto PageSpeed Insights per il tuo sito, riceverai un punteggio e un &#8220;voto&#8221; per ciascuno di questi, che rientrer\u00e0 in una delle tre categorie:<\/p>\n\n\n<ol class=\"wp-block-list\">\n<li>Buono<\/li>\n\n\n\n<li>Richiede Miglioramenti<\/li>\n\n\n\n<li>Scadente<\/li>\n\n\n<\/ol>\n\n\n<p>Questi voti sono determinati da intervalli predefiniti che Google stabilisce:<\/p>\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>&nbsp;<\/td><td><b>Buono<\/b><\/td><td><b>Da Migliorare<\/b><\/td><td><b>Scarso<\/b><\/td><\/tr><tr><td>FCP<\/td><td>[0, 1800ms]<\/td><td>(1800ms, 3000ms]<\/td><td>oltre 3000ms<\/td><\/tr><tr><td>FID<\/td><td>[0, 100ms]<\/td><td>(100ms, 300ms]<\/td><td>oltre 300ms<\/td><\/tr><tr><td>LCP<\/td><td>[0, 2500ms]<\/td><td>(2500ms, 4000ms]<\/td><td>oltre 4000ms<\/td><\/tr><tr><td>CLS<\/td><td>[0, 0.1]<\/td><td>(0.1, 0.25]<\/td><td>oltre 0.25<\/td><\/tr><tr><td>INP (sperimentale)<\/td><td>[0, 200ms]<\/td><td>(200ms, 500ms]<\/td><td>oltre 500ms<\/td><\/tr><tr><td>TTFB (sperimentale)<\/td><td>[0, 800ms]<\/td><td>(800ms, 1800ms]<\/td><td>oltre 1800ms<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h2 id=\"h-how-to-use-this-guide-to-improve-your-pagespeed-insights-score\" class=\"wp-block-heading\">Come Utilizzare Questa Guida per Migliorare il Tuo Punteggio PageSpeed Insights<\/h2>\n\n\n<p>Comprendere PageSpeed Insights \u00e8 la prima parte della battaglia.<\/p>\n\n\n<p>In seguito, dobbiamo capire come tradurre tutti i punteggi, i numeri e i suggerimenti in un piano d&#8217;azione per il miglioramento.<\/p>\n\n\n<p>Ecco come utilizzare questa guida:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\">Esegui il report di PageSpeed Insights del tuo sito web<\/a>.<\/li>\n\n\n\n<li>Cerca i test CWV falliti o le metriche nella parte &#8220;Scarsa&#8221; della scala.<\/li>\n\n\n\n<li>Trova la sezione sottostante che si riferisce a quelle specifiche metriche.<\/li>\n\n\n\n<li>Segui i passaggi (presentati in ordine dall&#8217;impatto maggiore al minore).<\/li>\n\n\n\n<li>Riesegui il report di PageSpeed Insights.<\/li>\n\n\n\n<li>Se necessario, ripeti il processo per qualsiasi metrica ancora contrassegnata come &#8220;Scarsa&#8221;.<\/li>\n\n\n\n<li>Passa alle metriche contrassegnate come &#8220;Da Migliorare&#8221;.<\/li>\n\n\n\n<li>Ripeti dall&#8217;inizio.<\/li>\n\n\n<\/ul>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h2 id=\"h-1-first-contentful-paint-fcp\" class=\"wp-block-heading\">#1 &#8211; Primo Rendering del Contenuto (FCP)<\/h2>\n\n\n<p>Immergiamoci nella prima metrica dell&#8217;elenco di Google.<\/p>\n\n\n<p>\u00c8 il First Contentful Paint, o FCP, e misura quanto velocemente l&#8217;utente pu\u00f2 vedere il tuo sito web mentre viene caricato.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-first-contentful-paint\">Cos&#8217;\u00e8 il First Contentful Paint?<\/h3>\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/first-contentful-paint\/\" target=\"_blank\" rel=\"noopener\">First Contentful Paint<\/a> (FCP) \u00e8 il tempo necessario per caricare il primo oggetto nel browser dell&#8217;utente. Questo \u00e8 diverso dalla velocit\u00e0 di caricamento della pagina o dal tempo di caricamento perch\u00e9 non \u00e8 il tempo necessario per il rendering completo della pagina \u2014 \u00e8 solo il primo pezzo della pagina a comparire sullo schermo.<\/p>\n\n\n<p>Questo \u00e8 importante dal punto di vista dell&#8217;utente perch\u00e9 pu\u00f2 vedere il progresso mentre la pagina inizia ad apparire.<\/p>\n\n\n<p>Significa anche che le strategie per accelerare il FCP sono uniche rispetto a quelle per velocizzare il caricamento dell&#8217;intera pagina.<\/p>\n\n\n<p>FCP \u00e8 misurato in secondi.<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Buono: &lt; 1,8 secondi<\/li>\n\n\n\n<li>Da migliorare: 1,8 &#8211; 3 secondi<\/li>\n\n\n\n<li>Scadente: &gt; 3 secondi<\/li>\n\n\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-fcp\">Tecniche per Migliorare l&#8217;FCP<\/h3>\n\n\n<p>Immagina di aver ottenuto un punteggio di 2,2s sul tuo punteggio FCP. Speri di ridurlo a 1,8s.<\/p>\n\n\n<p>Quali strumenti hai a disposizione?<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-minimizing-render-blocking-resources\">Minimizzare Le Risorse Che Bloccano Il Rendering<\/h4>\n\n\n<p>Ricorda, il First Contentful Paint non riguarda solo il tempo che impiega l&#8217;intera pagina a caricarsi. Si tratta di far apparire i primi pixel sullo schermo il pi\u00f9 velocemente possibile.<\/p>\n\n\n<p>Una strategia fondamentale \u00e8 semplicemente cambiare l&#8217;ordine dei contenuti nella tua pagina.<\/p>\n\n\n<p>Lascia che il browser visualizzi il testo, le immagini e gli stili pi\u00f9 importanti <i>prima <\/i>di iniziare a caricare script pesanti, animazioni sofisticate e contenuti che si trovano &#8220;sotto la piega&#8221;.<\/p>\n\n\n<p>La prima cosa che dovresti fare: <b>Elimina tutti gli stili o gli script inutilizzati dalla tua pagina.<\/b><\/p>\n\n\n<p>Se stai caricando JavaScript o CSS nella pagina (solitamente nella sezione Head del sito), questo rallenter\u00e0 il FCP. Se non li stai utilizzando, allora stai solo rallentando inutilmente.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>JavaScript<\/h3>\n    <p>JavaScript \u00e8 un linguaggio di programmazione che ti permette di creare elementi all&#8217;interno di una pagina web o su un server web. Quando visualizzi una pagina web, il codice JavaScript verr\u00e0 eseguito automaticamente.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/javascript\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leggi Di Pi\u00f9                    <\/a>\n\n<\/div>\n\n\n<p>In WordPress, puoi solitamente ottenere questo risultato disabilitando i plugin inutilizzati, che possono caricare codice sulla pagina anche se il plugin non viene utilizzato o visualizzato.<\/p>\n\n\n<p>Se guardi i risultati nel tuo rapporto PageSpeed Insights, verr\u00e0 evidenziato il codice che \u00e8 caricato nella pagina ma non utilizzato:<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report.jpg\" alt=\"Rapporto PageSpeed Insights (PSI)\" class=\"wp-image-40109 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-1024x576.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-768x432.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-1536x864.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-1200x675.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-730x411.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-1460x821.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-784x441.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-1568x882.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-877x493.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n<p>Questo dovrebbe indicarti quali codici o plugin potresti rimuovere in sicurezza.<\/p>\n\n\n<p>(Nota: Solo perch\u00e9 il codice non \u00e8 utilizzato in una pagina non significa che non sia presente in altre pagine del tuo sito! Fai attenzione prima di iniziare a tagliare e modificare le cose dalle tue pagine.)<\/p>\n\n\n<p>Prossimo: <b>Rimanda o carica gli script in modo asincrono.<\/b><\/p>\n\n\n<p>Se hai bisogno di script o di stili nella tua pagina, ma non sono immediatamente essenziali per il primo contenuto che l&#8217;utente vede, allora puoi fare ci\u00f2 che si chiama posticipare o caricarli in modo asincrono. Questo indica al browser di attendere per caricarli invece di caricarli nell&#8217;ordine in cui appaiono sulla pagina.<\/p>\n\n\n<p>\u00c8 abbastanza semplice: puoi aggiungere un po&#8217; di codice extra al tuo sito web che istruir\u00e0 il browser a posticipare o caricare in modo asincrono (o entrambi):<\/p>\n\n\n<p><code>&lt;script src=\"app.js\" async&gt;&lt;\/script&gt;<\/code><\/p>\n\n\n<p>(Nota per Nerd: Async e defer non sono tecnicamente la stessa cosa. Tuttavia, per la maggior parte di noi, la differenza \u00e8 principalmente semantica. Tuttavia, sentiti libero di <a href=\"https:\/\/stackoverflow.com\/questions\/10808109\/script-tag-async-defer\" target=\"_blank\" rel=\"noopener\">scendere nella tana del coniglio e scoprire di pi\u00f9 sulle sfumature sottili<\/a>.)<\/p>\n\n\n<p>Se desideri un modo pi\u00f9 semplice per gestire questo passaggio, prendi in considerazione l&#8217;utilizzo del <a href=\"https:\/\/wordpress.org\/plugins\/jetpack-boost\/\" target=\"_blank\" rel=\"noopener\">Plugin JetPack Boost per WordPress<\/a>.<\/p>\n\n\n<p>JetPack \u00e8 una suite di plugin gratuita che ti offre tutti i tipi di strumenti per ottimizzare la velocit\u00e0 e le prestazioni del tuo sito web. In particolare, puoi scegliere di posticipare il caricamento di JavaScript non essenziali con un semplice clic.<\/p>\n\n\n<p>All&#8217;interno di WordPress, vai su <i>Plugins &gt; Aggiungi Nuovo<\/i>.<\/p>\n\n\n<p>Poi, cerca Boost. Clicca su \u201cInstalla\u201d e \u201cAttiva\u201d.<\/p>\n\n\n<p>Dovresti vedere un nuovo menu nella tua navigazione a sinistra chiamato &#8220;JetPack&#8221;.<\/p>\n\n\n<p>Vai a <i>JetPack &gt; Boost<\/i>.<\/p>\n\n\n<p>Il plugin renderizzer\u00e0 il tuo sito in background e mostrer\u00e0 il tuo punteggio, oltre a opzioni per il miglioramento. Per posticipare JS non essenziale, clicca semplicemente l&#8217;interruttore per attivarlo.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/JetPack-Boost.jpg\" alt=\"Screenshot del plugin JetPack Boost per WordPress\" class=\"wp-image-40111 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/JetPack-Boost-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/JetPack-Boost-1024x576.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/JetPack-Boost-768x432.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/JetPack-Boost-1536x864.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-1200x675.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-730x411.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-1460x821.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-784x441.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-1568x882.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/JetPack-Boost-877x493.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n<p>Finalmente: <b>Ristruttura CSS (stile).<\/b><\/p>\n\n\n<p>Se conosci il CSS, saprai che \u00e8 comune inserire tutti i tuoi stili in un grande blocco di codice e caricarli tutti in un file standard come style.css.<\/p>\n\n\n<p>Non \u00e8 <i>sbagliato<\/i>. \u00c8 solo poco performante.<\/p>\n\n\n<p>Per migliorare FCP, puoi ottimizzare la struttura del tuo CSS:<\/p>\n\n\n<ol class=\"wp-block-list\">\n<li>Rimuovi tutti gli stili che si applicano ai contenuti che fanno parte del FCP (qualsiasi cosa &#8220;sopra la piega&#8221;.)<\/li>\n\n\n\n<li>Aggiungi questi stili come un blocco di stile inline nell&#8217;intestazione del tuo sito web.<\/li>\n\n\n\n<li>Carica gli stili rimanenti in modo asincrono con una funzione di &#8220;preload&#8221; (mostrata di seguito.)<\/li>\n\n\n<\/ol>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;link rel=&quot;preload&quot; href=&quot;styles.css&quot; as=&quot;style&quot; onload=&quot;this.onload=null;this.rel=&#039;stylesheet&#039;&quot;&gt;\n&amp;lt;noscript&gt;&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;&amp;lt;\/noscript&gt;\n<\/pre><\/div>\n\n<p>Alternativamente, se hai molti stili separati per diversi dispositivi e browser, potresti voler dividere il tuo foglio di stile in pi\u00f9 file e utilizzare una <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries\" target=\"_blank\" rel=\"noopener\">media query @import per caricare solo gli stili appropriati<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-optimizing-images-and-videos\">Ottimizzazione di Immagini e Video<\/h4>\n\n\n<p>Poich\u00e9 FCP riguarda principalmente l&#8217;ottimizzazione dei primi centimetri nella parte superiore della pagina, non entreremo troppo nel dettaglio sull&#8217;ottimizzazione di immagini e video qui.<\/p>\n\n\n<p>Ma se il tuo header contiene molte immagini o hai un video in cima alla pagina, potrebbe valere la pena indagare su come ottimizzare questi asset per migliorare la velocit\u00e0 di caricamento iniziale. Vedi sotto per ulteriori dettagli su come procedere con l&#8217;ottimizzazione.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-using-a-content-delivery-network-cdn\">Utilizzo di una Rete di Distribuzione dei Contenuti (CDN)<\/h4>\n\n\n<p>Come sopra. I CDN possono aiutare a caricare l&#8217;intera pagina pi\u00f9 velocemente, il che fornisce un piccolo incremento al FCP. Vedi sotto per maggiori dettagli sull&#8217;uso di un CDN.<\/p>\n\n\n<h2 id=\"h-2-first-input-delay-fid-total-blocking-time-tbt-and-time-to-interactive-tti\" class=\"wp-block-heading\">#2 &#8211; Ritardo Primo Input (FID), Tempo Totale di Blocco (TBT) e Tempo al Interattivit\u00e0 (TTI)<\/h2>\n\n\n<p>Ora parliamo dei compromessi.<\/p>\n\n\n<p>Se ti sei concentrato solo su First Contentful Paint, potresti pensare che tutto ci\u00f2 che devi fare per migliorare notevolmente il tuo punteggio su PageSpeed Insights sia posticipare e caricare tutte le tue risorse pi\u00f9 tardi per far caricare velocemente la parte superiore del tuo sito web.<\/p>\n\n\n<p>Ma se il sito web <i>sembra <\/i> caricarsi velocemente, ma non posso effettivamente interagire con esso, allora questa \u00e8 anche un&#8217;esperienza utente negativa.<\/p>\n\n\n<p>Inserisci: Primo Ritardo di Input.<\/p>\n\n\n<p>Il ritardo del primo input \u00e8 anche correlato al Tempo Totale di Blocco (TBT) e al Tempo fino all&#8217;Interattivit\u00e0 (TTI).<\/p>\n\n\n<p>Scopriamo ciascuno di questi e come sono correlati ma diversi.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-first-input-delay\">Cos&#8217;\u00e8 Il Ritardo Del Primo Inserimento?<\/h3>\n\n\n<p>Il First Input Delay (FID) \u00e8 il tempo necessario affinch\u00e9 il browser risponda al primo input o interazione dell&#8217;utente (ad esempio, cliccando su un link o un pulsante). La performance del tuo sito web influisce sul ritardo perch\u00e9 la maggior parte delle interazioni non pu\u00f2 essere elaborata mentre il browser sta caricando o rendendo il codice.<\/p>\n\n\n<p>In altre parole, se il tuo codice impiega molto tempo per completare il caricamento, impedir\u00e0 all&#8217;utente di interagire con il sito web, e ci sar\u00e0 un ritardo o un tempo di attesa tra il momento in cui cliccano e il momento in cui l&#8217;azione si verifica.<\/p>\n\n\n<p>Questa metrica \u00e8 misurata in millisecondi e basata sui dati degli utenti reali.<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Buono: &lt; 100ms<\/li>\n\n\n\n<li>Richiede miglioramenti: 100 &#8211; 300ms<\/li>\n\n\n\n<li>Scarso: &gt; 300ms<\/li>\n\n\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-time-to-interactive-tti\">Che cos&#8217;\u00e8 il Time to Interactive (TTI)?<\/h3>\n\n\n<p>Time to Interactive \u00e8 il tempo necessario affinch\u00e9 la pagina diventi \u201caffidabilmente interattiva\u201d.<\/p>\n\n\n<p>Google definisce &#8220;affidabilmente interattivo&#8221; come il momento in cui il thread principale del browser \u00e8 libero per almeno 5 secondi, rendendo la pagina completamente interattiva per l&#8217;utente.<\/p>\n\n\n<p>Questa \u00e8 una metrica misurata da Lighthouse di Google, quindi non si basa su dati reali degli utenti. Invece, viene misurata secondo criteri specifici e controllati.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-total-blocking-time-tbt\">Cos&#8217;\u00e8 il Tempo Totale di Blocco (TBT)?<\/h3>\n\n\n<p>Il Tempo Totale di Blocco misura l&#8217;intero periodo di tempo tra FCP e TTI.<\/p>\n\n\n<p>In altre parole, il conteggio non inizia fino a quando la parte superiore della pagina viene visualizzata, e poi si ferma dopo che la pagina \u00e8 considerata &#8220;affidabilmente interattiva&#8221; o 5 secondi dopo che il thread principale \u00e8 libero.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-first-input-delay-vs-time-to-interactive-vs-total-blocking-time\">Ritardo Primo Inserimento vs Tempo per l&#8217;Interattivit\u00e0 vs Tempo Totale di Blocco<\/h3>\n\n\n<p>Queste tre metriche sono correlate ma non identiche.<\/p>\n\n\n<p>Il First Input Delay si basa su dati reali degli utenti e sui Core Web Vitals. TTI e TBT sono misurati dal rapporto di prestazione in PageSpeed Insights, supportato dal Lighthouse di Google.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"2560\" height=\"1920\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-scaled.jpg\" alt=\"Ritardo del Primo Input vs Tempo per diventare Interattivo vs Tempo Totale di Blocco\" class=\"wp-image-40112 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-scaled.jpg 2560w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-300x225.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1024x768.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-768x576.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1536x1152.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-2048x1536.jpg 2048w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-600x450.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1200x900.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-730x548.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1460x1095.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-784x588.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1568x1176.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-877x658.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/First-Input-Delay-vs-Time-to-Interactive-vs-Total-Blocking-Time-1754x1316.jpg.webp 1754w\" data-sizes=\"(max-width: 2560px) 100vw, 2560px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/1920;\" \/><\/figure>\n\n\n<p>Per quanto riguarda il miglioramento delle prestazioni di queste tre metriche, le soluzioni sono simili ma non identiche. In particolare, le soluzioni per migliorare il FID che comportano il posticipo del rendering di JavaScript non miglioreranno TTI o TBT perch\u00e9 il JavaScript deve comunque essere caricato.<\/p>\n\n\n<p>Ma soluzioni come rimuovere, ridurre e mettere in cache dovrebbero aiutare a migliorare tutte e tre le metriche.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-fid-tti-and-tbt\">Tecniche per Migliorare FID, TTI e TBT<\/h3>\n\n\n<p>Di gran lunga, l&#8217;impatto pi\u00f9 significativo sul FID \u00e8 il JavaScript caricato sulla tua pagina.<\/p>\n\n\n<p>Puoi pensare a JavaScript come a un binario separato per il browser. Mentre sta rendendo o eseguendo codice JavaScript, non pu\u00f2 completare altri compiti o rispondere a input come un utente che fa clic su un link (il &#8220;thread principale&#8221; deve essere libero affinch\u00e9 il browser possa rispondere).<\/p>\n\n\n<p>Allora, pi\u00f9 tempo impiega a leggere ed eseguire il JavaScript quando la pagina viene caricata per la prima volta, pi\u00f9 lungo sar\u00e0 il ritardo se l&#8217;utente inizia a interagire con la pagina.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-reduce-the-impact-of-third-party-code\">Riduci L&#8217;Impatto Del Codice Di Terze Parti<\/h4>\n\n\n<p>Un sospetto comune per la lentezza nella risposta agli input \u00e8 che il sito web stia ancora caricando tutti i tipi di strumenti, widget e app di terze parti.<\/p>\n\n\n<p>Ogni volta che aggiungi cose come Facebook, Drift, Intercom, HotJar o altri strumenti e servizi di terze parti al tuo sito web, viene aggiunto un po&#8217; di codice che dovr\u00e0 essere caricato e visualizzato sulla pagina.<\/p>\n\n\n<p>Se hai molti di questi servizi, pu\u00f2 richiedere molto tempo per caricarli tutti.<\/p>\n\n\n<p>Peggio ancora, non hai alcun controllo sulla velocit\u00e0 di caricamento di queste risorse sul tuo sito. Quindi, se il browser sta cercando di recuperare del JavaScript da un sito web di terze parti su un server lento, potrebbe causare notevoli ritardi.<\/p>\n\n\n<p>Risolviamolo.<\/p>\n\n\n<p>Opzione #1: <b>Elimina tutti gli strumenti di terze parti non utilizzati.<\/b><\/p>\n\n\n<p>Probabilmente hai installato nel corso degli anni vari servizi, plugin e strumenti sul tuo sito web. E probabilmente ne utilizzi solo alcuni di essi.<\/p>\n\n\n<p>\u00c8 il momento di eliminare o disinstallare quelli che non stai utilizzando attivamente.<\/p>\n\n\n<p>Per ottenere un elenco completo dei JavaScript di terze parti che si caricano sulla tua pagina, consulta il tuo rapporto PageSpeed Insights o <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\" target=\"_blank\" rel=\"noopener\">esegui un rapporto Lighthouse separato<\/a>.<\/p>\n\n\n<p>Dovresti vedere un elenco di tutti gli script caricati e il tempo che impiegano:<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"960\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Delete-all-unused-third-party-tools.jpg\" alt=\"Elimina tutti gli strumenti di terze parti inutilizzati. Probabilmente, nel corso degli anni, hai installato sul tuo sito web ogni tipo di servizi, Plugins e strumenti.\" class=\"wp-image-40113 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Delete-all-unused-third-party-tools-300x180.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Delete-all-unused-third-party-tools-1024x614.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Delete-all-unused-third-party-tools-768x461.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Delete-all-unused-third-party-tools-1536x922.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-600x360.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-1200x720.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-730x438.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-1460x876.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-784x470.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-1568x941.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Delete-all-unused-third-party-tools-877x526.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/960;\" \/><\/figure>\n\n\n<p>Ora, utilizzando queste informazioni, puoi decidere quali sono critici e quali possono essere rimossi senza problemi.<\/p>\n\n\n<p>A seconda dei servizi che desideri eliminare, potresti dover rimuovere manualmente il codice dal tuo sito web, disinstallare un plugin di WordPress o eliminare il codice aggiunto tramite Google Tag Manager per migliorare le prestazioni della pagina.<\/p>\n\n\n<p>Opzione #2: <b>Carica JavaScript in modo asincrono<\/b>.<\/p>\n\n\n<p>A meno che non sia essenziale per il rendering del FCP, \u00e8 quasi sempre consigliabile eseguire il rendering degli script di terze parti in modo asincrono. Se hai del JavaScript essenziale che sta rallentando il FID ma non puoi rimuoverlo, allora <a href=\"https:\/\/web.dev\/efficiently-load-third-party-javascript\/\" target=\"_blank\" rel=\"noopener\">prova a farlo caricare in modo asincrono<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-minimizing-javascript-execution-time\">Ridurre Il Tempo Di Esecuzione Di JavaScript<\/h4>\n\n\n<p>Il codice di terze parti pu\u00f2 essere un furfante, ma che dire del nostro stesso codice che abbiamo inserito nel nostro sito web?<\/p>\n\n\n<p>Probabilmente non \u00e8 innocente nel lento tempo di caricamento.<\/p>\n\n\n<p>Se hai del JavaScript non essenziale che hai aggiunto al tuo sito web, potresti volerlo rimuovere.<\/p>\n\n\n<p>Guardando il rapporto di PageSpeed Insights, dovresti vedere una sezione che fa riferimento a JavaScript non utilizzato:<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"700\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-JavaScript.jpg\" alt=\"Una sezione di JavaScript non utilizzato nel rapporto PSI\" class=\"wp-image-40114 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-JavaScript-300x131.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-JavaScript-1024x448.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-JavaScript-768x336.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PSI-report-JavaScript-1536x672.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-600x263.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-1200x525.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-730x319.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-1460x639.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-784x343.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-1568x686.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/PSI-report-JavaScript-877x384.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/700;\" \/><\/figure>\n\n\n<ul class=\"wp-block-list\">\n<li>Se il JavaScript \u00e8 inutilizzato al 100%, prendi in considerazione l&#8217;eliminazione<\/li>\n\n\n\n<li>Se il JavaScript \u00e8 utilizzato in altre pagine, prendi in considerazione la possibilit\u00e0 di inviarlo selettivamente solo nelle pagine dove \u00e8 necessario (noto anche come &#8220;<a href=\"https:\/\/web.dev\/reduce-javascript-payloads-with-code-splitting\/\" target=\"_blank\" rel=\"noopener\">code splitting<\/a>&#8220;)<\/li>\n\n\n<\/ul>\n\n\n<p>Puoi anche esplorare opzioni per migliorare il tempo di caricamento del JavaScript.<\/p>\n\n\n<p>Il modo pi\u00f9 comune per accelerare il tempo di caricamento \u00e8 ridurre la dimensione dei file. E con JavaScript, ci sono due strategie principali:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Minimizzazione \u2013 Rimozione di tutti gli spazi, interruzioni di linea, ecc. nel codice<\/li>\n\n\n\n<li>Compressione \u2013 &#8220;Compressione&#8221; del file per renderlo pi\u00f9 piccolo<\/li>\n\n\n<\/ul>\n\n\n<p><a href=\"https:\/\/web.dev\/reduce-network-payloads-using-text-compression\/\" target=\"_blank\" rel=\"noopener\">Uno di questi potrebbe aiutare a rendere il tuo codice pi\u00f9 performante<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-prioritizing-visible-content\">Dare Priorit\u00e0 Al Contenuto Visibile<\/h4>\n\n\n<p>Se la tua preoccupazione principale \u00e8 migliorare il FID, allora potresti voler concentrarti sul posticipare JavaScript e altri elementi della pagina per concentrarti solo sui contenuti del primo paint significativo.<\/p>\n\n\n<p>Dopotutto, gli utenti non possono interagire con elementi che non sono stati renderizzati.<\/p>\n\n\n<h2 id=\"h-3-largest-contentful-paint-lcp\" class=\"wp-block-heading\">#3 &#8211; Dipinto Pi\u00f9 Grande e Contenuto (LCP)<\/h2>\n\n\n<p>Se FCP \u00e8 il tempo da 0 a 60 della tua auto, allora LCP \u00e8 il suo quarto di miglio.<\/p>\n\n\n<p>Okay, per chi non \u00e8 un appassionato di tecnologia, quello che intendo \u00e8 che LCP misura quanto velocemente l&#8217;utente pu\u00f2 vedere il contenuto &#8220;principale&#8221; sulla tua pagina web.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-largest-contentful-paint\">Cos&#8217;\u00e8 il Largest Contentful Paint?<\/h3>\n\n\n<p>Il Largest Contentful Paint (LCP) \u00e8 una metrica che misura quanto tempo impiega il blocco di contenuto pi\u00f9 grande di una pagina ad essere visibile all&#8217;utente. A differenza del FCP, considera il tempo di caricamento del blocco pi\u00f9 grande di immagine o testo della pagina, indipendentemente dalla sua posizione o ordine.<\/p>\n\n\n<p>Misura il blocco di contenuto pi\u00f9 grande in base alle sue dimensioni all&#8217;interno del viewport dell&#8217;utente. In altre parole, se c&#8217;\u00e8 un singolo &lt;div&gt; con molto testo o una singola immagine che occupa una grande porzione dello schermo, questo pu\u00f2 essere considerato il blocco di contenuto pi\u00f9 grande e utilizzato per calcolare LCP.<\/p>\n\n\n<p>Viene misurata in secondi e si basa su dati reali degli utenti (o &#8220;sul campo&#8221;):<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Buono: &lt; 2.5s<\/li>\n\n\n\n<li>Da Migliorare: 2.5 &#8211; 4s<\/li>\n\n\n\n<li>Scadente: &gt; 4s<\/li>\n\n\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-lcp\">Tecniche per Migliorare LCP<\/h3>\n\n\n<p>Prima di iniziare a lavorare per ottimizzare il tuo LCP, potresti voler determinare quale parte della tua pagina \u00e8 considerata il blocco di contenuto pi\u00f9 grande.<\/p>\n\n\n<p>Questo pu\u00f2 aiutarti a concentrare i tuoi sforzi per migliorare le prestazioni su una pagina specifica o un modello.<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"750\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Dreamhost.jpg\" alt=\"Screenshot della homepage di DreamHost\" class=\"wp-image-40115 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Dreamhost-300x141.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Dreamhost-1024x480.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Dreamhost-768x360.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Dreamhost-1536x720.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-600x281.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-1200x563.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-730x342.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-1460x684.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-784x368.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-1568x735.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Dreamhost-877x411.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/750;\" \/><\/figure>\n\n\n<p>Puoi farlo <a href=\"https:\/\/www.twicpics.com\/blog\/how-to-find-the-lcp-element-a-complete-guide\" target=\"_blank\" rel=\"noopener\">utilizzando Chrome DevTools nel tuo browser per identificare la risorsa LCP<\/a> su una pagina specifica.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-optimize-loading-priority\">Ottimizza La Priorit\u00e0 Di Caricamento<\/h4>\n\n\n<p>Nelle sezioni precedenti, abbiamo discusso opzioni come l&#8217;utilizzo di strategie asincrone o di rinvio per accelerare la resa di parti chiave della pagina.<\/p>\n\n\n<p>Potresti considerare queste qui come un&#8217;opzione di prima linea.<\/p>\n\n\n<p>Rimuovere o rinviare le risorse che bloccano il rendering pu\u00f2 aiutare a caricare pi\u00f9 velocemente il contenuto principale. Tuttavia, ricorda che se queste risorse modificano significativamente il layout o la struttura della pagina, potrebbe effettivamente cambiare quale blocco viene considerato il pi\u00f9 grande e rallentare il LCP invece di migliorarlo!<\/p>\n\n\n<p>Puoi spingere questa strategia ancora pi\u00f9 avanti. Soprattutto se il blocco di contenuto pi\u00f9 grande \u00e8 un&#8217;immagine.<\/p>\n\n\n<p>Puoi applicare quello che \u00e8 noto come framework <a href=\"https:\/\/web.dev\/apply-instant-loading-with-prpl\/\" target=\"_blank\" rel=\"noopener\">PRPL<\/a> (Preload, Render, Precache, Lazy load) per indirizzare risorse specifiche della tua pagina e per caricarle per prime nella coda. Se quell&#8217;immagine \u00e8 il blocco di contenuto pi\u00f9 grande, allora migliorer\u00e0 drasticamente il tuo punteggio LCP.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Lazy Loading<\/h3>\n    <p>Il Lazy Loading \u00e8 un pattern di progettazione utilizzato nello sviluppo software per migliorare le prestazioni e ridurre il consumo di risorse. Prevede il posticipo dell&#8217;inizializzazione o del caricamento di un oggetto fino al momento del suo effettivo bisogno.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/lazy-loading\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leggi di pi\u00f9                    <\/a>\n\n<\/div>\n\n\n<p>Oltre alle opzioni di rendering asincrono, questo Framework offre altre strategie per ottimizzare il percorso di rendering.<\/p>\n\n\n<p>Uno dei metodi pi\u00f9 semplici \u00e8 il pre-caricamento delle risorse critiche.<\/p>\n\n\n<p>Puoi farlo semplicemente aggiungendo un piccolo frammento all&#8217;intestazione del tuo sito web che indica al browser di dare priorit\u00e0 a immagini, font, stili o script cruciali, che possono essere fondamentali per la sezione pi\u00f9 grande del tuo contenuto.<\/p>\n\n\n<p>Ad esempio, se hai un&#8217;immagine di grande impatto che \u00e8 il blocco pi\u00f9 grande della pagina, potresti voler pre-caricare quell&#8217;immagine in ogni pagina utilizzando un frammento come questo:<\/p>\n\n\n<p><code>&lt;link rel=\"preload\" as=\"image\" href=\"image1.png\"&gt;<\/code><\/p>\n\n\n<p>Questo indica al browser di iniziare a caricare questa risorsa immediatamente, prima che venga scoperta nella pagina.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-optimize-file-resource-size\">Ottimizza La Dimensione Delle Risorse (File)<\/h4>\n\n\n<p>Ora parliamo delle dimensioni dei file.<\/p>\n\n\n<p>I file pi\u00f9 grandi impiegano pi\u00f9 tempo a caricarsi. Questo vale per immagini, script, video, font e qualsiasi altra cosa sulla tua pagina che possa essere caricata come parte del blocco di contenuto pi\u00f9 grande.<\/p>\n\n\n<p>Un modo per velocizzare il tuo punteggio LCP \u00e8 l&#8217;ottimizzazione delle dimensioni dei file.<\/p>\n\n\n<p>Le strategie per ottimizzare la dimensione del file dipenderanno dal formato del file.<\/p>\n\n\n<h5 class=\"wp-block-heading\" id=\"h-optimizing-images\">Ottimizzazione delle Immagini<\/h5>\n\n\n<p>Comunemente, troverai grandi vantaggi comprimendo e ottimizzando le tue immagini.<\/p>\n\n\n<p>Inizia valutando queste aree per il miglioramento:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><b>Formato<\/b>: Diversi formati di immagine offrono vari livelli di compressione e qualit\u00e0. Per la maggior parte dei casi d&#8217;uso web, JPEG, PNG e WebP sono i formati pi\u00f9 comuni.\n<ul class=\"wp-block-list\">\n<li>JPEG \u00e8 generalmente il migliore per le foto.<\/li>\n\n\n\n<li>PNG \u00e8 generalmente il migliore per immagini progettate con testo o bordi netti.<\/li>\n\n\n\n<li>WebP \u00e8 un formato pi\u00f9 efficiente che offre una migliore compressione senza sacrificare la qualit\u00e0, ma potrebbe non essere supportato da tutti i browser.<\/li>\n\n\n<\/ul>\n\n\n<\/li>\n\n\n\n<li><b>Compressione<\/b>: In molti casi, puoi comprimere la dimensione del file di un&#8217;immagine senza perdere molta o nessuna qualit\u00e0 visiva.\n<ul class=\"wp-block-list\">\n<li>Strumenti di compressione di immagini online: <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener\">TinyPNG<\/a> (per PNG e JPEG), <a href=\"https:\/\/squoosh.app\/\" target=\"_blank\" rel=\"noopener\">Squoosh<\/a> (per WebP).<\/li>\n\n\n\n<li>Strumenti di compressione di immagini di WordPress: <a href=\"https:\/\/shortpixel.com\/\" target=\"_blank\" rel=\"noopener\">ShortPixel<\/a>, <a href=\"https:\/\/imagify.io\/\" target=\"_blank\" rel=\"noopener\">Imagify<\/a>.<\/li>\n\n\n<\/ul>\n\n\n<\/li>\n\n\n\n<li><b>Dimensione dell&#8217;immagine<\/b>: Se stai caricando immagini grezze o foto sul tuo sito web e poi le aggiungi alla tua pagina, \u00e8 probabile che siano molto pi\u00f9 grandi del necessario, rallentando il tempo di caricamento.\n<ul class=\"wp-block-list\">\n<li>Ridimensiona le tue immagini e carica solo la dimensione di cui hai bisogno.<\/li>\n\n\n\n<li>Usa un <a href=\"https:\/\/wordpress.org\/plugins\/resize-image-after-upload\/\" target=\"_blank\" rel=\"noopener\">plugin di WordPress per ridimensionare automaticamente le immagini<\/a> quando vengono caricate.<\/li>\n\n\n\n<li>Utilizza gli attributi &#8220;srcset&#8221; e &#8220;sizes&#8221; nel tag &#8220;img&#8221; per specificare pi\u00f9 fonti e dimensioni delle immagini. Il browser sceglie automaticamente l&#8217;immagine pi\u00f9 appropriata in base alle dimensioni dello schermo e alla risoluzione dell&#8217;utente.<\/li>\n\n\n<\/ul>\n\n\n<\/li>\n\n\n<\/ul>\n\n\n<h5 class=\"wp-block-heading\" id=\"h-optimizing-scripts-and-styles\">Ottimizzazione Degli Script e Degli Stili<\/h5>\n\n\n<p>Tutte le risorse necessarie per rendere il blocco di contenuto pi\u00f9 grande devono essere completamente caricate prima che il LCP venga calcolato.<\/p>\n\n\n<p>Questo include script e stili che influenzano il tuo blocco di contenuto pi\u00f9 grande.<\/p>\n\n\n<p>Utilizzando alcune delle tecniche che abbiamo discusso in precedenza, puoi migliorare LCP ottimizzando le dimensioni dei file e il percorso di rendering per JavaScript, CSS, ecc.:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Minimizza i file.<\/li>\n\n\n\n<li>Divisione del codice per ridurre le dimensioni del file.<\/li>\n\n\n\n<li>Aggiungi stili e script in-linea.<\/li>\n\n\n\n<li>Pre-carica o utilizza la cache.<\/li>\n\n\n<\/ul>\n\n\n<h5 class=\"wp-block-heading\" id=\"h-optimizing-videos\">Ottimizzazione Dei Video<\/h5>\n\n\n<p>Se la tua risorsa LCP potrebbe essere un video, allora dovresti considerare modi per ottimizzare i video.<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Ospita il video su YouTube o un altro servizio con una CDN veloce anzich\u00e9 caricarlo direttamente.<\/li>\n\n\n\n<li>Comprimi la dimensione del file video.<\/li>\n\n\n<\/ul>\n\n\n<h5 class=\"wp-block-heading\" id=\"h-optimizing-fonts\">Ottimizzazione Dei Font<\/h5>\n\n\n<p>Se la risorsa LCP in questione \u00e8 un testo e quel testo utilizza un font importato (ad esempio, da Google Fonts), allora puoi ottimizzare migliorando la velocit\u00e0 di caricamento del file del font.<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Usa solo <a href=\"http:\/\/caniuse.com\/#feat=woff2\" target=\"_blank\" rel=\"noopener\">file di font WOFF e WOFF2.0<\/a> per il web.<\/li>\n\n\n\n<li>Pre-carica il file del font usando un tag link rel (vedi sopra).<\/li>\n\n\n\n<li>Esplora altre opzioni per <a href=\"https:\/\/web.dev\/reduce-webfont-size\/\" target=\"_blank\" rel=\"noopener\">ridurre ulteriormente il tempo di caricamento del file del font<\/a>.<\/li>\n\n\n<\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-implement-a-cdn\">Implementa una CDN<\/h4>\n\n\n<p>Pensa a un CDN come a una corsia preferenziale in autostrada.<\/p>\n\n\n<p>Aiuta il browser a scaricare risorse pi\u00f9 velocemente <a href=\"https:\/\/www.dreamhost.com\/blog\/a-comprehensive-guide-to-website-caching\/\" target=\"_blank\" rel=\"noopener\">cachendole<\/a> nei server in tutto il mondo.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>CDN<\/h3>\n    <p>CDN \u00e8 l&#8217;abbreviazione di u201cContent Delivery Networku201d. Si riferisce a una rete distribuita geograficamente di server web (e dei loro data center). Le entit\u00e0 che compongono una CDN collaborano per garantire una rapida consegna dei contenuti tramite internet.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/cdn\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leggi di pi\u00f9                    <\/a>\n\n<\/div>\n\n\n<p>La cosa principale da sapere \u00e8 questa: implementare una CDN pu\u00f2 migliorare notevolmente le prestazioni del sito web in generale. E, specialmente quando si tratta di LCP, pu\u00f2 aiutare a rendere immagini, script e altri asset pi\u00f9 velocemente rispetto al server normale del tuo host web.<\/p>\n\n\n<p>Per implementare una CDN:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><b>Scegli un provider CDN<\/b>: Ci sono diversi provider CDN popolari disponibili sul mercato, come <a href=\"http:\/\/cloudflare.com\" target=\"_blank\" rel=\"noopener\">Cloudflare<\/a>, <a href=\"https:\/\/aws.amazon.com\/cloudfront\/\" target=\"_blank\" rel=\"noopener\">Amazon CloudFront<\/a>, <a href=\"https:\/\/cloud.google.com\/cdn\" target=\"_blank\" rel=\"noopener\">Google Cloud CDN<\/a> e <a href=\"https:\/\/www.fastly.com\/\" target=\"_blank\" rel=\"noopener\">Fastly<\/a>.<\/li>\n\n\n\n<li><b>Configura un account e configura il CDN<\/b>: Una volta scelto un provider CDN, registrati per un account e configura le impostazioni del CDN. Questo comporta tipicamente la creazione di una zona CDN, la configurazione delle regole di caching e l&#8217;impostazione della crittografia SSL\/TLS.<\/li>\n\n\n\n<li><b>Integra il CDN con il tuo sito web<\/b>: Per integrare il CDN con il tuo sito web, dovrai aggiornare gli URL dei contenuti che desideri servire tramite il CDN. Questo comporta cambiare i nameservers per puntare al CDN invece del tuo server normale.<\/li>\n\n\n\n<li><b>Testa il CDN<\/b>: Dopo aver integrato il CDN con il tuo sito web, esegui test per assicurarti che i contenuti siano serviti tramite il CDN e che le prestazioni LCP siano migliorate.<\/li>\n\n\n<\/ul>\n\n\n<p>Per una guida pi\u00f9 dettagliata, consulta il nostro articolo su <a href=\"https:\/\/www.dreamhost.com\/blog\/guide-using-a-cdn-with-wp\/\" target=\"_blank\" rel=\"noopener\">l&#8217;uso di una CDN con WordPress<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-improve-server-performance\">Migliora le Prestazioni del Server<\/h4>\n\n\n<p>Infine, ma non per importanza, anche le prestazioni del server del tuo <a href=\"https:\/\/www.dreamhost.com\/\" target=\"_blank\" rel=\"noopener\">hosting web<\/a> giocano un ruolo chiave nel LCP.<\/p>\n\n\n<p>Copriremo completamente questo argomento quando parleremo di TTFB; basta sapere che il browser pu\u00f2 scaricare le risorse solo tanto velocemente quanto lo permette il server. Se il server impiega molto tempo a rispondere, anche la risorsa impiegher\u00e0 molto tempo a caricarsi.<\/p>\n\n\n<h2 id=\"h-4-cumulative-layout-shift-cls\" class=\"wp-block-heading\">#4 &#8211; Spostamento Cumulativo del Layout (CLS)<\/h2>\n\n\n<p>Sapevi che i siti web possono ballare?<\/p>\n\n\n<p>Beh, pi\u00f9 o meno. E non molto bene.<\/p>\n\n\n<p>Pi\u00f9 precisamente, possono spostarsi. Gli elementi nella pagina si muovono mentre diverse immagini, script, stili e testi vengono renderizzati fino a quando la pagina non \u00e8 completamente caricata.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-cumulative-layout-shift\">Cos&#8217;\u00e8 Il Cumulative Layout Shift?<\/h3>\n\n\n<p>Il Cumulative Layout Shift misura quanto si spostano immagini, testi, pulsanti e altri elementi sulla tua pagina mentre l&#8217;utente attende il caricamento della pagina. Un CLS pi\u00f9 basso \u00e8 considerato migliore per l&#8217;esperienza utente.<\/p>\n\n\n<p>Non \u00e8 davvero sorprendente se consideri le tue abitudini di navigazione.<\/p>\n\n\n<p>Se ti senti come se stessi giocando a whack-a-mole mentre provi a cliccare su un link che continua a spostarsi pi\u00f9 in basso nella pagina, probabilmente ti frustrerai e lascerai il sito del tutto. (Ciao, tasso di rimbalzo!)<\/p>\n\n\n<p>Questa esperienza pu\u00f2 essere particolarmente esasperante quando si naviga su un dispositivo mobile.<\/p>\n\n\n<p>CLS \u00e8 un dato raccolto dagli utenti reali e viene misurato come un punteggio che combina la &#8220;frazione di impatto&#8221; (quale percentuale degli elementi nella viewport si \u00e8 spostata) e la &#8220;frazione di distanza&#8221; (quanto si sono spostati rispetto alla dimensione totale dello schermo).<\/p>\n\n\n<p>C&#8217;\u00e8 anche una designazione speciale per &#8220;cambiamenti previsti&#8221; (ad esempio, cliccare su un pulsante che apre una nuova sezione sulla pagina) e &#8220;cambiamenti imprevisti&#8221;, che non sono provocati dall&#8217;input dell&#8217;utente.<\/p>\n\n\n<p>CLS \u00e8 misurato moltiplicando la frazione di impatto e la frazione di distanza:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Buono: &lt; 0.1<\/li>\n\n\n\n<li>Richiede Miglioramenti: 0.1 &#8211; 0.25<\/li>\n\n\n\n<li>Scadente: &gt; 0.25<\/li>\n\n\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-cls\">Tecniche Per Migliorare Il CLS<\/h3>\n\n\n<p>\u00c8 probabile che se non stai cercando intenzionalmente di ingannare i tuoi utenti spostando elementi sulla tua pagina, il tuo CLS sia abbastanza basso di default, ma ci sono alcuni errori innocenti che puoi commettere e che vale la pena correggere.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-define-the-sizes-of-all-images-and-videos\">Definisci Le Dimensioni di Tutte le Immagini e i Video<\/h4>\n\n\n<p>Una piccola cosa con un grande impatto. Se non definisci esplicitamente le dimensioni delle immagini e dei video sulla tua pagina, pu\u00f2 portare a uno spostamento del layout perch\u00e9 il browser non \u00e8 sicuro di quanto spazio riservare per quella risorsa.<\/p>\n\n\n<p>\u00c8 semplice come aggiungere l&#8217;attributo per qualsiasi immagine o video nella pagina:<\/p>\n\n\n<p><code>&lt;img src=\"hero_image.jpg\" width=\"400\" height=\"400\"&gt;<\/code><\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-avoid-ads-and-pop-ups-that-cause-layout-shifts\">Evita Annunci e Pop-up Che Causano Spostamenti del Layout<\/h4>\n\n\n<p>Devi pur sempre pagare le bollette, ma evita di usare pop-in o pop-up che modificano il layout della pagina. Se non altro, utilizza un <a href=\"https:\/\/css-tricks.com\/aspect-ratio-boxes\/\" target=\"_blank\" rel=\"noopener\">box con rapporto di aspetto CSS<\/a> per &#8220;riservare&#8221; spazio per annunci o altri messaggi che si caricano nella pagina mentre l&#8217;utente interagisce.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-choose-animations-wisely\">Scegli Le Animazioni Con Saggezza<\/h4>\n\n\n<p>Con CSS moderno e JavaScript, possiamo implementare tutti i tipi di animazioni belle e sofisticate sulla pagina.<\/p>\n\n\n<p>Ma, dal punto di vista dell&#8217;utente, la funzionalit\u00e0 ha sempre la precedenza sulla forma.<\/p>\n\n\n<p>Rimuovi tutte le animazioni che causano modifiche al layout, poich\u00e9 ogni cambio di stato pu\u00f2 contribuire allo spostamento complessivo del layout e influenzare negativamente il tuo punteggio CLS.<\/p>\n\n\n<h2 id=\"h-5-interaction-to-next-paint-inp\" class=\"wp-block-heading\">#5 &#8211; Interazione Alla Successiva Verniciatura (INP)<\/h2>\n\n\n<p>Come ha detto una volta Jay-Z, &#8220;Non ho pazienza. E odio aspettare.&#8221;<\/p>\n\n\n<p><i>Noi tutti, vero?<\/i><\/p>\n\n\n<p>Mentre abbiamo gi\u00e0 trattato il ritardo di input nella prima interazione con il tuo sito web (FID), INP \u00e8 una metrica pi\u00f9 ampia che valuta la reattivit\u00e0 complessiva del tuo sito web.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-interaction-to-next-paint\">Cos&#8217;\u00e8 l&#8217;Interazione fino alla Prossima Verniciatura?<\/h3>\n\n\n<p>L&#8217;interazione fino al prossimo disegno misura quanto tempo ci vuole affinch\u00e9 il prossimo &#8220;disegno&#8221; o frame aggiornato sul tuo sito web appaia dopo che l&#8217;utente interagisce con un pulsante o un elemento della pagina. Misura la reattivit\u00e0 complessiva del sito web e quanto sono fluide le interazioni.<\/p>\n\n\n<p>Questo \u00e8 particolarmente importante per le applicazioni web che richiedono un&#8217;interazione significativa dell&#8217;utente e possono sembrare lente e confuse se c&#8217;\u00e8 troppo ritardo nell&#8217;input o tra l&#8217;azione e il risultato.<\/p>\n\n\n<p>INP \u00e8 misurato in millisecondi:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Buono: &lt; 200ms<\/li>\n\n\n\n<li>Da Migliorare: 200 &#8211; 500ms<\/li>\n\n\n\n<li>Scarso: &gt; 500ms<\/li>\n\n\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-inp\">Tecniche per Migliorare INP<\/h3>\n\n\n<p>Se hai problemi con INP, mi dispiace per te, figlio. (Scusa, \u00e8 un&#8217;altra canzone di Jay-Z.)<\/p>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"800\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint.jpg\" alt=\"Analisi dell'Interazione fino al Prossimo Rendering\" class=\"wp-image-40116 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-300x150.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-1024x512.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-768x384.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-1536x768.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-600x300.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-1200x600.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-730x365.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-1460x730.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-784x392.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-1568x784.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/Breaking-Down-Interaction-to-Next-Paint-877x439.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/800;\" \/><\/figure>\n\n\n<p>Fortunatamente, puoi suddividere la maggior parte dei problemi in tre problemi principali:<\/p>\n\n\n<ol class=\"wp-block-list\">\n<li>Ritardo nell&#8217;input<\/li>\n\n\n\n<li>Ritardo nell&#8217;interazione<\/li>\n\n\n\n<li>Ritardo nella presentazione<\/li>\n\n\n<\/ol>\n\n\n<p>Questa \u00e8 la parte davvero complicata; per diagnosticare il problema pi\u00f9 da vicino, dovrai usare <a href=\"https:\/\/web.dev\/optimize-inp\/\" target=\"_blank\" rel=\"noopener\">il profiler delle prestazioni di Google Chrome o la funzionalit\u00e0 di registrazione di Lighthouse<\/a>.<\/p>\n\n\n<p>Qui puoi ingrandire una singola interazione e vedere dove si verifica il ritardo pi\u00f9 lungo.<\/p>\n\n\n<p>Da l\u00ec, possiamo cercare alcune soluzioni per ciascuno.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-fixing-input-delay\">Risoluzione del Ritardo di Input<\/h4>\n\n\n<p>Il ritardo nell&#8217;input si verifica quando il thread principale \u00e8 occupato al momento dell&#8217;interazione. Ci\u00f2 significa che sta succedendo qualcos&#8217;altro quando avviene il clic o la pressione del tasto.<\/p>\n\n\n<p>Per risolverlo, dovrai indagare sui processi in esecuzione come parte del thread principale:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Rimuovi o ottimizza il JavaScript di terze parti.<\/li>\n\n\n\n<li>Usa <a href=\"https:\/\/web.dev\/off-main-thread\/\" target=\"_blank\" rel=\"noopener\">web workers<\/a> per eseguire JavaScript al di fuori del thread principale.<\/li>\n\n\n\n<li>Usa listener come isInputPending() per cedere il thread principale (questa \u00e8 l&#8217;opzione pi\u00f9 avanzata).<\/li>\n\n\n<\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-fixing-interaction-delay\">Risoluzione Del Ritardo Nell&#8217;Interazione<\/h4>\n\n\n<p>Se l&#8217;interazione stessa \u00e8 la causa \u2013 il che significa che ci vuole molto tempo affinch\u00e9 l&#8217;interazione venga effettivamente eseguita \u2013 allora dovrai rifattorizzare il codice per questo input.<\/p>\n\n\n<p>La raccomandazione principale qui \u00e8 di rimandare le elaborazioni non essenziali.<\/p>\n\n\n<p>In altre parole, esegui la parte dell&#8217;interazione che l&#8217;utente vede immediatamente e si aspetta. Poi, dopo aver aggiornato il frame, esegui eventuali altri calcoli o interazioni dietro le quinte.<\/p>\n\n\n<p>Immagina, per esempio, che l&#8217;utente clicchi un pulsante che apre una finestra e registra anche un evento che mostra che hanno cliccato il pulsante. Vorresti che il tuo codice aprisse prima la finestra, \u201ccompletando\u201d l&#8217;interazione dal punto di vista dell&#8217;utente.<\/p>\n\n\n<p>Quindi, una volta completata l&#8217;interazione, registra l&#8217;evento che l&#8217;utente non vedr\u00e0 o sperimenta direttamente.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-fixing-presentation-delay\">Risoluzione Del Ritardo Nella Presentazione<\/h4>\n\n\n<p>\u00c8 possibile che l&#8217;input e l&#8217;interazione avvengano entrambi piuttosto rapidamente, ma ci vuole molto tempo perch\u00e9 il browser aggiorni la presentazione con il nuovo frame.<\/p>\n\n\n<p>Purtroppo, non c&#8217;\u00e8 <i>moltissimo <\/i>da rifattorizzare che possa aiutare in questo.<\/p>\n\n\n<p>Ma alcuni fattori potrebbero causare un ritardo pi\u00f9 lungo del normale:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Uso eccessivo di <b>requestAnimationFrame()<\/b>. Ogni volta che questa funzione \u00e8 chiamata, crea un piccolo ritardo. Quindi cerca casi in cui potrebbe essere usata troppo frequentemente o inutilmente.<\/li>\n\n\n\n<li>Gli attributi &#8220;Async&#8221; non funzionano come previsto. A seconda del contesto, alcune risorse che hai contrassegnato per il rendering asincrono potrebbero ignorare la direttiva o caricarsi in modo inaspettato. Se ci\u00f2 accade, ritarder\u00e0 altri elementi del percorso di rendering e il frame successivo.<\/li>\n\n\n<\/ul>\n\n\n<h2 id=\"h-6-time-to-first-byte-ttfb\" class=\"wp-block-heading\">#6 &#8211; Tempo Al Primo Byte (TTFB)<\/h2>\n\n\n<p>Ora, ci troviamo a riflettere su quel primo istante in cui si carica una pagina web.<\/p>\n\n\n<p>Prima che la pagina possa iniziare a essere renderizzata, il browser dell&#8217;utente deve stabilire il contatto con il server web, capire con chi si sta connettendo e ricevere istruzioni su cosa iniziare a caricare e in che ordine.<\/p>\n\n\n<p>Quella stretta di mano iniziale contiene il primo byte di informazioni. La rapidit\u00e0 con cui quel byte arriva \u00e8 come lo sparo di partenza di una corsa di cavalli.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-time-to-first-byte\">Cos&#8217;\u00e8 Il Tempo Al Primo Byte?<\/h3>\n\n\n<p>Time to First Byte \u00e8 il tempo necessario al tuo browser per eseguire processi come la ricerca DNS, i handshake TCP e SSL e la configurazione della connessione per richiedere &#8211; e ricevere &#8211; i primi byte di informazioni da un server web. La velocit\u00e0 di stabilire una connessione con il server web dipende quasi interamente dal server stesso e dal modo in cui il sito web \u00e8 ospitato.<\/p>\n\n\n<p>\u00c8 misurato in millisecondi:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Buono: &lt; 800ms<\/li>\n\n\n\n<li>Richiede Miglioramenti: 800 &#8211; 1800ms<\/li>\n\n\n\n<li>Scarso: &gt; 1800ms<\/li>\n\n\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-techniques-to-improve-ttfb\">Tecniche Per Migliorare Il TTFB<\/h3>\n\n\n<p>Puoi pensare al TTFB come al tempo che trascorri sulla linea di partenza prima che il pistolo venga sparato. Qualsiasi cosa che ritardi il primo via libera aggiunger\u00e0 tempo al TTFB e al tempo di caricamento complessivo della pagina.<\/p>\n\n\n<p>Quali sono le tue opzioni per migliorare?<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-eliminate-redirects\">Elimina I Reindirizzamenti<\/h4>\n\n\n<p>Prima di tutto, elimina i reindirizzamenti delle pagine ogni volta che \u00e8 possibile. Se stai reindirizzando gli utenti da una pagina all&#8217;altra, il tempo necessario per eseguirlo rientra nella finestra TTFB, il che significa che aggiungerai una quantit\u00e0 significativa di tempo al tuo punteggio.<\/p>\n\n\n<p>Questo include i reindirizzamenti 301 da vecchi URL a uno nuovo, cos\u00ec come reindirizzamenti temporanei e altre implementazioni.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-upgrade-your-web-hosting\">Aggiorna Il Tuo Hosting Web<\/h4>\n\n\n<p>L&#8217;Hosting ha un ruolo fondamentale nella velocit\u00e0 complessiva e nel punteggio di prestazione del tuo sito web, specialmente per quanto riguarda il TTFB.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Fornitore Di Hosting<\/h3>\n    <p>Un fornitore di hosting \u00e8 un&#8217;azienda che richiede un pagamento in cambio del u201cnoleggiou201d di spazio server e risorse. Puoi scegliere qualsiasi fornitore di hosting che desideri per lanciare un nuovo sito web.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/hosting-provider\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leggi Di Pi\u00f9                    <\/a>\n\n<\/div>\n\n\n<p>Dovrai esaminare i dettagli del tuo fornitore di hosting, prestando particolare attenzione a elementi come:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><b>Hosting Condiviso vs Hosting Dedicato<\/b>: Il tuo sito web \u00e8 ospitato su una propria istanza o sta condividendo risorse con altri utenti e i loro siti web? L&#8217;Hosting Dedicato di solito costa di pi\u00f9 ma offre prestazioni pi\u00f9 consistenti.<\/li>\n\n\n\n<li><b>Memoria (RAM)<\/b>: La memoria a cui il tuo sito pu\u00f2 accedere sul server gioca un ruolo fondamentale nelle sue prestazioni complessive. Se la memoria \u00e8 esaurita, il server non sar\u00e0 in grado di elaborare e rispondere a nuove richieste.<\/li>\n\n\n\n<li><b>CPU \/ Processore:<\/b> Anche la velocit\u00e0 del processore del server gioca un ruolo nella velocit\u00e0 di risposta e nel tempo di elaborazione.<\/li>\n\n\n\n<li><b>Aggiornamenti dell&#8217;infrastruttura<\/b>: Il software in esecuzione sul server \u00e8 mantenuto aggiornato e privo di errori o conflitti? Aggiorna alle ultime versioni di PHP, MySQL e altre applicazioni essenziali per massimizzare le prestazioni.<\/li>\n\n\n<\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-implement-caching\">Implementa La Cache<\/h4>\n\n\n<p>Sui cosiddetti &#8220;siti dinamici&#8221;, come i siti che funzionano su WordPress, la memorizzazione nella cache delle tue pagine pu\u00f2 portare a enormi miglioramenti nei tempi di caricamento delle pagine e nel TTFB.<\/p>\n\n\n<p>La cache significa sostanzialmente che invece di recuperare le informazioni dal database del tuo sito ogni volta che viene caricata una pagina, il sito memorizzer\u00e0 una copia della pagina e la fornir\u00e0 all&#8217;utente. \u00c8 molto pi\u00f9 veloce che cercare le informazioni ogni volta.<\/p>\n\n\n<p>Per una spiegazione dettagliata su come funziona, leggi <a href=\"https:\/\/www.dreamhost.com\/blog\/a-comprehensive-guide-to-website-caching\/\" target=\"_blank\" rel=\"noopener\">la nostra guida alla Cache del sito web<\/a>.<\/p>\n\n\n<h2 id=\"h-a-note-about-speed-index\" class=\"wp-block-heading\">Una Nota Sull&#8217;Indice Di Velocit\u00e0<\/h2>\n\n\n<p>Non abbiamo incluso una sezione separata focalizzata sulla metrica dell&#8217;Indice di Velocit\u00e0 in questa guida perch\u00e9 misura essenzialmente il tempo di caricamento <i>totale<\/i> della pagina.<\/p>\n\n\n<p>Questo significa che affrontare i problemi dell&#8217;indice di velocit\u00e0 \u00e8 solitamente una questione di gestire le altre metriche correlate che abbiamo gi\u00e0 trattato:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Primo Rendering del Contenuto<\/li>\n\n\n\n<li>Rendering Principale del Contenuto<\/li>\n\n\n\n<li>Interazione al Prossimo Rendering<\/li>\n\n\n\n<li>Tempo al Primo Byte<\/li>\n\n\n<\/ul>\n\n\n<p>Ognuno avr\u00e0 un piccolo ruolo nella velocit\u00e0 cumulativa della pagina e affrontarli direttamente dovrebbe migliorare il tuo punteggio complessivo dell&#8217;Indice di Velocit\u00e0.<\/p>\n\n\n<h2 id=\"h-final-thoughts-on-pagespeed-insights\" class=\"wp-block-heading\">Considerazioni Finali su PageSpeed Insights<\/h2>\n\n\n<p>In questa guida, abbiamo coperto praticamente tutto ci\u00f2 che c&#8217;\u00e8 da sapere sul rapporto PageSpeed Insights e su come puoi affrontare strategicamente ogni potenziale problema.<\/p>\n\n\n<p>Nel complesso, mi aspetto che le prestazioni della pagina, l&#8217;accessibilit\u00e0 e le migliori pratiche tecniche continueranno a crescere in importanza. Stiamo costruendo il web insieme &#8211; un sito web alla volta &#8211; e ci\u00f2 dipende dal nostro impegno comune nel mantenere il web aperto, accessibile e bello.<\/p>\n\n\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Prendi Il Controllo Con L&#8217;Hosting VPS Flessibile\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Ecco come l&#8217;offerta VPS di DreamHost si distingue: supporto clienti 24\/7, un pannello intuitivo, RAM scalabile, larghezza di banda illimitata, domini di hosting illimitati e archiviazione SSD.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/hosting\/vps\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Scegli Il Tuo Piano VPS                    <\/a>\n\n  <\/div>\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Su Internet, non esiste un limite di velocit\u00e0 &#8211; ma fortunatamente esiste un tachimetro. La velocit\u00e0 e le prestazioni del tuo sito web hanno un impatto significativo sul business. Possono migliorare il tuo posizionamento nei motori di ricerca e la SEO, aumentare l&#8217;interazione sul sito web e incrementare le conversioni &#8211; e i ricavi. Ma prima di poter ottimizzare la velocit\u00e0 del tuo sito web, devi [\u2026]<\/p>\n","protected":false},"author":1060,"featured_media":40101,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Vuoi migliorare la SEO del tuo sito web ottenendo un punteggio perfetto nel report di PageSpeed Insights di Google? La nostra guida completa ti guider\u00e0 attraverso i passaggi per ottimizzare le prestazioni del tuo sito e raggiungere un punteggio del 100%.","toc_headlines":"[[\"h-what-is-google-pagespeed-insights\",\"Cos'\u00e8 Google PageSpeed Insights?\"],[\"h-page-speed-and-seo\",\"Velocit\u00e0 Della Pagina E SEO\"],[\"h-how-pagespeed-insights-works\",\"Come Funziona PageSpeed Insights\"],[\"h-how-to-use-this-guide-to-improve-your-pagespeed-insights-score\",\"Come Utilizzare Questa Guida per Migliorare il Tuo Punteggio PageSpeed Insights\"],[\"h-1-first-contentful-paint-fcp\",\"#1 - Primo Rendering del Contenuto (FCP)\"],[\"h-2-first-input-delay-fid-total-blocking-time-tbt-and-time-to-interactive-tti\",\"#2 - Ritardo Primo Input (FID), Tempo Totale di Blocco (TBT) e Tempo al Interattivit\u00e0 (TTI)\"],[\"h-3-largest-contentful-paint-lcp\",\"#3 - Dipinto Pi\u00f9 Grande e Contenuto (LCP)\"],[\"h-4-cumulative-layout-shift-cls\",\"#4 - Spostamento Cumulativo del Layout (CLS)\"],[\"h-5-interaction-to-next-paint-inp\",\"#5 - Interazione Alla Successiva Verniciatura (INP)\"],[\"h-6-time-to-first-byte-ttfb\",\"#6 - Tempo Al Primo Byte (TTFB)\"],[\"h-a-note-about-speed-index\",\"Una Nota Sull'Indice Di Velocit\u00e0\"],[\"h-final-thoughts-on-pagespeed-insights\",\"Considerazioni Finali su PageSpeed Insights\"]]","hide_toc":false,"footnotes":""},"categories":[15054,15058],"tags":[],"class_list":["post-68951","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing-it","category-tutorials-it"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Approfondimento su PageSpeed Insights (Guida Completa e Consigli per Ottenere 100) - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Vuoi migliorare la SEO del tuo sito web ottenendo un punteggio perfetto nel report di PageSpeed Insights di Google? La nostra guida completa ti guider\u00e0 attraverso i passaggi per ottimizzare le prestazioni del tuo sito e raggiungere un punteggio del 100%.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/it\/approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Approfondimento su PageSpeed Insights (Guida Completa e Consigli per Ottenere 100)\" \/>\n<meta property=\"og:description\" content=\"Vuoi migliorare la SEO del tuo sito web ottenendo un punteggio perfetto nel report di PageSpeed Insights di Google? La nostra guida completa ti guider\u00e0 attraverso i passaggi per ottimizzare le prestazioni del tuo sito e raggiungere un punteggio del 100%.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/it\/approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-18T14:00:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-11T20:21:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Brian Glassman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Glassman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"31 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Approfondimento su PageSpeed Insights (Guida Completa e Consigli per Ottenere 100) - DreamHost Blog","description":"Vuoi migliorare la SEO del tuo sito web ottenendo un punteggio perfetto nel report di PageSpeed Insights di Google? La nostra guida completa ti guider\u00e0 attraverso i passaggi per ottimizzare le prestazioni del tuo sito e raggiungere un punteggio del 100%.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/it\/approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it\/","og_locale":"en_US","og_type":"article","og_title":"Approfondimento su PageSpeed Insights (Guida Completa e Consigli per Ottenere 100)","og_description":"Vuoi migliorare la SEO del tuo sito web ottenendo un punteggio perfetto nel report di PageSpeed Insights di Google? La nostra guida completa ti guider\u00e0 attraverso i passaggi per ottimizzare le prestazioni del tuo sito e raggiungere un punteggio del 100%.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/it\/approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-04-18T14:00:32+00:00","article_modified_time":"2025-06-11T20:21:14+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg","type":"image\/jpeg"}],"author":"Brian Glassman","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Brian Glassman","Est. reading time":"31 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it\/"},"author":{"name":"Brian Glassman","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de"},"headline":"Approfondimento su PageSpeed Insights (Guida Completa e Consigli per Ottenere 100)","datePublished":"2023-04-18T14:00:32+00:00","dateModified":"2025-06-11T20:21:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it\/"},"wordCount":6170,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg","articleSection":["Marketing","Tutorial"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/it\/approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it\/","name":"Approfondimento su PageSpeed Insights (Guida Completa e Consigli per Ottenere 100) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg","datePublished":"2023-04-18T14:00:32+00:00","dateModified":"2025-06-11T20:21:14+00:00","description":"Vuoi migliorare la SEO del tuo sito web ottenendo un punteggio perfetto nel report di PageSpeed Insights di Google? La nostra guida completa ti guider\u00e0 attraverso i passaggi per ottimizzare le prestazioni del tuo sito e raggiungere un punteggio del 100%.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/it\/approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/PageSpeed-Insights-Report-Hero-Image.jpg","width":1460,"height":1095,"caption":"PageSpeed Insights Report Hero Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/approfondimento-su-pagespeed-insights-guida-completa-e-consigli-per-ottenere-100-it\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Approfondimento su PageSpeed Insights (Guida Completa e Consigli per Ottenere 100)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de","name":"Brian Glassman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","caption":"Brian Glassman"},"description":"SEO leader and content marketer, Brian is DreamHost\u2019s Director of SEO. Based in Chicago, Brian enjoys the local health food scene (deep dish pizza, Italian beef sandwiches) and famous year-round warm weather. Follow Brian on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/brianglassmandesign\/"],"url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/brian\/"}]}},"lang":"it","translations":{"it":68951,"es":40181,"en":40100,"de":52146,"pl":57393,"pt":57397,"ru":57400,"uk":57406,"fr":71550,"nl":71577},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/68951","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1060"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=68951"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/68951\/revisions"}],"predecessor-version":[{"id":68953,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/68951\/revisions\/68953"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/40101"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=68951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=68951"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=68951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}