Fel presentation
-
Upload
ianfeather -
Category
Documents
-
view
1.570 -
download
0
description
Transcript of Fel presentation
Web Fonts vs Web Performance
@ianfeather - Front End London, May 2013
Friday, 31 May 13
Friday, 31 May 13
Friday, 31 May 13
Friday, 31 May 13
Friday, 31 May 13
Friday, 31 May 13
How Critical is Critical?
Friday, 31 May 13
Friday, 31 May 13
Friday, 31 May 13
Why are fonts critical?
• FOUT, what is it?
• Where did it come from?
• How big a deal is it?
Friday, 31 May 13
The Browser
• Leverage them!
• They do your work for you
• But... you don’t always have to agree with them
Friday, 31 May 13
“...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
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 ~ 2009https://code.google.com/p/chromium/issues/detail?id=235303 ~ 2013
Friday, 31 May 13
What are our options?
Friday, 31 May 13
Font Serving Services
• JS Options e.g. Typekit
• Google Web Font Loaderhttp://www.slideshare.net/clagnut/responsive-web-fonts
• Self hosted
Friday, 31 May 13
What’s in a font?
TypeTool, Font Forge, Glyphs & Glyphs MiniFriday, 31 May 13
Subset your font
Don’t forget the LegalsFriday, 31 May 13
Add Icons
Friday, 31 May 13
Choose your weapon
Friday, 31 May 13
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
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
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
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
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
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
Which is difficult if you’ve added icons...
Friday, 31 May 13
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
Thanks, any questions?
Friday, 31 May 13