Load CSS asynchronously doesn't work
cheesytim opened this issue · comments
my config:
plugins: [
new Critters({
preload: 'js',
preloadFonts: true
})
],
},
output:
....
body {
margin: 0;
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
font-family: Roboto, Arial, Helvetica, sans-serif;
color: var(--color-dark-silver);
background-color: var(--color-back-gray)
}
</style>
<link href="/static/css/chunk-vendors.9884b996.css" rel="preload" as="style"><noscript>
<link rel="stylesheet" href="/static/css/chunk-vendors.9884b996.css"></noscript>
<script>function $loadcss(u, m, l) { (l = document.createElement('link')).rel = 'stylesheet'; l.href = u; document.head.appendChild(l) } $loadcss("/static/css/chunk-vendors.9884b996.css")</script>
<link href="/static/css/app.32579bae.css" rel="preload" as="style"><noscript>
<link rel="stylesheet" href="/static/css/app.32579bae.css"></noscript>
<script>function $loadcss(u, m, l) { (l = document.createElement('link')).rel = 'stylesheet'; l.href = u; document.head.appendChild(l) } $loadcss("/static/css/app.32579bae.css")</script>
<link rel="preload" as="font" crossorigin="anonymous" href="/static/fonts/Robotolight.woff">
<link rel="preload" as="font" crossorigin="anonymous" href="/static/fonts/Roboto.woff">
<link rel="preload" as="font" crossorigin="anonymous" href="/static/fonts/Robotoitalic.woff">
<link rel="preload" as="font" crossorigin="anonymous" href="/static/fonts/Robotomedium.woff">
<link rel="preload" as="font" crossorigin="anonymous" href="/static/fonts/Robotobold.woff">
<link rel="preload" as="font" crossorigin="anonymous" href="/static/fonts/element-icons.woff">
</head>
anyway.. lighthouse says -
This is a bug in Lighthouse. It's likely failing to detect the <noscript>.
anyway it loads at beginning and blocks render, am I wrong?
I used critters and realize (after hours of frustration) that critters removed my media css from my prod build... I don't know if it's related but be careful I did not catch it on the first place.
@pierrebiver want to open a new issue with more details? That sounds like a nasty bug!
@Tim152 apologies for the delay. Based on the linked Lighthouse issue, it looks like Lighthouse penalizes for unused CSS rules, even if those rules are loaded lazily. In the case you highlighted here, the CSS is loaded using a <link rel=preload> that dynamically swaps to <link rel=stylesheet> once loaded - that means the loading of the CSS file actually does not block rendering.
So technically lighthouse is correct - there are unused rules present - however it's not implying those unused rules were necessarily present early in the document's lifecycle. Lighthouse looks at all CSS Rules applied to a document over the course of the time it profiles loading, so the fact that these styles get applied lazily doesn't get reflected in their score.
@developit got it, thanks!