Decrease Page Load Time by Suturing CSS and JavaScript files

Mujtaba on 16 Nov 2012 with 3 comments

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().