[Resolved] Above page fold CSS

[Paul]

Hello team,

Are you able to offer the above the fold CSS code for the standard generatepress theme? Would give a good starting point for everyone going this route.

Would be great if there were an option built into the theme in the future.

‘Inline above page fold CSS’

Thanks
Paul

[Tom]

Hey Paul,

This isn’t something we’ve looked into in depth, but I agree it would be useful. It would largely depend on the options you’re using on your site.

Have you moved your CSS to the footer yet? If so, are you noticing any weirdness as your site loads?

Let me know 🙂

[Paul]

Hi Tom,

The biggest page speed improvement I’ve found after doing all other optimisation via autoptimise etc is through inlining above page fold CSS.

I understand that due to varying theme designs that an standardised option might not be perfect, but having one that at least covers the standard theme design would be beneficial to all I think.

I don’t want to move all my CSS to the footer else it’ll look terrible when loading.

Thanks Tom

[Tom]

I agree – we’ll look into it 🙂

[Paul]

Top man! Thanks Tom

[Tom]

No problem 🙂

[fabien]

any update on this? 🙂

[Grant]

I have done a couple above the fold critical css that seems to work well. I went to https://jonassebastianohlsson.com/criticalpathcssgenerator/ Found a page of my site that had basically everything, like a single post page, set AO to inline all css then copied the css from the source and entered it into the FULL CSS field on that criticalpathgenerator page. I took that generated critical css and entered it into the AO above the fold field. This has worked well except that obviously its not perfect for every page. Another thing that makes this kind of redundant is that all the css is loaded at the end of the page anyways, you will get an unused css warning on certain webpages from Pagespeed Insights etc.

Cheers!

[fabien]

will try that thanks!

[Author]

Posts