Optimization of loading JavaScript libraries on the example of extJS

So the task was this. The project began to use the extJS library, and everything in it is good, except for its size. This miracle weighs 790 Kb. I began to look for ways to compress the size of the library and increase the speed of loading pages.

It all started with the banal YUICompressor. The latest at the moment version 2.4.2 showed compression
just under 1Kb. I squeezed like this:
java -jar yui.jar --type js --verbose -0 ext-compress.js ext-all.js

Results:
ext-all.js - 538.9 Kb
ext-compressed.js - 537.5 Kb

An unfortunate result. So either my library is already compressed, or I did something wrong.
Then my research went in the direction of the server issuing compressed content through ob_gzhandler.

So the default download:

')
After compression is enabled:


There is no limit to perfection, I thought - what is it that I have the same script requested again
when re-loading. And on the Internet, a solution was found.
It is necessary to use the HTTP protocol feature and more specifically the HTTP_IF_MODIFIED_SINCE header.
Those. The scheme is as follows:
1. The browser makes a request to the server.
2. The server issues the file to the browser, and puts in the headers
Header ("Last-Modified:" .date ("D, j MYH: i: s", filemtime ($ path)). "UTC");
where path is the path to the file on the server.
3. The browser makes a second request, and the server receives the HTTP_IF_MODIFIED_SINCE header.
I want to note that this header will be received only if we sent it before
Last-Modified browser. Compare the received time and the time of the file on the disk, and if they are the same
give the browser a header header ($ _ SERVER ['SERVER_PROTOCOL']. '304 Not Modified') and the browser loads
picture from the cache.

This is what happened when I applied this method:


Reducing the volume from 708Kb to 243Kb plus guaranteed one-time download and auto-update cache
when updating the original file. I think not bad)

How to work with it

Test page

The script itself:
<?php
$path = $_SERVER['QUERY_STRING'];
// /public
if(ereg('/public/', $path)) {
if(file_exists($path)) {
$content = file_get_contents($path);
if($content != false) {
$lastmod = date("D, j MYH:i:s",filemtime($path))." UTC";
// .. , . ,
//
if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']))
{
$modsince = $_SERVER['HTTP_IF_MODIFIED_SINCE'];
if ($modsince != -1 && $modsince == $lastmod)
{
header($_SERVER['SERVER_PROTOCOL'].' 304 Not Modified');
exit();
}
}
// .. ,
@ob_start();
@ob_start('ob_gzhandler');
// css content-type, .. - Apache text/html
if(ereg('.css', $path)) {
Header ("Content-type: text/css");

}
Header("Expires: ".date("D, j MYH:i:s",time()+(86400 *30))." UTC");
Header("Last-Modified: ".date("D, j MYH:i:s",filemtime($path))." UTC");
Header("Cache-Control: Public");
Header("Pragma: Public");
print($content);
ob_end_flush();
}
}
}
?>


What is left behind:
1. For some reason, stubbornly does not want to shrink ext-all.css Rather, it shrinks from 83Kb to 13Kb
but then spoil the page. Those. apparently css-styles are not connected. I will be glad to know how
It can be done.
2. After the compression was turned on, the time increased to 529ms, I think this is due to the slowdown of the computer. Tomorrow I will test on the server.

I ask you not to judge strictly my article, as well as the objectivity of the tests.
Everything was done on a home computer, and even with a bunch of running programs.