Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Fonts Performance

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.

Bram Stein

September 14, 2015
Tweet

More Decks by Bram Stein

Other Decks in Programming

Transcript

  1. Web Fonts
    Performance
    @bram_stein

    View Slide

  2. 25%
    50%
    75%
    2012 2013 2014 2015
    Web Font Usage
    Source: HTTP Archive

    View Slide

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

    View Slide

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

    View Slide

  5. 300kB of web fonts
    (2.8 × 107kB)

    View Slide

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

    View Slide

  7. A web font is only downloaded
    when it is used in a CSS selector
    that matches a DOM connected
    node.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  21. FOUT versus FOIT
    Flash Of (Unstyled|Invisible) Text

    View Slide

  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

    View Slide

  23. A

    View Slide

  24. A

    View Slide

  25. example.com
    A

    View Slide

  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

    View Slide

  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

    View Slide

  28. B

    View Slide

  29. B

    View Slide

  30. example.com
    B

    View Slide

  31. example.com
    Loading example.com
    B

    View Slide

  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

    View Slide

  33. ?

    View Slide

  34. A

    View Slide

  35. A

    View Slide

  36. example.com
    A

    View Slide

  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

    View Slide

  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

    View Slide

  39. B

    View Slide

  40. B

    View Slide

  41. example.com
    B

    View Slide

  42. example.com
    B

    View Slide

  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

    View Slide

  44. ?

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  48. FOUT is progressive
    enhancement

    View Slide

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

    View Slide

  50. CSS font-display
    (coming soon)

    View Slide

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

    View Slide

  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

    View Slide

  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;
    }

    View Slide

  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 */
    }

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  58. No browser support?
    Use JavaScript.

    View Slide

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

    View Slide

  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

    View Slide

  61. Font Face Observer
    github.com/bramstein/fontfaceobserver
    github.com/bramstein/fontfaceobserver

    View Slide

  62. var elena = new FontFaceObserver(‘Elena’);
    elena.check().then(function () {
    // font is loaded
    });
    Font Face Observer

    View Slide

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

    View Slide

  64. var font = new FontFace(‘Elena’, ‘url(font.woff)’);
    font.load().then(function () {
    // font is loaded
    });
    CSS Font Loading API

    View Slide

  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

    View Slide

  66. Dealing with the Flash

    View Slide

  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

    View Slide

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

    View Slide

  69. Compression
    WOFF + WOFF2. Done.

    View Slide

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

    View Slide

  71. Subsetting

    View Slide

  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 ¹ ² ³
    ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ μ ¬ Δ Ω π ∞ ∂ ∫ √

    View Slide

  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 ¹ ² ³
    ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ μ ¬ Δ Ω π ∞ ∂ ∫ √

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  77. Latency is the real
    performance killer

    View Slide

  78. View Slide

  79. View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  84. Lazy loading is bad
    (For web fonts)

    View Slide

  85. Preload instructions
    (Also coming soon)

    View Slide





  86. Link: ; rel=preload; as=font
    Preload

    View Slide

  87. Preload




    Link: ; rel=preload; as=font

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide





  91. Link: ; rel=prefetch
    Prefetch

    View Slide

  92. IE9 IE10 IE11 Edge Chrome Firefox Safari Opera Android
    No No Yes Yes Yes Yes No Yes Yes
    Prefetch browser support

    View Slide

  93. HTTP/2 server push

    View Slide

  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

    View Slide

  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.

    View Slide

  96. Critical CSS fonts

    View Slide

  97. web font anti-patterns
    (it seemed like a good idea at the time…)

    View Slide

  98. Using web fonts
    (for everything)

    View Slide

  99. View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  104. Benefits
    • Avoids HTTP overhead

    View Slide

  105. Downsides
    • Breaks parallel downloads
    • Only supports a single font format
    • No progressive rendering
    • Caching

    View Slide

  106. Reimplement caching
    (Guardian & Smashing Magazine)

    View Slide

  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();
    }

    View Slide

  108. Benefits
    • Fonts are requested once
    • Avoids lazy loading
    • Avoids FOUT/FOIT in most browsers
    • Optimises for frequent visitors

    View Slide

  109. Downsides
    • Same downsides as inlining
    • Pollutes localStorage of casual visitors
    • Custom cache mechanism
    • Licensing

    View Slide

  110. Keep it simple
    (but not stupid)

    View Slide

  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;
    }

    View Slide

  112. <br/>(function(){'use strict';function h(a){document.body?…<br/>
    <br/>var myfamily = new FontFaceObserver(‘My Family’);<br/>myfamily.check().then(function () {<br/>var html = document.documentElement;<br/>html.classList.add(‘fonts-loaded’);<br/>});<br/>

    View Slide

  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

    View Slide

  114. Downsides
    • Requires a (little) bit of code
    • FOUT on each request

    View Slide

  115. <br/>var myfamily = new FontFaceObserver(‘My Family’);<br/>myfamily.check().then(function () {<br/>var html = document.documentElement;<br/>html.classList.add(‘fonts-loaded’);<br/>sessionStorage.fontsloaded = true;<br/>});<br/>

    View Slide

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

    View Slide

  117. Downsides
    • Requires a (little) bit of code
    • FOUT on each request

    View Slide

  118. font loading strategy
    1

    View Slide

  119. optimise start & load
    2

    View Slide

  120. fonts are enhancement
    3

    View Slide

  121. Web Fonts
    Performance
    @bram_stein
    https://www.bramstein.com
    FF Enzo by Tobias Kvant
    Source Code Pro by Paul D. Hunt

    View Slide