This page has been robot translated, sorry for typos if any. Original content here.

Minimization of HTML code and CSS-JS files on the site

Минимизация HTML кода и CSS-JS файлов на сайте

HTML (from the English. HyperText Markup Language - “Hypertext Markup Language”) is a standardized markup language for documents on the World Wide Web. Most web pages contain HTML (or XHTML) markup. HTML is interpreted by browsers; formatted text resulting from interpretation is displayed on the monitor of a computer or mobile device.

HTML is an SGML application (standard generalized markup language) and complies with the international standard ISO 8879. XHTML is a more rigorous version of HTML, it follows all the limitations of XML and, in fact, XHTML can be seen as an XML application to the hypertext markup area. On the World Wide Web, HTML pages are usually transmitted to browsers from the server using HTTP or HTTPS protocols, in plain text or using encryption.

The most important part of optimizing a web resource for a long time is the minimization of HTML and CSS-JS files that are transmitted to the browser at the time of visiting the site. You can compress everything, HTML-code pages, CSS-files and JS-files. These measures can significantly reduce the size of the resulting code and slightly speed up the loading of the site. Minimization is due to the removal of extra spaces, tabs and empty lines. Let us tell you how this can be done on your websites on the fly.

HTML minimization

Минимизация HTML кода и CSS-JS файлов на сайте

Look at the source code of this site to see how it will look as a result. As you can see, almost all the html code of the page is not formatted and “assembled in a heap” (about why “almost” will be described below).

This is accomplished using two small PHP code inserts that use the most common regular expressions.

The first part must be inserted at the very beginning of the source code of your site (ie, right before the <! DOCTYPE ...> ):

 <? php
 / *
 * HTML minimization
 * /
 ob_start ();
 ?>

And the second part, on the contrary, must be inserted at the very end of the source code of the site, i.e. after the </ body> tag :

 <? php / * * HTML minimization * / $ out = ob_get_clean ();  $ out = preg_replace ('/ (?! [^ <] * <\ / pre>) [\ n \ r \ t] + /', "\ n", $ out);  $ out = preg_replace ('/ {2,} /', '', $ out);  $ out = preg_replace ('/> [\ n] + /', '>', $ out);  echo $ out;  ?> 

Important: The content of the pre tag is added to the exception, i.e. It is not minimized, it is necessary for the correct display of code examples.

As for the connected JS and CSS files, as well as their inclusion in the code, which are inserted respectively in the tags <script> </ script> and <style> </ style> , remain not minimized (you can see it in the source pages of the blog).

I would be glad if someone in the comments tells you how to correctly eliminate this flaw, without breaking the working capacity of the scripts.

Minimize CSS Files and JS Files with Minify

Минимизация HTML кода и CSS-JS файлов на сайте

To do this, use the wonderful free tool Minify . This is a PHP application that is put into a separate daddy on the site and through which all necessary files are passed.

It is possible to minimize both individual files and group several files into one, thereby reducing the number of requests to the server.

It simply connects:

  • Copy the folder / min / to the root of your site.
  • Open the /min/config.php file in a text editor and in the line $ min_enableBuilder = false; change false to true .
  • Go to the address http: // your_site / min / builder / and enter the username and password admin . A tool will open to get links to files passed through the minimizer.
  • Specify relative paths to the required files, click “Update” and get links to minimized versions.
  • After getting all the necessary links, it is better to close access to the builder. To do this, in config.php we change true to false in the line $ min_enableBuilder = true; .

If you have several files of the same type, I recommend using the grouping (for this purpose, the /min/groupsConfig.php file is being edited ). In the builder, and even in the file itself, examples are shown of how to combine several CSS or JS files. By the way, even if you have only one file and you want to shorten the path to it while minimizing, then you can also use grouping.

For example:

  • Source file - http://www.shram.kiev.ua/templates3/css/style.css
  • Grouping in groupsConfig.php :
     return array (
      'style.css' => array ('// templates3 / css / style.css'),
     );
    
  • The result is http://www.shram.kiev.ua/min/f=/templates3/css/style.css

There is another Minify feature that someone might need. On some servers, for the minimizer to work correctly, it is necessary to remove the # (comment sign) in the #RewriteBase / min line in the .htaccess file (which is in the / min / folder). The rewritebase directive sets the base URL for conversions in the context of a directory.

Via dimox.name & wiki