WebPageTest.org Tutorial: How to Find and Fix Site Speed Issues for Free!

Everyone hates a slow website, especially now that it doesn’t take an hour for a photo to load like it did in the 90s.

Don’t lose out on traffic and income – fix your site speed!

Most people rely on Pagespeed Insights to tell them what’s wrong with their site speed, but there’s one major problem: it doesn’t tell you what’s wrong with your site speed clearly.

That’s where WebPageTest.org comes in WebPageTest is a free tool that tests your speed and provides a waterfall view of your files. I’ll explain what this is in the tutorial, don’t worry.

I spent eons with an 11 second load time for my travel blog, but Pagespeed Insights just said I needed to reduce CSS.

What? Where? How??

WebPageTest showed me exactly which files and plugins needed to be fixed and saved me hundreds of dollars on a developer to fix the issues. I’ve kept using it for years since!

Let’s save you some money, too! We’ll go through how to use the tool so you can fix your site speed.

Price

The free tier gets you 300 tests per month. Unless you’re testing 10 pages a day every single day of the month, you’ll be fine with this plan.

You do need to log in, but again it’s a free account.

Alternatively, there is a paid plan starting at $15 per month for 1,000 test per month. It also includes API Access, priority tests (so they’re faster during peak test times), integrations, private tests, bulk testing, and dedicated support.

I don’t think 99% of website owners need this. An agency might, or a technical SEO consultant. But a standard blogger will be fine with the free plan – it’s the one I use.

How to Test Site Speed With WebPageTest.Org

To test your speed, go to the homepage of WebPageTest and type in your URL. It will only search the webpage you give it, not the site as a whole (same as Pagespeed Insights).

I recommend testing you homepage and a blog post (or even a couple blog posts if your format varies).

Your homepage is often slower than a blog post, since it typically has a giant banner image across the top. So it’s a good idea to also test a blog post which should be more text-heavy.

You want to run a “Site Performance” test – this is the default setting.

But from there, we have some settings to play with. You can choose either simple or advanced.

I’ll walk you through both:

Simple Configuration Settings

The simple option lets you pick between preset settings for your test. You have 6 options that are preset configurations with mobile vs. desktop, browser, connection type, and location populated.

You definitely want to do a mobile test, as Google is mobile-first and most users are going to access your site from their phone.

However, the browser, connection, and location may vary for your site.

For example, if your audience is 90% in Canada, you won’t want to run your test based on a US user. You want to optimize for your existing audience.

As a default, it selects Mobile, Chrome 4G, in Virginia, USA. That’s a good setup for a test if your audience are primarily in the US and use Chrome.

If you need something more specific or need it altered, you’ll need the advanced configuration.

You also have the options to:

Option	Purpose
Run Carbon Control	Measures your carbon footprint.
Include Repeat View	Mimics a repeat user to test your cache and checks how efficiently your site handles repeat visits.
Run Lighthouse Audit	Runs Google’s open source “Lighthouse” tool, which is equivalent to the PageSpeed Insights report when you analyze a URL.

Of these options, I only select “Repeat View”.

For a basic test, select the following:

• Mobile, Chrome, 4G, Virginia
• Include Repeat View

And “Start Test”!

Advanced Configuration Settings

The advanced option allows you to customize your test.

You can select:

• Location (i.e. Virginia, Toronto)
• Browser type (i.e. Chrome, Firefox)
• Connection (i.e. Cable, 3G)
• Desktop Browser Dimensions
• Number of Tests to Run (defaults to 3, I recommend at least 3)
• Repeat View (Include repeat view)

And in the other tabs you can get even more specific (although I’d avoid these largely if you’re not a developer or tech SEO as they get more complex):

• Errors to ignore
• Disabling image formats
• Including video
• Scripts and custom code to run
• Block domains or URLs
• Simulate failed hosts
• Custom metrics

I’ve never touched any of these because I’m not a developer.

If you’d like to use the Advanced option and, like me, you’re not a developer. I recommend only adjusting things on the “Test Settings” page. You can alter the location, browser, etc. at will.

I do recommend including 3+ tests and including repeat views.

Test Time

