Customer Optimization as a Service

    Data URI CSS SpritesFrom the very beginning of my activity as a web developer, I dreamed of having a tool that would 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 the compression of scripts and styles separately. When any changes were made, hemorrhoids were partially repeated again. 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 carried out in the direction of automating the process of optimizing sites using this technology. The result is the new Data URI CSS Sprites technology.. I remember how euphoric it was when a cross-browser code for connecting 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 in the data: uri css sprite technology, a crutch was used for IE7 @ Vista. But just a couple of months ago, a solution was found to the problem. No matter how trite and insulting this turned out to be - the solution was so simple that at first I could not believe in its performance. Adding only two (!) Necessary characters to the end of the file with sprites - the problem disappeared. After a series of experiments, we can now say 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.

    The algorithm of client optimization as a service


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

    For now, the file optimizer is currently designed for Drupal.

    Installation Instructions for Drupal


    1) create the optimum folder on the server, in the directory where drupal is installed
    2) check the write permissions of the user who is running the web server
    3) download the duris.php file (v. 1.0.3) and put it in the optimum folder
    4) we connect the duris.php file to the template file at the very beginning, something like this 5) we go through the pages, look at the firebag, re-go through the pages after the second pass, the scripts and styles should already be optimized. The optimization is based on the principle of asynchrony, i.e. The 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 asynchronous mode the opt is “cooked”. version. Then it fits into the right place.










    6) to compress base64 images, you can use already compressed gzip files, put the settings file under apache to transfer static gzip .httaccess files to the optimum folder (for ngnix not yet, if you know how to transfer it, write to this topic)

    Important : with localhost not yet It works, your server must be accessible from outside.

    Real-world application examples


    prosto.lutsk.ua - the city portal of Lutsk

    Comparative analysis BEFORE optimization


    and After optimization



    zii-egg.ru - site about the player Creative Zii Egg
    kinobaza.tv - Pleasant and convenient search for movies on
    Ruin ide.hivext.ru - Application development environment on the platform Hivext
    www.dolcevilla.cz - Website of a Prague hotel business card

    Development


    It is planned to develop similar optimizer files for other popular CMS.
    But, it’s hard for one to drag everything on himself. Therefore, if someone has a desire to help in this matter, I will be glad to help. Recycling the finished 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 glad to listen.
    I wish you a pleasant optimization.

    Also popular now: