Minimize use of JavaScript

Using JavaScript can be a great asset to your website. It can help you with visual effects and special functions. In other words, it can enrich your site. But did you know that using too much JavaScript can drastically decrease your page speed, especially when they are larger in size and have to be loaded from multiple separate files?

How it's quite easy to see the problem

If you use WordPress for your website and tried every performance plugin and server application for page speed available you often come to the conclusion that you are able to speed your site up little by little but the site often still has average loading times. Think about it, what if you'd try removing ALL the JavaScript files from your site? Doing this you'll quickly see that the page speed for your WordPress site will multiply multiple times. The funny part is that a couple of JavaScript files that WP themes use aren't even necessary to correctly display the pages. For instance, the majority of WordPress websites don't even use the Jquery Library file. Yet, this file is standardly loaded on all WordPress installs along with several other unused JavaScript files, slowing down the sites significantly. Also, sometimes large JavaScript is used for small visual effects or website functions a website could do well without or could be easily replaced with CSS. In some cases you can simply remove the visual effects and functions altogether (most people really don't care about your visual effects and cool website functions, they care more about navigating your site quickly and getting the information they want).

How do JavaScript files affect website performance?

Every time your website loads a JavaScript file it creates a new HTTP Request to load and analyze the file before it can render your HTML page. The larger the file and the more files you have, the longer it takes the browser to finish loading your web pages. To learn more about the number of JavaScript files (and their sizes) are being loaded on your website you can test your website with the website speed test.

Does this mean I should always remove all JavaScript?

No. Some JavaScript is 100% necessary to correctly display your web pages. They are needed for certain website functions, for the use of advertisement or other important purposes. Sometimes you just can't go without them.

Best way to remove JavaScript files from your site

• Open the source code of your web page and make a backup copy first.
• Once you did this make a .js search in the source code to find all the JavaScript files your web page loads (the majority of JavaScript files are loaded from either the header or the footer).
• Once you found all the JavaScript files try removing all of them at once and check your web page if it still works as you want it to.
• When it doesn't, use the code from your backup copy and try removing every JavaScript one by one to see which effect it has on your page.
• When it has a negative effect, do not remove the script, when your web page loads fine without it you can leave the JavaScript file out.

Inline smaller sized JavaScript

When your web page only loads a few small JavaScript files you should try to inline them. Inlining scripts is best for page speed.

Combine all JavaScript files in one file

To minimize the number of HTTP requests you should try combining the content of all your JavaScript files to one bigger file. This isn't always possible with every JavaScript file, though. Try and see how it works out for your site.

Defer load bigger JavaScript files

When your website loads bigger JavaScript files and you can't go without them it is advised to defer load those scripts.