Fine tuning your WordPress JavaScript – DreamHost Knowledge Base

If you find yourself in a situation that requires changes to your site, and your developer isn't available to help, DreamHost's skilled support team may be able to assist you for a small fee. You can find more information about supported services and associated costs in the DreamHost Professional Services article.

JavaScript can add a lot of interactivity and interesting remote content to a site — However, if used liberally, it can also cause pages to load slower. There are a few things you can do to speed up your JavaScript commands.

First, use an online tool to analyze your website. You'll receive a breakdown of what may be causing your site to load slower than expected and it will give you insights to troubleshoot further.

• Website loading tools

JavaScript is rendered as the browser reads the webpage (top-down). When a JavaScript file is encountered, the browser stops rendering the page until the JavaScript file has been fully read. This is called 'JavaScript Render-Blocking' and could cause a delay as the page loads.

Instead of inserting remote JavaScript towards the top of your page — as plenty of instructions for insertion suggest — it is completely acceptable to add it right before the </body> tag in your theme. Due to the way page load order is handled in the browser, this will allow your content to start rendering and display before having to wait for remote files (which would load first if were they in the header).

There are also plugins available that do this for you you can search for at the plugin repository.

Pushing local JavaScript to the bottom of the page will also give the appearance of speeding up load time, so you might want to throw a little edit on your theme to migrate any local JavaScript from header.php to footer.php.

Also, while mod_deflate should compress JavaScript, you can cut a little bit of overhead off by pre-caching the compression. All you need to do is save gzipped copies of your theme's JavaScript in the same directory as your current files. Again, you'll need to SSH in to your web server to do this.

The location of JavaScript varies from theme to theme, but the theme itself can always be found in the wp-content/themes/ directory. Once you have found the JavaScript for your site, simply run:

[server]$ gzip javascript.js

So long as you replace javascript.js with the actual filename you wish to compress and repeat the process for all of your files, a compressed version of your .js files will be created. The benefit to this is that once it's done, you don't have to do anything else.