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>
            <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>
            <!-- body content -->

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.





We can now modify our HTML document to:

<!DOCTYPE html>
            <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>
            <!-- body content -->

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

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>

2018 All rights reserved | Powered by WordPress
Back to top
Theme by