suture-thumb

Decrease Page Load Time by Suturing CSS and JavaScript files

While designing a medium-large site, one may require linking to multiple stylesheets and JavaScript files in the head section of HTML document.
Here is a sample HTML document that similarly includes many CSS and JavaScript files

<!DOCTYPE html>
    <html>
        <head>
            <title>My Site</title>
            <link rel="stylesheet" type="text/css" href="path/to/cssReset.css">
            <link rel="stylesheet" type="text/css" href="path/to/960framework.css">
            <link rel="stylesheet" type="text/css" href="path/to/base.css">
            <link rel="stylesheet" type="text/css" href="path/to/navigations.css">
                
            <script type="text/javascript" src="path/to/jQuery.js"></script>
            <script type="text/javascript" src="path/to/functions.js"></script>
            <script type="text/javascript" src="path/to/handlers.js"></script>
            <script type="text/javascript" src="path/to/ajax.js"></script>
            <script type="text/javascript" src="path/to/audio.js"></script>
            <script type="text/javascript" src="path/to/script.js"></script>
        </head>
        <body>
            <!-- body content -->
        </body>
    </html>

The Problem

The problem with above code is that to download all the stylesheets and scripts, the web browser will make 10 different HTTP requests to the server, one for each file. HTTP requests are slow and can increase page load time on the client side and hamper performance on the server side. So we are going to see how can we reduce the number of HTTP requests required to load all the files.

PHP to the rescue

One of the simplest solution is to combine all the different files into one single file on the server-side and then fetch it on the client-side using only a single HTTP request.
This technique is called suturing and is popularly used to reduce server load, page load time and increase site performance.

On the server, create 2 new files called allStyles.css.php and allScripts.js.php in the /path/to directories.

allStyles.css.php

include("cssReset.css");
include("960framework.css");
include("base.css");
include("navigations.css");

allScripts.js.php

include("jQuery.js");
include("functions.js");
include("handlers.js");
include("ajax.js");
include("audio.js");
include("script.js");

We can now modify our HTML document to:

<!DOCTYPE html>
    <html>
        <head>
            <title>My Site</title>
            <link rel="stylesheet" type="text/css" href="path/to/allStyles.css.php">
            <script type="text/javascript" src="path/to/allScripts.js.php"></script>
        </head>
        <body>
            <!-- body content -->
        </body>
    </html>

We have now reduced the number of HTTP requests required from 10 to just 2!
Though we are still giving the server some extra work in form of include statements, they are still quicker than separate HTTP requests.
If you are using any other language on back-end, you can still implement suturing using functions equivalent to php’s include().

Admin

I am a student of Computer Engineering and a freelance web designer and developer with a passion for interface design. WordPress is my framework of choice and I also build web and mobile applications. My Google+ Profile

3 responses to this entry

  • Reply / Quote
  • you forget about
    header(“Content-type: application/javascript”);
    and
    header(“Content-type: application/css”);

    and for me its dosent work

    i have tipsy, preloader, glow

    and someone is messing others scripts

    Reply / Quote
  • so you’re saying that html files will download/add the php code, right?

    Reply / Quote

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>

© 2014 All rights reserved | Powered by WordPress
Back to top ↑
Theme by dynamicguru.com