Resource Hints adoption

Analysis
8

In a recent talk I encouraged the use of link rel=preload for critical scripts. I was surprised to see that Chrome Platform Status said 25% of pages use link rel=preload. This seems high, but maybe it’s popular for other types of resources.

I wanted to specifically look for the percentage of sites that were using it for scripts. Paul Calvano was kind enough to create a temporary table that contained all the main HTML document response bodies from the Oct 15 2018 crawl. (The “main” HTML document is the first HTML document returned for a given URL, so does not include iframes.) I used the following regular expression to count how many of these used link rel=preload for scripts:

SELECT count(*)
FROM `httparchive.scratchspace.responsebodies_2018_10_15_desktop`
WHERE REGEXP_CONTAINS(body, '(?i)<link[^>]*rel=[\'"]?preload')
      AND REGEXP_CONTAINS(body, '(?i)<link[^>]*as=[\'"]?script')

The number turned out to be 12,469 pages out of 1,255,904 sites, or 0.98% use link rel=preload for scripts. This is much less than the 25% cited by Chrome Platform Status. This difference could be due to link rel=preload being used for things other than scripts, or iframes using link rel=preload.

Why did I impose those two conditions on my search?

  • I only searched for scripts because synchronous scripts inflict painful delays on rendering and the user experience. In another HA analysis, I showed that scripts consume the most CPU. In yet another HA analysis, I showed that synchronous scripts still outnumber async. It’d be good for sites with synchronous scripts to preload them to avoid those blocking delays.

  • I only searched the main HTML document because that’s the primary content on the page. I think there’s less benefit if a third party uses an iframe to link rel=preload their third party scripts. In fact, that’s probably a bad pattern because then those third party scripts may compete for bandwidth and CPU with the main page’s scripts. So I wanted to focus on whether the website owner was using link rel=preload to get its own scripts to download sooner.

It’s disappointing to see that only 1% of sites are using link rel=preload for its own scripts. But that means there’s an opportunity to be had! Link rel=preload is a great technique to get critical content downloaded sooner. Since synchronous scripts inflict painful delays, any page with synchronous scripts should consider using link rel=preload as a way to mitigate that pain.

1 Like