This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Privacy policy

Accept and continue

Report a bug

Cancel
131
How-to 5 min read September 17, 2019

How to optimize the JavaScript code to speed up the website loading

The optimization of JavaScript helps to speed up page loading and improves website ranking by search engines. You can reduce the size of scripts manually or using online services.

Why is it important to optimize the JavaScript code?

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. Here's an example of this effect using the JavaScript code:
Example of JavaScript on a site
The more such scripts are written, the longer the page takes to load. You can shorten the JavaScript code and thereby simplify the loading of dynamic effects without compromising its design. Indeed, if this is not done, the page may freeze until the JS code is fully loaded.

How to truncate the JavaScript code?

Use online tools that automatically convert all code. They remove spaces, comments, and extra lines. Some services shorten variables and encode them in a simplified way. Let's consider the example of the service JavaScript Compressor. Paste the code in the upper field and click on the "Compress" button:
JavaScript Compressor online
After pressing the button, a code reduced in size will appear in the lower field. If you enable the functions of Base 62 Encode and Shrink variables, in addition to removing spaces with comments, variables will be changed using encoding on the Base 62 technology.

Before compressing the code, create a backup copy of it on your computer to avoid website crashes in case of errors.

Another popular tool for script code reduction is Google's Closure Compiler. The service interface consists of two vertical fields. Paste the JS code in the field on the left:
Online scrpits truncation using Closure Complier
You can use manual verification as an alternative to or after automatic compression. For example, you can remove spaces and comments through an online service and perform all other manipulations manually to avoid code-breaking. Here is what you can do:
1
Update the script loading algorithm so that in the end there is less code and it loads faster. It is advisable to transfer all scripts from the <head> tag to the end of the <body> tag to speed up page loading.
2
Truncate variable names. For instance, replace var all_website_entries with var archive.
3
Simplify the recording format. For example, when decreasing the numerical value by one, replace the string with "--". The same applies to a plus:
Before: i=i+1;
        j=j-1;
After:  i++;
        j--;
4
Reduce variables with mathematical actions. For example, you can use i+=5 instead of i=i+5 and type j*=7 instead of j=j*7. The same applies to all actions.
5
Apply a short version of the condition. Before:
if( age >= 21) {
      var message = "Allowed";
    } else {
      var message = "Prohibited";
    }
After:
var message = age >= 21 ? "Allowed" : "Prohibited";
6
Use template strings ${} to merge variables instead of "+". Before:
constant welcome = 'Hello' + Name + ' ' + Surname + '!';
After:
constant welcome = `Hello ${Name} ${Surname} !`;
It is important to note that the template strings of the new JavaScript standard may not work on older versions.
7
JavaScript optimization in WordPress can be done using the built-in plugins. For example, Minify Fix. There are similar modules and extensions for other CMS. When you enable compression, it is important to check that the pages load correctly.

Conclusion

You can optimize JavaScript to reduce its size manually and using online tools. Each compression manipulation should be accompanied by a parallel check of the website pages.

Replace ordinary variables with their reduced versions after removing spaces, comments, and extra lines. Optimization of the JS code for websites on WordРress and other CMS can be carried out using built-in plugins. The manual optimization of JavaScript does not have as much effect as connecting additional plugins.

For more efficient compression, it is better to use such libraries as Gulp, Webpack, and others.
This article is a part of Serpstat's "Site Audit" tool
SEO Audit in Serpstat
Audit all the site or page in one click. A complete list of errors, sorted by severity, ways to resolve them and recommendations. Any frequency of verification and automatic email reports.
Run Site Audit

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5
Found an error? Select it and press Ctrl + Enter to tell us

Share this article with your friends

Sign In Free Sign Up

You’ve reached your query limit.

Or email
Forgot password?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code Queries left

Something went wrong.

Contact our support team
Or confirm the registration using the Telegram bot Follow this link
Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward.

These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom advice from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

Name

Email

Phone

We are glad of your comment
Upgrade your plan

Upgrade your plan

Export is not available for your account. Please upgrade to Lite or higher to get access to the tool. Learn more

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
View Editing

E-mail
Message
Optional
E-mail
Message
Optional

You have run out of limits

You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

I want more limits