Home » CSS & XHTML, Enterprise Web, Javascript & Libraries, PHP/MySQL, Programming Techniques » Enhance your Website Performance – Best Practices

4

Do you think your website is sluggish? Does it take a lot of time to download on to a user computer? Here are some techniques to make your site load faster on user computers and enhance it’s performance. These are some of the best practices followed in the Web industry. Implementing these practices has proved that your site will become 20-30% faster. This tutorial is for advanced users and I haven’t explained it in detail.

Combine all your Javascript files and CSS files in to one file each.
Normally we include multiple Script files in web pages. You can probably write a PHP script which accepts an array of names of all the script files to be included in the webpage which then fetches the content of the files and creates just one file and passes on to the browser. This doesn’t reduce the file size. The combined file size is not less than the sum of the sizes of the individual files. But it reduces the number of HTTP requests sent to your server.

Similarly you can combine all your icon/background images in to a single image and use CSS techniques like “background-position” to show different images at different places. Remember each image causes an HTTP request and you can reduce a lot of requests doing this way.

Use YUI Compressor to minify your Javascrip and CSS files.
When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced.

Add Never Expires header for your Javascript and CSS files
You can use Apaches mod_expires module to set Cache-Control header for certain file types. You can configure your apache configuration to add statements like this,
ExpiresByType image/gif “access plus 1 months”
You can add Never expires header for your Javascript and CSS files. If you constantly make changes to your Script and CSS files you will have to rename the files every time you make changes.

Enable Compression
Enable compression using Gzip. 90% of the browsers support this. You can compress your text content, xml, script files etc but not images.

Stylesheets in your header
Make sure that your style sheets are inside the Head tag.

These are some simple things you can implement but will obviously enhance your website performance.

Good luck!

4 Comments

  1. Prajeesh says:

    Excellent article. thanks for sharing. We can use YSlow to evaluate the performance of a website. It’s a client side utility.

  2. I’ve been thinking about the never expires tag. I’ve used settings of 48 hours or 1 week for this exact reason – that unless you rename the file, the changes are never pushed out. Using a setting like this instead of automatic does offer an improvement in performance, whilst still allowing users to get the new javascript after a delay (or earlier if they clear their browser cache).

    However, can we automate this process? If we supply PHP with a list of javascript files to include, why not generate a unique name for the combined file that reflects the files chosen and the timestamp of the most recently modified file?

    E.g.
    $viewjs->include_js(‘A.js’);
    $viewjs->include_js(‘B.js’);
    $viewjs->render_js();

    Outputs:
    …where A_B_1274628.js is result of concatenating A.js and B.js, where the most recently modified file has a modified time of 1274628 (unix timestamp).

    class view_js {
    private static $js_to_include=array();
    private static $js_mod_date=0;
    private static $jscacheroot = “$site/app/cache/js/”

    public function include_js($filename){
    if (!in_array(self::$js_to_include,$filename) {
    if (file_exists($js_file)) {
    self::$js_to_include[] = $filename;
    if (filemtime($js_file) > self::$last_mod) {
    self:$js_mod_date = filemtime($js_file);
    }
    } else {
    debug(“Included file not found: $filename”);
    }
    }

    function render_js(){
    if (self::$js_to_include) {
    $comb_js = ”;
    foreach (self::$js_to_include as $js_file) {
    $fname = substr($js_file,0,strlen($js_file)-3));
    $comb_js .= $fname.’_';
    }
    $comb_js .= self::$js_mod_date;
    if (!fileexists($_SERVER['DOCUMENT_ROOT'].’/’.$jscacheroot.$comb_js)){
    // concatenate all files in array into a file called $comb_js in $jscacheroot
    // optionally remove all comments as you do so.
    }
    echo “”
    }

  3. Would be easier to follow if you had a code tag in the comments so you can see the indenting..
    Also, it has removed the javascript tags completely from the comment.

    This solution works if all your js is in one folder, and thus have unique names. It also requires that the modified timestamp is set to now() whenever you deploy the code to the server – if you move files without changing the mtime then you would need a more clever algorithm.

Leave a Reply

Page optimized by WP Minify WordPress Plugin