Webfont Performance

Inzwischen ist die Einbettung von Webfonts in Webprojekte zum Basishandwerk eines jeden Front End Developers geworden. Doch wird auch schon genügend hinterfragt, wie weit dessen Verwendung die Ladeperformance der Website beeinflussen kann? In diesem Talk, präsentiert am Webclerks Meetup (http://www.meetup.com/de-DE/webclerks/) ging es darum, Performance-Hindernisse von Webfonts aufzuzeigen und Lösungswege zu liefern, wie Webfonts optimiert in Webprojekte eingebunden werden können.

Transcript

1. WEBFONT PERFORMANCE @meineartfeder | Webclerks Meetup | 15.06.2016 | Vienna
2. FRANZISKA EDER @meineartfeder
3. Front End Developer
 @VirtueAustria
4. #webfontperformance #perfmatters #smashingconf #barcelona
5. DER WEBSEITEN VERWENDEN WEBFONTS 60% von den Top 1000 Websites. 2010 waren es noch 0% 60%
6. WEBFONTS WERDEN DURCHSCHNITTLICH PRO SEITE GELADEN 3
7. AN WEBFONTS WERDEN DURCHSCHNITTLICH RUNTERGELADEN 200KB BIS 400KB Je nach Quelle zwischen 200KB und 400KB
8. WEBFONTS ARE RENDERBLOCKING
9. Meow for food, then when human fills food dish, take a few bites of food and continue meowing hola te quiero i am the best Cat ipsum dolor sit amet, ears back wide eyed, chew foot chase dog then run away. Fall asleep on the washing machine stare out the window i am the best. Asdflkjaert- vlkjasntvkjn (sits on keyboard) stare at wall turn and meow stare at wall some more meow again continue staring fall over dead (not really but gets sypathy). Lick butt and make a weird face cat slap dog in face but eat the fat cats food so meow all night having their mate disturbing sleeping humans and then cats take over the world and howl uncontrollably for no reason yet make Flash of Invisible Text (FOIT) Request Content ladet Webfonts geladen Inspiriert von: http://bramstein.com/
10. Bad Webfont Loading Example Ausgeborgt von:
 https://vimeo.com/145055818
11. Bad Webfont Loading Example Ausgeborgt von:
 https://vimeo.com/145055818
12. Bad Webfont Loading Example Ausgeborgt von:
 https://vimeo.com/145055818
13. ICH HABE DA SCHON 
 WAS VORBEREITET ;)
14. FLASH OF UNSTYLED TEXT (FOUT) Meow for food, then when human fills food dish, take a few bites of food and continue meowing hola te quiero i am the best Cat ipsum dolor sit amet, ears back wide eyed, chew foot chase dog then run away. Fall asleep on the washing machine stare out the window i am the best. Asdflkjaert- vlkjasntvkjn (sits on keyboard) stare at wall turn and meow stare at wall some more meow again continue staring fall over dead (not really but gets sypathy). Lick butt and make a weird face cat slap dog in face but eat the fat cats food so meow all night having their mate disturbing sleeping humans and then cats take over the world and howl uncontrollably for no reason yet make Meow for food, then when human fills food dish, take a few bites of food and continue meowing hola te quiero i am the best Cat ipsum dolor sit amet, ears back wide eyed, chew foot chase dog then run away. Fall asleep on the washing machine stare out the window i am the best. Asdflkjaert- vlkjasntvkjn (sits on keyboard) stare at wall turn and meow stare at wall some more meow again continue staring fall over dead (not really but gets sypathy). Lick butt and make a weird face cat slap dog in face but eat the fat cats food so meow all night having their mate disturbing sleeping humans and then cats take over the world and howl uncontrollably for no reason yet make Request Content ladet Webfonts geladen Inspiriert von: http://bramstein.com/
15. FOUT IS PROGRESSIVE ENHANCEMENT
16. FOIT vs. FOUT Chrome Firefox Safari Opera IE9 IE10 IE11 Edge FOIT FOIT FOIT FOIT FOUT FOUT FOUT FOUT
17. Chrome Firefox Safari Opera IE9 IE10 IE11 Edge FOIT FOIT FOIT FOIT FOUT FOUT FOUT FOUT FOIT vs. FOUT
18. Chrome Firefox Safari Opera IE9 IE10 IE11 Edge FOIT FOIT FOIT FOIT FOUT FOUT FOUT FOUT 3 Sek. 3 Sek. ∞ 3 Sek. n/a n/a n/a n/a FOIT vs. FOUT
19. „BROWSERS SHOULD NOT HIDE THE TEXT“ Bram Stein
20. IF NOT USED NOT DOWNLOADED
21. A WEBFONT IS ONLY DOWNLOADED WHEN IT IS USED IN A CSS SELECTOR THAT MATCHES A DOM CONNECTED NODE.
22. <p>Text</p> _________________________________________ @font-face { font-family: MyFontRegular; src: url(myfont.woff2) format(“woff2”), url(myfont.woff) format(“woff”); } EINE WEBFONT WIRD NICHT VOM BROWSER RUNTERGELADEN WENN:
23. <p>Text</p> _________________________________________ @font-face { font-family: MyFontRegular; src: url(myfont.woff2) format(“woff2”), url(myfont.woff) format(“woff”); } p { font-family: MyFontRegular, Arial, sans-serif; } EINE WEBFONT WIRD VOM BROWSER RUNTERGELADEN WENN:
24. <p>Text</p> <p></p> Chrome, Opera, Safari, Android-Browser laden die Webfont MIT Content runter Firefox, IE, Edge laden die Webfont OHNE Content runter
25. Font Loading 100 ms 200 ms 300 ms 400 ms 500 ms 600 ms 700 ms HTML Inspiriert von: http://bramstein.com/
26. Font Loading 100 ms 200 ms 300 ms 400 ms 500 ms 600 ms 700 ms HTML CSS Inspiriert von: http://bramstein.com/
27. <p>Text</p> _________________________________________ @font-face { font-family: MyFontRegular; src: url(myfont.woff2) format(“woff2”), url(myfont.woff) format(“woff”); } p { font-family: MyFontRegular, Arial, sans-serif; } EINE WEBFONT WIRD VOM BROWSER RUNTERGELADEN WENN:
28. Font Loading 100 ms 200 ms 300 ms 400 ms 500 ms 600 ms 700 ms HTML CSS MyFontRegular MyFontBold Font Loading beginnt Inspiriert von: http://bramstein.com/
29. Font Loading 100 ms 200 ms 300 ms 400 ms 500 ms 600 ms 700 ms HTML CSS MyFontRegular MyFontBold Font Loading beginnt 1. Font fertig gerendert Inspiriert von: http://bramstein.com/
30. Font Loading 100 ms 200 ms 300 ms 400 ms 500 ms 600 ms 700 ms HTML CSS MyFontRegular MyFontBold Font Loading beginnt Webfonts fertig gerendert Inspiriert von: http://bramstein.com/
31. Bad Webfont Loading Example
32. Bad Webfont Loading Example
33. CSS FONT-DISPLAY
34. @font-face { font-family: MyFont; src: url(myfont.woff2) format(“woff2”), url(myfont.woff) format(“woff”); font-display: auto|block|swap|fallback|optional; } CSS FONT-DISPLAY
35. @font-face { font-family: MyFont; src: url(myfont.woff2) format(“woff2”), url(myfont.woff) format(“woff”); font-display: auto|block|swap|fallback|optional; } CSS FONT-DISPLAY CSS font-display ist so neu, wird daweil nur von Chrome und Opera unterstützt.
 Für die Zukunft merken!