Testing takes some time. Usually it takes under 3 minutes, but sometimes there is a bit of a wait. I’ve had to wait up to 10 minutes once because I was in the queue. But it’s usually really speedy.

The test will tell you if you’re in the queue by putting you on the “Waiting” arrow. In small text beneath it, it’ll tell you what your number is in line.

If you’re in the testing phase, it’ll highlight the “Testing” arrow and count how long it’s taking to run beneath it in bold text.

Leave the tab or window open and go do something else for a few minutes, then come back when it’s complete.

When it’s done, it’ll redirect you to a new page in the same tab with your results.

Reusable URL

One of my favourite features of WebPageTest is that you can copy the URL and share it. This is great for sharing with your team or your host. I share it with clients so they can see the exact test I ran, rather than getting different results with their own test two weeks later.

It also allows us to compare results before and after changes.

For example, when I change a blog theme, I’ll test the speed before and after to see if it’s improved. If it hasn’t, then I either need to revert back to the other theme, or make some improvements.

Copy the URL and put it in a notes app or a spreadsheet to save for later if you’re running a comparison of any sort.

Export the Test Results

Don’t want to share the URL with someone? Instead, you can export the results.

Download specific logs, JSONs, or CSVs.

I never bother with this, as I find it easier to share the URL. But if you need to filter the data being shared, this would work really well.

What Do The Results Mean?

Now that you’ve run your tests, you’re probably like “Nina, wtf does this all mean??”

We’ll go through it piece by piece. Don’t get overwhelmed with all of it.

If there’s one thing to look at and ignore the rest because you’re overwhelmed, it’s the Waterfall Test.

The other information is important too, but the Waterfall Test will help you root out the major issues.

Website Performance

Our “Site Performance” test yields a Performance Summary at the top of the page.

This has three elements:

Question	Focus
Is It Quick?	Speed of the site and host
Is It Usable?	Layout, time to be usable, and accessibility
Is It Resilient?	Security issues related to code and third-party requests

Each will be followed by a verdict and a short summary. If you click on it, it’ll expand to a more in depth view showing specifically which files on the site are the cause of the result.

Page Performance Metrics

Beneath the Performance Summary, is the Page Performance Metrics. These are high level metrics that explain specific speed results.

It will pull the metrics from the median run (i.e. if you ran 3 results, it’ll be the result that was in the middle speed-wise) and median repeat view.

Performance Metric	Definition
Time to First Byte	Time it took from the user entering the URL until the server responded.
Start Render	Time when something is displayed on the screen and it’s not just blank.
First Contentful Paint	Time when text and images first start to appear.
Speed Index	Average time it takes for the page to be usable, even if it’s not fully loaded.
Largest Contentful Paint	Time when the largest piece of content that is visible loaded.
Cumulative Layout Shift	How much the design shifted while loading (e.g., an ad popped up after 2 seconds and pushed loaded content down).
Total Blocking Time	Total time it took for everything to load after the Start Render time.
Page Weight	Also known as “Page Size”. The amount of data the browser has to download to load the page.
Carbon Footprint (Experimental)	Estimated carbon footprint of the webpage loading.

Beneath these metrics is a “Visual Page Loading Process”. It shows screenshots of how your site is loading at every 10th of a second of the load. It’s a really cool way to see exactly what is loading and when.

You’ll be able to see the first thing that loads (it should be text, especially for a blog post), and exactly when certain elements render.

This can help you determine if your site is usable before a speed test deems it “done” – for example, some speed tests wait until a pop up is served to “finish” the render. But most pop ups have a 5 second delay.

Waterfall Test

The Waterfall Test is my favourite feature of WebPageTest, and what really sets it apart from all of the other site performance tools I’ve used.

This test shows, file-by-file, how long it takes for your site to load. And it doesn’t stop at the largest contentful paint. It keeps going to show every single file that loads on your site, even after it’s already usable.

From the main speed test page, the waterfall view is crazy tiny. Click on it, and it’ll take you to a full screen version of the Waterfall Test.

Here you’ll get a detailed chart that has the file name in the first column. If you click on the file name, a pop up will show up with the expanded URL of the file, and more information on it specifically – such as the size and time it takes.

Beside the file name is the time it takes to load in a horizontal bar graph. The bar graph has text beside it showing how many milliseconds it took for that element to load.

