Optimizing your WordPress Site

Taking page-load times from Slow to Go!

In this How-To we will install the Async JavaScript plugin and connect it to the GTMetrix site-monitoring service. Without optmizations, the pages of your site are likely to receive a low speed rating (ours received an F rating). By the end of part 3 of this series your site will receive an A rating for page speed.

Installing the Plugin & Connecting it to a Site-Monitoring Service

Visitors to your website will appreciate faster load times. Even a couple of seconds can be the difference between engaging with a new customer, and losing them. In this 3 part series of How-To’s we will guide you through how to install and configure important plugins that will increase the performance of your site, and also allow you to monitor its performance, so that customers can spend their time appreciating your site’s content, instead of wondering if your web server is down.

In this Part 1 of Optimizing your WordPress we will add an optimization that not only speeds things up slightly, but more importantly, it gives us the ability to monitor our web-site’s performance via the WordPress Dashboard (the main Admin page). The monitoring service also gives us access to detailed information about our site’s performance and the ability to compare its speed to other web-sites. Hence, we can use the monitoring service to see the benefits as we add optimizations.

If you’re using an inexpensive web-hosting service, page load times won’t be as fast as premium hosting services, so we need to do what we can to speed things up.

1. Create an Account at GTMetrix.com

Even though we don’t need an account with www.GTMetrix.com to use the testing tool, we need to register so that we can compare previous tests of our site and connect our GTMetrix account to our WordPress. Once we connect our WordPress to GTMetrix, our WordPress Admin Dashboard will have a new block that contains a summary of our site’s performance. This allows us to see the effect of the optimization plugins that we are installing.

Without any optimizations, our WordPress site received an F rating for Page Speed 🙁

  • Visit www.GTMetrix.com and create a free account
  • Confirm your account from the confirmation email
Confirming your account will give you access to the API key that we need later on.

2. Install the Async JavaScript WordPress Plugin

Login to your WordPress Admin area (www.yoursite.com/wp-admin/), and navigate to the Plugins section using the black menu on the left. Click the “Add New” plugin link and type “Async JavaScript” into the search box that is at the top right of the page.

Go to the “Add New” plugin page and search for “sync JavaScript”.

Install the “Async JavaScript” plugin.

Click the “Install” button on the top-right of the panel. Once the install has completed, click the “Activate” button that appears in the same place.

Verify that the installation was successful by viewing the full list of installed plugins.

The plugin can be activated from either the Plugin Installation panel, or from the Plugins Summary screen. The main plugins summary screen is where you can access the settings and updates for all plugins.

Tip: It’s a good idea to delete any deactivated plugins so that your plugins summary page stays nice and clean (you will avoid getting notified of updates for plugins that aren’t active).

Enable the use of the “Async JavaScript” feature by ticking the box at the top of the Plugin Settings page. Save the change by clicking the Save button at the bottom of the settings page.

Go to www.GTMetrix.com, login, and click the “Generate API Key” button.

Copy your API Key from this page and add it to the Wizard Settings on your WordPress for the Asnych JavaScript plugin (see image below).

Next, we will enable the site performance summary via the Wizard section of the plugin settings. You will find the Wizard in your WordPress, in the Plugin Settings for the Async JavaScript plugin, click the “Wizard” button at the top-left of the settings page. Enter your GTMetrix email and the API Key. You may also want to change the GTMetrix server location to somewhere closer (e.g. London). Note: Using the closer server will improve test results (show faster load times), but the wait for the results will usually be longer because more users will be active at similar times to you.

Save your changes to the Wizard settings (in the Asnc JavaScript plugin settings), and wait for the results to complete (it will test your site). It may take a few minutes. In my experience, it’s ok if you don’t wait for it to complete (the results will still show in an hour or so). The fastest way to get the first test result is to do it from the GTMetrix site. Later on, you won’t have to do it manually, the plugin will update with your test results and show a summary of your site’s performance on the main Dashboard page in the WordPress Admin area.

This is the Async JavaScript block that you will see in the admin dashboard of your WordPress. Once you complete Part 3 of this series, your site will load faster.

Now that we have installed the first optimization plugin, we have a convenient site-performance monitor to test page-load times. The plugin we just installed doesn’t do much to improve the site performance. For that we need to install a couple of other plugins.

In Part 2 of this series we will install the Optimole image optimizer plugin that will give us some big improvements to page load time.