Webfonts on GOV.UK block initial render and are surprisingly big at 200kb GZIPed
I have measured a 2g/3g connection with fonts blocked to see the difference it could make to lazy-load the font with the following results
- Speed index with fonts - (Median of 3) 6894 (http://www.webpagetest.org/result/160603_AE_T3J)
- Speed index with Blocked | (Median of 3) 3767(http://www.webpagetest.org/result/160603_JX_T1D)
-
Minimize the font size
-
Investigate taking the font out of the critical path with lazy-loading
https://www.zachleat.com/web/comprehensive-webfonts/
Note that Zach’s criteria for ‘best’ is biased towards webfonts, his justification links to an article that isn’t clear what the benefit actually is, would be worth taking his excellent low-down and re-establishing the best strategy based on users (perceived performance)
Web font performance was pitched as a 'firebreak' activity which is time between mission work.
As a user of GOV.UK I need GOV.UK to load quickly So that I can access the content and services I need
By measuring from a users' perspective, we've found that most of the time (80-90%) spent waiting is in the frontend.
Percentage of assets that make up a GOV.UK
- Images 121kB - 26.7%
- JS 92kB - 20.3%
- CSS 37kB - 8.16%
- Webfonts 196kB - 43.2%
- HTML (the document itself) 7kB - 1.54%
- Total 453kB
Percentage of assets stop a page from showing content while they're loading:
- HTML 7kb - 2.91%
- Webfonts 196kB - 81.6%
- CSS 37kB - 15.4%
- Total 240kB
You can see that the majority of what stops GOV.UK from showing content is the webfonts.
By optimizing the size and delivery of the webfonts we can increase the time to content by a non-trivial amount.
- Reducing the size of the fonts and being smarter on how we deliver them.
- We serve 4 fonts currently, Bold, Regular, Bold Tabular, Regular Tabular - We should look to only serve tabular when they're needed since they're not often used
- We base64 encode our fonts in a CSS file - This is not future friendly and stops us from getting automatic wins (for example Chrome will now stop webfonts from blocking render on slow connections for fonts), we could consider an approach where we only serve woff2 as a normal payload (not base64'd)
- We serve hinted fonts to browsers that do not need hints - If we served unhinted fonts to certain browsers we'd see a big reduction in payload size. Host the fonts on a CDN for reuse across Government services. Currently when users cross between www.GOV.UK into the different services they will redownload the font, this can be avoided and some initial work has been started to investigate this already.