Web Fonts Performance

A6ab7669f1496fb8df8197f55ec6f390?s=47 Bram Stein
September 14, 2015

Web Fonts Performance

Web fonts are great. They are also be really bad for front-end performance because they block rendering. You may have experienced this on a slow cellular network. Staring at a blank page is no fun, especially when the content has already loaded.

This talk explores why browser have placed fonts on the critical path, and how we can work around this while still delivering a good user experience. It also takes a look at what the future will bring to web font performance: preloading hints, the font-display property, and HTTP/2.

A6ab7669f1496fb8df8197f55ec6f390?s=128

Bram Stein

September 14, 2015
Tweet

Transcript

  1. Web Fonts Performance @bram_stein

  2. 25% 50% 75% 2012 2013 2014 2015 Web Font Usage

    Source: HTTP Archive
  3. 1 2 3 2012 2013 2014 2015 Font Requests Source:

    HTTP Archive
  4. 30kB 60kB 90kB 120kB 2012 2013 2014 2015 Font Size

    Source: HTTP Archive
  5. 300kB of web fonts (2.8 × 107kB)

  6. @font-face { font-family: Elena; src: url(font.woff2) format(“woff2”), url(font.woff) format(“woff”); }

  7. A web font is only downloaded when it is used

    in a CSS selector that matches a DOM connected node.
  8. <p>Hello!</p> @font-face { font-family: Elena; src: url(font.woff2) format(“woff2”), url(font.woff) format(“woff”);

    }
  9. <p>Hello!</p> @font-face { font-family: Elena; src: url(font.woff2) format(“woff2”), url(font.woff) format(“woff”);

    } p { font-family: Elena, Georgia, serif; }
  10. Regular.woff Bold.woff Italic.woff Lazy loading of fonts Home About Products

    Stores
  11. Regular.woff Bold.woff Italic.woff Lazy loading of fonts Home About Products

    Stores
  12. Regular.woff Bold.woff Italic.woff Lazy loading of fonts Home About Products

    Stores
  13. @font-face { font-family: Font A; src: url(fonta.woff); } @font-face {

    font-family: Font B; src: url(fontb.woff); } Font Loading
  14. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Font Loading 400 MS HTML FONT A FONT B HTML
  15. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Font Loading 400 MS HTML FONT A FONT B CSS
  16. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Font Loading 400 MS HTML FONT A FONT B CSS
  17. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS font loading starts Font Loading 400 MS HTML FONT A FONT B CSS FONT A FONT B
  18. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS font loading starts Font Loading 400 MS HTML FONT A FONT B font a is rendered CSS FONT B
  19. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS font loading starts Font Loading 400 MS HTML FONT A FONT B web fonts are rendered CSS
  20. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS font loading starts Font Loading 400 MS HTML FONT A web fonts are rendered FONT B CSS
  21. FOUT versus FOIT Flash Of (Unstyled|Invisible) Text

  22. example.com In olden times when wishing still helped one, there

    lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the water. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales
  23. A

  24. A

  25. example.com A

  26. example.com In olden times when wishing still helped one, there

    lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the water. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales Loading example.com A
  27. example.com In olden times when wishing still helped one, there

    lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the water. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales A
  28. B

  29. B

  30. example.com B

  31. example.com Loading example.com B

  32. example.com In olden times when wishing still helped one, there

    lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the water. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales B
  33. ?

  34. A

  35. A

  36. example.com A

  37. example.com In olden times when wishing still helped one, there

    lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it The Frog King, or Iron Henry The Brothers Grimm, Grimm’s Household Tales A
  38. example.com In olden times when wishing still helped one, there

    lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it The Frog King, or Iron Henry The Brothers Grimm, Grimm’s Household Tales A
  39. B

  40. B

  41. example.com B

  42. example.com B

  43. example.com In olden times when wishing still helped one, there

    lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it The Frog King, or Iron Henry The Brothers Grimm, Grimm’s Household Tales B
  44. ?

  45. request content content loads web fonts load In olden times

    when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales Flash Of Unstyled Text (FOUT) Flash Of Invisible Text (FOIT) request content content loads web fonts load
  46. Chrome Firefox Safari Opera IE9 IE10 IE11 Edge FOIT FOIT

    FOIT FOIT FOUT FOUT FOUT FOUT FOUT versus FOIT
  47. Chrome Firefox Safari Opera IE9 IE10 IE11 Edge FOIT FOIT

    FOIT FOIT FOUT FOUT FOUT FOUT 3 sec. 3 sec. ∞ 3 sec. n/a n/a n/a n/a FOUT versus FOIT
  48. FOUT is progressive enhancement

  49. Flash Of Fallback Text (FOFT — for the acronym lovers)

  50. CSS font-display (coming soon)

  51. @font-face { font-family: My Font; src: url(myfont.woff); font-display: auto|block|swap|fallback|optional; }

    CSS font-display
  52. @font-face { … font-display: block; } CSS font-display In olden

    times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales request page start loading web fonts web fonts loaded
  53. CSS font-display In olden times when wishing still helped one,

    there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales request page start loading web fonts web fonts loaded In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales @font-face { … font-display: swap; }
  54. CSS font-display In olden times when wishing still helped one,

    there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales request page start loading web fonts web fonts loaded In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales @font-face { … font-display: fallback; /* load inside timeout */ }
  55. CSS font-display request page start loading web fonts web fonts

    loaded In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales @font-face { … font-display: fallback; /* load outside timeout */ } In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales
  56. CSS font-display request page start loading web fonts web fonts

    loaded In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales @font-face { … font-display: optional; /* uncached */ } In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales
  57. CSS font-display request page web fonts loaded @font-face { …

    font-display: optional; /* cached */ } In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales
  58. No browser support? Use JavaScript.

  59. Web Font Loader github.com/typekit/webfontloader

  60. .wf-loading { /* styles to use when web fonts are

    loading */ } .wf-active { /* styles to use when web fonts are active */ } .wf-inactive { /* styles to use when web fonts are inactive */ } Web Font Loader
  61. Font Face Observer github.com/bramstein/fontfaceobserver github.com/bramstein/fontfaceobserver

  62. var elena = new FontFaceObserver(‘Elena’); elena.check().then(function () { // font

    is loaded }); Font Face Observer
  63. CSS Font Loading API w3.org/TR/css-font-loading

  64. var font = new FontFace(‘Elena’, ‘url(font.woff)’); font.load().then(function () { //

    font is loaded }); CSS Font Loading API
  65. IE9 IE10 IE11 Edge Chrome Firefox Safari Opera Android No

    No No No Yes No† No* Yes No CSS Font Loading API † In progress * Almost in progress
  66. Dealing with the Flash

  67. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Faster Loading 400 MS HTML FONT A FONT B font loading starts + fallback fonts render font events fire + web fonts render CSS
  68. Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B
  69. Compression WOFF + WOFF2. Done.

  70. @font-face { font-family: My Family; src: url(myfont.woff2) format(“woff2”), url(myfont.woff) format(“woff”);

    } New bulletproof @font-face
  71. Subsetting

  72. A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z À Á Â Ã Ä Ā Ă Å Ǻ Ą Æ Ǽ Ć Ĉ Č Ċ Ç Ď Đ È É Ê Ě Ë Ē Ĕ Ė Ę Ĝ Ğ Ġ Ģ Ĥ Ħ Ì Í Î Ĩ Ï Ī Ĭ İ Į IJ Ĵ Ķ Ĺ Ľ Ļ Ŀ Ł Ń Ň Ñ Ņ Ò Ó Ô Õ Ö Ō Ŏ Ő Ø Ǿ Œ Ŕ Ř Ŗ Ś Ŝ Š Ş Ș Ť Ţ Ŧ Ù Ú Û Ũ Ü Ū Ŭ Ů Ű Ų Ẁ Ẃ Ŵ Ẅ Ỳ Ý Ŷ Ÿ Ź Ž Ż Ŋ Ð Þ a b c d e f g h i j k l m n o p q r s t u v w x y z à á â ã ä ā ă å ǻ ą æ ǽ ć ĉ č ċ ç ď đ è é ê ě ë ē ĕ ė ę ĝ ğ ġ ģ ĥ ħ ì í î ĩ ï ī ĭ į ij ı ȷ ĵ ķ ĸ ĺ ľ ļ ŀ ł ń ň ñ ņ ʼn ò ó ô õ ö ō ŏ ő ø ǿ œ ŕ ŗ ř ś ŝ š ş ș ß ſ ť ţ ŧ ù ú û ũ ü ū ŭ ů ű ų ẁ ẃ ŵ ẅ ỳ ý ŷ ÿ ź ž ż ŋ ð þ ff fi ffi fl ffl & ` ´ ˆ ˇ ˜ ¨ ¯ ˘ ˚ ˝ ˙ ¸ ˛ , ; : 0 … ! ¡ ? ¿ “ ” „ ‹ › « » / | - – — • · ( ) [ ] { } * † ‡ § ¶ ^ ~ ¦ \ _ @ © ® ™ ¤ € $ ¢ £ ƒ ¥ ª º ° # 0 1 2 3 4 5 6 7 8 9 ¹ ² ³ ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ μ ¬ Δ Ω π ∞ ∂ ∫ √
  73. A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z À Á Â Ã Ä Ā Ă Å Ǻ Ą Æ Ǽ Ć Ĉ Č Ċ Ç Ď Đ È É Ê Ě Ë Ē Ĕ Ė Ę Ĝ Ğ Ġ Ģ Ĥ Ħ Ì Í Î Ĩ Ï Ī Ĭ İ Į IJ Ĵ Ķ Ĺ Ľ Ļ Ŀ Ł Ń Ň Ñ Ņ Ò Ó Ô Õ Ö Ō Ŏ Ő Ø Ǿ Œ Ŕ Ř Ŗ Ś Ŝ Š Ş Ș Ť Ţ Ŧ Ù Ú Û Ũ Ü Ū Ŭ Ů Ű Ų Ẁ Ẃ Ŵ Ẅ Ỳ Ý Ŷ Ÿ Ź Ž Ż Ŋ Ð Þ a b c d e f g h i j k l m n o p q r s t u v w x y z à á â ã ä ā ă å ǻ ą æ ǽ ć ĉ č ċ ç ď đ è é ê ě ë ē ĕ ė ę ĝ ğ ġ ģ ĥ ħ ì í î ĩ ï ī ĭ į ij ı ȷ ĵ ķ ĸ ĺ ľ ļ ŀ ł ń ň ñ ņ ʼn ò ó ô õ ö ō ŏ ő ø ǿ œ ŕ ŗ ř ś ŝ š ş ș ß ſ ť ţ ŧ ù ú û ũ ü ū ŭ ů ű ų ẁ ẃ ŵ ẅ ỳ ý ŷ ÿ ź ž ż ŋ ð þ ff fi ffi fl ffl & ` ´ ˆ ˇ ˜ ¨ ¯ ˘ ˚ ˝ ˙ ¸ ˛ , ; : 0 … ! ¡ ? ¿ “ ” „ ‹ › « » / | - – — • · ( ) [ ] { } * † ‡ § ¶ ^ ~ ¦ \ _ @ © ® ™ ¤ € $ ¢ £ ƒ ¥ ª º ° # 0 1 2 3 4 5 6 7 8 9 ¹ ² ³ ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ μ ¬ Δ Ω π ∞ ∂ ∫ √
  74. Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B
  75. Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B
  76. Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B ~30ms faster
  77. Latency is the real performance killer

  78. None
  79. None
  80. Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B ~30ms faster
  81. Faster Loading 500 MS 600 MS 700 MS 400 MS

    CONNECT WAIT TRANSFER CONNECT WAIT TRANSFER FONT A FONT B ~90ms faster
  82. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Faster Loading 400 MS HTML FONT A FONT B font loading starts web fonts render CSS
  83. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Faster Loading 400 MS HTML FONT A FONT B font loading starts web fonts render CSS
  84. Lazy loading is bad (For web fonts)

  85. Preload instructions (Also coming soon)

  86. <head> … <link rel=“preload” href=“font.woff” as=“font”> </head> Link: <font.woff>; rel=preload;

    as=font Preload
  87. Preload <head> … <link rel=“preload” href=“font.woff” as=“font”> </head> Link: <font.woff>;

    rel=preload; as=font
  88. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Preload 400 MS HTML FONT A FONT B font loading starts web fonts render CSS
  89. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Preload 400 MS HTML FONT A FONT B font loading starts web fonts render CSS
  90. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Preload 400 MS HTML FONT A FONT B font loading starts web fonts render ~270ms faster CSS
  91. <head> … <link rel=“prefetch” href=“font.woff”> </head> Link: <font.woff>; rel=prefetch Prefetch

  92. IE9 IE10 IE11 Edge Chrome Firefox Safari Opera Android No

    No Yes Yes Yes Yes No Yes Yes Prefetch browser support
  93. HTTP/2 server push

  94. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Preload 400 MS HTML FONT A FONT B font loading starts web fonts render CSS
  95. IE9 IE10 IE11 Edge Chrome Firefox Safari Opera Android No

    No Yes† Yes Yes Yes No* Yes No HTTP/2 browser support † Only in Windows 10 * HTTP/2 support is coming in Safari 9 Warn that this should only be used for your most important content.
  96. Critical CSS fonts

  97. web font anti-patterns (it seemed like a good idea at

    the time…)
  98. Using web fonts (for everything)

  99. None
  100. inlining fonts (OMG… it’s full of base64)

  101. @font-face { font-family: My Family; font-weight: 400; src: url(data:font/opentype;base64,d09GRgABA…); }

    @font-face { font-family: My Family; font-weight: 600; src: url(data:font/opentype;base64,d09GRgABA…); } … Inlining Fonts
  102. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Inlining Fonts 400 MS HTML FONT A FONT B CSS FONT C
  103. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Inlining Fonts 400 MS HTML FONT A + FONT B + FONT C FONT B CSS FONT C
  104. Benefits • Avoids HTTP overhead

  105. Downsides • Breaks parallel downloads • Only supports a single

    font format • No progressive rendering • Caching
  106. Reimplement caching (Guardian & Smashing Magazine)

  107. if (localStorage.fonts) { insertStylesheet(localStorage.fonts); } else { var request =

    new XMLHttpRequest(); request.open(‘GET’, ‘myfonts.css’); request.onload = function () { var fonts = request.responseText; localStorage.fonts = fonts; insertStylesheet(fonts); }; request.send(); }
  108. Benefits • Fonts are requested once • Avoids lazy loading

    • Avoids FOUT/FOIT in most browsers • Optimises for frequent visitors
  109. Downsides • Same downsides as inlining • Pollutes localStorage of

    casual visitors • Custom cache mechanism • Licensing
  110. Keep it simple (but not stupid)

  111. @font-face { font-family: My Family; font-weight: 400; src: url(myfamily.woff2) format(“woff2”),

    url(myfamily.woff) format(“woff”); } body { font-family: sans-serif; } .fonts-loaded body { font-family: My Family, sans-serif; }
  112. <script> (function(){'use strict';function h(a){document.body?… </script> <script> var myfamily = new

    FontFaceObserver(‘My Family’); myfamily.check().then(function () { var html = document.documentElement; html.classList.add(‘fonts-loaded’); }); </script>
  113. Benefits • Fonts load as soon as possible • Consistent

    FOUT in all browsers • Re-use the browser cache • Support multiple formats • Fonts are downloaded in parallel
  114. Downsides • Requires a (little) bit of code • FOUT

    on each request
  115. <script> var myfamily = new FontFaceObserver(‘My Family’); myfamily.check().then(function () {

    var html = document.documentElement; html.classList.add(‘fonts-loaded’); sessionStorage.fontsloaded = true; }); </script>
  116. <script> if (sessionStorage.fontsloaded) { var html = document.documentElement; html.classList.add(‘fonts-loaded’); }

    </script>
  117. Downsides • Requires a (little) bit of code • FOUT

    on each request
  118. font loading strategy 1

  119. optimise start & load 2

  120. fonts are enhancement 3

  121. Web Fonts Performance @bram_stein https://www.bramstein.com FF Enzo by Tobias Kvant

    Source Code Pro by Paul D. Hunt