Pro Yearly is on sale from $80 to $50! »

Web Fonts Performance

Web Fonts Performance

Web fonts are great. They are also be really bad for 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 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. We’ll also take a look at what the future will bring to web font performance: preloading hints and the new font-display property.

A6ab7669f1496fb8df8197f55ec6f390?s=128

Bram Stein

April 01, 2016
Tweet

Transcript

  1. Web Fonts Performance @bram_stein

  2. 60% use web fonts

  3. 400kB of web fonts

  4. 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
  5. A

  6. A

  7. example.com A

  8. 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
  9. 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
  10. B

  11. B

  12. example.com B

  13. example.com Loading example.com B

  14. 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
  15. ?

  16. A

  17. A

  18. example.com A

  19. 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
  20. 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
  21. B

  22. B

  23. example.com B

  24. example.com B

  25. 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
  26. ?

  27. 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
  28. Chrome Firefox Safari Opera IE9 IE10 IE11 Edge FOIT FOIT

    FOIT FOIT FOUT FOUT FOUT FOUT FOUT versus FOIT
  29. 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
  30. FOUT is progressive enhancement

  31. Flash Of Fallback Text

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

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

    }
  34. <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; }
  35. Regular.woff Bold.woff Italic.woff Lazy loading of fonts Home About Products

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

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

    Stores
  38. 100 MS 200 MS 300 MS 500 MS 600 MS

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

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

    700 MS Font Loading 400 MS HTML FONT A FONT B CSS
  41. 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
  42. 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
  43. 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
  44. 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
  45. @font-face { font-family: Elena; src: url(elena.woff); font-display: auto|block|swap|fallback|optional; } CSS

    font-display
  46. @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
  47. 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; }
  48. 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; }
  49. 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; /* empty cache */ } 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
  50. CSS font-display request page web fonts loaded @font-face { …

    font-display: optional; /* fonts in cache */ } 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
  51. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Font Loading 400 MS HTML FONT A FONT B CSS font loading starts web fonts are rendered
  52. Compression WOFF + WOFF2

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

    } Simplified @font-face
  54. Subsetting

  55. 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 ¹ ² ³ ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ μ ¬ Δ Ω π ∞ ∂ ∫ √
  56. 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 ¹ ² ³ ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ μ ¬ Δ Ω π ∞ ∂ ∫ √
  57. 100 MS 200 MS 300 MS 500 MS 600 MS

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

    700 MS Font Loading 400 MS HTML FONT A FONT B CSS FONT A FONT B font loading starts web fonts are rendered
  59. Lazy loading is bad (for web fonts)

  60. Preload instructions

  61. Preload <head> … <link rel=“preload” href=“elena.woff” as=“font” type=“font/woff”> </head> Link:

    <elena.woff>; rel=preload; as=font; type=‘font/woff’
  62. Preload <head> … <link rel=“preload” href=“elena.woff” as=“font” type=“font/woff”> </head> Link:

    <elena.woff>; rel=preload; as=font; type=‘font/woff’
  63. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS Preload 400 MS HTML font loading starts CSS FONT A FONT B web fonts are rendered
  64. 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
  65. 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
  66. No browser support? Use JavaScript.

  67. CSS Font Loading API w3.org/TR/css-font-loading

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

    Elena has loaded. }); CSS Font Loading API
  69. font loading patterns

  70. grouping fonts

  71. var normal = new FontFace(‘Output Sans’, …); var italic =

    new FontFace(‘Output Sans’, …); Promise.all([ normal.load(), italic.load() ]).then(function () { // Output Sans regular and italic loaded. });
  72. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS font loading starts 400 MS NORMAL ITALIC Output Sans regular and italic loaded.
  73. loading with timeout

  74. function timer(time) { return new Promise(function (resolve, reject) { setTimeout(reject,

    time); }); }
  75. var elena = new FontFace(‘Elena’, ‘url(elena.woff)’); Promise.race([ timer(300), elena.load() ]).then(function

    () { // Elena has loaded. }).catch(function () { // Elena failed to load or timed out. });
  76. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS font loading starts 400 MS ELENA TIMER Elena has loaded.
  77. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS font loading starts 400 MS ELENA Timeout TIMER
  78. prioritised loading

  79. var primary = new FontFace(‘Primary Font’, …); var secondary =

    new FontFace(‘Secondary Font’, …); primary.load().then(function () { // Primary font has loaded secondary.load().then(function () { // Secondary font has loaded }); });
  80. 100 MS 200 MS 300 MS 500 MS 600 MS

    700 MS font loading starts 400 MS PRIMARY SECONDARY Primary font has loaded. Secondary font has loaded.
  81. font display

  82. var elena = new FontFace(‘Elena’, ‘url(elena.woff)’); var html = document.documentElement;

    html.classList.add(‘fonts-loading’); elena.load().then(function () { html.classList.remove(‘fonts-loading’); html.classList.add(‘fonts-loaded’); }).catch(function () { html.classList.remove(‘fonts-loading’); html.classList.add(‘fonts-failed’); });
  83. body { font-family: sans-serif; } .fonts-loaded body { font-family: Elena,

    sans-serif; } font-display: swap
  84. font-display: block .fonts-loading body { visibility: hidden; } .fonts-loaded body,

    .fonts-failed body { visibility: visible; }
  85. optimising cached experience

  86. Optimising cached experience … elena.load().then(function () { html.classList.remove(‘fonts-loading’); html.classList.add(‘fonts-loaded’); sessionStorage.fontsLoaded

    = true; }).catch(function () { … });
  87. if (sessionStorage.fontsloaded) { var html = document.documentElement; html.classList.add(‘fonts-loaded’); } Optimising

    cached experience
  88. www.bramstein.com/writing/ web-font-loading-patterns.html

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

    No No No Yes Yes No* Yes Yes CSS Font Loading API * In progress
  90. Font Face Observer fontfaceobserver.com fontfaceobserver.com

  91. var elena = new FontFaceObserver(‘Elena’, …); elena.load().then(function () { //

    font is loaded }); Font Face Observer
  92. @font-face { font-family: Elena; src: url(elena.woff2) format(“woff2”), url(elena.woff) format(“woff”); }

    Font Face Observer
  93. optimise start & load 1

  94. font loading strategy 2

  95. fonts are enhancement 3

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

    Source Code Pro by Paul D. Hunt