Search code examples
javascriptnuxt.jspagespeedlighthouse

Google Developers Network tab purple line

I am using nuxt js and I see that some of the code is being downloaded after this purple line: enter image description here

Now my question is what does this line show and why does the downloaded code after it do not impact my performance score for Lighthouse?

Solution

  • The line isn't actually purple it is a red line and a blue line next to each other.

    The blue line is "DOM Content Loaded" time and the red is the "load" time.

    The "DOMContentLoaded" event fires when the document is loaded and the DOM tree is fully constructed.

    The "load" event fires when all subframes, images, stylesheets, scripts, etc have been downloaded. (this ignores things like deferred scripts, async scripts etc. as those are technically not part of the initial document)

    As for content loaded after it, it does still impact your performance as it will impact things like Cumulative Layout Shift, Total Blocking Time etc. The lines are there for guidance only.

    If you are trying to work out performance on a page you are better using the "Performance" tab in Developer tools.

    This lets you run a full trace and highlights more meaningful metrics such as First Paint, First Contentful Paint, Largest Contentful Paint (under the "timings" section) and any Cumulative Layout Shifts under the "Experience" section etc.