Description
There is a render-blocking request for the largest asset on the page. As it is now, the font has to be loaded before the stylesheet or any of our HTML content.
This can be resolved using a nifty pattern of JavaScript (onload) and a <noscript> tag.
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" media="none" onload="this.media='all'">This will prevent the browser from seeing the stylesheet as a blocking request and then will set the media attribute to all (or screen, or whatever) on load. Problem is, if JavaScript is disabled, onload won't happen. So we use a <noscript> fallback.
Finally, our entire pattern looks like so:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" media="none" onload="this.media='all'">
<noscript><link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" media="all"></noscript>Furthermore, we should be putting the <link> that loads the fonts at the bottom of <head> so as to not promote bad habits. The main style sheet should always be included before fonts and definitely before any scripts.
User Stories and Perspectives
- I’m a blind user with a screen reader. I'd rather not wait for content until something that isn’t relevant to me, and is a large file size, downloads.
(web fonts are generally larger than your average blocking stylesheet and stylesheets can still be pertinent to blind and low vision users) - I'm a low–vision user who uses user agent style sheets to override web typography to be more accessible to me. I won't see your typefaces anyways, so please don't make it block the content of the page or other styles.
- I am in a hurry and/or on a slow connection and would like styled web content to be consumable before large web fonts load.
Pros
- SEO improvements via significant improvements optimizing delivery of web content
- Noticeable speed improvements (more "snappy")
- More inclusive delivery, as we are not making delaying access to the content to the blind for something that is only relevant to the sighted
Con
- The web page may appear with standard fonts briefly before the web font is loaded. With best cacheing practices this can FOUT can be avoided on return visits.