Smaller bars are faster to load – however, this can be deceiving. If your site loads in under 3 seconds, something that takes 500ms is still going to look huge. Always use context clues!

Colour Coding

The chart is also colour coded. It shows what type of element each thing is based on its colour. Now, some are pretty much the same colour and I’m not a paint store or a nail polish namer, so I’m using my best guess at the name for the colour.

When in doubt, it’s right along the top of the waterfall for you to review at any time.

Here’s what each colour means for the horizontal lines:

Color	Network Activity
White	Wait for server to respond
Teal	DNS
Bright Orange	Connection to site
Bright Purple	SSL (this makes an http into an https)
Blue	HTML file
Pale Orange	Javascript
Pale Green	CSS
Pale Purple	Image
Bright Teal	Flash
Red	Font
Aquamarine	Video
Grey	Other
Pink Line	Javascript execution

There are also vertical lines with colour coding that correspond to the metrics from our page performance test.

This helps you spot what files are loading at the render points we were looking at before.

Here’s what each colour means for the vertical lines:

Symbol	Event	Explanation
Dark Green Solid Line	Start Render	The point at which the first visual content is rendered on the screen.
Light Green Solid Line	First Contentful Paint	The time when the first text or image is painted.
Green Dotted Line	Largest Contentful Paint	Marks the point when the largest text block or image is painted, indicating the main content is visible.
Orange Solid Line	DOM Interactive	The moment when the Document Object Model is ready enough to handle user interaction.
Pink Solid Line	DOM Content Loaded	Indicates when the HTML document has been completely loaded and parsed, excluding stylesheets, images, and subframes.
Light Blue Solid Line	On Load	The time when the entire page and all dependent resources such as stylesheets and images are fully loaded.
Dark Blue Solid Line	Document Complete	Marks the point at which all processing is complete and all resources on the page (images, scripts, etc.) have finished loading.

Lastly, you will see icons and sometimes a highlight on the rows.

Here’s what the row decorations mean:

Symbol	Meaning	Explanation
Orange “X”	Render Blocking Resource	Resources that take a long time to load and prevent a page from loading quickly. Usually CSS or JS.
Red Exclamation Point in Triangle	Insecure Request	A file that is deemed as a security risk.
Yellow Highlight	3xx Response	Indicates a redirection message from the server.
Red Highlight	4xx Response	Indicates client error responses such as not found or access denied.
Blue Font	Doesn’t Belong to Main Doc	Indicates elements not originating from the primary document of the site.

How to Read the Waterfall Test

Start from the top row of the waterfall and work your way down.

Evaluate every file to see how long it is taking to load. If something is taking much longer to load than other elements on the site, consider whether or not you need that file on your website.

Could you delete the plugin or replace it with something else? Could you lazy load, resize, or compress your images? Do you really need that Etsy downloaded cursive font?

But equally consider if something that is taking a while to load is beneficial to your site. Does it make you money? Get you traffic? Or serve a purpose that is invaluable in some way?

If so, try to optimize or work on optimizing other elements so you bring down your overall speed score to make room for that file to take up more space.

In this case, my 3 largest files (pre ads) are my images on my homepage. 1 is my first giant image of my freebie opt in. It loads in 712ms.

Before I compressed and resized it, it was easily triple that (it’s a very big picture). So I’m ok with the time it takes for it to load. It’s also lazy loaded, so I know my audience can start reading the content before it first while it populates.

But if I had a file from Yoast, let’s say, that took 1500ms to load when my total time is 3s, I’d want to offload or optimize it immediately. (That’s one of the reasons I switched to Rankmath.)

Click through the Waterfall Test files to see what’s slowing down your site, and if you really need it. This takes a bit of time, but it’ll tell you so much more than Pagespeed Insights randomly showing you an image and telling you to compress it – when 99% of the time it’s already compressed and resized.

Result Detail Pages

If you want even more detail, you can click through the “Result Detail Pages”.

Scroll back to the top of your WebPageTest test. You’ll see “View:” and then a drop down box.

It will default to “Performance Summary”, which is the view we’ve been working with so far.

You can click into each one to get even more information on your site.

