Gosnomer.RUS. Optimization of the Website

To date, the speed of processing user requests is a vital parameter in the sustainable work of any website. Among other things, all modern search engines determine the position of the site in the results based of its parameters, which can negatively or positively affect the conversion and number of visits of your website. The client approached us with a request for audit, as well as taking measures to carry out complex works on the site optimization. The client is engaged in the production of license plates duplicates for vehicles and has several tens of thousands of website visits per month.

We use GTMetrix.com to perform site analysis and troubleshoot problems.

Indicators of optimization of the website at the time of its acceptance by our team were the following:

After analyzing the data, we got comprehensive recommendations, observance of which allowed to highly improve the performance of the website loading.

Let's check what actions affected the optimization and download speed of the gosnomer.rus (госномер.рус) website in general.

• Page weight - this parameter directly affects the download speed of the website, as it depends primarily on the speed of the user's Internet connection. The smaller the weight of the page, the faster the page loads. The longer the page loads, the less chances that the user will remain on your site;
• Caching is an important parameter on which the speed of reopening of the website depends. The correct configuration of caching tells the browser to check for js, css, gif, png, etc. files in its cache before they are downloaded again from the server. Configuring caching in some cases allows you to greatly speed up the website;
• Image Optimization - this approach allows you to reduce the weight of the website by compressing and optimizing images, which increases the speed and responsiveness of the pages. It is worth noting that image optimization (compression) changes image quality for the worse, but with the right approach, this deterioration is imperceptible for most users of the website;
• js, css, html minification - this approach reduces the original file size by about 10-20%. During minification, extra tabs, line wraps, whitespace characters, comments, etc. are removed;
• Gzip is a file compression and recovery utility that uses the Deflate algorithm. It is mainly used in UNIX-systems, in some of which it is the de facto standard for data compression. Gzip finds the identical lines in a text file and temporarily replaces them, thereby reducing the overall file size. Gzip compression is particularly advantageous in the field of web technologies, as HTML and CSS files use a lot of duplicate lines and spaces. Ultimately, gzip can shrink page and CSS style sizes up to 60 -70%; IMPORTANT! Gzip will speed up the work of the website, but in addition will increase the load on the CPU. Before activating gzip it is necessary to make sure that it is rational to use it.
• Deferred JS loading (async) - this parameter allows you to postpone loading of some external JS scripts for later. In other words, DOM and scripts not marked with async are loaded first;
• Hosting — the place where the site is located is an important parameter. The main parameters can be considered uptime, which ideally should be 99%, as well as the technical characteristics of the chosen tariff, be it Shared-Hosting or VDS. The necessary hosting parameters are selected based on the technical parameters of your website;
• Code optimization is one of the most important parameters. If the code of the site is not optimized and consumes a lot of resources, this is the first sign that it is necessary to optimize the code.

Optimization

In this section we will go through the most interesting part of the work done.

And of course, before performing all the work, we made a backup of all the files that are being modified.

For minification we might require Java of version 1.4 and higher.

Caching configuration

To use caching, you must specify an invalidity rule. In other words, you need to tell the browser how long it takes to rerequest the file from the server.

"Location" contexts must be placed in the "server" of the virtual host undergoing change.

In this case, regular expression format files will be cached for the maximum time possible.

Also, the invalidation time can be specified in days:

In this case, caching will be applied for 3 days.

In addition, the invalidation time can start from the last modification of the file:

In this case, the browser will request files from the range in 5 days after the last modification.

To disable caching in the browser, give the "off" parameter to the "expires" directive.

In this case, caching files from the range will be disabled.

Gzip configuration

Enabling Gzip will significantly reduce the amount of data that the website visitor will receive. Compression is supported by all modern browsers. Gzip will speed up the work of the website, but in addition will increase the load on the CPU. Before activating gzip it is necessary to make sure that it is rational to use it.

To enable gzip, the following directives must be placed in the "server" context:

In this case, we have enabled gzip for MIME types from gzip_types with compression level 5 and disabled compression for IE 5 and 6 (not supported by gzip)

The "gzip_comp_level" directive is used to set the compression level. The compression level can be set from 1 to 9. The higher the compression level, the more efficient, but at the same time slower, also the load on the CPU may increase.