36. Font Loading 100 ms 200 ms 300 ms 400 ms 500 ms 600 ms 700 ms HTML CSS MyFontRegular MyFontBold Font Loading beginnt Webfonts fertig gerendert Inspiriert von: http://bramstein.com/
37. KOMPRIMIERUNG
38. DIE FORMATE MIT 
 DER BESTEN KOMPRIMIERUNG WOFF + WOFF2
39. WOFF2 IST DURCHSCHNITTLICH 30% KLEINER ALS WOFF <30%
40. @font-face { font-family: MyFont; src: url('myfont.eot'); src: url('myfont.eot#iefix') format('embedded-opentype'), url('myfont.ttf') format('truetype'), url('myfont.woff') format('woff'), url('myfont.svg#myfont') format('svg'); } @FONT-FACE BISHER
41. @font-face { font-family: MyFont; src: url(myfont.woff2) format(“woff2”), url(myfont.woff) format(“woff”); } @FONT-FACE JETZT Wenn IE8, < 4.4 Android und andere ältere Browser nicht mehr unterstützt werden müssen.
42. @font-face { font-family: MyFont; src: url(myfont.woff2) format(“woff2”), url(myfont.woff) format(“woff”), url(myfont.ttf) format(“truetype”); } @FONT-FACE JETZT Wenn IE8 und andere ältere Browser nicht mehr unterstützt werden müssen.
43. SUBSETTING
44. EIN GUTER WEG, DIE FONTGRÖßE ZU MINIMIEREN Grafik ausgeborgt von:
 https://vimeo.com/145055818
45. ALLE ZEICHEN, DIE NICHT GEBRAUCHT WERDEN, KÖNNEN ENTFERNT WERDEN Grafik ausgeborgt von:
 https://vimeo.com/145055818
46. VORSICHT BEI DER AUSWAHL, NICHT DIE FALSCHEN ZEICHEN ENTFERNEN !
47. Font Loading 100 ms 200 ms 300 ms 400 ms 500 ms 600 ms 700 ms HTML CSS MyFontRegular MyFontBold Font Loading beginnt Webfonts fertig gerendert Inspiriert von: http://bramstein.com/
48. Font Loading 100 ms 200 ms 300 ms 400 ms 500 ms 600 ms 700 ms HTML CSS MyFontRegular MyFontBold Font Loading beginnt Webfonts fertig gerendert Inspiriert von: http://bramstein.com/
49. PRELOAD HINTS
50. <head> <link rel="preload" href="MyFont.woff" as="font" type="font/woff"> <link rel="preload" href="MyFontBold.woff" as="font" type="font/woff"> </head> PRELOAD HINTS
51. Font Loading 100 ms 200 ms 300 ms 400 ms 500 ms 600 ms 700 ms HTML CSS MyFontRegular MyFontBold Font Loading beginnt Webfonts fertig gerendert Inspiriert von: http://bramstein.com/
52. <head> <link rel="preload" href="MyFont.woff" as="font" type="font/woff"> <link rel="preload" href="MyFontBold.woff" as="font" type="font/woff"> </head> PRELOAD HINTS Auch Preload ist so neu und wird auch daweil nur von Chrome und Opera unterstützt.
 Für die Zukunft merken! —> http://caniuse.com/#search=preload https://www.bramstein.com/writing/preload-hints-for-web-fonts.html
