Fine tuning your WordPress JavaScript

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. The following article gives you a few options to fix Render-Blocking scripts:

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

If you'd like to save yourself from tweaking your themes manually, the JavaScript to Footer plugin may help quite a bit.

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 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.

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

External links

Did this article answer your questions?

Article last updated .