Does a long internal stylesheet affect SEO?

Question

I'm building a site with a lot of similar css between pages. I've decided that a good approach would be to have the css generated as strings by php functions (with parameters) and outputed as an internal stylesheet in every page that i serve. The benefits:

• this way if i make a change it will reflect throughout the entire site without having to maintain duplicates
• i can send only the necessary css for a certain page
• it's better than having small css files and sending a lot of css headers at inclusion
• the possibility that the content might be displayed before the stylesheet is loaded is gone
• i can calculate dimensions by using parameters
• i can create a layer that will minify the result received from these functions or serve cached minified css

I haven't seen this done anywhere else unfortunately so i'm thinking that this might be because of SEO. The generated internal stylesheet will be at around 15kb max (before minifying the stylesheet).

I need your opinion on this approach and your thoughts about the impact a long internal stylesheet will have on SEO.

Many thanks.

Answer 1

Like long blocks of inline JavaScript, they are ignored.

Bots look at the content, not the layout. If you want a better representation of what they see, try the Lynx browser.

Unfortunately they will not be cached on the user's browser either, as external CSS and JS are, making each page load slower. It is actually more efficient to have a large external stylesheet than server up related "css snippets" with each page.

Answer 2

Not an answer to your question (which is interesting enough!), but most of your arguments for inline CSS are wrong. An external style sheet is always the better and faster solution.

• The first point you can handle by adding a version number to the style sheet's file name

• The second point is moot because an external file gets cached, so no additional requests

• The third point is moot for the same reason

• The fourth point won't really matter once the style sheet is cached

• The fifth point can be sorted using inline CSS for only the properties that need to be updated dynamically - usually a tiny fraction of the whole CSS code base

• The sixth point I don't get.

Go for an external style sheet. Just make sure it gets served with the correct caching headers!

Answer 3

To the extent of my knowledge, your CSS sheet plays a minimal role in SEO, what is more important is your HTML markup and execution.

Following the order of '< h1 > - < h5 >' for your heading tags, with accompanying '< p >' tags instead of '< font >' or similar approaches is what will effect a web crawlers ability to recognise and prioritise the content in your page.

While you can use CSS to hide paragraph that you only want to appear in search engines and similar techniques it has little importance compared to the HTML structure.

Answer 4

Assuming by 'internal stylesheet' you mean inline CSS included using the <style> tag, I'd recommend against this. If you use an external stylesheet, visitors download it once on the first request, and it will then be cached. By including all of your CSS inline, you're adding page weight to every single HTML request.

Although it might seem more efficient to just serve CSS for the current page, or split your CSS into lots of different page-specific stylesheets; in practice it's usually better just to have one stylesheet. Serving this compressed and with appropriate expires headers will almost always be faster than the alternatives.

Regarding SEO, robots ignore CSS, so this won't have any affect. If you had so much CSS that it substantially slowed down loading of your page, in theory you might start having issues, but you would need an inhuman amount of inline CSS before this could even potentially be an issue.

Answer 5

All benefits you said apply. Search engines doesn't care too much about CSS and javascript (of course, if your page takes too long to wrap and send, this will affect, but I don't think it is the case).

I've seen this kind of solution before, but people tend to avoid use scripting to serve, once you can use media queries instead, writing just only one external stylesheet. I think you should take a look on this.

However, I see you are trying to optimize the CSS sent. This is good, but talking about 80k for all sheets, makes me think if you are not over complicating the rules.

Well, as last opinion, you can cache many different responses and make use of "canonical" thing on page head.