Font Performance - NYC WebPerf Meetup April '24
•
1 like•423 views
Only 10 years ago, custom web fonts were a niche feature, but today they are used by 83% of websites. While it’s easy to add and use web fonts, there are many ways that they can negatively impact web performance and user experience. During this talk Paul will provide an overview of custom web fonts and some web performance techniques you can use to optimize them. We’ll look at examples from the HTTP Archive and explore some free tools that can be used to analyze and optimize fonts on your site. Presented April 18, 2024 at NYC WebPerf Meetup https://www.meetup.com/web-performance-ny/events/299395150/
Recommended
Recommended
More Related Content
Similar to Font Performance - NYC WebPerf Meetup April '24
Similar to Font Performance - NYC WebPerf Meetup April '24 (20)
More from Paul Calvano
More from Paul Calvano (9)
Recently uploaded
Recently uploaded (20)
Font Performance - NYC WebPerf Meetup April '24
- 1. Font Performance Performance Architect @Etsy Paul Calvano @paulcalvano
- 2. Font Performance Performance Architect @Etsy Paul Calvano @paulcalvano
- 3. Font Performance Performance Architect @Etsy Paul Calvano @paulcalvano
- 4. Performance Architect @Etsy Paul Calvano @paulcalvano
- 5. 5
- 6. 6
- 7. 7
- 8. 8 HTML (248 bytes) CSS (2 KB) Font (18 KB)
- 9. 9 This entire game is enclosed in a 258 KB font https://www.coderelay.io/fontemon.html Over 20% of websites use more font bytes … to style text!
- 11. 11
- 12. 12 70% of font downloads occur before FCP 85% occur before LCP
- 13. 13 Request Priorities in Chrome ● Tight Mode: ○ Initial loading phase ○ Constrains loading lower priority resources until scripts in <head> are processed ● Document, CSS and Fonts have the highest priority ● Requests at the same priority level are prioritized at the order they are discovered. https://docs.google.com/document/d/1bCDuq9H1ih9 iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit
- 15. 15 How the HTTP Archive Works ● httparchive.org ○ Monthly trends ○ Discussion forum ○ Web Almanac Chrome UX Report ~18.5 million URLs
- 21. 21 Perf Budget graphs should look boring !
- 22. 22
- 23. 23 Additional Font: 134 KB Latin Subset: 60 KB Update from font vendor: 27 KB
- 25. 25
- 27. 27
- 28. 28
- 29. Font Loading Strategies for WebPerf 29 More on Font Performance techniques: https://www.zachleat.com/web/fonts/ https://web.dev/articles/optimize-webfont-loading https://web.dev/articles/font-best-practices ● Reduce Font weight ○ WOFF2 = Better compression ○ Smaller fonts ○ Subset fonts ○ Compress OTF and TTF fonts ● Use less fonts. ○ Avoid using too many fonts ○ Avoid unused preloaded fonts ● Cache fonts on CDN and Browser ○ Ensure TTLs are high ● Avoid Third Party Fonts ○ Preconnect if you must ● Load Important fonts early ○ Preload fonts that are required for rendering ● Prioritize readable text ○ Font-Display:swap ○ Avoid preloading if you don’t need to
- 30. Font Weight 30
- 31. WOFF2 is supported on all modern browsers 31 … and provides better compression, resulting in smaller font sizes
- 32. 32 83% WOFF2 Usage 11% WOFF Usage ● WOFF2 offers better compression compared to WOFF. ● TTF fonts are often used for icons but need to be compressed. ● OTF and EOT fonts also require compression, but are rarely used anymore.
- 33. Font Compression 33 243 KB ● WOFF and WOFF2 are compressed formats. Use them when you can. ● TTF fonts are not compressed. They need to be compressed with Gzip or Brotli. ● This site loaded 730 KB of fonts uncompressed. Gzip would have reduced it by 43%. https://tools.paulcalvano.com/compression-tester
- 34. 34
- 36. 36
- 37. pyftsubset SourceSansPro-Regular.ttf --flavor=woff2 --unicodes="U+0020-007E,U+00A9,U+00AE" --output-file=SourceSansPro-Regular-subset.woff2 37 Source: 1972 glyphs, 242 KB Output: 132 glyphs, 8 KB
- 38. 38
- 39. 39
- 40. 40
- 41. 41
- 42. pyftsubset KiaSignatureRegular.woff --flavor=woff2 --unicodes="U+0020- 007E,U+00A9,U+00AE,U+2122,U+201C-021D,U+D55D,U+ADC0" --output-file=KiaSignatureRegular_subset.woff2 42 Source: 15190 glyphs, 966 KB Output: 104 glyphs, 10 KB
- 43. ● Subsetting each font file to use latin character, plus a few extra unicode characters reduces the font from 966 KB to 10KB ● Especially when supporting languages with larger character sets, it’s better to have a few regional font files instead of one very large font file. 43 https://fontdrop.info/
- 45. 45
- 47. 47
- 48. 48 75 KB fa-brands-400 fonts. Contains 459 glyphs Used to style 5 characters
- 49. 49 Should be compressed or serve as woff2 459 glyphs, 5 used 1855 glyphs, 2 used Unused Preloads Later in page load: ● UltimateTeam-Icons24.woff: 32KB, 223 glyphs, 1 used ● CruffSans-Bold.ttf: 142 KB, not compressed, 879 glyphs, 1 used ● … and more!
- 51. Preloading Fonts 51 Small number of font files Moderate font sizes ● Numerous font requests ● Large font files ● Unnecessary font files (ie, unused) ● Font-Display:Swap
- 52. 52 ● This site loads 4 Roboto Fonts (Light, Regular, Medium and Bold) ● They are preloading WOFF2, WOFF and TTF formats. ● This results in long delays in page rendering due to excessive font downloads. ● Eliminating WOFF and TTF preloads would help
- 53. 53
- 54. ● The TTF on this site is compressed, but contains 16,193 glyphs ● 14 WOFF2 fonts are preloaded ● All of them have more glyphs than needed ● Some of these fonts (especially the 700 weight ones) are used to style a few chars ● Font-Display:swap is used, so preloading the fonts is wasteful 54
- 55. 55
- 56. 56
- 57. 57
- 60. 60
- 65. Caching 65
- 66. 66 ● Cache as much as possible ● Cache as long as possible ● Cache as close to your users as possible. 3 Rules for Caching Content
- 67. Caching 67 cache-control: max-age=31536000 cache-control: max-age=31536000, immutable cache-control: no-store cache-control: max-age=60 cache-control: max-age=3600, must-revalidate
- 68. 68
- 69. 69 ● Font assets rarely change, and when they do you can easily change their URL. ● Long TTLs should be configured for the browser and CDN. ● Avoid no-cache and must-revalidate directives, since that will result in a round trip to validate the cache entry
- 70. 70 ● WebPageTest ○ https://webpagetest.org ○ https://product.webpagetest.org/experiments ● Speedcurve ○ https://speedcurve.com ● Font Analyzer ○ https://tools.paulcalvano.com/wpt-font-analysis/ ● Compression Tester ○ https://tools.paulcalvano.com/compression-tester ● Font Drop ○ https://fontdrop.info ● Font Subset Tools ○ https://fonttools.readthedocs.io/en/latest/subset/ ○ https://github.com/zachleat/glyphhanger ● DevTools - CSS Overview ○ https://developer.chrome.com/docs/devtools/css-overview
- 71. Questions? Performance Architect @Etsy Paul Calvano @paulcalvano