Fel presentation

3,296 views

Published on

Fel presentation

  1. 1. Web Fonts vs WebPerformance@ianfeather - Front End London, May 2013Friday, 31 May 13
  2. 2. Friday, 31 May 13
  3. 3. Friday, 31 May 13
  4. 4. Friday, 31 May 13
  5. 5. Friday, 31 May 13
  6. 6. Friday, 31 May 13
  7. 7. How Critical isCritical?Friday, 31 May 13
  8. 8. Friday, 31 May 13
  9. 9. Friday, 31 May 13
  10. 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. 11. The Browser• Leverage them!• They do your work for you• But... you don’t always have to agree withthemFriday, 31 May 13
  12. 12. “...user agents may render text as it would berendered if downloadable font resources are notavailable or they may render text transparently withfallback fonts to avoid a flash of text using a fallbackfont.”The SpecIn cases where the font download fails user agentsmust display text, simply leaving transparent text isconsidered non-conformant behavior.”Friday, 31 May 13
  13. 13. The ImplementationIE FFChrome, Safari,Opera (2.15)Text renderedimmediately thenrepainted laterInvisible Text3s TimeoutInvisible TextNo TimeoutPS.They’re working on it...https://bugs.webkit.org/show_bug.cgi?id=25207 ~ 2009https://code.google.com/p/chromium/issues/detail?id=235303 ~ 2013Friday, 31 May 13
  14. 14. What are our options?Friday, 31 May 13
  15. 15. Font Serving Services• JS Options e.g.Typekit• Google Web Font Loaderhttp://www.slideshare.net/clagnut/responsive-web-fonts• Self hostedFriday, 31 May 13
  16. 16. What’s in a font?TypeTool, Font Forge, Glyphs & Glyphs MiniFriday, 31 May 13
  17. 17. Subset your fontDon’t forget the LegalsFriday, 31 May 13
  18. 18. Add IconsFriday, 31 May 13
  19. 19. Choose your weaponFriday, 31 May 13
  20. 20. Implementation Techniques(On & Off the Critical Path)1. Synchronous, external2. Synchronous, inline3. Simple async solution4. Local Storage async5. Async and defer to 2nd pageFriday, 31 May 13
  21. 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-generatorFriday, 31 May 13
  22. 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. 23. Simple Asyncvar 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 versionsFriday, 31 May 13
  24. 24. Local Storage Async• Uses the browser Local Storage rather thanHTTP 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) FOUTFriday, 31 May 13
  25. 25. Async & Defer// HEADERif fonts_are_cached do<link href=”woff.css” rel=”stylesheet” />end// FOOTERif !fonts_are_cached do<script>// Load in custom fonts$.ajax({url: #{asset_path("woff.css")},success: function () {// Set cookie}});</script>endRead more: http://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/Friday, 31 May 13
  26. 26. Which is difficult if you’veadded icons...Friday, 31 May 13
  27. 27. What next?• Client hints, connectionType and its blatantmisuse• Browsers giving authors the option of howto render a custom fontFriday, 31 May 13
  28. 28. Thanks, anyquestions?Friday, 31 May 13

×