Page loading speed is an important SEO metric that can be hard to maximize in your favor. Especially if you aren’t well versed in web development, understanding which features of your site are slowing your site to crawl or load slowly can be confusing.
Enter GTmetrix, a SaaS tool that helps you analyze the loading speed of websites for free. In this article, we’ll go over all of GTmetrix’s features so that you’ll be equipped to troubleshoot your site’s page load times and get more traffic.
Analyzing sites with GTmetrix
First, you’ll need to paste the URL of the site you’re interested in analyzing into the bar. For our purposes today, we’ll be using sitebuilder.ws as our example.
Be sure to have JavaScript enabled, and don’t be surprised if the report takes a while to compile.
We’re going to go over everything that’s in the report that spits back at you, but let’s get an overview first.
What You See When You Log in
At the top, you’ll be able to re-test the page after you make changes, compare the page to other pages, and setup alerts and monitoring if you’re a registered user. You’ll also be able to get a PDF of the analysis or share it with someone else.
A bit farther down, you’ll see your site’s banner, your browser, and a bit of metadata about the server that ran the test.
A bit lower, you’ll see the overall performance score for the site—how fast it loads, how large the page is, and how many people have tried to visit it recently. This may not seem like useful information at first, but don’t brush it off because it’s a very quickly accessible overview of how your site stacks up.
Now that you’re oriented, let’s quickly look at the items along the top: Compare, Page Settings, Monitoring, and Alerts.
Compare
Try plugging in a couple of sites to compare to each other in this tab before continuing.
Here’s a comparison we ran, comparing our site to youtube.com. You’ll see in the top left that you can add another URL to compare to if you’re willing to wait for the analysis to run.
The Compare tool shows you the grades of each site side by side and highlights the winner in green. Likewise, throughout the rest of the comparison report, the site with the better metric has its stat in green and the loser in red.
You probably can’t win against your competitors in every metric here, but it’s worth looking over to see any areas where you’re lagging that you might be able to fix quickly.
Page Settings
Next to the Compare tool is the Page Settings tab, which you’ll use at least a little bit to optimize for the most common browsers and platforms. The page settings tab is important because it lets you test the page loading times with different software and networks, just like your users.
Given how diverse your site visitors setups will be, you should play around with the options on this page so that you can have a consistently quick site. Opt for fast loading times on Firefox, Safari, Chrome, and Opera.
Monitoring And Alerts
If you’re using someone else’s hosting, there’s a good chance that they aren’t going to care about your site’s load time as much as you do. If you’re lucky they’ll notify you of outages—but what if their servers are malfunctioning and running slow?
The Monitoring feature lets you set conditions under which you’ll be alerted. You could use this feature to email you in the event of a major increase in site load time, site traffic, or a few other factors.
To use the alerts feature, you have to have a monitoring order setup. You can’t provide an alert about something if you haven’t told the app to pay attention to that something in the first place.
Like a few of the other features we’ve discussed, you’ll need to be a registered user before you can use the alerting system. If you haven’t confirmed your email address, you should do so before trying to setup an alert.
Core Features
Beneath that, you’re starting to get into the guts. For each tab, you’ll see a totally different report. In the PageSpeed and YSlow tabs, you’ll get a list of issues that may be interfering with your load speed. We’ll focus on these two tabs later in this article. For now, just think of PageSpeed and YSlow as lists of tests of your website’s speed.
Waterfall
The Waterfall chart summarizes the impact of each feature of your site on the site’s load time.
In the Waterfall tab, you’ll see a list of GET requests from the HAR file. Each request lists its size and the time that it took to serve the request. You can open up the individual GET requests to see the request’s headers, parameters, and response’s headers.
You’ll also see the response’s connection type, referrer, encoding, and host. These will change with any changes that you make to the Page Setup tab.
Timings
The Timings tab give you more information about page loading, including the Time to First Byte (TTFB) metric. The TTFB is important because it’s the turnaround time between when your site receives a request and when the requestor receives any response.
Aside from the TTFB, you’ll find the RUM Speed Index and a breakdown of how your site’s load time hashes out. The other important stat here is the first paint time, which describes the time between the user’s request and when your site gives them enough data to display the visual elements on your site.
Video
The Video tab allows you to record a video of your page as it loads to iron out any kinks or hiccups. When you take a video, you can slow it down and view the telemetry to find the cause of stutters or other hangups.
History
The final tab is the History tab, which gives you a record of your site’s loading speed over time. This can be very useful if you’re having trouble figuring out whether it’s increased demand or something else that’s slowing your site. You’ll also see your browser’s data and your account status.
Next, let’s dive into the meat of the app which will give you actionable information on how to increase the speed of your site.
PageSpeed and YSlow
PageSpeed and YSlow perform similar functions, but PageSpeed is the more comprehensive of the two, so that’s where we’ll start.
PageSpeed
PageSpeed is Google’s metric which measures site loading times, so it carries a lot of weight.
The PageSpeed tab is where you’ll be spending a lot of your time in this app.
At the top, you’ll see the items, the grade your site earns, the type of advisory, and the priority of that advisory. Once you’ve addressed the advisories, you can run the app again and get a new score. If you’re not sure how to implement PageSpeed’s suggestions, check out this link.
Let’s walk through every advisory and explain what they mean.
Optimize the order of styles and scripts
This advisory lets you know if one of your site CSS scripts is set to load first before another unrelated script is allowed to follow as your user loads the site. If it’s possible for your CSS scripts to load in parallel, your site’s load time will fall.
Defer parsing of JavaScript
This advisory describes the amount of JavaScript that your site executes as part of its initial loading. JavaScript loading blocks your page from appearing visually to your users, so it’s important to tuck its load order behind the initial render so that your user loads faster. The list underneath the summary points to each instance of JavaScript execution which you should defer.
If you’re not sure how to take action on this advisory, check out this link.
Inline small JavaScript
Small packages of JavaScript that require loading external resources can slow your site down quite a bit, as this tool indicates. This advisory points to elements of JavaScript which you could potentially rework into HTML and thus increase loading speed.
Minify JavaScript
Minifying is the process of compacting code, and this tool tells you which elements of JavaScript you can minimize and how many bites minimization will save.
Minify CSS
Much like JavaScript, CSS minimization can also save load time.
Specify a cache validator
If your site doesn’t have a cache validator, your users will spend more time reloading and navigating around your site. Caches cut intra-site load times by quite a bit and this tool checks that your caches are accessible by checking the validator.
Leverage browser caching
This advisory checks whether your site has caching enabled.
Optimize images
This advisory checks whether the images on your site are compressed or not. If you have images which aren’t compressed, you’ll see them in a list.
Minify HTML
Minimizing your HTML code can save a few bytes of data; this tool lists instances of code which could stand to shrink.
Remove query strings from static resources
This tool assesses whether any of the URLs in your site have a question mark. If a URL has a question mark in it, your site won’t be cached by certain servers.
Avoid bad requests
This part of the report checks to see if your website has any broken links. Broken links slow loading times.
Avoid landing page redirects
If the first page of your site redirects the user to the next page, valuable loading time slips away. This tool merely checks to see whether you have any redirects which aren’t necessary.
Enable gzip compression
Gzip compression reduces the size of files that your server sends to users when they try to access your site; this tool checks to see if it’s activated. The mechanics of how gzip compression accomplishes this feat are here.
Enable Keep-Alive
This tool checks whether your site allows persistent TCP connections. If your site doesn’t allow users to send multiple TCP requests, they’ll have to re-establish the connection for every request and waste valuable time.
Inline small CSS
If your site refers to external CSS scripts, you may save time by moving them inline with your site itself. This tool checks for instances of external CSS scripts which would reduce loading time if they were inlined.
Minimize redirects
Each URL which leads to a redirect wastes loading time. This tool looks for instances of useless redirects and lists them for you.
Minimize request size
This tool checks whether your cookies and headers are as small as they can be. This tool also checks whether a single HTTP request can fit into a single packet. If you’re not sure why fitting a single HTTP request into a single packet is important, check out this resource.
Put CSS in the document head
This tool checks whether the location of your CSS is in the body of your site when it should be in the header.
Serve resources from a consistent URL
If your site doesn’t send packets from a consistent URL, this tool will let you know. If you send packets from inconsistent URLs, you’ll likely experience duplicated effort and slower loading times.
Serve scaled images
This tool checks whether you are sending smaller size images to your users. Full-size images load much slower on mobile devices and other platforms, so scaling is important.
Combine images using CSS sprites
This tool checks whether you have any images that can combine into single CSS sprites. For an explanation of how to implement CSS sprites, visit this link.
Avoid CSS @import
If you use CSS’ @import call, you’ll be slowing down your site’s load time. This tool points you to every instance of @import.
Prefer asynchronous resources
If you try to load all of your images simultaneously, your site won’t be viewable until all of them are finished. This tool checks for instances where one image is blocking another from loading due to simultaneous loading.
Specify a character set early
This tool checks whether your site’s code identifies its character set early, reducing browser load time.
Specify image dimensions
This tool looks at each of your images to see whether they have dimensions specified in their metadata. If your images have dimensions specified, users won’t waste load time on redundant images.
Avoid a character set in the meta tag
If you specify a character set in the meta tag of your site, you’ll disable certain parallel downloading features in some older browsers.
Specify a Vary: Accept-Encoding header
This tool checks whether your site tells users accessing via a proxy to store both compressed and uncompressed copies of the images on your site. Having this setup prevents your site from serving proxied users with compressed images which their proxy doesn’t support, preventing valuable loading time lost.
YSlow
Now that we’ve seen the power of PageSpeed and understand its features let’s dive into YSlow.
YSlow is based on Yahoo’s SEO team’s work and is composed of 23 separate metrics with which it tests your site. For now, just think of it as Yahoo’s site speed regimen.
YSlow gives you a list of criteria and scores your site, just like PageSpeed. If you’re deficient in one or more categories, you can click on the bar to expand it.
YSlow may not seem as comprehensive as PageSpeed, but it’s a less technical at-a-glance perspective of your site. A few of the advisories in YSlow overlap with those in PageSpeed. If you’re not sure how to implement YSlow’s suggestions, there are resources out there to help you.
Now, we’ll walk step by step through all of YSlow’s advisories as we did with PageSpeed.
Make fewer HTTP requests
This tool checks whether your site has external JavaScript scripts, HTML elements, or CSS elements. Combining these elements into one instance of their class will reduce your load times.
Add Expires headers
This tool checks whether your site is adding Expires headers appropriately. Expires headers tell your users when to load a cached version of the site. If your users can’t access a cached version of the site, they’ll suffer from much slower load times.
Minify JavaScript and CSS
Much like in PageSpeed, this advisory checks where your JavaScript and CSS code can be minimized to increase loading time. You’ll see any instances of either spit out below the bar.
Use a Content Delivery Network (CDN)
CDNs make your site have uniform responsiveness even when your users are far from the hosting. If your site isn’t using a CDN, this tool will tell you what you’re missing.
Avoid URL redirects
Just like in PageSpeed, this advisory tells you where you have URL redirects which waste loading time.
Reduce DNS lookups
The more domains your site is spread across, the more DNS lookups your users have to perform to navigate your site. This tool checks which domains your site uses and offers you advisories on how to collate them.
Compress components with gzip
Like in PageSpeed, this tool checks whether you’re saving load times by compressing your site elements wherever possible.
Make AJAX cacheable
If your site isn’t caching its AJAX requests, your users will wait longer before your site loads.
Remove duplicate JavaScript and CSS
Extraneous HTML, JavaScript, and CSS scripts can hamper your site’s load times, so this tool will find instances of duplicates and list them for you.
Avoid AlphaImageLoader filter
This tool checks whether your site uses the Alpha Image Loader filter, an obsolete rendering method used in older editions of Internet Explorer.
Avoid HTTP 404 (Not Found) error
This tool identifies 404 errors on your site and lists them for you.
Reduce the number of DOM elements
DOM (document object model) elements increase the complexity of your page and thus increase your site’s load times. This tool identifies any DOM elements that are present.
Use cookie-free domains
Serving content from a cookie-rich domain slows user access to your site, so this tool checks your content delivery for cookie-enabled domains.
Use GET for AJAX requests
AJAX requests have two formats of the header: GET, and POST. GET is the faster of the two methods, so this tool checks to make sure that your site is using it instead of its slower cousin.
Avoid CSS expressions
CSS expressions are notorious for their poor performance. This tool checks your code for CSS expressions and points them out to you.
Reduce cookie size
Much like the PageSpeed equivalent, this tool checks your site’s cookies to make sure that they’re as nimble as possible.
Make favicon small and cacheable
Favicons are icons on a page which get served to your users via a specific file. If this file is too big or isn’t cached, your users will have slower load times.
Configure entity tags (ETags)
ETags help your users see whether they can access a cached version of your site or whether they need to request a new version from the server. If your ETags are missing, your users will always request a new version from the server, slowing their load times.
Make JavaScript and CSS external
In some sites, making JavaScript and CSS loaded from external sites rather than inline can give your page a better load time. This tool assesses the number of inline CSS and script elements and leaves the rest to you.
Wrapping Up
That concludes our guide to GTmetrix. Hopefully, now you have a good idea about the power of this app.
If you’re ever using GTmetrix and forget what an advisory means or what you need to optimize, don’t be afraid to click the “What’s this mean?” button and the subsequent “Read more” button. GTmetrix has an entire library of information about its functionality, so learn everything you can.