2

I added preload links to my site for two CSS files, and this was by far the biggest improvement opportunity listed in the Lighthouse audit.

I added the preload links, and ran a new Lighthouse audit, and it is still showing the same message as before (screenshot below).

enter image description here

The non-preload links for those same two files are still there, could that be what is causing this issue? Here are the first 4 lines in the <head> section:

<head>
    <link type="text/css" rel="preload" href="/gsight2/css/invite.css?v1" as="style">
    <link type="text/css" rel="preload" href="/gsight2/css/client-styles.css?v4" as="style">
    <link type="text/css" rel="stylesheet" href="/gsight2/css/invite.css?v1">
    <link type="text/css" rel="stylesheet" href="/gsight2/css/client-styles.css?v4">

Another potential issue here (that I admit I'm just now noticing) is that all four of those <link> elements above appear to be loaded via JavaScript. I say that because when I reload the page and watch the HTML, other elements in the <head> section come in first, and the after some time those four <link> elements come in. That is especially noticeable when I do the same thing and simulate a slower connection.

In that case, I'm confused about the value of preloading that CSS at all, as it isn't needed in the initial render of the page.

Should I remove the two non-preload links? I left them because I figured it would be no harm, but maybe it is confusing Lighthouse.

Any tips here are appreciated, thanks in advance.

1
  • Can you try preloading via http header instead of markup?
    – Kannan
    Jun 23 at 15:36
3

You should hard-code those preload links in the static HTML <head> (or HTTP headers) that comes down from the server, as opposed to dynamically adding them later with JavaScript. That way the browser can discover the stylesheet URLs and preload them as early as possible, giving you and your users the performance benefit.

For more info see https://web.dev/preload-critical-assets/

1
  • I completely agree, and I'm not sure why the web team has it set up this way. This is probably why the preload isn't being parsed as well.
    – Jake 1986
    Jun 23 at 22:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.