Search code examples
javascriptcore-web-vitalswebpagetestweb-vitalsfront-end-optimization

Deferred script is still render blocking according to webpagetest


I am using webpack to build the assets in production. The split chunking feature allows us to break big scripts into chunks. However the problem is that even though the scripts are deferred, webpagetest still shows they are render blocking: enter image description here

The scripts already have the defer attributes.

enter image description here

Is it because defer is executing the scripts in order? Changing the defer to async seems to have solved the issue but I am trying to understand why it was render-blocking even though using defer.

Page URL: https://trip101.com/article/airbnb-castle-england


Solution

  • The render blocking indicator comes directly from Chrome, and in this case it's a bug in Chrome due to a race condition. (You can find the Chromium bug here: https://chromium-review.googlesource.com/c/chromium/src/+/3596328)

    Should be fixed in version 103, which comes out June 21st (https://chromestatus.com/roadmap).