Optimizing JavaScript helps speed up page loading and improves site ranking by search engines. Reduce the size of scripts can be manually or using online services.
Why is it important to optimize JavaScript
Thanks to JS scripts, pages look more attractive in the eyes of users. They create dynamic effects, pop-ups and other objects that are very heavy. Sample effect using javascript code:
The more such scripts are spelled out, the longer the page loads. Not to the detriment of its design, you can reduce the JavaScript code and thereby simplify the loading of dynamic effects. After all, if you do not do this, the page may hang until the JS code is fully loaded.
How to reduce the size of javascript code
Use online tools that automatically convert all code. It removes spaces, comments, extra lines. Simplified encoding. Consider the example of JavaScript service Compressor. Click on the “Compress” button:
After pressing the button, a reduced code size will appear in the bottom field. If you enable the Base 62 encode and Shrink variables functions, in addition to removing spaces with comments, variables will be changed using Base 62 encoding.
Before compressing the code, create a backup copy of it on the computer in order to avoid a malfunction of the site in case of errors.
Another popular script code reduction tool is considered Closure Complier from Google. The service interface consists of two vertical fields. Paste the JS code in the left margin:
As an alternative to automatic compression or after it, you can use a manual check. For example, you can remove spaces and comments through the online service, and all other manipulations can be performed manually to avoid breaking the code. Here is what you can do:
- Update script loading algorithm. That as a result the code weighed less, and was loaded quicker. It is advisable to move all the scripts from the <head> tag to the end of the <body> tag to speed up page loading.
- Shorten variable names. For example, var here_addressed_all_status_for_site replace with var archive.
- Simplify the recording format. For example, when decreasing a numeric value by one, replace the string with “-”. Similarly for the plus:
- Reduce variables with mathematical actions. For example, instead of i = i + 5, you can use i + = 5, and instead of j = j * 7, write j * = 7. Similarly with all actions.
- Apply a short version of the condition. It was:
It became:
- Use the ${} pattern strings to combine variables instead of “+”. It was:
It became:
- It is important to note that the template strings of the new JavaScript standard may not work on older versions.
JavaScript optimization in WordPress can be carried out using embedded plugins. For example, Minify Fix. For other CMS there are similar modules and extensions. When compression is enabled, it is important to check the correctness of loading pages.
Conclusion
JavaScript can be optimized to reduce its size manually and with the help of online tools. Each compression manipulation must be accompanied by a parallel verification of the site pages.
After deleting spaces, comments, extra lines, replace regular variables with their abbreviated versions. Optimization of the JS code for WordPress sites and other CMS can be carried out using embedded plugins.
Manual optimization of JavaScript does not have such a big effect as connecting additional plug-ins. For better compression, it is better to use the Gulp, Webpack and other libraries.
