Web Fonts and Performance

Transcript

1. Web Fonts vs Web Performance @ianfeather - Front End London, May 2013 Friday, 31 May 13
2. Friday, 31 May 13
3. Friday, 31 May 13
4. Friday, 31 May 13
5. Friday, 31 May 13
6. Friday, 31 May 13
7. How Critical is Critical? Friday, 31 May 13
8. Friday, 31 May 13
9. Friday, 31 May 13
10. Why are fonts critical? • FOUT, what is it? • Where did it come from? • How big a deal is it? Friday, 31 May 13
11. The Browser • Leverage them! • They do your work for you • But... you don’t always have to agree with them Friday, 31 May 13
12. “...user agents may render text as it would be rendered if downloadable font resources are not available or they may render text transparently with fallback fonts to avoid a flash of text using a fallback font.” The Spec In cases where the font download fails user agents must display text, simply leaving transparent text is considered non-conformant behavior.” Friday, 31 May 13
13. The Implementation IE FF Chrome, Safari, Opera (2.15) Text rendered immediately then repainted later Invisible Text 3s Timeout Invisible Text No Timeout PS. They’re working on it... https://bugs.webkit.org/show_bug.cgi?id=25207 ~ 2009 https://code.google.com/p/chromium/issues/detail?id=235303 ~ 2013 Friday, 31 May 13
14. What are our options? Friday, 31 May 13
15. Font Serving Services • JS Options e.g. Typekit • Google Web Font Loader http://www.slideshare.net/clagnut/responsive-web-fonts • Self hosted Friday, 31 May 13
16. What’s in a font? TypeTool, Font Forge, Glyphs & Glyphs Mini Friday, 31 May 13
17. Subset your font Don’t forget the Legals Friday, 31 May 13
18. Add Icons Friday, 31 May 13
19. Choose your weapon Friday, 31 May 13
20. Implementation Techniques (On & Off the Critical Path) 1. Synchronous, external 2. Synchronous, inline 3. Simple async solution 4. Local Storage async 5. Async and defer to 2nd page Friday, 31 May 13
21. Synchronous, external @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } http://www.fontsquirrel.com/tools/webfont-generator Friday, 31 May 13
22. Synchronous, inline • WOFF can be base64 encoded and inlined. • Slower perceived speed • Don’t serve it to IE! <!--[if (gt IE 8) | (IEMobile)]><!--> <link href="common_core_with_base64.css" media="all" rel="stylesheet" type="text/css" /> <!--<![endif]--> <!--[if (lt IE 9) & (!IEMobile)]> <link href="common_core_without_base64.css" media="all" rel="stylesheet" type="text/css" /> <![endif]--> Friday, 31 May 13
23. Simple Async var f, x; x = document.getElementsByTagName("script")[0]; f = window.document.createElement("link"); f.rel = "stylesheet"; f.href = "#{asset_path("woff.css")}"; window.setTimeout(function(){ x.parentNode.insertBefore(f, x); },0) • Don’t forget to factor in non-woff versions Friday, 31 May 13
24. Local Storage Async • Uses the browser Local Storage rather than HTTP Cache • A solution by the Guardian Team (https:// github.com/guardian/frontend/blob/master/common/app/ assets/javascripts/modules/fonts.js) • Loads the font with (well controlled) FOUT Friday, 31 May 13
25. Async & Defer // HEADER if fonts_are_cached do <link href=”woff.css” rel=”stylesheet” /> end // FOOTER if !fonts_are_cached do <script> // Load in custom fonts $.ajax({ url: '#{asset_path("woff.css")}', success: function () { // Set cookie } }); </script> end Read more: http://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/ Friday, 31 May 13
26. Which is difficult if you’ve added icons... Friday, 31 May 13
27. What next? • Client hints, connectionType and its blatant misuse • Browsers giving authors the option of how to render a custom font Friday, 31 May 13
28. Thanks, any questions? Friday, 31 May 13