How to style your web-site with Seo Css



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:

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

2 Responses to Seo Css to Optimize caching

  1. cfm623.com says:

    I think this is among the most sig­nif­i­cant info for me. And i
    am glad read­ing your arti­cle. But want to
    remark on few gen­eral things, The site style is great, the arti­cles is really nice :
    D. Good job, cheers

    Thanks for using a moment to eval­u­a­tion my infor­ma­tion.
    I hope you feel free to have a look at my web site also for addi­tional infor­ma­tion and help­ful strate­gies :
    : cfm623.com

  2. Good day! I sim­ply wish to give an enor­mous thumbs up for the nice data you could
    have right here on this post. I will prob­a­bly be com­ing again to your
    blog for more soon.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>