lighthouse icon indicating copy to clipboard operation
lighthouse copied to clipboard

Render-blocking resources not identified in audit

Open mdiblasio opened this issue 6 years ago • 4 comments

Provide the steps to reproduce

  1. Run LH on https://m.shop.nordstrom.com
  2. View "Eliminate render-blocking resources" audit - Passed

What is the current behavior?

No render-blocking resources listed in "Eliminate render-blocking resources" audit.

What is the expected behavior?

CSS file mobile-es6-production.css should be listed as a render-blocking resource as it's in the page <head>:

<link rel="stylesheet" type="text/css" href="https://shop.nordstrom.com/static/mwp/11.0.325/256277e4/mobile-es6-production.css"/>

Environment Information

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fm.shop.nordstrom.com%2F

Related issues

mdiblasio avatar Jul 22 '19 17:07 mdiblasio

I ran Lighthouse for https://m.shop.nordstrom.com, here's what I found.

indexhtml json output lighthouse@​5.1.0 ✅ html json output lighthouse@​4.3.1 ✅ json output PSI ✅ html json output lighthouse@​master-d8c118 ✅ html json output Extension@​5.1.0.1-Chrome72.0.3617.0

devtools-bot avatar Jul 22 '19 18:07 devtools-bot

Ah this is tricky thanks for filing @mdiblasio!

Because we ignore link[rel=preload] stylesheets and this site has an unnecessary link[rel=preload] for the same blocking URL before the other stylesheet link, Chrome tags this request as a link preload request instead of a blocking network request.

Possible workarounds from our side:

  • Create an audit that flags duplicate preload + blocking resources
  • Ignore the preload flag on the network request if there is also a preload link still present at the time of load (could be prone to false positives if the onload handler appends a new link instead of switching the value of rel like most sites do).

I'm partial to option 1.

patrickhulce avatar Jul 22 '19 18:07 patrickhulce

(wanted to test out the issue runner bot I made awhile ago. note: surge is having problems this morning. note to self: need a way to control for mobile / desktop).

the same style is loaded as a preload ... @patrickhulce for what this means

EDIT: oops I dabbled too long with my runner thing, patrick beat me to it

connorjclark avatar Jul 22 '19 18:07 connorjclark

We will probably move forward with this as a warning in the uses-rel-preload audit.

exterkamp avatar Jul 23 '19 20:07 exterkamp

I think the new render blocking insight resolved this.

connorjclark avatar Dec 04 '25 23:12 connorjclark