search

doug-wade / tybalt

A library for creating web components
MIT License
5 stars 3 forks source link

Website has blocking resources #408

Open doug-wade opened 1 year ago

doug-wade commented 1 year ago

Chrome lighthouse is reporting

Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Learn how to eliminate render-blocking resources.FCPLCP

This is a screenshot of the issue quoted above
doug-wade commented 1 year ago

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload

Ashvith10 commented 1 year ago

Should switching from CDN to local fonts resolve the first issue?

doug-wade commented 1 year ago

I don't think so, but I don't actually know. I think what they want us to do is to add a rel="preload" attribute to each of our css links, but I'm not 100% sure. If I were working this ticket, I would grab start by adding a rel="preload" to my locally-running instance and start lighthouse locally in an incognito window to see if it resolves the issue, and then read the article they linked while it runs.

doug-wade commented 1 year ago

So it might be as easy as changing

<link
    href="https://fonts.googleapis.com/css2?family=DM+Mono&family=DM+Sans:ital,wght@0,400;0,700;1,400&display=swap"
    rel="stylesheet"
/>
<link href="https://unpkg.com/prism-themes@1.9.0/themes/prism-night-owl.css" rel="stylesheet" />

to

<link
    href="https://fonts.googleapis.com/css2?family=DM+Mono&family=DM+Sans:ital,wght@0,400;0,700;1,400&display=swap"
    rel="preload"
/>
<link href="https://unpkg.com/prism-themes@1.9.0/themes/prism-night-owl.css" rel="preload" />