Client optimization as a service

From the very beginning of my activity as a web developer, I dreamed of having a tool that would allow me to automatically receive an optimized version of my site or web application. In the past, optimization was reduced to the manual formation of ordinary sprites, then to compress the scripts and styles separately. When making any changes, the hemorrhoids were partially repeated anew. Thanks to the new client optimization service, this is now in the past.

Preamble

After the data: uri technology appeared, a number of studies were conducted in the direction of automating the process of optimizing sites using this technology. As a result, a new technology Data URI CSS Sprites . I remember what was the euphoria when the cross-browser connection code data: uri css sprites was received. It was a great joy. Which unfortunately lasted only a couple of days, as problems were found for IE7 @ Vista. For almost two years there was no solution, and for almost two years, a crutch for IE7 @ Vista was used in the data: uri css technology of sprites. But just a couple of months ago, a solution was found. No matter how trite and insulting it turned out - the solution turned out to be so simple that at first I could not believe in its performance. Having added only two (!) Necessary characters to the end of the file with sprites - the problem disappeared. Having performed a series of experiments, it is now possible to state with confidence that the technology works cross-browser!

But that's not the point, the essence of the article in the proposed approach to automatic optimization.

Algorithm of client optimization as a service

You are mounting an optimizer file that determines (calculates) non-optimized scripts and styles into a site template. When accessing any page of the site, the file optimizer checks for an optimized version of scripts and styles, and if not found, it sends a command to a special service - “they say there is something to optimize” and dies (i.e., does not block further work site pages). The service in asynchronous mode comes to the page that needs to be optimized, analyzes it, makes the squeeze and forms the optimal package. After that, it accesses the optimizer file and gives the optimized version of the scripts and styles. The file optimizer puts the optimized version in the right place and the next time you access this page, it will give the client the best option.

')

So far, at the moment, the file optimizer is designed for Drupal.

Installation Instructions for Drupal

1) create a folder on the server optimum, in the directory where drupal is installed

2) we check the rights to write to this folder to the user who is running the web server

3) download the file duris.php (v. 1.0.3) and put it in the optimum folder

4) connect to the file duris.php in the template file at the very beginning, something like this

<?php include_once(dirname(__FILE__).'/../../optimum/duris.php'); ?>
    

      
      
      
    

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

5) go over the pages, look at the firebug, go over the pages again

after the second pass scripts and styles should be already optimized.

The optimization is based on the principle of asynchrony, i.e. An optimized version will not appear on the site immediately, but over time. After the first access to the page, the request for optimization leaves and in the asynchronous mode the wholesale is “boiled”. version. Then it fits in the right place.

6) for compression of base64 images, you can use already compressed gzip files, settings file under apache for transferring static gzip files .httaccess put in the folder folder (for ngnix there isn’t yet, if you know how to transfer it, write to this topic)

Important : since localhost is not working yet, your server must be accessible from outside.

Real examples of application

prosto.lutsk.ua - Lutsk city portal

Comparative analysis before optimization

and After optimization

zii-egg.ru - site about the player Creative Zii Egg

kinobaza.tv - A pleasant and convenient search for movies in runet

ide.hivext.ru - Application Development Platform on the Hivext Platform

www.dolcevilla.cz - Site visit card of the Prague hotel

Development

It is planned to develop similar optimizer files for other popular CMS.

But it is hard for one to carry everything on yourself. Therefore, if someone has a desire to help in this matter, I will be glad to help. Reworking a ready-made Drupal file optimizer for other CMS is not a problem. It has a minimum of logic, all logic is in a remote optimization service. Estimated implementation time from 2 to 4 hours.

If someone has constructive comments or suggestions, I will be very happy to hear.

I wish you a nice optimization.

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

All Articles