I'm working on a website using wordpress. When opening Chrome's console (Ctrl+Maj+I), I couldn't help but notice a HUGE style attribute and tons of scripts directly written into the HTML document.

According to Google's good practice this not something you want to do. However, when talking with the Theme's clients service, they argued it had NO influence on SEO that since it's a PHP generated document.

I know it sound like a beginner question, but is it true?

  • 1
    Can you provide a link to "Google's good practice"? My guess is that is a development practices guide and not the webmaster guidelines. – Stephen Ostermiller May 16 '17 at 20:00
  • ...since it's a PHP generated document... How HTML is rendered has no bearing on a anything. It is the result of the rendering that counts. I can generate HTML using PHP or Perl or Java and the result would be the same. For the client service person to claim that because PHP is used the resulting HTML does not effect SEO, is beyond ridiculous. – closetnoc May 17 '17 at 0:52

The technical details about how the code for a page is delivered have almost no impact on SEO. Google ranks pages on factors that users will see, not on how pretty the development is. Inline CSS and scripts are not ranking factors for Google.

The only time that code matters for SEO would be if it impacts performance. For SEO, your page source code must download completely with 7 seconds. If it is slower than that for Googlebot, Google makes rankings worse for it. It also most completely download and render for users within 3 seconds. If it is slower than that, users stop using it as much. Google notices this user behavior and makes rankings worse.

Having inline CSS means that it can't be cached between page loads. That means that the first page view may be able to render faster, but subsequent page views are going to be slower.

There are good development practice reasons to keep you styles out of style attributes:

  • Code in style attributes effects only one tag. If that same style is to be applied to multiple tags, the CSS code must be duplicated. That would violate the good development practice of "don't repeat yourself" (DRY).
  • Keeping all CSS in .css files means that it is easy to find. Somebody looking at your code base for the first time is going to start looking for styles there and wouldn't want to have to open PHP and HTML files to find CSS.
  • Keeping all CSS in .css files helps separate code that different developers are likely to work on. This "separation of concerns" means that the front end designer and the back end coder are less likely to step on each other's toes, and less likely make code changes that conflict with each other.
  • "subsequent page views are going to be slower." - The pages themselves are also cached so they won't be slower. The only this this will be true is when the cache has been invalidated (HTML/CSS source code change). – vsync Jan 8 '19 at 19:43

Yes and no. It's not recommended, but not for the reason you might think.

Google and visitors like fast websites. If you have a lot of css, that means your download is slower, which in turn makes your website slower, which in turn makes the experience of your site a little less smooth.

Also, the more selectors your use, the more complex you make your css, the more time the browser spends parsing the CSS creating the webpage -> slower -> less smooth experience.

Yes, it is a problem when you're sloppy with your css and use in-effective selectors.
No, it is not a problem when you're actually using the stylesheet in a normal way, as intended. Sometimes you simple need a lot of styling.

How to improve your css?

Optimize for your visitors, not for bots. Stick to that, and you fine long term plan.
Try to reuse as much as possible. This is why grid systems are popular, you can re-use the widths of those columns. Rely on the C of Css, being Cascading.
Do not inline style, because a browser can download and parse the css file which it's going through your DOM. Inline style blocks inverts this. Also, inline styling can't be cached, which you do want.
Improve your selectors, e.g. using #idForAnUniqueElement instead of .classForItemYouUseOnce. If not possible, try to limit it, if you e.g. have to use p{}, try #paragrapWrapElement p{} as selector.
Split your css in two. Provide a stylesheet in the head with CSS required on load (e.g. your root navigation items) so it can build a page quickly. The 2nd stylesheet near the end of your body so it can fill in the rest (e.g. subnavigation, because that becomes visible on hover, so you can parse later).

  • Actually best practice for several years now is to inline the "critical path" CSS – vsync Jan 8 '19 at 19:46

Having very large scripts or styles inlined in your HTML will make the page slower to download and execute. Inlined scripts and styles won't be cached by the browser. Slower page does have negative impact on SEO, though probably not a very strong one, unless the page is very slow.

it had NO influence on SEO that since it's a PHP generated document.

This is completely false statmenet. It doesn't matter what generates the HTML. Bad html is equally bad whether it's generated by php, nodejs, c++ or written completely manually.

Backend language for server side generated page does not change anything, as long as the page is generated reasonably fast.

  • The only part of this answer that I like is the bit about inline CSS not being cached. Everything else is wrong. Inline CSS is faster to download and execute on the first page view. It is only on subsequent pageviews where it comes from cache that you get performance benefits. – Stephen Ostermiller May 17 '17 at 9:31
  • Googlebot does not download css files on every request, but it will be forced to do so if you inline them. Having larger html will slow down google crawl rate on your site. – Maadinsh May 17 '17 at 9:33
  • I also like this sentence: "Bad html is equally bad whether it's generated by php, nodejs, c++ or written completely manually" – Martijn May 17 '17 at 9:43
  • Bad for development, does not mean bad for SEO though. – Stephen Ostermiller May 17 '17 at 9:44
  • 1
    You don't generally have to optimize your website for Googlebot. You should optimize your site for users. If your users typically view only one page, then by all means put the CSS inline. – Stephen Ostermiller May 17 '17 at 9:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy