Tweet
Tweet

Slide 1

Slide 1 text

WEBFONT PERFORMANCE @meineartfeder | Webclerks Meetup | 15.06.2016 | Vienna

Slide 2

Slide 2 text

FRANZISKA EDER @meineartfeder

Slide 3

Slide 3 text

Front End Developer
 @VirtueAustria

Slide 4

Slide 4 text

#webfontperformance #perfmatters #smashingconf #barcelona

Slide 5

Slide 5 text

DER WEBSEITEN VERWENDEN WEBFONTS 60% von den Top 1000 Websites. 2010 waren es noch 0% 60%

Slide 6

Slide 6 text

WEBFONTS WERDEN DURCHSCHNITTLICH PRO SEITE GELADEN 3

Slide 7

Slide 7 text

AN WEBFONTS WERDEN DURCHSCHNITTLICH RUNTERGELADEN 200KB BIS 400KB Je nach Quelle zwischen 200KB und 400KB

Slide 8

Slide 8 text

WEBFONTS ARE RENDERBLOCKING

Slide 9

Slide 9 text

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/

Slide 10

Slide 10 text

Bad Webfont Loading Example Ausgeborgt von:
 https://vimeo.com/145055818

Slide 11

Slide 11 text

Bad Webfont Loading Example Ausgeborgt von:
 https://vimeo.com/145055818

Slide 12

Slide 12 text

Bad Webfont Loading Example Ausgeborgt von:
 https://vimeo.com/145055818

Slide 13

Slide 13 text

ICH HABE DA SCHON 
 WAS VORBEREITET ;)

Slide 14

Slide 14 text

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/

Slide 15

Slide 15 text

FOUT IS PROGRESSIVE ENHANCEMENT

Slide 16

Slide 16 text

FOIT vs. FOUT Chrome Firefox Safari Opera IE9 IE10 IE11 Edge FOIT FOIT FOIT FOIT FOUT FOUT FOUT FOUT

Slide 17

Slide 17 text

Chrome Firefox Safari Opera IE9 IE10 IE11 Edge FOIT FOIT FOIT FOIT FOUT FOUT FOUT FOUT FOIT vs. FOUT

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

„BROWSERS SHOULD NOT HIDE THE TEXT“ Bram Stein

Slide 20

Slide 20 text

IF NOT USED NOT DOWNLOADED

Slide 21

Slide 21 text

A WEBFONT IS ONLY DOWNLOADED WHEN IT IS USED IN A CSS SELECTOR THAT MATCHES A DOM CONNECTED NODE.

Slide 22

Slide 22 text

Text

_________________________________________ @font-face { font-family: MyFontRegular; src: url(myfont.woff2) format(“woff2”), url(myfont.woff) format(“woff”); } EINE WEBFONT WIRD NICHT VOM BROWSER RUNTERGELADEN WENN:

Slide 23

Slide 23 text

Text

_________________________________________ @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:

Slide 24

Slide 24 text

Text

Chrome, Opera, Safari, Android-Browser laden die Webfont MIT Content runter Firefox, IE, Edge laden die Webfont OHNE Content runter

Slide 25

Slide 25 text

Font Loading 100 ms 200 ms 300 ms 400 ms 500 ms 600 ms 700 ms HTML Inspiriert von: http://bramstein.com/

Slide 26

Slide 26 text

Font Loading 100 ms 200 ms 300 ms 400 ms 500 ms 600 ms 700 ms HTML CSS Inspiriert von: http://bramstein.com/

Slide 27

Slide 27 text

Text

_________________________________________ @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:

Slide 28

Slide 28 text

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/

Slide 29

Slide 29 text

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/

Slide 30

Slide 30 text

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/

Slide 31

Slide 31 text

Bad Webfont Loading Example

Slide 32

Slide 32 text

Bad Webfont Loading Example

Slide 33

Slide 33 text

CSS FONT-DISPLAY

Slide 34

Slide 34 text

@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

Slide 35

Slide 35 text

@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!

Slide 36

Slide 36 text

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/

Slide 37

Slide 37 text

KOMPRIMIERUNG

Slide 38

Slide 38 text

DIE FORMATE MIT 
 DER BESTEN KOMPRIMIERUNG WOFF + WOFF2

Slide 39

Slide 39 text

WOFF2 IST DURCHSCHNITTLICH 30% KLEINER ALS WOFF <30%

Slide 40

Slide 40 text

@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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

SUBSETTING

Slide 44

Slide 44 text

EIN GUTER WEG, DIE FONTGRÖßE ZU MINIMIEREN Grafik ausgeborgt von:
 https://vimeo.com/145055818

Slide 45

Slide 45 text

ALLE ZEICHEN, DIE NICHT GEBRAUCHT WERDEN, KÖNNEN ENTFERNT WERDEN Grafik ausgeborgt von:
 https://vimeo.com/145055818

Slide 46

Slide 46 text

VORSICHT BEI DER AUSWAHL, NICHT DIE FALSCHEN ZEICHEN ENTFERNEN !

Slide 47

Slide 47 text

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/

Slide 48

Slide 48 text

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/

Slide 49

Slide 49 text

PRELOAD HINTS

Slide 50

Slide 50 text

PRELOAD HINTS

Slide 51

Slide 51 text

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/

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

CSS FONT LOADING API

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Text

_________________________________________ @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:

Slide 56

Slide 56 text

body { font-family: Arial, sans-serif; } .fonts-loaded body { font-family: MyFont, Arial, sans-serif; } CSS FONT LOADING API

Slide 57

Slide 57 text

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/

Slide 58

Slide 58 text

DEMO-TIME!

Slide 59

Slide 59 text

CSS Font Loading API Browser-Support Chrome Firefox Safari Opera Android IE9 IE10 IE11 Edge * * in progress

Slide 60

Slide 60 text

FONT FACE OBSERVER

Slide 61

Slide 61 text

var myFont = new FontFaceObserver(‘myfont’, …); myFont.load().then(function () { // font is loaded }); FONT FACE OBSERVER https://fontfaceobserver.com/ von Bram Stein

Slide 62

Slide 62 text

… myFont.load().then(function () { // font is loaded html.classList.add(‘fonts-loaded’); sessionStorage.fontsLoaded = true; }); … OPTIMIERUNG AB DEM 2. RELOAD

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

NIEMALS DEM BROWSER DAS FONTLOADING ÜBERLASSEN 1 USE A FONTLOADING STRATEGY

Slide 65

Slide 65 text

PRELOAD WEB FONT LOADING API FONTFACEOBSERVER … 2 START
 LOADING WEBFONTS AS FAST AS POSSIBLE

Slide 66

Slide 66 text

WOFF + WOFF2 GUTE KOMPRIMIERUNG SUBSETTING 3 LOAD
 SMALL WEBFONTS

Slide 67

Slide 67 text

WEBSITES SOLLEN IMMER AUCH OHNE WEBFONTS FUNKTIONIEREN 4 WEBFONTS ARE ENHANCEMENT

Slide 68

Slide 68 text

UND WEITER?

Slide 69

Slide 69 text

Sehr coolen Talk von Zach Leat ansehen

Slide 70

Slide 70 text

Sehr coolen Talk von Bram Stein ansehen

Slide 71

Slide 71 text

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/

Slide 72

Slide 72 text

VIELEN DANK! VIRTUE Austria GmbH Lothringerstraße 2/2 1040 Wien Österreich www.virtue.at