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

Minimizing HTML code and CSS-JS files on the site

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

HTML (HyperText Markup Language) is a standardized markup language for documents on the World Wide Web. Most web pages contain a description of markup in HTML (or XHTML). The HTML language is interpreted by browsers; The resulting formatted text is displayed on the monitor of a computer or mobile device.

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

The most important detail of optimizing the web resource for a long time is minimizing the HTML and CSS-JS files that are transferred 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 site load. Minimization occurs by removing unnecessary spaces, tabs, and empty lines. We will tell you how this can be done on your websites "on the fly."

Minimize the HTML code

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

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

This is implemented using two small inserts of PHP code, which uses the most common regular expressions.

The first part must be inserted at the very beginning of the source code of your site (ie just before <! 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 contents of the pre tag are added to the exception, i.e. is not minimized, this 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 that is inserted in the <script> </ script> and <style> </ style> tags, respectively, they remain unimpeded (you can see this in the source page of the blog pages).

I would be happy if someone in the comments will tell you how to properly remove this deficiency, without breaking the performance of scripts.

Minimizing CSS files and JS files using 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 the necessary files are skipped.

You can minimize both individual files and group several files into one, thereby reducing the number of requests to the server.

It is connected simply:

  • Copy the / min / folder to the root of your site.
  • Open the file /min/config.php in a text editor and in the line $ min_enableBuilder = false; change false to true .
  • We go to the address http: // your_site / min / builder / and enter the login and password admin . A tool will be opened to obtain links to files passed through the minimizer.
  • Specify the relative paths to the desired files, click "Update" and get links to the minimized versions.
  • After you have received all the necessary links, it's better to close the access to the builder. To do this, in config.php, reverse the change to true to false in the string $ min_enableBuilder = true; .

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

For example:

  • The source file is 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 feature of Minify, which someone might need. On some servers, the minimizer must be in the .htaccess file (in the / min / folder) to remove the # sign (comment mark) in the #RewriteBase / min line . The RewriteBase directive sets the base URL for the transformations in the context of the directory.

Via dimox.name & wiki