Fast load times are incredibly important for website users. Unfortunately, it’s an overlooked feature on most WordPress sites.

Themes and plugins aren’t necessarily optimized for performance, and it can be difficult to determine how plugin and design choices affect the overall page speed.

But, if we start to measure it, we can start to optimize for it. When I do site performance audits for clients I primarily use two tools to evaluate page speed. The browser developer tools (Chrome) and the “Site Speed” report in Google Analytics.

Pingdom also offers a nice visual waterfall of page speed timings (similar to the “Network” tab in most browser developer tools), and Google Insights can give good general suggestions.

Google Analytics

Google Analytics is one of the best tools for looking at performance over a period of time. The page speed report can be found under “Behavior > Site Speed > Overview”.

Since the speed timings are based on a sampling of actual users, it gives a good general idea of how most visitors interact with the site. For instance, if the majority of site traffic is from mobile devices on slow network connections, the page speed number is going to reflect that.

There’s a number of insights you can get from each of these numbers (Google goes into some detail here), but it’s also good just for establishing a baseline of site performance. For instance, did switching hosts improve load time? Did installing or deactivating a certain plugins have an effect on performance?

If your average server response time is high, it may indicate that better caching or hosting is needed.

If the average page speed is high, check to see if specific resources are loading slowly or if it’s possible to lower the overall page weight (remove unnecessary scripts, excessive images, heavy web fonts, etc). To track these items specifically, the developer tools in the browser are super helpful.

Browser Developer Tools

Browser developer tools can show a much more detailed view of how a page loads. For this post, I’ll reference the ones built in Chrome (though Safari, Firefox and IE all have similar views).

Go to “View > Developer > Developer Tools” to open them up. Then select the “Network” tab and refresh your browser.

As the page loads you’ll see a waterfall of every resource that is requested by the website. When it finishes, the browser displays the amount of requests, the amount of bytes transferred, and the total load time in the bottom pane.

Information about the path (url), size, and timing for each resource is displayed in the window. So, if you are trying to track down slow elements on the page, this is the best spot to look.

Many people don’t realize how many resources some plugins and themes load. If you look at the path for the resource, it’s usually clear where it’s loading from. In a recent site audit I did, we were able to remove 300kb worth of scripts and styles simply by deleting plugins that weren’t required for the site.

If you are trying to decide between two plugins that do generally the same thing (social buttons or contact forms for instance), viewing the network tab can help you decide which might have a greater impact on performance.

It can also be helpful if you are testing a few different themes or font variations to see which ones consume the most resources.

Improving Site Speed

Now that we’re able to measure overall page weight and load times, the next step is to improve them. I’m working a new series of posts that each focus on a few aspects of page loading on WordPress sites: images, scripts, and caching. So, stay tuned for those.