53. CSS FONT LOADING API
54. var myFont = new FontFace(‘myfont’, ‘url(MyFont.woff)’); var html = document.documentElement; myFont.load().then(function () { // font is loaded html.classList.add(‘fonts-loaded’); }); CSS FONT LOADING API
55. <p>Text</p> _________________________________________ @font-face { font-family: MyFontRegular; src: url(myfont.woff2) format(“woff2”), url(myfont.woff) format(“woff”); } p { font-family: MyFontRegular, Arial, sans-serif; } EINE WEBFONT WIRD VOM BROWSER RUNTERGELADEN WENN:
56. body { font-family: Arial, sans-serif; } .fonts-loaded body { font-family: MyFont, Arial, sans-serif; } CSS FONT LOADING API
57. FLASH OF UNSTYLED TEXT (FOUT) Meow for food, then when human fills food dish, take a few bites of food and continue meowing hola te quiero i am the best Cat ipsum dolor sit amet, ears back wide eyed, chew foot chase dog then run away. Fall asleep on the washing machine stare out the window i am the best. Asdflkjaert- vlkjasntvkjn (sits on keyboard) stare at wall turn and meow stare at wall some more meow again continue staring fall over dead (not really but gets sypathy). Lick butt and make a weird face cat slap dog in face but eat the fat cats food so meow all night having their mate disturbing sleeping humans and then cats take over the world and howl uncontrollably for no reason yet make Meow for food, then when human fills food dish, take a few bites of food and continue meowing hola te quiero i am the best Cat ipsum dolor sit amet, ears back wide eyed, chew foot chase dog then run away. Fall asleep on the washing machine stare out the window i am the best. Asdflkjaert- vlkjasntvkjn (sits on keyboard) stare at wall turn and meow stare at wall some more meow again continue staring fall over dead (not really but gets sypathy). Lick butt and make a weird face cat slap dog in face but eat the fat cats food so meow all night having their mate disturbing sleeping humans and then cats take over the world and howl uncontrollably for no reason yet make Request Content ladet Webfonts geladen Inspiriert von: http://bramstein.com/
58. DEMO-TIME!
59. CSS Font Loading API Browser-Support Chrome Firefox Safari Opera Android IE9 IE10 IE11 Edge * * in progress
60. FONT FACE OBSERVER
61. var myFont = new FontFaceObserver(‘myfont’, …); myFont.load().then(function () { // font is loaded }); FONT FACE OBSERVER https://fontfaceobserver.com/ von Bram Stein
62. … myFont.load().then(function () { // font is loaded html.classList.add(‘fonts-loaded’); sessionStorage.fontsLoaded = true; }); … OPTIMIERUNG AB DEM 2. RELOAD
63. if (sessionStorage.fontsLoaded) { html.classList.add(‚fonts-loaded’); return; } myFont.load().then(function () { // font is loaded html.classList.add(‘fonts-loaded’); sessionStorage.fontsLoaded = true; }); … OPTIMIERUNG AB DEM 2. RELOAD
64. NIEMALS DEM BROWSER DAS FONTLOADING ÜBERLASSEN 1 USE A FONTLOADING STRATEGY
65. PRELOAD WEB FONT LOADING API FONTFACEOBSERVER … 2 START
 LOADING WEBFONTS AS FAST AS POSSIBLE
66. WOFF + WOFF2 GUTE KOMPRIMIERUNG SUBSETTING 3 LOAD
 SMALL WEBFONTS
67. WEBSITES SOLLEN IMMER AUCH OHNE WEBFONTS FUNKTIONIEREN 4 WEBFONTS ARE ENHANCEMENT
68. UND WEITER?
69. Sehr coolen Talk von Zach Leat ansehen
70. Sehr coolen Talk von Bram Stein ansehen
71. LINKS • http://bramstein.com/ • https://fontfaceobserver.com/ • https://vimeo.com/168474761 • https://speakerdeck.com/bramstein/web-fonts-performance-1 • http://bramstein.com/writing/web-font-loading-patterns.html • https://www.zachleat.com/web/ • https://vimeo.com/145055818 • https://vimeo.com/118908533 • https://helloanselm.com/2015/using-webfonts-in-2015/ • https://www.bramstein.com/writing/preload-hints-for-web-fonts.html • https://matuzo.at/webfont-performance/
72. VIELEN DANK! VIRTUE Austria GmbH Lothringerstraße 2/2 1040 Wien Österreich www.virtue.at