📜 ⬆️ ⬇️

More about compression

In this topic, I will try to summarize the material about data compression. It will be compressed css, js, html.

Merging files into modules


The first step to compression was the combination of css and js files into modules. Each module contains a list of css and js files, as well as modules that are necessary for their own work. I decided to keep this information in the application config.
< units >
< Jquery >
< js >
< file > cms / js / Jquery / Core.js </ file >
< file > cms / js / Jquery / Extens.js </ file >
</ js >
</ Jquery >
< Jquery.Facebox >
< depend >
< unit > jQuery </ unit >
</ depend >
< js >
< file > cms / js / Jquery / Facebox.js </ file >
< file > cms / js / Jquery / Pngfix.js </ file >
</ js >
< css >
< file > cms / js / Jquery / Facebox.css </ file >
</ css >
</ Jquery.Facebox >
< Cms.Core >
< js >
< file > cms / js / Cms / Core.js </ file >
< file > cms / js / Cms / Class.js </ file >
</ js >
</ Cms.Core >
</ units > This source code was highlighted with Source Code Highlighter .

Now connect the necessary files is very simple. For this, I wrote a class containing the static loadUnit () method. Depending on the settings, it can connect the source files, or save their contents into one monolithic and connect it.

Compression and minimization


I selected the 3 packers listed in the app. For compression, a class is written that, depending on the system settings, compresses files in a specific way. HTML is also compressed. Also, if gzip compression is enabled in the settings, files are compressed using the gzencode () method.

Caching


In order not to compress files, you can save two options, normal and compressed using the gzip method. These files are sent directly to the web server, bypassing PHP. To determine if the client browser supports compression, use mod_rewrite.
RewriteCond %{HTTP:Accept-Encoding} gzip [OR]
RewriteCond %{HTTP:TE} gzip
RewriteCond %{HTTP_USER_AGENT} !Safari
RewriteCond %{HTTP_USER_AGENT} !Konqueror
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^pack\/(.*)$ /pack/$1.gz [QSA,L]

If there is no file, redirect the request to the script that creates it, or install the 404 error handler.
')

You can still add ...


Compression loses meaning if the user has Outpost. It automatically cuts the Accept-Encoding header, so we cannot find out if it is possible to give a compressed file. This Outpost option is disabled in the registry, but it is not advisable to ask the user to do this. If the user uses the opera, you can use the TE header, which is similar to the Accept-Encoding header. For other browsers, I found only one solution - to determine the possibility of compression by version, but due to the inaccuracy of this method I chose not to use it.

HTML on static sites can be cached in the same way as Java Script and CSS, giving the web server directly to the browser. When data is changed, flush the cache. But not always on sites using static content. Therefore, it is necessary to compress dynamically, which is not acceptable on sites with high traffic. If such sites are statistics on attendance, you can use this data and in hours with low load to give compressed HTML.

If you do not want to write everything yourself and there is no need to adjust the compression for a specific system, you can use the ready-made Minify library.

application


The html compression function (taken from gadelkareem.com ):
function htmlCompress ($ html)
{
preg_match_all ( '! (<(?: code | pre | script). *> [^ <] + </ (?: code | pre | script)>)!' , $ html, $ pre);
$ html = preg_replace ( '! <(?: code | pre). *> [^ <] + </ (?: code | pre)>!' , '# pre #' , $ html);
$ html = preg_replace ( '# <! - [^ \ []. + -> #' , '' , $ html);
$ html = preg_replace ( '/ [\ r \ n \ t] + /' , '' , $ html);
$ html = preg_replace ( '/> [\ s] + </' , '> <' , $ html);
$ html = preg_replace ( '/ [\ s] + /' , '' , $ html);
if (! empty ($ pre [0])) {
foreach ($ pre [0] as $ tag) {
$ html = preg_replace ( '! # pre #!' , $ tag, $ html, 1);
}
}
return $ html;
} * This source code was highlighted with Source Code Highlighter .

Used minimizers:
Dean edwards javascript packer
Minify CSS compression script

Related Links:
Compressing css and js without losing server performance
CSS: all about compression
Practical CSS / JS: archive everything!

Source: https://habr.com/ru/post/30525/


All Articles