Search code examples
csspagespeedlighthouse

Non-critical CSS is loaded before FCP despite being deferred

I have a website where I'm trying to defer the loading of a non-critical stylesheet.

I am using the below line to achieve this as per various online recommendations:

<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

When I add this at the end of my <header> and review the results via Lighthouse, the stylesheet is consistently loaded before the FCP (First Contentful Paint), despite various articles stating that should not be the case.

If I try inserting the same line at the end of my section, I get the "expected" result in the sense that my CSS is loaded after the FCP. However, my understanding is that this form of insertion is not valid.

Does my css insertion need to be modified somehow for this to work when inserted in the header?

Solution

  • FCP is not the same as the onload event. The FCP could be AFTER the onload event in the case of a header image that is loading slow. How about moving this CSS file to the footer?