00 Votes

Website Performance: Deliver JavaScript and CSS files compressed to reduce loading times

Tutorial by Stefan Trost | Last update on 2021-05-10 | Created on 2011-11-18

Even in times of DSL broadband Internet connections, it pays off to look after the size of files and the loading time of a website. Not least because the loading times have now also become a criterion for search engines - also the visitors of a website will stay longer and have a greater experience when the pages build up quickly and they have not to wait foerver until everything is loaded.

A very simple but all the more effective method is to compress CSS and JavaScript files with GZip. CSS and JS files can be reduced by 70 to 80 percent with GZip. A former 13 KB file can be easily reduced to about 3 KB, which is noticeable in significantly lower loading times, that is then reduced in the same ratio.

In this little tutorial, I will show you how you can deliver your JS and CSS files compressed, without neglecting those browsers that do not allow GZip compression.

The .htaccess file

In your .htaccess file in the root directory of your website you need to add the following lines:

<Files *.css.gz>
AddType "text/css" .gz
AddEncoding gzip .gz
<Files *.js.gz>
AddType "application/javascript" .gz
AddEncoding gzip .gz
RewriteBase /
RewriteEngine On
RewriteCond %{HTTP:Accept-Encoding} .*gzip.*
RewriteRule ^(.*)\.css$ $1.css.gz
RewriteRule ^(.*)\.js$ $1.js.gz

Here happens the following: In the lower part behind "RewriteEngine On", first, in a rewrite condition (RewriteCond), we have a look at the requesting browser to check whether this browser supports gzip compression at all.

If so, thereafter we transform in the last two lines the file extension of all files that end with .css to .css.gz. Likewise, all files that are requested and ending with .js are rewritten in .js.gz. Now, for example, whenever the browser asks for style.css, we supply the file named style.css.gz instead to the browser. These files are our compressed files. How we can create them, I will show you later.

But first, we look at the beginning of our .htaccess file. Since our server can not know, how to deal with the files with the extension .gz, we inform him at this point. We know that all files with the extension .css.gz are CSS files and gzip compressed. Therefore, we add to the request for this file type the type "text/css" and give the gzip encoding along the way. Similarly, we do it with the JS files. Here we define "application/javascript" as type. If we do not do this, the browser may not know, how to deal with the appropriate files.

The compressed files

In order to support both, the browsers that support gzip compression and the browsers that do not support this, on our server, there are always two versions of each JS and CSS file in the same directory. Once the uncompressed file, for example "script.js" and once the compressed file, for example "script.js.gz". The files must have exactly the same names, the only difference is, that the compressed file has .gz at the end of its name.

We can easily create the compressed files with the program 7-Zip. To do this, we can simply right-click on our original file, then click on "7-Zip", and then on "Add to archive". Here we choose the archive format "gzip" and click on "OK". After that, we have our compressed file that we can upload together with the original file on the server.

Integration in HTML

In the source code of the HTML page, we do not need to change or adjust anything. Here it is enough, if we integrate our files still in the way we have always done. So for example:

<link type="text/css" rel="stylesheet" href="styles.css" />
<script type="text/javascript" src="myscript.js"></script>

The compressed file with the extension .gz is not mentioned here.

The approach

Now, every time, a browser requests a CSS or JS file, first of all, the code in the .htaccess file checks whether the browser supports gzip compression or not. If not, nothing happens and the original file is delivered. If the browser supports it, the request will be rewritten from .css to .css.gz and the browser is told, that a .css.gz file is a compressed CSS file. The CSS is then transmitted compressed and we are saving a lot of traffic.

Test: Does it work?

If we want to test, if it works, we can use the developer tools in Chrome or the Addon Firebug in Firefox. Both tools have a tab called network where it is displayed in which file size a file hase been transferred. Here we can easily test whether our approch is working.


About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile


Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own article on askingbox.com. That’s how it’s done.