Speed up website by caching, combining and compressing

Front-end development is very tricky. It's easy enough to learn, but it's quite difficult to become an HTML/CSS/JavaScript guru. And even after you are front-end master it doesn't give any guarantees about load speed of your website. It happens because even absolutely perfect front-end code can't stand the high load without strong assistance of server-side software.

There are many things making the website load time incredibly big. It sounds ridiculous but the worst evil of any website is an HTTP request. One HTTP request gives life to the website. Twenty requests per visitor kill it. Every JavaScript or CSS file added to the website gives you another HTTP request making it slower and slower. And one day you get to the edge between cool features and high load speed. And you have to get rid of either some features or some requests. Let's see what Minify application proposes to solve this problem.

Minify is a PHP5 application that allows to reduce amount of HTTP requests and speed up your website. Imagine that you have 10 external JavaScript files for the website. It means you have 10 additional requests for every page. And every request will take certain time to load. That's slow. So what does Minify do?

  • It reduces size of every file by removing overhead like comments, formatting spaces and new line characters.
  • It combines separate minimized files into one complete file respecting load sequence.
  • It reduces the future amount of HTTP requests browser will make to load and run JavaScript.
  • It compresses resulting file using gzip and places it to the configurable cache directory making the size of the file dramatically low.
  • Finally it sends Cache-Control header telling the browser when to request the content next time. Caching interval is easily configurable.

Minify works almost the same way for CSS and JavaScript files. It has prebuilt plugins for Wordpress and view helpers for Zend Framework. Minify is capable of handling hundreds of requests per second on a moderately powerful server. You can learn how it works in details from the official Minify wiki page. Now let's integrate Minify to a custom built PHP-based website.

Install Minify application

First of all you need to download fresh version of application from the official page and unzip the files to "minify" directory. Next, copy "min" folder into your DOCUMENT_ROOT.

That's all. Your copy of Minify application is up and running. Let's start using it.

Use Minify URI Builder

1. Browse to the Minify URI Builder located on http://example.com/min/ page. It will help you create URIs you can use to minify existing files on your site.

Minify URI Builder - Initial state

2. Type in URIs of JavaScript files on your website. As all files are added to the list click the Update button just below.

Minify URI Builder - Select files to minify

3. Application generates the URI you can use to serve these files as one.

Minify URI Builder - Generated URI

4. Copy generated URI and put it to the script tag in the head of your website.

5. Done! Using generated URI Minify will minimize, combine, compress and cache all your local JavaScript and CSS files giving you faster loading pages and reduced bandwidth.

Leave a comment