How do I load the Critical CSS first?
Use the Critical Path CSS Generator: penthouse or critical . Their principle of work is to launch the site in the client environment (headless browser) and select the styles necessary only for the first screen. Styles for multiple pages (different templates) can be merged into one file. I note that it is worth rendering styles at several resolutions - for desktops and mobiles, and also check for the presence of state styles and modal windows - by connecting only the generated critical css.Anonymous
I do this:
1) enable override for the site in devtools
2) go through typical pages, using js to remove the elements below the first screen + extra padding
3) save the resulting html as override
4) analyze the page using coverage, export a report on it. Along the way, I change the resolution to the mobile version and back to cut the media rules.
5) when all the typical pages have been passed, and reports for each of them are collected, I analyze the folder with them with a script that combines the used rules into one file, the unused ones into another. Keeping the original structure / amount of css.
6) I create critical.css, which can be pushed over http2 or simply by adding a link preload, and I replace the rest of the source css of the project with cleaned up instances so as not to duplicate rules both in the source and in the critical one.
7) I postpone loading the source using js, loadcss, for example
The first 3 steps are risky, you can skip them, but with them the critical style turns out to be smaller, because coverage records the styles of all elements on the page.Anonymous
To place the code, please use CodePen or similar tool. Thanks you!