To disable caching, give the "off" parameter to the "gzip" directive.

List of all available directives (more on the official nginx website).

• gzip - Enables or disables compression of response by gzip method
• gzip_buffers - Specifies the number and size of buffers to which the response will be compressed. By default, the size of one buffer is equal to the size of the page. Depending on the platform it is either 4K or 8K.
• gzip_comp_level - Sets the compression ratio of the response by the gzip method. Valid values range from 1 to 9
• gzip_disable - Prevents compression of response by gzip method for requests with “User-Agent” header fields matching the given regular expressions
• gzip_http_version - Sets the minimum HTTP version of the request required to compress the response
• gzip_min_length - Sets the minimum length of the response to be compressed by the gzip method. The length is determined only from the “Content-Length” field of the response header
• gzip_proxied − Enables or disables compression of response by gzip method for proxied requests depending on request and response. The fact that the request is proxied is determined based on the presence of the “Via” field in the request header. You can specify several parameters at the same time in the directive:
  • off - disables compression for all proxied requests, ignoring other parameters;
  • expired - allows compression if the response header has an “Expires” field with a value that prohibits caching;
  • no-cache - allows compression if the response header contains the “Cache-Control” field with the “no-cache” parameter;
  • no-store - allows compression if the response header contains the “Cache-Control” field with the “no-store” parameter;
  • private - allows compression if the response header contains the “Cache-Control” field with the “private” parameter;
  • no_last_modified - allows compression if there is no “Last-Modified” field in the response header;
  • no_etag - allows compression if there is no “ETag” field in the response header;
  • auth - allows compression if the request header contains the "Authorization" field;
  • any - allows compression for all proxied requests.
• gzip_types − Allows compression of response by gzip method for specified MIME types in addition to “text/html”. The special “*” value corresponds to any MIME type (0.8.29). Responses with “text/html” type are always compressed.
• gzip_vary - Allows or disables giving “Vary: Accept-Encoding" header field, if gzip, gzip_static or gunzip directives are active.

Minification

Minification is a process aimed at reducing the size of the source code by removing unnecessary characters without changing its functionality. This reduces the original file size by about 10-20%. During minification, extra tabs, line wraps, whitespace characters, comments, etc. are removed;

You can use both online services and scripts to minify css, js, html, etc.

For example, to minify both css and js files in php, you can use javacompressor.

In this case, it is necessary to prepare in advance all js and css that need to be compressed and execute the following script.

Yuicompressor requires Java of version 1.4 or higher.

As a result of the script, compressed copies of files with the "min" prefix will be added to the directory specified in the "$path" variable.

Deferred JavaScript loading

Asynchronous JavaScript loading reduces page load time due to absence of latency.

The "defer" and "async" attributes are used to control the deferred load.

async - allows the browser to load js files in parallel and execute immediately after loading, without waiting for the rest of the page to be processed.

The "async" attribute should be used for scripts that do not have a significant impact on the display of the document. These include Google Analytics, Yandex Metrica counters, social networks' buttons, etc.

defer - allows the browser to start loading js files in parallel without stopping the further processing of the page, while the browser guarantees consistency based on the order of loading of the files.

The "defer" attribute should be used when loading multiple JS files, provided that one script depends on another and the sequence of their execution is important.

Conclusion

In combination, these measures give an increase in the speed of loading of the website by reducing the page weight and correct Cache-Control. It should be noted that the settings are applied individually and can, on the contrary, bring a negative effect.

At the time of conditional completion of works on the gosnomer.rus optimization, we achieved the following results:

Based on the cuts received, it can be argued that the set of measures taken to optimize the website allowed to increase Page Speed Score by 29% and YSlow Score by 18%, while Page Details shows that the page weight has decreased, the number of requests has fallen to 120 and the overall download speed of the site has become half faster.

You can probably notice that the results of PageSpeed Score and YSlow Score do not reach the score A, and there is an explanation for that. The site uses a rather old framework Laravel 5.1, and further optimization requires significant reprocessing of a part of the code, which significantly increases costs. Taking into account that we are already making a new website for the client; this level of optimization has fully satisfied the client.