Fine tuning your WordPress JavaScript

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.

Overview

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.

Use an online tool to analyze your site

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.

JavaScript Render-Blocking

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.

Remote JavaScript

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 they were in the header).

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

Local JavaScript

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.

Compression

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 into 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 of this is that once it's done, you don't have to do anything else.

Some themes attempt to compress JavaScript and CSS by adding a .php to the end of the file name. This actually processes the file through PHP unnecessarily and can cause a significant amount of overhead. If you notice your theme doing this, please modify your theme and use the gzip method discussed above.

See also

Did this article answer your questions?

Article last updated PST.

Still not finding what you're looking for?