Inline your Javascripts.


Do your web pages load one or several Javascript files? Then there’s a good chance you can speed your website up by optimizing the Javascript delivery. Read more below.

How inlining Javascripts can benefit performance

Every time a visitor loads a web page in a browser they need to request, download and execute your Javascript files in order to correctly display your website. These requests can be render-blocking, especially when there's a lot of them. Inlining your Javascripts will eliminate this problem as the browser no longer has to make multiple download requests and you allow the browser to instantly render your HTML page without having to load additional files. CSS files should preferably be inlined as well.

Only smaller Javascripts

When you have lots of (or very large) Javascripts it’s better to still use a file to call them from your web page. The best practice for larger Javascripts is to copy and paste all of them in one bigger file. This way the browser only has to request one file instead of multiple ones, which speeds up your website due to the lower amount of HTTP requests.

How to inline Javascripts

1. Copy the Javascripts you want to inline (remember, only smaller Javascripts) and combine all of theme into one bigger script
2. Place the script within <script type="text/javascript"></script> tags
3. Place all of it within the HTML </head></head> tags of your web page
Below is an example of how this may look:

<head> <script type="text/javascript"> YOUR JAVASCRIPT </script> </head>

Compress Javascript code

When you really want to optimize your Javascripts in the best way possible you can compress them with the Javascript Compressor. This compressor can be used to minimize your Javascript size, combine multiple Javascript files and detect errors as well.