: When optimizing CSS, what is considered "small" for inserting it inline into the page? Where should I put the css? Google recommends to put the css of the above the fold, in the same page:
Where should I put the css?
Google recommends to put the css of the above the fold, in the same page: 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...?
More posts by @Yeniel560
1 Comments
Sorted by latest first Latest Oldest Best
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: 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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.