JavaScript Optimization in Magento Development

By CATT Inc 4 months agoNo Comments
Home  /  Technologies  /  JavaScript Optimization in Magento Development
Magento-Development

Magento, one of the most widely used shop systems, has a serious and long-standing problem with the handling of JavaScript – we explain our problems of JavaScript optimization in Magento Development. Some Magento developement Companies are likely to be at the point where the customer asked for either an improvement in the shop’s loading time or other appropriate measures to increase their performance or the like.

A standard Magento configuration is already delivered with more than 20 JavaScript files. Thus, for most developers, it is quickly clear that the reduction of the JavaScript or their merge into a file instead of 20 will bring a speed advantage and better performance. This is associated with comparatively little effort on the contrary to other optimization measures. For such cases, Magento offers the standard “Combine JavaScript Files”, which has more disadvantages than advantages. The disadvantages will be explained in detail in this blog post using three examples.

The initial situation:

When using the feature provided by Magento, all JavaScript files are combined in one file, a hash is generated from the size of the content and saved as a file. In our other examples, we use simple names such as “abc.js” and “xyz.js” instead of the hashes. However, the Magento developers did not consider some serious errors when implementing their features.

Error 1: Minimized or combined JavaScript files can make the entire store unusable!

As soon as 2-3 minimized JavaScript files are integrated into the existing shop system, the first problems already occur.

Even if the developer should come to the idea of ​​compressing Magento’s JavaScript files, errors may occur.

The problem is the coding style of Magento developers. JavaScript allows it to complete terminated functions without a semicolon, which Magento developers use very often. If a developer compresses Magento JavaScript files for performance or loading time optimization and activates the combiner function, this causes critical errors.

Compressing the files shrinks the file contents to exactly one line. As soon as a “var” declaration is placed at the beginning of the second file and a function has been terminated in the first file without a final semicolon (which is in 95% of the cases), the code is incorrectly parsed and both files lose their actual functionality.

Error 2: Combining JavaScript files entails the risk of increasing the loading time of the page!

Now surely ask some, as it is possible at all if one instead of 20 files only one loads and thus the HTTP requests due to the JavaScript optimization have fallen massively. The question can be illustrated by a simple example. Let’s assume that the JavaScript files “abc.js” and “xyz.js” are loaded on the start page of the shop. These files are loaded everywhere. After activating the combination, they are combined to (example) “abcdef.js”. When the user visits the home page, the file is delivered once and then cached. So far so good. However, if the user visits a product page that requires “foo.js” and “bar.js” except “abc.js” and “xyz.js”, a combined file will be created (example) – “ghijkl.js “. Since the user already has the first two files in the cache, the browser must now unnecessarily deliver both files in the form of ghijkl.js, which also contains “foo.js” and “bar.js”.

Error 3: Massive overhead without any utility when using protocols such as SPDY or HTTP / 2

If the shopkeeper or its developer runs a server that uses the SPDY protocols or its standardized successor HTTP / 2, the whole combination of JavaScript files as a JavaScript optimization is more a disadvantage than an advantage. The HTTP / 2 specification allows delivering JavaScript files in parallel in only one HTTP request. Depending on the size and mass of the JavaScript files to be included, this can lead to considerable performance losses during the combining process. Suppose a large shop has 40 JavaScript files, one of which has a gigantic size of 700 kilobytes for JavaScript. This file is read each time when it is combined and written back into the combined file. This overhead is unnecessary when using SPDY or HTTP / 2 and causes a noticeable and measurable increase in the “Time to First Byte”, the time that the shop needs to send the first byte to the user.

Test scenarios and evaluations of JavaScript optimization

Charging when using HTTP / 1.1

magento-development

 

 

 

 

 

 

 

 

 

 

Without JavaScript optimization

Charging when using HTTP / 1.1 with Combine Tool

magento-development-company

JavaScript optimization – easy combining

Charging when using HTTP / 2

magento-development-services

JavaScript optimization by using http / 2

Charging when using HTTP / 2 with Combine Tool

magento

Combined JavaScript files and http / 2

The sections of the Test Pool Webpage Test shown here are only intended to illustrate the loading procedure.

The times of the individual files are not really relevant here, since we did not have a repeatable and verifiable test setup. This should follow in a later thread but.

Conclusion

Despite a built-in JavaScript-combining tool, it is not easy to use Magento’s built-in performance tools like “combining JavaScript files” in a productive environment without extensive manual testing. It is possible to create errors quickly, which make the whole page unusable. Furthermore, when using Magento’s function, an increase in the side charge time can occur quickly instead of the desired reduction.

Category:
  Technologies
this post was shared 0 times
 1200
About

 CATT Inc

  (3 articles)

Leave a Reply

Your email address will not be published.