: The actual difference between styesheet in the header and a seperate file I have always been taught to have all of the CSS in a separate file that is referenced from the head of the page.
I have always been taught to have all of the CSS in a separate file that is referenced from the head of the page. Reading this article, the author is talking about making the Guardian website responsive. One of the things he notes they did to make the site faster and more resilient is to add the CSS inline into the header, thus reducing HTTP requests.
Now this got me thinking about the right/best/fastest way of using the CSS
If you have one main CSS file, its going to be called and read by the site on every page, no mater how big it is. So with that in mind, I'm actually starting to think its better to just inline the whole style sheet and remove one HTTP roundtrip.
I know for the purposes of neatness and being able to edit the file a separate file is better.
But which would you recommend and which do you think is faster?
More posts by @Mendez628
2 Comments
Sorted by latest first Latest Oldest Best
For best practices, external CSS is good but if you have both inline and external CSS applied to a same page then inline CSS will get the priority. The priority of CSS is as following:
inline CSS
CSS in header
external CSS
Without actually reading their article I can say their logic is flawed. CSS files are requested once and than cached by the browser (unless you intentionally block this behavior). The result is only one extra HTTP request to get the CSS file (which should be fast if you are compressing your content). Then all of the other pages load faster because the client doesn't have to download all of that CSS over and over again.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.