CODEWITHSUNDEEP
htmlcss
Apurva T
Apurva T

Reputation: 167

Eliminate render blocking css - different ways and tools

As mentioned in google page insight tools

For best performance, PageSpeed Insights recommends inlining the critical (above-the-fold) CSS of your page directly into your HTML.

Wanted to know how efficient this is, code structure wise. As it would increase the lines of code on each of the HTML pages. Is there any other efficient way to eliminate this instead of inlining the css directly into the HTML page?

Upvotes: 0

Views: 60

Answers (1)

bpeterson76
bpeterson76

Reputation: 12870

It would be trivial as far as size goes (we're talking bytes or maybe a few K in extra size) but your maintainability goes out the window when you're inlining all your css in every page. This is of course ignoring caching -- you'd only download it once, and then subsequent pages would benefit from the cache.

If you're determined to go this route, use a tool like Less to render out the necessary CSS through a build process. That way, you can still keep a centralized, easily maintainable CSS document, but it can take advantage of inlining at build-time.

Upvotes: 1

Related Questions