Using Javascripts 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 many Javascripts 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 Javascripts 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 Javascripts, slowing down the sites signifcantly. Also, sometimes large Javascripts are 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.
Does this mean I should always remove all Javascripts?
No. Some Javascripts are 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
1. Open the source code of your web page and make a backup copy first.
2. 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).
3. 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.
4. 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.
5. 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 Javascripts
When your web page only loads a few small Javascripts you should try to inline them. Inlining scripts is best for page speed.
Combine all Javascript files in one file
To minimize the amount 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.
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 Javascripts 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 Javascripts, slowing down the sites signifcantly. Also, sometimes large Javascripts are 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.
Does this mean I should always remove all Javascripts?
No. Some Javascripts are 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
1. Open the source code of your web page and make a backup copy first.
2. 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).
3. 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.
4. 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.
5. 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 Javascripts
When your web page only loads a few small Javascripts you should try to inline them. Inlining scripts is best for page speed.
Combine all Javascript files in one file
To minimize the amount 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.
