Seo Css to minimize the payload size and the rtt
This is the first article of 4 about CSS that focuses on minimizing the payload size and the round-trip-time (RTT).
There are several ways to do it: I’ve listed and explained all techniques that I know and use.
Remember to download Page Speed Tool. We’ll run our tests on it.
Also, remember to check out the References and On-line Tools at the bottom of the page.
Google recommends enabling compression on your web server, setting the Content-Encoding header to gzip format for all compressible resources: not only CSS, but also HTML and JS. When a request contains a “Content-Encoding: gzip” header, the body will automatically be decompressed.
Google also recommends compressing files above a certain size, between 150 and 1000 bytes, because gzipping files below 150 could make them larger.
Further, writing CSS code in conformity to certain rules, makes compression most successful, for example specifying CSS key-value pairs (see Use efficient CSS selectors).
Though, the next step is running Page Speed. If you do not set the Content-Encoding header of your static resources, Page Speed will show you a message and will list the files that are compressible, like the following:
To enable output compression in Apache you have to add the following directives to your .htaccess file:
I also found this code to compress CSS, and JS files excluding image files:
If you can’t modify your .htaccess file, you can use PHP to return compressed content. Give your CSS file a .php extension and add this code to the top and to the bottom:
Then, check the “Accept-encoding” in the response header (see, on-line tools) whether it returns a gzipped version of the file, or the regular version.
Use a separate style-sheet or the <style> tag inside the <head> section (not in the <body>) or both if necessary (see below, Remove Unused CSS). They allow you to clean up your HTML code by avoiding tag misuse and will make the documents more accessible at the same time.
Use a separate css file containing the style rules that are common to every web page of your site and put the other style rules in the <style> tag inside the <head>section to custom a certain web page.
To detect unused CSS I suggest you run a test through Page Speed Tool. Not only will it tell you whether there are style rules that are not used by the web page you are checking, but also will list them indicating the related number lines.
Rimoving style rules that are not used by a document avoids downloading unnecessary bytes and help the browser to start rendering sooner.
To minify CSS code (and Javascript code as well) and save many bytes of data, speed up downloading, parsing, and execution time, there are several free tools, but my favorite one still remains Page Speed.
After running it to check a page referencing CSS files, it allows you to save the minified output to a configurable directory. Also, it allows you to click on the links “optimized version” or “save as”, respectively, to see your minified css code in another tab or to save it in a specific directory.
If you order external style-sheets and external and inline scripts correctly, you will enable better parallelization of downloads and speed up browser rendering times. Just follow these other recommendations:
If your web-site has more than one CSS file, you will get a warning from Page Speed:
Google recommends combining external style-sheets into as few files as possible, a maximum of 3, but preferably 2, CSS files. It helps to reduce latency.
Personally, I recommend having just one CSS file, but if you prefer or need to have many CSS files (or if you think that I’m not as authoritative as Google to say that; it wouldn’t surprise me, even my neighbor’s dog should think the same since I cannot make him obey me), please follow the rules of thumb prescribed by Google for partitioning them.
Do not scale your images on the fly. Use an image editor (see, Seo Optimization Images).
