Embed CSS in Your HTML for Faster Load Times
Most web designers know that reduced server requests equals faster load times. I got to thinking and I was wondering why is CSS always in a seperate file from regular HTML? Usually it is in a different file because you don’t want to make a ton of changes in individual files. Rather you would want to make one change in a .css file and have it change every page of your site; however, with PHP we can embed CSS into our HTML and still have only one file to make our changes.
PHP has a function called include. What it does it include anything in a text file and add it to the current file. This allows us to actually embed the css into our HTML pages reducing the server requests thus faster load times. It also allows us to maintain only one file that will make site wide changes. Thus completely eliminating the need for CSS to be in a seperate file from our HTML.
I have thought about it for awhile and I don’t see any reason to keep css in a seperate file. After looking at Google’s source code I found that they do this exact thing. They don’t point to a seperate css file. Rather they embed the CSS into their HTML.
Update: After doing some research based on some of the comments I received I found this article written by the Steve Souders, who is Yahoo’s Chief Performance guy. The conclusion is that embedding your CSS in HTML is only beneficial if you have a page that is typically loaded only once per session. This explains why Google uses this method. On a blog type site most of the page are the same and will benefit from external CSS rather than embedding into HTML.
He goes on to say:
One such technique is to inline JavaScript and CSS in the front page, but dynamically download the external files after the page has finished loading. Subsequent pages would reference the external files that should already be in the browser’s cache.
If you want to make your sites optimized like the kings of optimization (google) then all you have to do is…
Embedding CSS into your HTML
To embed CSS into your HTML with PHP all you have to do is replace your current css call:
<style type="text/css" media="screen">
<!-- @import url( <?php bloginfo('stylesheet_url'); ?> ); -->
</style>
With:
<style type="text/css" media="screen">
<?php include('style.css'); ?></style>
This of course will require your server to run PHP. If you use ASP you will have to use the ASP include function and ASP syntax.
Note: If your CSS file points to relative paths for images you may have to fix them for this to work.
Do you compress your CSS and embed it?
If you embed your CSS it can’t be cached. If every stylesheet on digg.com was embeded into the page, load times would take forever.
Eli, You have a good point but not all browsers are the same. Some cache for only a short period of time. It also might be still beneficial to embed if the CSS is relatively short. In digg’s case the CSS would almost certainly be better of cached.
Google uses the embed method. You would think they tested it and came to the conclusion that is is faster. I may have to do my own testing.
Thanks for brining up the cachine issue.
Because google doing it doesnt mean its ‘good’ and we all should go and use it.
V1,
Usually Google does things right. And in this case they are absolutely right for embedding the CSS. After looking into the issue more it actually depends on the site’s visitors. Some sites will benefit from embedding the CSS because the page is generally only loaded once within a short period of time (like google).
Pages like digg usually use the same layout for all of their pages. eg. Page 1, Page 2, Page 3. Digg could benefit by embedding the css on the first page since some of their users don’t make it to the second page; however, since many users do they could load the main page with embedded CSS and dynamically start loading the external CSS for subsequent page visits.
Once the external css is downloaded it will be cached for the next digg page load. Yet the first page that may only recieve one visit will benefit from the faster load time of embedded css. Then after the page is loaded the external CSS can be downloaded incase the user wishes to see additional pages from digg.
[...] doing some research on embedding CSS in HTML I found an interesting link. It turns out that you can embed image data into your URL. This means [...]