Enable com­pres­sion

Google rec­om­mends enabling com­pres­sion on your web server, set­ting the Content-Encoding header to gzip for­mat for all com­press­ible resources: not only CSS, but also HTML and JS. When a request con­tains a “Content-Encoding: gzip” header, the body will auto­mat­i­cally be decompressed.

Google also rec­om­mends com­press­ing files above a cer­tain size, between 150 and 1000 bytes, because gzip­ping files below 150 could make them larger.

Fur­ther, writ­ing CSS code in con­for­mity to cer­tain rules, makes com­pres­sion most suc­cess­ful, for exam­ple spec­i­fy­ing CSS key-value pairs (see Use effi­cient CSS selectors).

Though, the next step is run­ning Page Speed. If you do not set the Content-Encoding header of your sta­tic resources, Page Speed will show you a mes­sage and will list the files that are com­press­ible, like the following:

  1. Com­press­ing the fol­low­ing resources with gzip could reduce their trans­fer size
  2. by 257.7 KiB (75% reduction).
  3. Com­press­ing http://www.example.com/css/style.css could save 34.3.KiB (63% reduction).
  4. …etc.

How to con­fig­ure the web server and enable compression?

To enable out­put com­pres­sion in Apache you have to add the fol­low­ing direc­tives to your .htac­cess file:

  1. # To com­press css:
  2. Add­Out­put­Fil­ter­By­Type DEFLATE text/css
  3. # To com­press cer­tain file by extension:
  4. <Files *.css>
  5. SetOut­put­Fil­ter DEFLATE
  6. </Files>

I also found this code to com­press CSS, and JS files exclud­ing image files:

  1. <ifMod­ule mod_gzip.c>
  2. # To enable gzip compression
  3. mod_gzip_on Yes
  4. # To elim­i­nate the HTTP header ‘Transfer-encoding: chunked’
  5. mod_gzip_dechunk Yes
  6. # To include css files
  7. mod_gzip_item_include file \.css$
  8. # To include javascript files
  9. mod_gzip_item_include file \.js$
  10. mod_gzip_item_include mime ^application/x-javascript.*
  11. # To not com­press images
  12. mod_gzip_item_exclude mime ^image/.*
  13. </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 ob_start (“ob_gzhandler”);
  2. body {background:#FFF; font-size:1em;} // your CSS code
  3. footer {background:#000;}
  4. <?php ob_end_flush();?>

Then, check the “Accept-encoding” in the response header (see, on-line tools) whether it returns a gzipped ver­sion of the file, or the reg­u­lar version.

Sep­a­rate doc­u­ment struc­ture from presentation

Use a sep­a­rate style-sheet or the <style> tag inside the <head> sec­tion (not in the <body>) or both if nec­es­sary (see below, Remove Unused CSS). They allow you to clean up your HTML code by avoid­ing tag mis­use and will make the doc­u­ments more acces­si­ble at the same time.

Remove unused Css

Use a sep­a­rate css file con­tain­ing the style rules that are com­mon to every web page of your site and put the other style rules in the <style> tag inside the <head>section to cus­tom a cer­tain web page.

To detect unused CSS I sug­gest 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 check­ing, but also will list them indi­cat­ing the related num­ber lines.

  1. 53.1% of CSS (esti­mated 55.3KB of 104KB) is not used by the cur­rent page.
  2. http://www.example.com/css/style.css: 805 byte of 1.6KB is not used by the cur­rent page.
  3. .ui-notify
  4. line 11
  5. div.checker
  6. line 34
  7. …etc.

Rimov­ing style rules that are not used by a doc­u­ment avoids down­load­ing unnec­es­sary bytes and help the browser to start ren­der­ing sooner.

Minify Css

To minify CSS code (and Javascript code as well) and save many bytes of data, speed up down­load­ing, pars­ing, and exe­cu­tion time, there are sev­eral free tools, but my favorite one still remains Page Speed.

After run­ning it to check a page ref­er­enc­ing CSS files, it allows you to save the mini­fied out­put to a con­fig­urable direc­tory. Also, it allows you to click on the links “opti­mized ver­sion” or “save as”, respec­tively, to see your mini­fied css code in another tab or to save it in a spe­cific directory.

  1. Mini­fy­ing the fol­low­ing CSS resources could reduce their size by 22.8KiB (22% reduction).
  2. Mini­fy­ing http://www.example.com/css/style.css could save 9.5KB (25% reduction).
  3. See opti­mized ver­sion or Save as.

Opti­mize the order of styles

If you order exter­nal style-sheets and exter­nal and inline scripts cor­rectly, you will enable bet­ter par­al­leliza­tion of down­loads and speed up browser ren­der­ing times. Just fol­low these other recommendations:

  • Put exter­nal scripts after exter­nal style-sheets. Style-sheets should always be spec­i­fied in the head of a doc­u­ment and any exter­nal JS files, that must be included in the head, have to fol­low them. This, because browsers delay ren­der­ing any con­tent that fol­lows a script tag until it has been down­loaded, parsed, and exe­cuted. Another rea­son is that CSS files already in the process of being down­loaded when a JS file is ref­er­enced, the JS file is down­loaded in par­al­lel with them. Would you start wash­ing clothes in the wash­ing machine and wait for it to fin­ish before start­ing wash­ing the dishes?;
  • Put inline scripts after other resources, if there is not depen­dency. It will pre­vent to block other down­loads and enable pro­gres­sive ren­der­ing. If it is not pos­si­ble, move the inline scripts before the CSS files.

Com­bine exter­nal Css

If your web-site has more than one CSS file, you will get a warn­ing from Page Speed:

  1. There are 3 CSS files served from example.com. They should be com­bined into as few files
  2. as pos­si­ble.
  3. http://www.example.com/css/style1.css
  4. http://www.example.com/css/style2.css
  5. http://www.example.com/css/style3.css

Google rec­om­mends com­bin­ing exter­nal style-sheets into as few files as pos­si­ble, a max­i­mum of 3, but prefer­ably 2, CSS files. It helps to reduce latency.

Per­son­ally, I rec­om­mend hav­ing just one CSS file, but if you pre­fer or need to have many CSS files (or if you think that I’m not as author­i­ta­tive as Google to say that; it wouldn’t sur­prise me, even my neighbor’s dog should think the same since I can­not make him obey me), please fol­low the rules of thumb pre­scribed by Google for par­ti­tion­ing them.

Serve Scale Images

Do not scale your images on the fly. Use an image edi­tor (see, Seo Opti­miza­tion Images).

Tagged with:
 

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>