zerm icon indicating copy to clipboard operation
zerm copied to clipboard

Support inlining CSS for a performance boost.

Open adworacz opened this issue 3 years ago • 3 comments

Can reduce First Content Paint time and overall download size for a single page. This is useful for sites where often only one page is visited by a user. In such a case, separately loading/caching the CSS provides no extra benefit, and slows down content rendering while waiting the CSS network request to start and finish.

Additionally, when using a decent compression algorithm like Brotli, the total number of bytes sent over the wire can drop a bit. In my testing, I saw total CSS + HTML size drop by 0.17KB, or ~2.5%.

Original idea taken from "Lightspeed" Zola theme: https://github.com/carpetscheme/lightspeed/blob/master/templates/index.html#L15-L16

adworacz avatar May 30 '21 23:05 adworacz

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/ejmg/zerm/iVr2zWW3n1cUzWfmzNqXq8DnTpV6
✅ Preview: https://zerm-git-fork-adworacz-inlinecss-ejmg.vercel.app

vercel[bot] avatar May 30 '21 23:05 vercel[bot]

whoops, looks like merging #20 gave a conflict. if you get the chance to resolve it, we're good to close up your final outstanding PR!

ejmg avatar Jul 29 '21 18:07 ejmg

Sounds good - will fix this conflict in the next few days.

adworacz avatar Aug 07 '21 03:08 adworacz