Web Fonts and Performance

649e3d33ce29a5e6bb4ff3025c6aaffa?s=47 Ianfeather
May 31, 2013
30

Web Fonts and Performance

649e3d33ce29a5e6bb4ff3025c6aaffa?s=128

Ianfeather

May 31, 2013
Tweet

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