{"id":68795,"date":"2024-11-25T07:00:00","date_gmt":"2024-11-25T15:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=68795"},"modified":"2025-06-11T13:18:45","modified_gmt":"2025-06-11T20:18:45","slug":"core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-it","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/it\/core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-it\/","title":{"rendered":"Core Web Vitals: Come Evitare le Insidie di Prestazione dei Font Web"},"content":{"rendered":"\n<p>I font web conferiscono personalit\u00e0 al tuo sito, ma aggiungono anche peso.<\/p>\n\n\n<p>E se i tuoi caratteri impiegano troppo tempo a caricarsi, gli utenti rimarranno a fissare uno schermo vuoto. Ancora peggio, il tuo sito potrebbe sembrare instabile poich\u00e9 il testo si sposta inaspettatamente.<\/p>\n\n\n<p>Questo danneggia anche i <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/improve-core-web-vitals\/\" rel=\"noopener\">Core Web Vitals<\/a> \u2014 le metriche che influenzano direttamente il tuo posizionamento nei motori di ricerca e l&#8217;esperienza utente.<\/p>\n\n\n<p>Qui, ogni millisecondo conta.<\/p>\n\n\n<p>Allora, come puoi mantenere la tua scelta di font web senza sacrificare le prestazioni?<\/p>\n\n\n<p>Spezziamola, un passo alla volta.<\/p>\n\n\n<p>Ma prima, cosa sono esattamente i font sicuri per il web e i font web?<\/p>\n\n\n<h2 id=\"h-what-are-web-safe-fonts\" class=\"wp-block-heading\">Quali Sono I Caratteri Web Sicuri?<\/h2>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/web-safe-fonts\/\" rel=\"noopener\">Font sicuri per il web<\/a> sono le opzioni collaudate e affidabili che funzionano ovunque. Sono font che la maggior parte dei dispositivi possiede gi\u00e0, il che significa che puoi contarci per un caricamento veloce.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"877\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_.webp\" alt=\"Diagramma che spiega cosa sono i font sicuri per il web; mostrando un server che si connette a un browser e viceversa, e dal browser al computer dell'utente e i font di ritorno al browser\" class=\"wp-image-58001 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-300x164.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1024x561.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-768x421.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1536x842.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-600x329.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1200x658.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-730x400.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1460x800.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-784x430.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1568x859.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-877x481.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\/877;\" \/><\/figure>\n\n\n<p>Ecco i font sicuri per il web che puoi utilizzare:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Arial<\/li>\n\n\n\n<li>Times New Roman<\/li>\n\n\n\n<li>Verdana<\/li>\n\n\n\n<li>Trebuchet MS<\/li>\n\n\n\n<li>Courier<\/li>\n\n\n\n<li>Impact<\/li>\n\n\n\n<li>Georgia<\/li>\n\n\n\n<li>Comic Sans MS<\/li>\n\n\n<\/ul>\n\n\n<p>Anche con scelte limitate, un designer esperto pu\u00f2 utilizzare questi caratteri in modo creativo.<\/p>\n\n\n<p>Ma, i font sicuri per il web sono spesso abusati e danno al tuo sito web una sensazione di \u201c<em>similitudine<\/em>\u201d \u2014 anche quando hai investito molto tempo e denaro nel design del sito.<\/p>\n\n\n<p>Allora, come fai a renderlo pi\u00f9 bello?<\/p>\n\n\n<p>Con i font web.<\/p>\n\n\n<h2 id=\"h2_what-are-web-fonts\" class=\"wp-block-heading\">Cosa Sono i Font Web?<\/h2>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"885\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts.webp\" alt=\"esempio di diversi font di Google che mostrano l'esempio usando la frase &quot;Everyone ha the right to free of thought&quot; in tre diversi tipi di font\" class=\"wp-image-58002 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-300x166.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1024x566.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-768x425.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1536x850.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-600x332.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1200x664.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-730x404.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1460x808.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-784x434.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1568x867.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-877x485.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\/885;\" \/><\/figure>\n\n\n<p>I font web ti permettono di allontanarti dai font websafe spesso troppo utilizzati.<\/p>\n\n\n<p>Invece di fare affidamento sui font disponibili sul dispositivo di un utente, i font web possono essere scaricati da una fonte esterna come <a target=\"_blank\" href=\"https:\/\/fonts.google.com\/\" rel=\"noopener\">Google Fonts<\/a> o direttamente dal tuo server sul dispositivo dell&#8217;utente <em>(temporaneamente).<\/em><\/p>\n\n\n<p>Questo ti permette di utilizzare qualsiasi carattere personalizzato che corrisponda al tuo marchio o alle tue esigenze di design.<\/p>\n\n\n<p>Abbiamo anche selezionato i <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/best-google-fonts\/\" rel=\"noopener\">migliori font di Google<\/a> per aiutarti a iniziare.<\/p>\n\n\n<p>Quando un utente visita il tuo sito, il carattere web viene temporaneamente scaricato e applicato al testo utilizzando la regola <strong><code>@font-face<\/code><\/strong> in CSS.<\/p>\n\n\n<p>I font del web iniziano quindi a comportarsi come font locali \u2014 Si adattano automaticamente alle dimensioni dello schermo mantenendo il tuo sito web nitido.<\/p>\n\n\n<p>Anche i font sono evoluti nel tempo per avere formati di archiviazione pi\u00f9 efficienti. Simili ai <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/optimize-images-for-web\/\" rel=\"noopener\">formati di immagine<\/a>, i font includono TTF, WOFF, WOFF2 e EOT.<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Embedded OpenType (EOT):<\/strong> Compatibile con le versioni pi\u00f9 vecchie di Internet Explorer (sotto IE9). Non compresso di default, ma pu\u00f2 essere applicata la compressione GZIP.<\/li>\n\n\n\n<li><strong>TrueType (TTF):<\/strong> Supportato dai browser Android pi\u00f9 vecchi (sotto la versione 4.4). \u00c8 non compresso di default ma pu\u00f2 essere compresso con GZIP.<\/li>\n\n\n\n<li><strong>Web Open Font Format (WOFF):<\/strong> Supportato dalla maggior parte dei browser moderni e include compressione integrata.<\/li>\n\n\n\n<li><strong>Web Open Font Format 2 (WOFF2):<\/strong> Compatibile con i browser che lo supportano, presenta algoritmi di compressione personalizzati che riducono la dimensione del file di circa il 30% rispetto ad altri formati.<\/li>\n\n\n<\/ul>\n\n\n<p>I formati moderni offrono compressione per una migliore performance e aiutano a mantenere il design del tuo sito sia funzionale che visivamente distintivo.<\/p>\n\n\n<h2 id=\"h2_what-are-core-web-vitals-cwv-metrics\" class=\"wp-block-heading\">Cosa Sono Le Metriche Dei Core Web Vitals (CWV)?<\/h2>\n\n\n<p>Ecco il punto: Google desidera che tutti i suoi utenti abbiano un&#8217;esperienza eccellente.<\/p>\n\n\n<p>Qualsiasi sito web o app che offra la migliore esperienza agli utenti di Google ricever\u00e0 pi\u00f9 &#8220;affetto&#8221; dagli algoritmi di Google.<\/p>\n\n\n<p>E come si misura questa &#8220;<strong><em>esperienza<\/em><\/strong><em>&#8220;<\/em>?<\/p>\n\n\n<p>Google ha lanciato i Core Web Vitals <a target=\"_blank\" href=\"https:\/\/web.dev\/articles\/vitals#core-web-vitals\" rel=\"noopener\">all&#8217;inizio del 2020<\/a> proprio a questo scopo.<\/p>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/improve-core-web-vitals\/\" rel=\"noopener\">CWV<\/a> \u00e8 un insieme di tre metriche che indicano a Google come il tuo sito web o app si comporta per gli utenti che vi vengono inviati.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1468\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls.webp\" alt=\"LCP vs INP vs CLS mostrano diverse misurazioni su una scala da Buono-A Migliorare-Cattivo\" class=\"wp-image-58003 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-300x275.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1024x940.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-768x705.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1536x1409.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-600x551.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1200x1101.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-730x670.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1460x1340.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-784x719.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1568x1439.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-877x805.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\/1468;\" \/><\/figure>\n\n\n<p>Punteggi pi\u00f9 alti su queste metriche possono aiutarti a posizionarti meglio su Google. Facciamo rapidamente il punto su queste metriche.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Largest Contentful Paint (LCP)<\/h3>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/largest-contentful-paint\/\" rel=\"noopener\"><strong>LCP<\/strong><\/a><strong> misura quanto tempo impiega l&#8217;elemento pi\u00f9 grande visibile sulla tua pagina per caricarsi.<\/strong><\/p>\n\n\n<p>Questo \u00e8 generalmente un&#8217;immagine o un video, ma potrebbe essere un grande blocco di testo o un video incorporato.<\/p>\n\n\n<p>Pi\u00f9 velocemente avviene questo, migliore sar\u00e0 la performance del tuo sito agli occhi sia degli utenti che dei motori di ricerca.<\/p>\n\n\n<p>Un buon punteggio LCP significa che gli utenti non rimangono in attesa che il contenuto principale venga visualizzato.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-interaction-to-next-paint-inp\">Interazione al Prossimo Ritratto (INP)<\/h3>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/glossary\/seo\/inp-interaction-to-next-paint\/\" rel=\"noopener\"><strong>INP<\/strong><\/a><strong> misura il tempo tra l&#8217;interazione di un utente (come cliccare o toccare) e la risposta visiva della pagina.<\/strong><\/p>\n\n\n<p>Fornisce un quadro pi\u00f9 preciso dell&#8217;interattivit\u00e0 rispetto al FID, poich\u00e9 considera l&#8217;intero percorso dell&#8217;utente anzich\u00e9 solo la prima interazione.<\/p>\n\n\n<p>Un punteggio INP basso significa che il tuo sito risulta reattivo, migliorando coinvolgimento e soddisfazione degli utenti.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Spostamento Cumulativo del Layout (CLS)<\/h3>\n\n\n<p><strong>CLS misura quanto \u00e8 stabile la tua pagina durante il caricamento.<\/strong><\/p>\n\n\n<p>Quando gli elementi si spostano in modo inaspettato, ci\u00f2 frustra gli utenti e rende la pagina poco affidabile.<\/p>\n\n\n<p>Un punteggio CLS basso significa che la tua pagina si carica fluidamente, senza spostamenti di layout che interrompono l&#8217;esperienza utente.<\/p>\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=\"h2_how-to-optimize-web-fonts-for-better-core-web-vitals\" class=\"wp-block-heading\">Come Ottimizzare I Font Web Per Migliorare I Core Web Vitals<\/h2>\n\n\n<p>Allora, perch\u00e9 tutto questo clamore sulle prestazioni dei font web?<\/p>\n\n\n<p>Perch\u00e9 non possiamo semplicemente aggiungere i caratteri web e finirla l\u00ec? Beh, puoi farlo.<\/p>\n\n\n<p>Ma come abbiamo gi\u00e0 detto, i font web non sono locali. Vengono recuperati da un server, scaricati e applicati al tuo sito, ed \u00e8 qui che nasce il problema.<\/p>\n\n\n<p><strong>Ci vuole tempo.<\/strong><\/p>\n\n\n<p>E se ci vuole troppo tempo, influisce sui tuoi Core Web Vitals e <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/increase-website-conversion-rate\/\" rel=\"noopener\">tasso di conversione del sito web.<\/a><\/p>\n\n\n<p>Vediamo alcuni modi per ottimizzare i font web per migliorare i core web vitals.<\/p>\n\n\n<h3 class=\"wp-block-heading\">1. Precaricamento Dei Caratteri<\/h3>\n\n\n<p>Vuoi che i tuoi font siano pronti nel momento in cui la pagina inizia a caricarsi.<\/p>\n\n\n<p>Quando la pagina \u00e8 pronta per l&#8217;utente, lo \u00e8 anche il font.<\/p>\n\n\n<p>Questo si chiama <a target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Attributes\/rel\/preload\" rel=\"noopener\"><strong>preloading<\/strong><\/a>.<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"627\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1024x627.webp\" alt=\"Tempi di pre-caricamento in un grafico a barre orizzontali: index.html va da 0ms a 280ms, main.css da 50ms a 380ms e cos\u00ec via\" class=\"wp-image-58004 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1024x627.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-300x184.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-768x470.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1536x940.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-600x367.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1200x734.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-730x447.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1460x893.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-784x480.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1568x959.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-877x537.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/627;\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/www.bramstein.com\/writing\/preload-hints-for-web-fonts.html\" target=\"_blank\" rel=\"noreferrer noopener\">Fonte<\/a><\/figcaption><\/figure>\n\n\n<p>Il precaricamento dice al browser, \u201c<em>Ehi, questo font \u00e8 importante. Caricalo subito.\u201d<\/em><\/p>\n\n\n<p>Diciamo che stai usando il popolare <a target=\"_blank\" href=\"https:\/\/fonts.google.com\/specimen\/Roboto\" rel=\"noopener\">carattere Google, Roboto<\/a>.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"814\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font.webp\" alt=\"screenshot di un esempio di Google Fonts che utilizza Roboto con il testo nel font Roboto &quot;Mentre la mancanza di considerazione e il disprezzo per i diritti umani hanno portato&quot; \" class=\"wp-image-58005 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-300x153.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1024x521.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-768x391.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1536x781.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-600x305.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1200x611.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-730x371.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1460x743.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-784x399.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1568x798.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-877x446.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\/814;\" \/><\/figure>\n\n\n<p>Devi aggiungere un singolo attributo al tuo codice HTML per precaricare il font: <strong><code>rel = \u201cpreload\u201d<\/code><\/strong><\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preload\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap\" as=\"font\" type=\"font\/woff2\" crossorigin&gt;<\/code><\/pre>\n\n\n<p>Dopo ci\u00f2, il browser sa di dare priorit\u00e0 al download di Roboto, cos\u00ec il tuo testo appare formattato con il carattere corretto pi\u00f9 velocemente.<\/p>\n\n\n<p>Questo riduce il tempo necessario per il rendering del blocco di testo pi\u00f9 grande (LCP), cos\u00ec gli utenti vedono la versione finale del tuo sito pi\u00f9 rapidamente.<\/p>\n\n\n<h3 class=\"wp-block-heading\">2. Controlla il Comportamento di Caricamento dei Caratteri con la Propriet\u00e0 Font-Display<\/h3>\n\n\n<p>Tuttavia, il precaricamento potrebbe aumentare leggermente il tempo di caricamento iniziale poich\u00e9 ai font viene data la priorit\u00e0.<\/p>\n\n\n<p>La <strong><code>propriet\u00e0 font-display<\/code><\/strong> ti permette di controllare come si comporta il tuo testo mentre i caratteri personalizzati sono ancora in caricamento.<\/p>\n\n\n<p>Questo pu\u00f2 aiutarti a evitare il temuto <strong>Flash of Invisible Text (FOIT),<\/strong> dove gli utenti vedono spazi vuoti, e il <strong>Flash of Unstyled Text (FOUT),<\/strong> dove la pagina appare con i font di riserva per un secondo e poi passa immediatamente ai font personalizzati.<\/p>\n\n\n<p>La <code>propriet\u00e0 font-display<\/code> ha quattro modi per gestire il comportamento del testo: block, swap, fallback e optional.<\/p>\n\n\n<p>Guardiamo i due di cui avresti bisogno.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1243\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load.webp\" alt=\"grafici a linee che mostrano l'impatto dei valori di visualizzazione dei font sul tempo di caricamento della pagina tra block, swap, fallback e optional\" class=\"wp-image-58006 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-300x233.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1024x796.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-768x597.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1536x1193.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-600x466.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1200x932.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-730x567.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1460x1134.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-784x609.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1568x1218.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-877x681.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\/1243;\" \/><\/figure>\n\n\n<p><strong><code>font-display: swap<\/code><\/strong> \u2014 Questa opzione \u00e8 la scelta pi\u00f9 sicura per la maggior parte dei siti. Garantisce che il testo appaia immediatamente con un font di riserva e passi al font personalizzato non appena \u00e8 pronto.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');\n  font-display: swap;\n}<\/code><\/pre>\n\n\n<p>Qui, il font di riserva (come Arial o un altro font di sistema) si caricher\u00e0 istantaneamente, mantenendo la pagina leggibile.<\/p>\n\n\n<p>Quando Roboto viene scaricato, sostituisce il font di riserva senza lasciare uno spazio vuoto sullo schermo.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"624\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display.webp\" alt=\"screenshot &quot;font-display:swap&quot; con testo: questo \u00e8 un paragrafo. Questo \u00e8 un testo pi\u00f9 pesante (in grassetto). Questo \u00e8 un testo enfatizzato (in corsivo). Questo \u00e8 un testo pi\u00f9 pesante ed enfatizzato (in corsivo e grassetto). \" class=\"wp-image-58007 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-300x117.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1024x399.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-768x300.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1536x599.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-600x234.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1200x468.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-730x285.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1460x569.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-784x306.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1568x612.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-877x342.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\/624;\" \/><\/figure>\n\n\n<p>Ecco una <a target=\"_blank\" href=\"https:\/\/www.zachleat.com\/web-fonts\/demos\/font-display.html\" rel=\"noopener\">dimostrazione di come si comporta il font-display swap<\/a> nel mondo reale.<\/p>\n\n\n<p><strong><code>font-display: optional<\/code><\/strong> \u2014 Se ti preoccupa la velocit\u00e0, questo comando dice al browser di saltare il font personalizzato se non si carica abbastanza velocemente. Questo funziona quando non ti dispiace se il font di riserva rimane al suo posto.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');\n  font-display: optional;\n}<\/code><\/pre>\n\n\n<p>Questa opzione \u00e8 sensata quando le prestazioni sono pi\u00f9 importanti del design, rendendola perfetta per un sito che punta tutto sulla velocit\u00e0.<\/p>\n\n\n<p>Ecco <a target=\"_blank\" href=\"https:\/\/www.zachleat.com\/web-fonts\/demos\/font-display-optional.html\" rel=\"noopener\">un esempio<\/a> di come appare nel mondo reale. Non noterai il cambiamento qui poich\u00e9 la maggior parte dei font si carica abbastanza velocemente.<\/p>\n\n\n<p>Tuttavia, l&#8217;argomento facoltativo \u00e8 ottimo nel caso in cui il tuo server dei font si blocchi o rallenti.<\/p>\n\n\n<h3 class=\"wp-block-heading\">3. Sottoinsiemi di Caratteri<\/h3>\n\n\n<p>La maggior parte dei caratteri include centinaia, persino migliaia, di caratteri.<\/p>\n\n\n<p>Probabilmente, ti serve solo una piccola parte di questi. La rimozione di questi si chiama sottosettatura del font.<\/p>\n\n\n<p>Esatto, puoi rimuovere i caratteri non necessari per ridurre la dimensione del file del font.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"800\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting.webp\" alt=\"una illustrazione astratta che mostra il subsetting dei font, dove la lettera &quot;a&quot; viene estratta e separata da un file di font pi\u00f9 grande\" class=\"wp-image-58008 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-300x150.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1024x512.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-768x384.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1536x768.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-600x300.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1200x600.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-730x365.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1460x730.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-784x392.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1568x784.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-877x439.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>Supponi che il tuo sito necessiti solo di caratteri inglesi.<\/p>\n\n\n<p>Uno strumento come <a target=\"_blank\" href=\"https:\/\/github.com\/fonttools\/fonttools\" rel=\"noopener\">FontTools<\/a> pu\u00f2 aiutarti a ridurre il tuo font includendo solo i caratteri che utilizzerai effettivamente.<\/p>\n\n\n<p>Questo significa che tutti i caratteri Unicode che non sono necessari nella lingua inglese possono essere rimossi per risparmiare spazio sul file.<\/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>Unicode<\/h3>\n    <p>Lo Standard Unicode \u00e8 un sistema di codifica internazionale. Assegna un numero unico a ogni carattere di ogni lingua in modo che il carattere possa essere visualizzato su dispositivi, piattaforme e lingue diverse.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/unicode\/\"\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>Questo riduce la dimensione del file, ad esempio, da 80 KB a 30 KB.<\/p>\n\n\n<p>I file pi\u00f9 piccoli significano download pi\u00f9 veloci, migliorando sia LCP che CLS poich\u00e9 il font si carica rapidamente e non modifica il layout.<\/p>\n\n\n<p>Ecco un esempio di come rimuovere tutto tranne i caratteri inglesi usando FontTools:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>pyftsubset Roboto-Regular.ttf --unicodes=U+0020-007F<\/code><\/pre>\n\n\n<p>Ora, il tuo font Roboto contiene solo i caratteri latini di base necessari per il testo in inglese, rendendolo molto pi\u00f9 veloce da caricare.<\/p>\n\n\n<p>Se preferisci un approccio basato su GUI, puoi anche <a target=\"_blank\" href=\"https:\/\/www.fontsquirrel.com\/tools\/webfont-generator\" rel=\"noopener\">provare font-squirrel<\/a>. Una volta caricato un file di font, hai a disposizione molte opzioni di personalizzazione da aggiungere o rimuovere<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1112\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel.webp\" alt=\"Un'interfaccia web per il Generatore di Webfont di Font Squirrel che mostra le opzioni di conversione dei font e le impostazioni del formato.\" class=\"wp-image-58009 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-300x209.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1024x712.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-768x534.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1536x1068.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-600x417.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1200x834.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-730x507.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1460x1015.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-784x545.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1568x1090.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-877x610.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\/1112;\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\">4. Comprimere i Font<\/h3>\n\n\n<p>I formati di font moderni come WOFF2 offrono una compressione che pu\u00f2 ridurre la dimensione dei font fino al 30% rispetto a formati pi\u00f9 vecchi come TTF.<\/p>\n\n\n<p>Utilizzare la versione pi\u00f9 compressa del tuo font pu\u00f2 ridurre significativamente il suo impatto sul tempo di caricamento della pagina.<\/p>\n\n\n<p>Ad esempio, ecco come puoi assicurarti di utilizzare WOFF2:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('roboto.woff2') format('woff2'),\n       url('roboto.woff') format('woff');\n  font-weight: 400;\n}<\/code><\/pre>\n\n\n<p>In questo modo, i browser che supportano WOFF2 lo useranno di default, riducendo i tempi di caricamento pur visualizzando un font nitido e di alta qualit\u00e0.<\/p>\n\n\n<p>Tuttavia, se un browser non pu\u00f2 utilizzare WOFF2, passa a WOFF.<\/p>\n\n\n<h3 class=\"wp-block-heading\">5. Codifica Base64<\/h3>\n\n\n<p>Questa \u00e8 un&#8217;altra pratica comunemente utilizzata per ottimizzare i tuoi font web.<\/p>\n\n\n<p>Tuttavia, devi stare attento a quando usare i font codificati in Base64.<\/p>\n\n\n<p><strong>La codifica Base64 \u00e8 pi\u00f9 utile per piccoli font o icone.<\/strong><\/p>\n\n\n<p>Se usato eccessivamente, per\u00f2, puoi appesantire il CSS, aumentando il tempo di caricamento della pagina pi\u00f9 dell&#8217;uso del font stesso.<\/p>\n\n\n<p>Se vuoi utilizzare la codifica Base64 per un font di icone, dovresti prima convertire il file del font in formato Base64. Ecco come potrebbe apparire:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'CustomIcons';\n  src: url('data:font\/woff2;base64,d09GRgABAAAAAAn4ABAAAAAAB...') format('woff2');\n  font-weight: normal;\n  font-style: normal;\n}<\/code><\/pre>\n\n\n<p>Questo metodo funziona bene per piccoli font di icone che utilizzi frequentemente in tutto il sito.<\/p>\n\n\n<p>Il file CSS viene caricato con il font incorporato, eliminando una richiesta HTTP aggiuntiva.<\/p>\n\n\n<p>Tuttavia, evita questo per i font di grande corpo, poich\u00e9 pu\u00f2 rallentare il rendering iniziale della pagina.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-6-lt-link-vs-css-import-for-fonts\">6. <code>&lt;link><\/code> vs. CSS <code>@import<\/code> per i Font<\/h3>\n\n\n<p><code>&lt;link&gt;<\/code> e <code>@import<\/code> hanno una differenza significativa nelle prestazioni di caricamento.<\/p>\n\n\n<p>Il tag <code>&lt;link><\/code> carica i font in modo asincrono, il che significa che non impedisce il rendering del resto della tua pagina, mentre <code>@import<\/code> \u00e8 un po&#8217; pi\u00f9 lento.<\/p>\n\n\n<p><strong>Usa <code>&lt;link><\/code> quando possibile.<\/strong><\/p>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u201cNel 90%+ dei casi probabilmente vuoi utilizzare il tag <code>&lt;link><\/code>. Come regola generale, vuoi evitare le regole <code>@import<\/code> perch\u00e9 ritardano il caricamento della risorsa inclusa fino a quando il file non viene recuperato.\u201d <\/em><a href=\"https:\/\/stackoverflow.com\/questions\/12316501\/including-google-fonts-link-or-import\" target=\"_blank\" rel=\"noopener\"><em>Ilya Grigorik<\/em><\/a><em>, Ingegnere e Consigliere Tecnico del CEO di Shopify<\/em><\/p>\n\n\n<\/blockquote>\n\n\n<p>Carica i font in modo indipendente, permettendo al resto della pagina di caricarsi senza attendere il file del font.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href= \"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap\"><\/code><\/pre>\n\n\n<p>Questo \u00e8 il metodo preferito per caricare Google Fonts o servizi di font esterni simili.<\/p>\n\n\n<p>Inserito nella sezione <code>&lt;head><\/code> del tuo HTML, assicura che il caricamento del font inizi presto senza bloccare altre risorse.<\/p>\n\n\n<p><strong>Evita <code>@import<\/code> per i font critici.<\/strong><\/p>\n\n\n<p><code>@import<\/code> attende fino a quando il file CSS non \u00e8 completamente caricato, il che pu\u00f2 aumentare il tempo di caricamento e danneggiare LCP.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap');<\/code><\/pre>\n\n\n<p>L&#8217;uso di <code>@import<\/code> per i font funziona solo per font secondari o meno importanti. Come prassi, evitalo per qualsiasi cosa nella prima schermata di contenuto.<\/p>\n\n\n<h3 class=\"wp-block-heading\">7. Riduci gli Spostamenti Visivi\/CLS Con il Matching dei Caratteri e l&#8217;Adattamento della Dimensione<\/h3>\n\n\n<p>Le modifiche visive \u2014 o spostamenti cumulativi del layout (CLS), come li definisce Google \u2014 si verificano quando il layout cambia in modo inaspettato, spesso a causa della sostituzione dei font.<\/p>\n\n\n<p>Per minimizzare questo effetto, scegli font di riserva che assomigliano strettamente allo stile e alle dimensioni del tuo font personalizzato.<\/p>\n\n\n<p>La propriet\u00e0 <strong><code>CSS size-adjust<\/code><\/strong> ti permette anche di controllare la dimensione del carattere di riserva, riducendo gli spostamenti visivi quando viene caricato il carattere personalizzato.<\/p>\n\n\n<p>Se il tuo font personalizzato \u00e8 Roboto e un font di riserva, regola la dimensione per corrispondere a Roboto, rendendo la transizione quasi impercettibile.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('roboto.woff2') format('woff2');\n  font-display: swap;\n  size-adjust: 100%;\n}<\/code><\/pre>\n\n\n<p>Qui, il font di riserva di Roboto (ad esempio, Arial) mantiene una dimensione consistente, riducendo qualsiasi movimento evidente quando Roboto viene caricato completamente.<\/p>\n\n\n<p>Una volta allineate le dimensioni e la spaziatura del carattere di riserva con il tuo carattere personalizzato, assicuri che quando Roboto sostituisce Arial, lo spostamento sia minimo, mantenendo basso il CLS e migliorando l&#8217;esperienza utente.<\/p>\n\n\n<h3 class=\"wp-block-heading\">8. Trova il Luogo Adatto per Ospitare i Caratteri Web<\/h3>\n\n\n<p>Ospitare da soli i tuoi font non significa sempre una prestazione pi\u00f9 veloce.<\/p>\n\n\n<p>Molte opzioni di terze parti funzionano anche bene\u2014e a volte, possono persino caricarsi pi\u00f9 velocemente.<\/p>\n\n\n<p>Il <a target=\"_blank\" href=\"https:\/\/almanac.httparchive.org\/en\/2020\/fonts#fig-7\" rel=\"noopener\">Web Almanac<\/a> ha scoperto che certi siti che utilizzano font di terze parti vengono renderizzati pi\u00f9 velocemente rispetto a quelli con font ospitati autonomamente.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1500\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_.webp\" alt=\"Grafico a barre che confronta i tempi di caricamento di FCP e LCP per i metodi di hosting dei font auto-ospitati, esterni e combinati, mostrando che l'hosting combinato \u00e8 il pi\u00f9 lento.\" class=\"wp-image-58010 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-300x281.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1024x960.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-768x720.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1536x1440.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-600x563.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1200x1125.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-730x684.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1460x1369.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-784x735.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1568x1470.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-877x822.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\/1500;\" \/><\/figure>\n\n\n<p>Alla fine, le prestazioni dei font dipendono meno dalla scelta dell&#8217;hosting e pi\u00f9 da tre fattori chiave:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Content Delivery Network (CDN):<\/strong> Garantisce una consegna pi\u00f9 veloce servendo i font da pi\u00f9 localit\u00e0 in tutto il mondo.<\/li>\n\n\n\n<li><strong>HTTP\/2:<\/strong> Aumenta la velocit\u00e0 di caricamento gestendo pi\u00f9 richieste in parallelo, riducendo la latenza.<\/li>\n\n\n\n<li><strong>Politica di Caching Web:<\/strong> Memorizza nella cache i font in modo efficiente, cos\u00ec non devono essere riscaricati ad ogni visita.<\/li>\n\n\n<\/ul>\n\n\n<p>Invece di rimanere bloccato nella discussione sull&#8217;hosting, concentra i tuoi sforzi nel configurare questi elementi essenziali per mantenere il caricamento dei tuoi caratteri fluido, non importa dove siano ospitati.<\/p>\n\n\n<h2 id=\"h2_how-to-simplify-web-performance-optimization\" class=\"wp-block-heading\">Come Semplificare L&#8217;ottimizzazione Delle Prestazioni Web<\/h2>\n\n\n<p>Se le tecniche sopra menzionate ti sembrano troppo complicate, un <a target=\"_blank\" href=\"https:\/\/automattic.pxf.io\/OrN6xZ\" rel=\"noopener\">plugin come Jetpack<\/a> pu\u00f2 semplificarle.<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"602\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1024x602.webp\" alt=\"Pagina di atterraggio marketing che mostra le funzionalit\u00e0 di ottimizzazione di WordPress di Jetpack con grafiche delle metriche di performance e dispositivi mobili.\" class=\"wp-image-58011 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1024x602.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-300x176.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-768x452.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1536x903.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-600x353.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1200x706.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-730x429.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1460x859.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-784x461.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1568x922.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-877x516.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/602;\" \/><\/figure>\n\n\n<p>Jetpack, <a target=\"_blank\" href=\"https:\/\/github.com\/Automattic\/jetpack\" rel=\"noopener\">sviluppato da Automattic<\/a> (i creatori di WordPress), \u00e8 una soluzione all-in-one creata specificamente per i siti WordPress.<\/p>\n\n\n<p>Combina funzionalit\u00e0 essenziali per la sicurezza, le prestazioni e il marketing, tutte gestite da una sola piattaforma.<\/p>\n\n\n<p>Anche se non sei un esperto tecnico, Jetpack pu\u00f2 aiutare a migliorare la velocit\u00e0 del sito, rafforzare la sicurezza e migliorare l&#8217;esperienza dell&#8217;utente. (Nessuna configurazione complessa necessaria!)<\/p>\n\n\n<h2 id=\"h2_create-the-perfect-balance-between-beauty-and-performance\" class=\"wp-block-heading\">Crea l&#8217;Equilibrio Perfetto tra Bellezza e Prestazioni<\/h2>\n\n\n<p>I font web conferiscono al tuo sito un aspetto unico e bello.<\/p>\n\n\n<p>Tuttavia, senza le modifiche giuste, possono anche rallentarlo e frustrare gli utenti.<\/p>\n\n\n<p>Mentre abbiamo trattato le tecniche essenziali di ottimizzazione dei font, il perfezionamento delle prestazioni coinvolge innumerevoli dettagli tecnici.<\/p>\n\n\n<p>E ottenere i migliori risultati pu\u00f2 sembrare schiacciante.<\/p>\n\n\n<p>Ecco dove <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/pro-services\/\" rel=\"noopener\">i servizi professionali di sviluppo web di DreamHost<\/a> entrano in gioco.<\/p>\n\n\n<p>Ci assicureremo che il tuo sito sia bello e ottimizzato per velocit\u00e0 e esperienza utente.<\/p>\n\n\n<p>Lascia che ci occupiamo noi delle questioni tecniche mentre tu ti concentri sulla realizzazione di un sito che si distingua davvero.<\/p>\n\n\n\n<div class=\"article-cta-shared article-cta-small article-cta--product\">\n\t<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\/uploads\/2024\/03\/product-cta-pro-services-development-877x586.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-pro-services-development.webp 2x\"  \/><\/div>\n\n\t<a href='https:\/\/www.dreamhost.com\/pro-services\/development\/' class='link-top' target='_blank' rel='noopener noreferrer'>\n\t\t<span>Pro Services &#8211; Development<\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\" width=\"15\"><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\n\t<div class=\"content-btm\">\n\t\t<h2 class=\"h2--md\">\n\t\t\tYou Dream It, We Code It\n\t\t<\/h2>\n\t\t<p class=\"p--md\">\n\t\t\tTap into 20+ years of development expertise. Just let us know what you want for your site \u2013 we\u2019ll take it from there.\n\t\t<\/p>\n\n\t\t        <a\n            href=\"https:\/\/www.dreamhost.com\/pro-services\/development\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            See More                    <\/a>\n\n\t<\/div>\n<\/div>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<p><em>Questa pagina contiene link affiliati. Ci\u00f2 significa che potremmo guadagnare una commissione se acquisti servizi tramite il nostro link senza alcun costo aggiuntivo per te.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I font web possono influenzare i Core Web Vitals del tuo sito. Scopri suggerimenti semplici per ottimizzare i font web e mantenere il tuo sito veloce e facile da usare.<\/p>\n","protected":false},"author":1058,"featured_media":58013,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"I font web possono influire sui Core Web Vitals del tuo sito. Scopri semplici consigli per ottimizzare i font web e mantenere il tuo sito veloce e facile da usare.","toc_headlines":"[[\"h-what-are-web-safe-fonts\",\"Quali Sono I Caratteri Web Sicuri?\"],[\"h2_what-are-web-fonts\",\"Cosa Sono i Font Web?\"],[\"h2_what-are-core-web-vitals-cwv-metrics\",\"Cosa Sono Le Metriche Dei Core Web Vitals (CWV)?\"],[\"h2_how-to-optimize-web-fonts-for-better-core-web-vitals\",\"Come Ottimizzare I Font Web Per Migliorare I Core Web Vitals\"],[\"h2_how-to-simplify-web-performance-optimization\",\"Come Semplificare L'ottimizzazione Delle Prestazioni Web\"],[\"h2_create-the-perfect-balance-between-beauty-and-performance\",\"Crea l'Equilibrio Perfetto tra Bellezza e Prestazioni\"]]","hide_toc":false,"footnotes":""},"categories":[15068],"tags":[],"class_list":["post-68795","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design-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>Core Web Vitals: Come Evitare le Insidie di Prestazione dei Font Web - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"I font web possono influire sui Core Web Vitals del tuo sito. Scopri semplici consigli per ottimizzare i font web e mantenere il tuo sito veloce e facile da usare.\" \/>\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\/core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-it\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Core Web Vitals: Come Evitare le Insidie di Prestazione dei Font Web\" \/>\n<meta property=\"og:description\" content=\"I font web possono influire sui Core Web Vitals del tuo sito. Scopri semplici consigli per ottimizzare i font web e mantenere il tuo sito veloce e facile da usare.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/it\/core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-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=\"2024-11-25T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-11T20:18:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp\" \/>\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\/webp\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\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=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Core Web Vitals: Come Evitare le Insidie di Prestazione dei Font Web - DreamHost Blog","description":"I font web possono influire sui Core Web Vitals del tuo sito. Scopri semplici consigli per ottimizzare i font web e mantenere il tuo sito veloce e facile da usare.","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\/core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-it\/","og_locale":"en_US","og_type":"article","og_title":"Core Web Vitals: Come Evitare le Insidie di Prestazione dei Font Web","og_description":"I font web possono influire sui Core Web Vitals del tuo sito. Scopri semplici consigli per ottimizzare i font web e mantenere il tuo sito veloce e facile da usare.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/it\/core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-it\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-11-25T15:00:00+00:00","article_modified_time":"2025-06-11T20:18:45+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","type":"image\/webp"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-it\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-it\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"Core Web Vitals: Come Evitare le Insidie di Prestazione dei Font Web","datePublished":"2024-11-25T15:00:00+00:00","dateModified":"2025-06-11T20:18:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-it\/"},"wordCount":2483,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-it\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","articleSection":["Design del Sito Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-it\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/it\/core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-it\/","name":"Core Web Vitals: Come Evitare le Insidie di Prestazione dei Font Web - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-it\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-it\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","datePublished":"2024-11-25T15:00:00+00:00","dateModified":"2025-06-11T20:18:45+00:00","description":"I font web possono influire sui Core Web Vitals del tuo sito. Scopri semplici consigli per ottimizzare i font web e mantenere il tuo sito veloce e facile da usare.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-it\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/it\/core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-it\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-it\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","width":1460,"height":1095,"caption":"Core Web Vitals: How to Avoid the Performance Pitfalls of Web Fonts"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/core-web-vitals-come-evitare-le-insidie-di-prestazione-dei-font-web-it\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Core Web Vitals: Come Evitare le Insidie di Prestazione dei Font Web"}]},{"@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\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"it","translations":{"it":68795,"es":58033,"en":58000,"fr":71167,"nl":71194,"pt":72377,"uk":72392,"pl":72423,"de":73073,"ru":73076},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/68795","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\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=68795"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/68795\/revisions"}],"predecessor-version":[{"id":68797,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/68795\/revisions\/68797"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/58013"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=68795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=68795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=68795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}