I don’t use these much. I focus mostly on the Waterfall Test, and leave these alone unless I’m doing a really major audit or switched to a new theme and I want to make sure it’s faster.

Let’s go through them in a bit more detail:

Opportunities & Experiments

Tips to optimize your site based on issues spotted in your test. It even lists the specific files to alter, and suggests experiments to try to fix it. The paid plan goes into more detail on the experiments, but you’ll get a good enough idea of what to do with the free plan.

It’s organized by the three initial questions WebPageTest evaluated the webpage one: Is it quick?, Is it usable?, and is it resilient?

Filmstrip

Scroll through a film strip of the sample images of your site’s load.

At the same time, you’ll see your place in the file load of the Waterfall Test.

Details

This is the Waterfall Test page we were in earlier. I don’t know why it’s called details, when Waterfall Test would make more sense.

Web Vitals

This test pulls from Google’s Core Web Vitals to show the Largest Contentful Paint, Cumulative Layout Shift, and Total Blocking Time of the webpage.

Carbon Control

Evaluate the carbon usage of your webpage. It estimates how much carbon is generated per visitor to your website, offers tips to reduce carbon impact, and even gives a pie chart break down of what files are adding the most carbon output.

Optimization

Provides a summary of performance optimization features.

It evaluates things like:

• Lighthouse
• Security
• First Byte Time
• Keep-Alive Enabled
• Compress Transfer
• Compress Images
• Progressive JPEGs
• Cache Static Content
• Effective Use of CDN

If anything is scoring below a B, you should look into repairing it.

Now, I will say, it’s not perfect. I’ve had it under report my cache or say I don’t have a CDN when I do. I don’t fully understand this report, so I usually leave it alone.

It does come with an optimization checklist showing any specific images that aren’t optimized, if any pages are excluded from keep alive, uncompressed files, improper image files, and missing caches or CDNs.

Content

A breakdown of content file types in two pie charts: one for the first view and the other for repeat view. It shows the percentage of each type of file that are present when the site is fully loaded.

If for some reason font was over 10% of your files, you’d be like “why??”.

Likely it’s an error you need to fix.

And if images don’t even have a %, then you need to check on your images.

Domains

A breakdown in a pie chart of all of the file domains loading on your site. These will include domains for things like Google Analytics, Microsoft Clarity, your ad network (again, it’ll have a bunch of weird files and domains too), a pop up widget, etc.

Files with your site’s domain should be the #1 in the report. Otherwise you likely have too many extraneous bits of code in your header or footer that need to be removed.

Console Log

A list of output or error messages from the test’s run on your site. Usually it’s a cookie warning or restricted access to a file.

Detected Technologies

A list of the tech stack running your site.

For example, because I have the Google Analytics code on my site, it can tell I have Google Tag Manager in my text stack.

And because I’ve claimed my domain with Convertkit, I also have Convertkit show up.

It’s a really cool way to see all the tech running on a website.

Although again, you’ll get some werid stuff from ads.

Processing

The amount of time doing each activity while processing the files to load your site, broken out by the type of activity.

Lighthouse Report

A report from Google’s open source Lighthouse system. This is basically Pagespeed Insights.

You’ll get a report with the following scores: Performance, Accessibility, Best Practices, SEO, and Progressive Web App.

Beneath each one is a drop down of the passed audits, ones that need manual checking, non applicable ones, and the tests that were failed.

There is also a film strip of the page loading, and metrics for First Contentful Paint, Speed Index, Largest Contentful Paint, Time to Interactive, Total Blocking Time, and Cumulative Layout Shift.

Image Analysis

Takes you to WebSpeedTest. This site evaluates the images on the webpage to see which ones need further compression or resizing to improve their load time on your site.

It is trying to get you to use Cloudinary, which I’ve never used, but it’s free to run the report. I use ShortPixel, not their system to compress, resize, and make WebP/AVIF versions of my images.

Request Map

Takes you to another site that creates a mindmap of the files that loaded during the WebPageTest.

I have no idea how this is useful as it looks kind of crazy to me. But I’m also not a mind map girl generally.

Data Cost

The estimated cost of the data on your site in different locations around the globe. Again, not sure why this is there.

Security Score

