CODEWITHSUNDEEP
htmlcssperformancepagespeed
Konstantin
Konstantin

Reputation: 115

Inlining CSS in HTML for page speed

I was trying to optimize my web site speed for Google's PageSpeed Insight. The speed test complained about my external CSS files, so I tried inlining them in the HTML document, which lead to a significant increase in the reported page speed.

Now, my CSS styles are not exactly tiny. I have inlined about 12 KB of CSS code, making every page effectively 12 KB larger. So in essence this should make page speeds slower for all users that view more than one page.

I know that Google recommends only inlining "small" style sheets. I wouldn't really consider 12 KB to be very small. So I am actually not very happy with this solution and I'll probably restore my previous version.

Are there any recommendations on when to inline and when not?

Thanks

Upvotes: 2

Views: 1275

Answers (3)

Pixelomo
Pixelomo

Reputation: 6737

This topic is currently being debated, the guys at Google recommend inlining above-the-fold/critical CSS within your HTML to optimise your site and have a fast initial paint. This does however go against the principle of a separation of concerns.

The majority of your CSS remains in an external compressed stylesheet but some basic large pieces of your layout/headings etc will be inlined. You can manually select these styles or use a critical CSS generator like this one

The latest advice from Jake Archibald at Google is to inline critical CSS and then split compressed stylesheets in to components which are loaded when the component itself is loaded in the markup:

  <link rel="stylesheet" href="/site-header.css">
  <header>…</header>

  <link rel="stylesheet" href="/article.css">
  <main>…</main>

  <link rel="stylesheet" href="/comment.css">
  <section class="comments">…</section>

Upvotes: 1

reinder
reinder

Reputation: 2551

In case of large CSS files Google recommends inlining styles required for above the fold content only, and defer loading the remaining styles until after the above-the-fold content.

For more information read the Pagespeed Insights documents. https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Upvotes: 0

Sandeep Garg
Sandeep Garg

Reputation: 353

Best way is using external css files but compressing them and then using those compressed version. This will significantly will reduce the size of files and will also increase the page speed.

Upvotes: 3

Related Questions