search

wearenolte / lean-theme

GNU General Public License v2.0
38 stars 18 forks source link

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

Open Fcog opened 4 years ago

Fcog commented 4 years ago

Tailwind functional classes can be treated as the critical css file

adamf321 commented 4 years ago

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 notifications@github.com 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 https://github.com/wearenolte/lean-theme/issues/201#issuecomment-651932421, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABGVRH2KSQA36HNKZIZZ7X3RZINJFANCNFSM4OMPHSEQ .

adamf321 commented 4 years ago

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 adam@nolte.io 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 notifications@github.com 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 https://github.com/wearenolte/lean-theme/issues/201#issuecomment-651932421, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABGVRH2KSQA36HNKZIZZ7X3RZINJFANCNFSM4OMPHSEQ .