Suppose you have create your own wordpress blog, without taking too much care about size of pages, you edit your css a little bit, add several new classes in it (and probably few too much), have inserted a few pictures and some flash animation or banner, and suddenly realize that your website has too many kilobytes. Today is a time of fast internet and networks can carry far more data than before, that is the reason why creators of web pages now are pretty relaxed about the pages size. However, it is still good to keep the website as lightweight as possible, but not to lose anything from our precious and great looking styles, images or animations. That was the case with my style.css. It grown to considerable size during developing of this site. I recently found a great solution how to drastically reduce the weight of a css file. I recommend this to everyone.

The solution is based on compression css file using a php. I found this great solution on the web site paulstamatiou.com. With the help of a few lines of php code you can drastically reduce the weight of a css file. For example, I reduce my own from 47 KB to 10 KB only.

The procedure is as follows:
• Copy the main css file of your wordpress theme and change his name. If you, for example, called the main css file something like style.css (as usual) a copy call style.css.php
• The next step is to correctly call a new css file in the header of your page. Find a line of code where you call the main css in file header.php

header.php

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

and change it into this

<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_url'); ?>/style.css.php"/>

• Now you just have to change newly created file style.css.php. Add two new lines of code, one at the beginning of the file and the other at the end

style.css.php

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>
.
.
/* css content */
.
,
<?php if(extension_loaded('zlib')){ob_end_flush();}?>

• and that’s all. Refresh your page and check the result. Your css file will be several times lighter than before.

The disadvantage of this is that it is no longer css file, it’s now a php, which means that it will be more difficult to edit. In Dreamweaver, for example, you will no longer have offered options while entering values​​. To me this is quite a lack of and makes my changes more difficult. You can help yourself if you still edit the old file style.css and after changes to copy it and repeat the above procedure. Benefits of this procedure are still more attractive comparing to this small defect. And of course, one important note is that this procedure works fine in all current browsers.

This post is also available in: Croatian

(No Ratings Yet)

Loading...

This entry was posted on Monday, May 2nd, 2011 at 00:45 and is filed under html & css, Uncategorized, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response , or trackback from your own site.