4

Where should I put the css?

Google recommends to put the css of the above the fold, in the same page: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

If the external CSS resources are small, you can insert those directly into the HTML document

But what is considered small?. I have a regular site with a blog. Should I inline css in all the pages? If so, should I repeat in each page common css like p, h1, a...?

Improve this question
1
  • @StephenOstermiller Updating the title is a big help! The question was not entirely clear regarding speed as a primary concern but rather a general concern in the selection process. It seems that the OP is concerned primarily about speed issues. Thanks! Cheers!!
    – closetnoc
    Commented Sep 29, 2016 at 17:09

1 Answer 1

Reset to default
2

You basically have three options; external, internal, in-line.

External: Is where you have an external CSS file.

In-Line: Is where you specify style for each tag.

Internal: Is where the CSS code you would use for an external CSS file is placed within the pages <head> tag.

I do not recommend adding style to individual HTML tags.

While it is not a big deal for small bits of CSS code, I also not not recommend adding style within each and every page. What a pain!

Instead, I always recommend using and external CSS file. Why? Because for a simple change, you do not have to edit each and every page to make the change.

This page may help: http://www.w3schools.com/css/css_howto.asp

Traditionally, a CSS file is called style.css and placed within a /css directory and specified as <link rel="stylesheet" type="text/css" href="/css/style.css"> somewhere within the <head> tag. While it is not necessary to use a /css directory or name your file as style.css, when editing several sites, sticking to tradition makes knowing the location and what the name of the CSS file a no-brainer.

Concerning speed, the whole argument is a bit of a misnomer. On one hand if the CSS code is within the page, there is no need for another request to fetch the CSS file. On the other hand, the code can make the HTML download larger. CSS files can be cached making the whole second request issue largely moot. Where the limit is between using internal or in-line CSS versus external CSS, is up to debate. From my experience a couple of dozen style mark-up within the page is fine. However, any speed difference for one page does not outweigh the total cost of downloading several or many pages which would be a cumulative cost versus the cost of one CSS file that only needs to be requested once. Where this becomes clearer is where more than a few styles are applied. Still, I recommend using an external file. It makes life much easier and the cost is still very minimal if not moot altogether.

Improve this answer
5
  • You are not answering the question. I am asking about Google recomendations and page speed.
    – Nrc
    Commented Sep 29, 2016 at 16:15
  • @Nrc Updated answer. Hope this helps. Cheers!!
    – closetnoc
    Commented Sep 29, 2016 at 16:39
  • i concur that Google's recommendation is naive. Putting CSS in the document is great for the first page of a visit, but it then has to be re-downloaded for every subsequent page. I have a site where users generally view just one page. On that site, I inline all CSS, JS, and images. On other sites where users typically view multiple pages per visit I take the opposite approach.
    – Stephen Ostermiller ♦
    Commented Sep 29, 2016 at 17:16
  • @StephenOstermiller I agree! I have one site, being redone, where people would generally find the information they want on the first page they find and would not need to download another page. However, users are not the entire picture. Search engines, bots, and bears (oh my!) are also a consideration. It is all opinion in my book. We each have one and without serious study, there can really never be a solid set of metrics to follow. Even then, the window would likely be so narrow with so many conditions that finding a true advantage within the window nearly impossible.
    – closetnoc
    Commented Sep 29, 2016 at 17:27
  • @StephenOstermiller I am sure that your experience is extremely valuable and your insights correct. I am mostly retired and I do other things such as farming, antiques sales, landlord, and so on so I do not pay attention to the details too much these days. Plus any site I have sucks! And let us not forget the bears! They may quickly shred a keyboard, however, that is a huge search market that often gets ignored. Viva la bears! Cheers!!
    – closetnoc
    Commented Sep 29, 2016 at 17:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.