Bundle CSS to Load Page Faster

A test with a simple HTML page over a DSL connection shows that one big stylesheet or css of 50 KB can speed up load time by factor 2 compared to five stylesheets that are 10 KB each in size:

• 5 Stylesheets (10KB each): 1100ms
• 1 Stylesheet (50KB): 500ms

So , How to make them one without breaking or editing them ? I am going to show you how to do this .

Let you have 5 Stylesheet or CSS :

1. style1.css
2. style2.css
3. style3.css
4. style4.css
5. style5.css

Normally they are like this in your page :

<link rel="stylesheet" href="css/style1.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style2.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style3.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style4.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style5.css" type="text/css" media="all">

Assuming those css files are in “css” folder .

Now create a php file where index.php is , naming “css.php” and put below codes :

<?php
header('Content-type: text/css');
# File css.php
readfile("css/style1.css");
readfile("css/style2.css");
readfile("css/style3.css");
readfile("css/style4.css");
readfile("css/style5.css");
?>

Save this file . And remove :

<link rel="stylesheet" href="css/style1.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style2.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style3.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style4.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style5.css" type="text/css" media="all">

from your page and replace with :

<link rel="stylesheet" type="text/css" href="css.php" />

And save that page . Now you can check by Google PageSpeed Insight .