How to use GTMetrix to Speed up Your Website

Consider for a moment the last time you were browsing around online and encountered a slow website.

What kind of reaction did you have?

You probably experienced mild irritation – and promptly clicked “back” to continue your search for answers elsewhere.

The load speed for your website is one of the most important metrics for the success of your website. Unfortunately, it’s also often one of the most neglected factors in proper web development. As the detail and underlying complexity continues to evolve for most websites and web applications, site speed is sometimes left as an unfortunate afterthought. It doesn’t help that page load speeds can be difficult to reliably measure, as a lot of different factors are in play.

However, GTMetrix is one of my favourite tools – so what can it do for you?

A Brief Overview of GTMetrix

GTMetrix is a web application which offers a suite of tools to help you analyze and optimize your website. The developers offer a free version with some basic features unlocked, but tiered paid plans are available for power users who have multiple websites and could benefit from faster analysis, more targeting options, additional API access, hourly URL monitoring, and white-label PDF reports.

At a glance, users can view a summary of their website’s performance down to the individual page level. Page load times, page sizes, and total number of user requests are available, as well as a performance comparison to the average load speed of other sites analysed with GTMetrix. A slew of informative graphs and charts will be at your disposal for a visual analysis as well. The suite has a lot of other little bells and whistles, and we’ll be looking at some of the more noteworthy ones here today.

Important Considerations Before Analyzing Your Website

Before working with any website speed testing tool – GTMetrix or otherwise – it’s very important to understand that a single speed test isn’t particularly effective at getting a good understanding of your website’s page load speed. As I mentioned previously, accurately measuring a website’s loading speed can be difficult, because a number of different factors come into play, such as:

1. Current server load (especially if shared)

2. Number of current visitors

3. The user’s connection speed

4. The user’s proximity to your server

5. And more

So to get reliable, informative data, you have to do multiple speed tests at different times of the day, week, and perhaps even month.

Ideally, you’ll be collecting data from about one test per hour for a week or two. This will allow you to get a significantly more accurate average page load speed for your website.

If you have a paid account, the GTMetrix panel will allow you to view a history tab. This feature collects the results from all of your multiple tests and plots them out on a graph. It’s a great way to get a quick visual look of when your site was performing at its best (which is handy to narrowing down the time frame of what changes made what impact), or how you’ve improved load speeds over time. You’ll also have access to a video section, which displays an actual video of your page loading – this might be interesting, but in truth, it isn’t very useful

It’s worth noting that your website’s loading speed isn’t the only valuable information you can garner from a lengthy testing phase like the one I have suggested here. You’ll also get some insight into your traffic patterns, such as when the most visitors are present on your site, and at what times of day. In theory, you could use this information to make strategic updates like adding new content or advertisements.

Location, Location, Location

It’s easy to picture the internet as this “cloud” based, ephemeral thing, but it very much exists in reality. Therefore, physical proximity to a server has a statistically relevant impact on loading speeds. This is why GTMetrix conducts speed tests from different locations. You can choose whether to test locally or globally – or both. Local speed test results may be more relevant to you if your website is servicing a specific area (e.g., as a small business might), state, or country. Conversely, you may wish to discover the global average page load speed of your website, in which case it would be reasonable to select at one or two servers from each continent.

Just remember – the speed test will determine the page load speed relative to your server’s location, not yours.

Test More Than Just Your Homepage

Where is the majority of the content on your website? Is it on the homepage, or tucked away within sub-pages?

If your website is like most, odds are the vast majority of your content – the stuff visitors are there to see – isn’t actually on the homepage. It’s also likely that your homepage includes some basic information and serves as something of a portal for the rest of your site, so its actual file size is probably quite small, meaning that it might be the fastest loading page on your webpage.

The takeaway here is that you’ll get far more relevant and interesting data by testing a number of sub-pages as well. You don’t have to do all of them – for some websites that would be pretty impractical – but try and choose a fairly comprehensive variety, such as blog posts, e-commerce storefront pages, single product pages, or any page you’re simply curious about.

