Seo Css to Optimize caching

How to style your web-site with Seo Css

Seo Css to opti­mize browser rendering

In this arti­cle, the third of 4 about CSS (I see, be patient, soon I will change the sub­ject), I will talk about how to opti­mize caching.

Browser and proxy caching for sta­tic resources like CSS files allows you to:

• Elim­i­nate HTTP requests;
• Reduce the pay­load size of the responses;
• Reduce the bandwidth;
• Reduce host­ing costs.

All of them lead to a fast page load­ing time.

For those who missed the pre­vi­ous episodes, before start­ing to read the next sub­sec­tion, I sug­gest you to down­load Page Speed Tool. We’ll run our test on it. Then, after fin­ish­ing read­ing them, check out the Ref­er­ences and On-line Tools. Enjoy!

Lever­age browser caching

Before to instruct the browsers to load resources that are down­loaded from local disk rather than over the net­work, become famil­iar with the caching response head­ers that HTTP/1.1 provides:

• Expires and Cache-Control: max-age to spec­ify the period of time dur­ing which the browser can use the resource in the cache with­out check­ing for a new avail­able ver­sion from the web server;
• Last-Modified and ETag to spec­ify respec­tively a date and a file ver­sions or con­tent hashes (the most typ­i­cal) about the resource that the browser checks to deter­mine if the files are the same.

Google rec­om­mends spec­i­fy­ing one of Expires or Cache-Control: max-age, and one of Last-Modified or ETag, for CSS, JS, PDFs, media files, Flash files, etc. HTML is not sta­tic, and shouldn’t be con­sid­ered cacheable. Do not spec­ify both Expires and Cache-Control: max-age, or both Last-Modified and ETag: it is redundant.

Fur­ther rec­om­men­da­tions are:

• Set head­ers to a min­i­mum of one month up to one year for all sta­tic resources. Google prefers Expires over Cache-Control: max-age because it is more supported;
• Set the Last Mod­i­fied date to the last time the resources was changed;
• Embed a fin­ger­print of the resource in its URL (i.e. the file path) to dynam­i­cally enable caching, so when the resource changes, also its fin­ger­print and, in turn, its URL does and the browser is forced to re-fetch the resource (see, Embed­ding a fingerprint);
• Set the Vary header cor­rectly for Inter­net Explorer because it does not cache any resources that are served with the Vary header and any fields but Accept-Encoding and User-Agent. So, make sure to remove any other fields from the Vary header, or, if pos­si­ble, the Vary header altogether;
• Ensure that your appli­ca­tion gen­er­ates URLs that dif­fer on more than 8-character bound­aries, to avoid cache col­li­sions and max­i­mize cache hit rate in Fire­fox, when using fin­ger­print­ing or other soft­ware generators;
• Use the Cache con­trol: pub­lic direc­tive to enable HTTPS caching for Firefox.

If you do not set an expi­ra­tion to your resources, after run­ning Page Speed, you will get:

1. The fol­low­ing cacheable resources have a short fresh­ness life­time. Spec­ify an expi­ra­tion at
2. least one week in the future for the fol­low­ing resources:
3. http://www.example.com/css/style1.css (1 day)
4. http://www.example.com/css/style2.css (1 day)
5. …etc.

How to set the response head­ers to lever­age browser caching?

To set the caching response head­ers in Apache you have to add the fol­low­ing direc­tives to your .htac­cess file:

1. # Caching:
2. <Files­Match “\.(js|css)$”>
3. Header set Expires “Tue, 10 Aug 2011 23:40:00 GMT“
4. </FilesMatch>

I also found this alter­na­tive method to set your headers:

1. # Caching:
2. <ifMod­ule mod_expires.c>
3. Expire­sAc­tive On
4. # 1 Year
5. Expires­By­Type text/css “access plus 29030400 seconds“
6. # 1 Year
7. Expires­By­Type text/javascript “access plus 29030400 seconds“
8. </ifModule>

If you can’t mod­ify your .htac­cess file, you can use PHP to return com­pressed con­tent. Give your CSS file a .php exten­sion and add this code to the top and to the bottom:

1. <?php
2. header(‘Last-Modified: ‘.gmdate(‘D, d M Y H:i:s’, filem­time($_SERVER[’SCRIPT_FILENAME’])).
3. ’ GMT’, true, 200);
4. $expires = 60*60*24*365; // 1 year
5. header(‘Expires: ’ . 200);gmdate(‘D, d M Y H:i:s’, 200);time()+$expires) . ’ GMT’);
6. header(‘content-type: text/css; charset: UTF-8′);
7. ?>
8. body{background:color:#000;font-size:13px;}…// your css code

Lever­age proxy caching

Lever­age proxy caching means enabling pub­lic caching in the HTTP head­ers for sta­tic resources as CSS files (but also JS and images files) to allow the browsers to down­load them from a near proxy server rather than from a remote server (the ori­gin) reduc­ing net­work latency significantly.

Fur­ther, enabling proxy caching gives you free web site host­ing, since responses served from proxy caches don’t con­sume your servers’ band­width at all.

To indi­cate that a resource can be cached by pub­lic web prox­ies in addi­tion to the browser you only need to con­fig­ure your web server to set the header of the resource to pub­lic, as shown in the exam­ple, but before doing it, read the excep­tions described below:

• Don’t include a query string in the URL for sta­tic resources, because some prox­ies do not cache resources with a “?” in their URL, so remove it;
• Don’t enable proxy caching for resources that set cook­ies. Serve these resources from a cookie-less domain (see next subsection);
• Be aware of issues with proxy caching of CSS and JS files. Not always the client browsers can decom­press gzipped files prop­erly, so to ensure that the client can read your files cor­rectly you should set:
  • The Cache-Control header to pri­vate, to dis­able proxy caching;
  • The Vary: Accept-Encoding response header to instruct the prox­ies to cache two ver­sions of the resource: one com­pressed, and one uncom­pressed, to allow the right deliver to the client.

If you do not spec­ify a Vary: Accept-Encoding header, after run­ning Page Speed, you will get:

1. The fol­low­ing pub­licly cacheable, com­press­ible resources should have a “Vary: Accept-Encoding“
2. header:
3. http://www.example.com/css/style1.css
4. http://www.example.com/css/style2.css
5. …etc.

How to set the response head­ers to lever­age proxy caching?

To set the caching response head­ers in Apache you have to add the fol­low­ing direc­tives to your .htac­cess file:

1. # Caching:
2. <Files­Match “\.(js|css)$”>
3. Header set Cache-Control “private“
4. Header append Vary Accept-Encoding
5. </FilesMatch>

If you can’t mod­ify your .htac­cess file, you can use PHP to return com­pressed con­tent. Give your CSS file a .php exten­sion and add this code to the top and to the bottom:

1. <?php
2. header(‘Cache-Control: pri­vate’);
3. header(‘Vary: Accept-Encoding’);
4. header(‘content-type: text/css; charset: UTF-8′);
5. ?>
6. body{background:color:#000;font-size:13px;}…// your css code