Make your PHP webpage loads faster by aggregating external CSS scripts

In most cases, the speed of which a browser completes the rendering a of webpage is very much dependent on the network connection which connects it to a web server. While some browsers have the luxury of fibre connections, there could be others that are rendering your webpages via a mobile network.

Because each HTTP response consists of the header portion in addition to the actual content, we could reduce the number of bytes that our browsers need to read from our servers by aggregating external CSS and JS scripts.

For instance, the following link tags

<link rel="stylesheet" href="externalOne.css" type="text/css" media="all"/>
<link rel="stylesheet" href="externalTwo.css" type="text/css" media="all"/>

will result in a browser downloading two HTTP responses:

HTTP/1.1 200 OK
Date: Mon, 09 Jul 2012 05:27:29 GMT
Server: Apache/2.2.15 (Win32) PHP/5.3.6
Last-Modified: Mon, 09 Jul 2012 05:26:44 GMT
ETag: "90000000172af-e9-4c45edc0f9e6d"
Accept-Ranges: bytes
Content-Length: 233
Keep-Alive: timeout=5, max=99
Connection: Keep-Alive
Content-Type: text/css

body {
    background-color: #EEEEEE;
    background-image: url('barkTexture.gif');
    background-repeat: repeat;
}

#main-content-frame {
    font-family: Verdana, sans-serif;
    font-size: 12px;
    line-height: 18px;
}

and

HTTP/1.1 200 OK
Date: Mon, 09 Jul 2012 05:27:29 GMT
Server: Apache/2.2.15 (Win32) PHP/5.3.6
Last-Modified: Mon, 09 Jul 2012 05:27:25 GMT
ETag: "30000000172c2-39-4c45ede787326"
Accept-Ranges: bytes
Content-Length: 57
Keep-Alive: timeout=5, max=98
Connection: Keep-Alive
Content-Type: text/css

#comments-frame {
    float: left;
    width: 560px;
}

While the combination of these two external stylesheet into one:

<link rel="stylesheet" href="externalOneAndTwo.css" type="text/css" media="all"/>

results in a browser downloading only one HTTP response:

HTTP/1.1 200 OK
Date: Mon, 09 Jul 2012 05:34:19 GMT
Server: Apache/2.2.15 (Win32) PHP/5.3.6
Last-Modified: Mon, 09 Jul 2012 05:33:20 GMT
ETag: "30000000172d7-126-4c45ef3abd401"
Accept-Ranges: bytes
Content-Length: 294
Keep-Alive: timeout=5, max=99
Connection: Keep-Alive
Content-Type: text/css

body {
    background-color: #EEEEEE;
    background-image: url('barkTexture.gif');
    background-repeat: repeat;
}

#main-content-frame {
    font-family: Verdana, sans-serif;
    font-size: 12px;
    line-height: 18px;
}

#comments-frame {
    float: left;
    width: 560px;
}

Indeed, by aggregating the external stylesheets, we can greatly reduce the number of bytes that browsers have to read before they can render our web pages. At the same time, our server end could be more efficient when we can cut down the number of bytes that our server had to send to thousands of browsers at the same time.

The need for to aggregate CSS scripts with PHP

Although we could manually perform the aggregation of CSS styles for small sites, there are cases which we need to aggregate our CSS styles dynamically with our server side coding. For instance, we could have CSS styles generated automatically based on the current time. Or we could be sending the CSS styles for a particular theme that our user had selected.

My attempt to aggregate CSS content for that project was as follows:

  • For the HTML page that requires the CSS styles, I will include the following link tag which points to a PHP script. 
    <link rel="stylesheet" href="styles.css.php" type="text/css" media="all"/>
  • Then in styles.css.php, I read the css contents from the different css files required and write the styles as a single HTTP response back to the browser.

    <?php
header('Content-type: text/css');
readfile('externalOne.css');
echo PHP_EOL;
readfile('externalTwo.css');
?>

Related posts

About Clivant

Clivant a.k.a Chai Heng enjoys composing software and building systems to serve people. He owns techcoil.com and hopes that whatever he had written and built so far had benefited people. All views expressed belongs to him and are not representative of the company that he works/worked for.