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

1. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
1
Titolo slide

2. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
2
Titolo slide
Ci servono davvero font esterni?

3. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
Web Font
3
Tipologie di Font
Font di sistema

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. 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. 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. 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. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
8
Test delle prestazioni dei Web Font

9. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
9
Web Font e percorso di rendering critico

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. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
11
Problemi di caricamento di un Web Font

12. La soluzione è FOFT

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. 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. 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. 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. 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. 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. 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. 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. 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. 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