Properly Interpreting PageSpeed and YSlow Reports within GTMetrix

Google PageSpeed

GTMetrix will provide you with data from both Google PageSpeed and Yahoo! YSlow. You can read more about Google PageSpeed here. Essentially, it’s Google’s solution to evaluating a website’s speed performance for both desktop and mobile devices. It provides a score ranging from 0 to 100, and Google states that a score of 85 or higher is a sign that the website is performing well. Page loading above-the-fold (the first visible portion of a page) and for a full page load are measured.

Yahoo! YSlow

YSlow is Yahoo!’s open source tool which can analyse a page and attempt to offer an explanation as to why it’s loading slow (YSlow, “why slow”, get it?). It offers a numerical score as well as a checklist of suggestions. The tool also spits out a summary of the components that make the page and current performance statistics. You can learn more about YSlow here.

How to Interpret Results

While both PageSpeed and YSlow are generally aiming to provide users with the same kind of data, they accomplish this through different methodologies. Therefore, using both services can give you additional perspective on how to further increase the loading speed of your website. Usually your score should be relatively similar for both services, but one might catch something the other didn’t.

GTMetrix makes this easy to view by providing you with the results of both tests in one convenient location.

Now, both services offer a 0 to 100 percentage score. This should, in fact, not be your primary metric to increase. A score might be lower than 85 (or 75, or 70) even for a well-optimized page – perhaps your page is data intensive and already loading as quickly as one could expect. Rather than focusing on scores too much, view them as general guidelines which are part of a greater whole and use your best judgment.

Your actual focus should be on the actual number of seconds taken to load the page – this is the number that matters in reality, not a score determined by Yslow or PageSpeed.

Learn to Love GTMetrix’s Waterfall

The “waterfall” tool within the GTMetrix panel is a very useful tool for figuring out exactly why a page is loading slowly. If you’re familiar with Firebug Net Panel, this tool will look familiar – but if not, don’t worry. The results are fairly easy to interpret and can make the headache of narrowing down just exactly why a page isn’t loading as quickly as it should much easier.

The waterfall tool analyses each component on a page and displays the steps necessary for those pages to get from the server to the user, and how each individual step took. You’ll have six metrics to gauge: the DNS lookup, the time spent making a connection, how long the browser queue waited for a connection, how long a fetch request for the page took, the time until the server responded with data (in tech-speak known as the TTFB, or the time to first byte), and how long it takes to actually download and view the page.

All of this (should) be going very quickly, but the waterfall tool captures each individual step, so you can narrow down the ones that are causing a bottleneck. For example, if the TTFB is quite high, this could indicate that the problem is server-side. If the time it takes to download and view the page is high, this could mean that the page needs to be optimized further (e.g., with image compression).

Using GTMetrix on WordPress Websites

GTMetrix makes things surprisingly easy for WordPress users. You can download a fully fledged plugin for the content management system, and setup is quite simple – you’ll just enter your account email and API key.

GTMetrix recommends running an initial test (or tests) before making any changes – this is so you can get a baseline “before” speed.

Once you’ve collected this data, they recommend installing the W3 Total Cache plugin if you haven’t already. This very popular plugin is focused on WordPress optimization by caching your entire website.

It’s used by Matt Cutts, John Chow, AT&T and thousands of other WordPress users – the point here is that it’s good.

Next, GTMetrix suggests installing the WP Smush plugin. This image optimization plugin isn’t as ubiquitous as W3 Total Cache, but it should be. It uses lossless compression to process JPEG, GIF, and PNG images for all currently existing images, as well as any new ones you upload to your WordPress installation. Images – even large ones – will be “smushed” to 1MB or less.

After installing and configuring both of these plugins, GTMetrix asks that you run another speed test.

The results should be significantly better – but if you’d like to optimize your WordPress installation even further, I have a few suggestions of my own.

Server Optimization for WordPress