Sends you to Snyk and seems to require an account to find vulnerabilities in your webpage. I’ve never used it.

How to Fix Common Website Speed Issues

Whew we got through all of the incredible tests you can run for free with WebPageTest.org – but now you need to know what to do with all this information, right?

I’d be pretty terrible to leave you high and dry, so let’s go through common speed issues I’ve found from auditing over 500 websites in the last year.

I will say, I’m not a technical SEO specialist or a developer. These are just issues I’ve had and have seen others have, and that I’ve been able to figure out how to fix.

If you have a complex or uncommon website speed issue, I recommend speaking to a developer. I always start with my host, Lyrical. They have tech support on staff who have been able to complex fixes for me time and time again – like when I tried to code a plugin and corrupted my whole website.

Here are the common issues and how to fix them:

Issue	Solution
Images taking too long to load	Compress, resize, and change the file type. WebP or AVIF are fastest. Lazy load images so the text can load first.
Host server takes over 1s to respond initially	Get a new host, yours is too slow. Or upgrade your account with them, as you may be at your account’s limit and they’re slowing your speed.
.woff and other font files taking a while to load	Remove custom fonts and use built-in WordPress fonts. You’re not too good for Arial!
Repeat view load time is same or higher than first view time	You need a cache, or your cache isn’t working
Cumulative layout shift is over 0.1	Remove the elements causing the content to shift. This is typically an ad or a lazy loaded image put at the top of the page
Third party code loading before essentials	Move third party code to your footer instead of your header (pro tip from a developer friend of mine). Or delete the plugin with the code
Excessive amounts of CSS or JS files	Minify your CSS and JS files with WP Rocket. And set it to remove unused CSS and JS
One plugin is taking excessively long to load	Remove the plugin and potentially switch to another
Plugin files are loading, but you deleted the plugin	Clear your cache and delete the leftover tables with WP Optimize (free)
Excessive load time for base file	Update plugins and evaluate. Consider changing the theme or contacting your web host for help

Recommended Tools

Tool	Description
Lyrical Host	Fast web host
Cloudflare	CDN if you don’t have Lyrical (they have one built in)
ShortPixel	Image optimization, compression, and conversion to web format
WP Rocket	Cache and lazy load images
WP Optimize	Remove files from old plugins
Kadence	Fast theme
GeneratePress	Another fast theme
Astra	Another fast theme
Other Recommended Plugins
Plugins to Remove ASAP

Conclusion

WebPageTest.org is such a valuable tool, but you do need a tutorial to sort it out the first time – or to spend a week obsessing over what each term meant and trying to figure everything out DIY with Google.

Save yourself the time of DIYing the tutorial, and the money of hiring a developer with this easy guide.

Or at least know how to verify any issues your developer is claiming they found on your site, and be able to verify that their work doesn’t just trick Pagespeed Insights into falsely saying your site is fixed (there are lots of plugins and code that do that, but have no actual bearing on speed in the real world or for Google).

Now that you’re cleaning up your tech SEO, make sure your theme isn’t dragging you down. I recommend changing your blog theme sooner than later. Switching from Genesis to Kadence saved me 8 seconds of load time and doubled my ad revenue overnight!

Read More WordPress Blogging Tips

• 7 Worst WordPress Plugins You Should Delete Immediately
• Is a WordPress Blog Free?
• Essential WordPress SEO Plugins for Bloggers
• Blog Accessibility Checklist
• 60+ Best Blog Tools and Resources
• How to Add a Hyperlink in WordPress (Block and Code Editors)
• Lyrical Host Review: The #1 Host for Bloggers
• How to Create Jump Links in WordPress in 2 Steps
• How to Change a WordPress Theme: Step by Step Tutorial
• How to Export A List of All Blog Posts from WordPress Without a Plugin
• WebPageTest.org Tutorial: How to Find and Fix Site Speed Issues for Free
• How to Make an Author Box with Kadence for Better EEAT
• How to Use the Rank Math SEO Plugin: Step By Step Tutorial
• How to Change a Blog Post URL in WordPress Without Breaking Your Site
• When to Mark a Link “No Follow” for SEO
• When to Mark a Link as “Sponsored” for SEO

Like this post? Share it with others!