Inlining CSS in HTML for page speed

Question

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

to get 100 there, you might need to inline that, I did that too for 30k-60k IIRC. — YOU
– YOU, Commented Feb 19, 2016 at 10:49
Are you using any additional style sheets, such as google fonts, or any other custom external sheet that links to an actual URL? — Steve Hartley
– Steve Hartley, Commented Feb 19, 2016 at 10:52
Be aware if more than one page on your website uses the same css styles then it may make sense to serve them in an external file because the browser will normally keep that file in cache and not need to download it again. Inlining styles effectively means downloading them again for each html page. — GavinBrelstaff
– GavinBrelstaff, Commented Feb 19, 2016 at 11:16
Yes the possibility to allow caching was also my motivation for keeping it in an external file. But google seems to think otherwise in their speed test. — Konstantin
– Konstantin, Commented Feb 19, 2016 at 11:54

Sandeep Garg · Accepted Answer · 2016-02-19 10:54:06Z

3

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.

answered Feb 19, 2016 at 10:54

Sandeep Garg

3531 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Konstantin Over a year ago

Thanks, I guess that's what I'll do.

Pixelomo · Accepted Answer · 2016-02-19 11:23:32Z

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>

reinder · Accepted Answer · 2016-02-19 10:55:20Z

0

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

answered Feb 19, 2016 at 10:55

reinder

2,5512 gold badges24 silver badges46 bronze badges

Collectives™ on Stack Overflow

Inlining CSS in HTML for page speed

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related