Separate critical and non critical css in separate files to improve LCP

[Fcog]

No description provided.

[Fcog]

Tailwind functional classes can be treated as the critical css file

[adamf321]

For LCP we only care about the biggest element painted above the fold (often the hero). So ideally we would prioritise CSS relating to that only. There are also some other things we should do, like preloading the image if we are using a background image (because the browser won't load the image until late if it's inlined in CSS instead of in a src prop of an image).

…

On Tue, 30 Jun 2020 at 12:21, Francisco Giraldo ***@***.***> wrote: Tailwind functional classes can be treated as the critical css file — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#201 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABGVRH2KSQA36HNKZIZZ7X3RZINJFANCNFSM4OMPHSEQ> .

[adamf321]

In fact the optimal way is to inline the critical CSS and move the stylesheet import to the footer. This way the page can paint after the first request is returned, without waiting for any additional resources at all.

…

On Tue, 30 Jun 2020 at 12:38, Adam Fenton ***@***.***> wrote: For LCP we only care about the biggest element painted above the fold (often the hero). So ideally we would prioritise CSS relating to that only. There are also some other things we should do, like preloading the image if we are using a background image (because the browser won't load the image until late if it's inlined in CSS instead of in a src prop of an image). On Tue, 30 Jun 2020 at 12:21, Francisco Giraldo ***@***.***> wrote: > Tailwind functional classes can be treated as the critical css file > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub > <#201 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/ABGVRH2KSQA36HNKZIZZ7X3RZINJFANCNFSM4OMPHSEQ> > . >