Speed 
Optimize CSS Delivery
CSS can be used many ways by a web page and still work. Since there are many ways to use it there exist many different CSS setups.
No matter how it is set up on your pages your CSS should be helping your webpages render faster not slowing them down.
Web designers
The way CSS is used on a webpage has overwhelmingly been determined by web designers, not website owners. So the web designer is making lovely, well commented CSS code and has been placing it in several different files for clarity. They think, with merit, "I have done an amazing wonderful job". This is what they have been taught.
Unfortunately this practice and others ends up killing the performance of web pages. If the CSS is in multiple files, there are multiple requests made before the page can be displayed on a browser, slowing down the pageload and severely hurting mobile page loads. All CSS should be in just one file for the best web performance possible.
As this realization gets out there, you will notice that web designers will start making code that helps their users by working as fast as possible, however, for the moment... You probably have CSS that is hurting your website rather than helping it.
An example of an "optimized CSS delivery"
Google documentation and page speed videos tell us what a good CSS setup looks like.
- No more than one external CSS stylesheet
- Inline small CSS into HTML using style tags for above the fold content
- No @import calls for CSS
- No CSS in HTML things like your divs or your h1s (in element CSS)
If you are familiar with these different types of CSS delivery, then you can use the css delivery tool to get an overview of how your webpage or blogpost uses CSS.
If you are not familiar, don't panic, I explain them each below (it is less confusing than it first appears, I promise).
External CSS files
External CSS files are the main way that CSS is being used in webpages, and very likely the way your CSS is being used. In the head section of your html there is something that often looks like this...
<link rel="stylesheet" type="text/css" href="http://yoursite.com/main.css" media="screen" title="style (screen)" />
This calls your CSS file and these are called external because the CSS instructions are in a separate file than your HTML. Having an external CSS file is the defacto way to handle your CSS and has the advantage of your CSS being cached (remembered) by a web browser. Where the problem comes is if you have several of these files. Unfortunately, this is often the case in Wordpress and other types of themes.
If you have more than one CSS file they should be combined into one file
When you have several external CSS files the browser has to download each one before it can display your page. This causes many roundtrips to get each CSS file which results in your webpage being slow to load. This can be easily changed by combining all the CSS files into one file.
- To see how many external CSS files your webpage is using go here
- To get instructions on how to combine external CSS files go here
Inline CSS
Inline CSS are CSS instructions that are included in the HTML document itself. The main advantage with this method is that no extra (external) file has to be retrieve before the website is shown. This advantage is only a real one if the CSS instructions are small. If your CSS is large this is not a good method for you.
Inlined style is accomplished by placing instructions within style tags as shown below...
<style>
CSS goes here
</style>
Inlined small CSS can really speed up the way pages load in web browsers.
- To see if your webpage is using inlined CSS go here
- To get instructions on how to inline CSS go here
Do not use @import to call your CSS files
The @import method is where external CSS files are called using the @import command rather than linking to it directly as discussed above. This method cause the CSS file or files called to load slower than the link method as they can only be downloaded one at a time using this method. In your code it looks like this...
@import url("style.css")
These calls really hurt your web page speed, and many designers use it still so it should checked for.
Do not inline CSS attributes in HTML elements
It is very common to just put styles into HTML elements, in fact, I tend to do this all the time. The Google pagespeed guideline "Optimize CSS delivery" tells that we should not do this anymore. It says that this will cause the browser to respond slower and that it is not going to be wise to have any such styles in our code because to do so is against the Content Security Policy of W3 which is a security protocol that will block any element levels styles by default. These styles look like this...
<p style="float:left;"> or <div style="color:#fff;">
I have alot of these in my code, and I will have to do much work to get rid of them all.
- To see if your webpage has these types of CSS go here
In Closing
As you can see there are many ways that CSS is used on webpages, but the bottom line is that we need to clean up the code and use the recommended CSS delivery to ensure our pages are loading as fast as they can.
The recommendations are:- Combine external CSS stylesheets
- Inline small CSS in style tags
- No @import calls for CSS where appropriate
- No CSS in HTML things like your divs or your h1s (in element CSS)
by Patrick Sexton