The first step is to investigate your server setup. If you’re using shared hosting from one of the many thousands of companies who offer cheap, generic server slots, there’s a good chance you’ll see a substantial improvement in page load speed by upgrading to a VPS or a dedicated server.

You can check my hosting reviews to find a new web host.

Better yet, your website should be hosted on a server specifically optimized for WordPress. I highly recommend WP Engine and use them for this blog.

Defer JavaScript

If your website utilizes JavaScript or other scripting languages, try to ensure that it’s “deferred”, meaning that it loads last, at the end of your page. When a user retrieves JavaScript from a website, the data must be downloaded, parsed, and subsequently executed. Even with caching, this can slow down your overall page load speed. If you load JavaScript at the top of the page, it must be retrieved before the other contents of the page – do it last.

Are Social Media Feeds Slowing Down Your Website?

Do you display social media feeds on your homepage? On every page? There’s a good chance that they’re responsible for a good deal of slowdown. Every time a page is loaded with social media feeds on it, each individual service has to be queried. Whether or not you remove the feeds is a personal call – how important is it that your users see your latest tweets on every page?

For the best of both worlds, consider limiting your social media feeds to relevant pages only. This doesn’t mean you have to obscure your social media presence entirely – you can still have outgoing links to each of your social media profiles.

Just How Necessary is That Plugin?

Perhaps one of the most attractive features of WordPress as a content management system is the wide array of plugins available (and they’re usually free to boot). So it’s possible that over time, your WordPress site has become bogged down by plugins. Generally speaking, the more plugins you’ve installed, the greater the impact will be on overall page load speed.

Take some time to review each of the plugins that you’ve installed. Ask which ones are really necessary, and which aren’t – you don’t have to commit right away either. Simply disable the plugins and use GTMetrix to see if there’s been an improvement in speed. Dump any extraneous plugins that are causing unnecessary slowdowns. The biggest culprits here will likely be the plugins which utilize the most CSS and/or JavaScript.

Still looking for more tips then Joe Fylan wrote a huge guide on speeding up WordPress and I’ve compiled a bunch of htaccess hacks  which can help you tweak your WordPress site too.

Using GTMetrix for Performance Alerts

Once you’ve fully optimized your website and you’re pleased with GTMetrix’s reports, you’ll want to keep these changes in place. While GTMetrix is primarily used for the process of optimization itself, a very handy feature users can take advantage of is the software’s ability to monitor page load speeds continuously. GTMetrix can send you an alert via email whenever a certain parameter or requirement isn’t met.

If you’d like to know if a page begins unexpectedly loading slower than you’d like, you can configure GTMetrix results to monitor for a number of different performance metrics, including the most important of all, the actual page load time in seconds. However you can also set up alerts for situations when your PageSpeed or YSlow dip below a predetermined threshold.

This is useful not only for ongoing website speed optimization, but to quickly become aware of unexpected situations which can affect a page. For example, if you receive a surge in traffic (generally a good thing), the corresponding server load might decrease the speed of your webpage. Rather than hitting your server’s bandwidth cap or having your website go down entirely, you can get ahead of the game.

Final Thoughts & Features I’d Like to See GTMetrix Implement in the Future

GTMetrix is one among many speed testing tools on the market, and overall I find that it’s quite good at what it does. However, the service does expect that the user has a relatively firm grasp on some of the more advanced procedures necessary to increase page load speeds.

I’ve discussed the major ones here today, such as deferring JavaScript. Some built in suggestions or tools to test for these kinds of inefficiencies would be a major boon to new users.

Overall, GTMetrix is a great tool that can provide you with a slew of data that can make the task of website optimization much, much easier – if you know how to properly utilize the data and implement changes. Also, getting real-time alerts from scheduled monitoring is invaluable to maintain speed over time, and GTMetrix does a good job of providing these kinds of notifications.

If you abide by the suggestions I’ve made here and don’t hesitate to dabble a little with your own tweaks and experimentation, you’ll be on the way to having a lightning fast website that users won’t click away from.