Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

FONT LOAD: strategie per ottimizzare il caricamento dei font sul proprio sito

Download to read offline

In queste slide presentate al Meetup "Turin Web Performance Group" verranno affrontate le principali problematiche riscontrate con l’utilizzo di font esterni (come ad esempio Google Fonts) e verranno esposte le possibili soluzioni per migliorare le prestazioni di caricamento.
Per maggiori info: www.mirkociesco.it

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

FONT LOAD: strategie per ottimizzare il caricamento dei font sul proprio sito

  1. 1. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 1 Titolo slide
  2. 2. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 2 Titolo slide Ci servono davvero font esterni?
  3. 3. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. Web Font 3 Tipologie di Font Font di sistema
  4. 4. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 4 Font di sistema // Soluzione utilizzata da UIKIT font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; // Soluzione utilizzata da Bootstrap font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue", Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  5. 5. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 5 Web Font • Un font web è una raccolta di glifi (può essere una forma vettoriale che descrive una lettera o un simbolo) • Ogni famiglia di font è composta da diverse varianti stilistiche (normale, grassetto, corsivo) e diversi spessori per ogni stile • I formati dei font più utilizzati sono quattro: ▪ Embedded Open Type (EOT) ▪ TrueType Font (TTF) ▪ Web Open Font Format (WOFF) ▪ Web Open Font Format (WOFF2)
  6. 6. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 6 Supporto dei Web Font EOT OTF/TTF WOFF WOFF2 IE 8-11 x IE 9-11 x x x Edge 12-14 x x Firefox 40-45 x x x Chrome 43-49 x x x Safari 8-9 x x Opera 32-35 x x x iOS Safari 8,4-9,1 x x Android 4,4-44 x x Chrome for Android 46 x x x EOT OTF/TTF WOFF WOFF2 Compressione x x Dimensioni ridotte x
  7. 7. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 1. Scaricare il font dal web e dichiararlo nel @font-face 7 Come caricare un Web Font @font-face { font-family: 'ciclefina’; font-weight: normal; font-style: normal; src: url() format(); local(); } <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 2. Inserire un link da risorse esterne (esempio Google Fonts) e richiamare il font nel CSS
  8. 8. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 8 Test delle prestazioni dei Web Font
  9. 9. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 9 Web Font e percorso di rendering critico
  10. 10. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 10 Differenze tra i browser Timeout Fallback Swap Chrome 35+ 3 secondi SI SI Opera 3 secondi SI SI Firefox 3 secondi SI SI Internet Explorer 0 secondi SI SI Safari NO N/A N/A
  11. 11. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 11 Problemi di caricamento di un Web Font
  12. 12. La soluzione è FOFT
  13. 13. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. Font Face Observer Usare JavaScript per verificare quando un font è stato caricato https://github.com/bramstein/fontfaceobserver Font Face Onload Usare JavaScript per verificare quando un font è stato caricato https://github.com/zachleat/fontfaceonload LoadCSS Usare JavaScript per caricare in modo asincrono il CSS con font in Data URIs https://github.com/filamentgroup/loadCSS Web Font Loader Usare JavaScript per controllare il caricamento di un Web Font https://github.com/typekit/webfontloader 13 Possibili strategie
  14. 14. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. auto | block | swap | fallback | optional 14 Font display <style> @font-face { font-family: 'Roboto'; font-display: swap; src: local(), url() format(); } </style>
  15. 15. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 61.1% La percentuale di pagine che evita il flash del testo invisibile (FOIT) durante il caricamento dei font Web utilizzando la proprietà CSS «font-display». Questa metrica viene misurata da Lighthouse ed è disponibile solo nei test su dispositivi mobile. 15 Font display
  16. 16. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 16 Precarico - Case History Miglioramento del 50% Riduzione di 1,2 secondi (su Chrome desktop con preload)
  17. 17. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. • Ottimizzare il formato dei font per ogni browser • Specificare le politiche ottimali di validazione e caching • Verificare e controllare l’utilizzo dei font 17 Altri suggerimenti
  18. 18. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 18 La mia soluzione Ridurre l’utilizzo dei Web Font ai soli titoli Utilizzo di un Font di sistema per il testo Riduzione tempi di caricamento del Font utilizzando dns-prefetch e preload Caricamento del Web Font senza che blocchi il rendering con @font-face Utilizzo di font-display: swap Caricamento dell’intera pagina web senza risorse che bloccano il rendering
  19. 19. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. Contenuti non ottimizzati 19 Analisi dati Caricamento Google Font classico link in head Caricamento Google Font con Javascript Caricamento Google Font con @font-face First Contentful Paint (Chrome DevTools) 1,6 s 1,7 s 1,0 s Font di base leggibile (Web Page Test) 4,0 s 4,4 s 3,6 s Web font caricato (Web Page Test) 7,1 s (FOIT) Font non caricato 6,8 s
  20. 20. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. Contenuti ottimizzati con caricamento asincrono del CSS, caricamento pigro delle immagino below the fold 20 Analisi dati Caricamento Google Font classico link in head Caricamento Google Font con Javascript Caricamento Google Font con @font-face First Contentful Paint (Chrome DevTools) 1,6 s 0,9 s 0,8 s Font di base leggibile (Web Page Test) 7,7 s 2,0 s 2,0 s Web font caricato (Web Page Test) 9,6 s (FOIT) 4,5 s 3,5 s
  21. 21. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. Zach Leatherman https://www.zachleat.com/ https://www.zachleat.com/web/comprehensive-webfonts/ https://www.zachleat.com/web/five-whys/ https://noti.st/zachleat/KNaZEg#sMNiNxk https://github.com/zachleat/web-font-loading-recipes https://github.com/zachleat/fontfaceonload Google Developers https://developers.google.com/web/updates/2016/02/font-display https://developers.google.com/web/fundamentals/performance/resource-prioritization https://developers.google.com/web/fundamentals/performance/http2/ https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching https://developers.google.com/web/updates/2018/05/lighthouse#all_text_remains_visible_during_web_font_loads https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont- optimization#the_font_loading_api 21 Bibliografia
  22. 22. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. CSS-TRICKS https://css-tricks.com/font-display-masses/ https://css-tricks.com/fout-foit-foft/ https://css-tricks.com/really-dislike-fout-font-display-optional-might-jam/ https://css-tricks.com/snippets/css/system-font-stack/ https://css-tricks.com/snippets/css/using-font-face/ Altri siti https://www.keycdn.com/blog/resource-hints#2-dns-prefetching https://caniuse.com/ https://httparchive.org/reports/state-of-the-web#fontDisplay https://github.com/typekit/webfontloader https://jonsuh.com/blog/font-loading-with-font-events/ https://creativemarket.com/blog/the-missing-guide-to-font-formats https://www.malthemilthers.com/font-loading-strategy-acceptable-flash-of-invisible-text/ https://www.igvita.com/2014/09/16/optimizing-webfont-selection-and-synthesis/ https://www.keycdn.com/blog/web-font-performance https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf 22 Bibliografia

In queste slide presentate al Meetup "Turin Web Performance Group" verranno affrontate le principali problematiche riscontrate con l’utilizzo di font esterni (come ad esempio Google Fonts) e verranno esposte le possibili soluzioni per migliorare le prestazioni di caricamento. Per maggiori info: www.mirkociesco.it

Views

Total views

870

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×