As I typically do with my guides, I like to get straight to the point because I know website owners are busy and have no time for fluff.
This guide will follow that model, as there are plenty of resources out there that go super in-depth when it comes to covering the various optimization testing tools, testing methodologies, etc.
Why is all of this important? As any SEO expert should know and should tell you is that Web Core Vitals is a ranking factor for Google and even if you don’t care about that (you should), you should care that providing a great user experience could make a significant difference to your bottom line.
The main purpose of this guide is to empower you and help you understand how your website is performing, so you can not only challenge yourself but also challenge the so-called “professionals” that claim they have optimized a website when they really haven’t.
My preferred tool for auditing website performance is Webpagetest.org, which is the gold standard when it comes to performance optimization testing tools, so you do not need to concern yourself with the dizzying amount of testing tools out there like GTMetrix, Pagespeed Insights, etc.
Just use WebPageTest and you will be good to go!
Performing a Test
Here are the steps to perform a test and please note that if a specific setting isn’t mentioned, you can assume I left the default value.
- From the WebPageTest website, sign up for a FREE account. (Note: I recommend signing up so that you have historical report access for comparison purposes, as well as the ability to participate in their community forum.).
- Advanced Testing > Enter a website URL… > Enter your full domain, along with the HTTPS protocol. (e.g. https://wpturnedup.com).
- Advanced Testing > Test Location > Choose the location closest to your primary audience. (Note: If your audience spans multiple test locations, you will want to test from each of those locations to ensure your entire audience gets the best user experience, and I’d highly recommend implementing Cloudflare’s CDN for better MyListing security and performance.).
- Advanced Testing > Advanced Settings > Test Settings > Connection > 4G (Note: You may be templated to choose the fastest connection available, but not only is that not a realistic representation of all of your visitors, but you also want to show measurements on a fairly worst-case scenario so you can really fine-tune performance.).
- Advanced Testing > Advanced Settings > Test Settings > Repeat View > Choose ‘First View and Repeat View’ (Note: This allows you to see the performance before your content is cached and after it has been cached. Performance should be improved on the cached view.).
- Advanced Testing > Advanced Settings > Test Settings > Label > If you are only ever going to optimize a single website, you can skip this, otherwise you will want to add your site name here.
Test Results - Local Region
What you see below are the results from testing one of my brand (MyListing Club) websites using a testing location close to the server, and I’ll break down these results a bit as we continue with this guide.
While the MyListing Club website is not a MyListing website (i.e. using the MyListing theme), the approach and goals are exactly the same.
Core Web Vitals
As we see in the screenshot above, there are passing marks for Core Web Vitals, regardless of whether it’s on the first view of the Home page or on subsequent views after caching has kicked in (i.e. Repeat View – Run 1).
Depending on a few factors, there may be nothing else you really need to do at this point, but you should absolutely dig deeper into your performance if you fall under any of the following conditions.
- Performance (General): You are in competition with another directory and the only thing separating your website from that competitor is your website is loading much slower than theirs.
- SEO: You are in tight competition with another directory in terms of being given priority in search engines and the only thing separating your website from that competitor is user experience (page loading time, layout stability, etc.).
- Proactiveness: You are in competition with other directories and you have the time/desire to try and stay ahead of them at all times.
- Just Because: You enjoy squeezing every bit of performance that you can from your website, whether you see it as a personal challenge or simply just because.
If you do find that you need to dig deeper into your Core Web Vitals, WebPageTest can give a peek behind the scenes if you click on the ‘Core Web Vitals’ link within your testing results, and also consider checking out the Google Data Studio section of this guide.
Chrome Field Data
Looking at the results above, this is what WebPageTest is reporting the user experience to be for the Home page, based on real Chrome usage from desktop devices.
Things are looking pretty good here and later on, in this guide, I’ll look at this from a different vantage point, and discuss the differences.
First Byte (TTFB) to First Contentful Paint (FCP)
Looking at the results we see a First Byte (i.e. how long it takes the server to respond) of .760s and a First Contentful Paint (i.e. when we see the first bit of content show up on screen) of 1.027s.
What you want here is for there to be a small gap of time between these measurements and since we are only looking at less than a 300-millisecond gap, we are good to go.
First Contentful Paint to Largest Contentful Paint (LCP)
Looking at the results we see a First Contentful Paint of 1.027s and a Largest Contentful Paint (i.e. how long it takes to show the largest content element) of 1.174s.
Again, what we are looking for is a small gap of time between these measurements and we have pretty much nailed this. Is there possibly more that could be done? Sure, but at some point, it makes more sense to focus on producing more content or focusing on other areas of the business.
Tip: You can easily identify the element being used to measure your LCP by clicking on the ‘Largest Contentful Paint’ link from your testing results, and viewing whatever element it is that WebPageTest highlights in graphical format.
Cumulative Layout Shift (CLS)
This is a measurement of elements that “shift” during a page load and the goal here is to not have any elements shift, which we have been able to accomplish here.
CLS can be caused by any number of things, but you can click on the ‘Cumulative Layout Shift’ link in the report to learn more about what might be going on if need be.
Total Blocking Time (TBT)
This is the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses, and we are good to go here as well.
Time (Document Complete or Fully Loaded)
This is the amount of time it takes for the entire page to load and ideally you want this to be in under 3 seconds, so at 1.449s we were able to do that.
Requests (Document Complete or Fully Loaded)
There is no magic number of requests to shoot for here, as not all requests are created equal, but if you are trying to find additional ways to increase your performance, I recommend using the Perfmatters plugin to stop the loading of assets that are not needed on a particular page, as I’ve done here to help produce these results.
If you find yourself needing to really dissect what is going on behind the scenes, that is where the waterfall is going to come into play, and you get to this by viewing the ‘Details’ tab of your WebPageTest report.
Examing and comprehending the data found within the waterfall is outside the scope of this guide, but I do touch on it briefly within the written portion of the How to Optimize MyListing Websites With Perfmatters guide, and then more extensively if you view the Perfmatters video within that same guide.
Just to give you an idea of something to look for, let’s look at our waterfall results (shown below), and see just what is loading before the First Contentful Paint (FCP) element is able to be shown, with the knowledge that you want as little as possible to load prior to the FCP.
CSS is render-blocking, which means we need to load most (if not all) of the necessary CSS for this page before we can begin to show the first bit of content (i.e. FCP), so there is not much to be done here with the exception of caching the CSS, as we are doing with Cloudflare.
The main takeaway here is to eliminate as many assets (CSS, JS, etc.) as possible from loading at the top of the waterfall, so the meaningful content can paint on your user’s screens as quickly as possible.
While this is not directly related to website performance, I thought I’d go ahead and bring up something that I get asked a lot of times, which has to do with seeing a failing grade in this area.
For those that do receive a failing grade, if you click on the grade “card”, this is actually a link that will pull up information on how to address any issues that are found.
In order to get our ‘A’ grade in this area, I needed to address the security headers and this was easily done by jumping on a support chat with Kinsta (my preferred web hosting vendor for WordPress websites) and requesting the security headers to be put in place.
Note: If you run a WebPageTest test again, after addressing your security, the grade may not change right away, and for those that are impatient there are security-specific tools like securityheaders.com that can be used to see instant results.
Also, it is very important to test all aspects of your website (backend and front end) after you apply security headers, to ensure nothing breaks as a result. One quick thing you can do is inspect whatever is on your screen, using browser inspect tools, and look for errors being reported.
Another option is to use a solution like Toast.log, which is an awesome tool for reporting errors in a user-friendly fashion.
Test Results - Remote Region
If your business serves a global audience like mine, it is important for every customer to have the same experience regardless of their location, so be sure to run tests from multiple locations as needed for your particular situation.
The results below show the MyListing Club website performing just as well from a location that is far from our server, which in this case is London.
Aside from the optimizations I’ve done by hand and with the help of plugins like Perfmatters, I owe a lot of the success to Kinsta and Cloudflare’s APO offering.
Google Data Studio
Google Data Studio (GDS) is a FREE resource that gives you a dashboard for creating and managing data reporting.
I’m going to show you how to quickly connect your GDS dashboard to a Chrome User Experience Report (CrUX), so you can potentially see real-world Chrome user experiences when it comes to your MyListing website.
But Why Use This When There's WebPageTest?
While WebPageTest does provide Core Web Vitals data, Google Data Studio goes a bit further in terms of showing you which devices (Desktop or Mobile) people are using when they are “experiencing” your website.
Also, whereas WebPageTest looks at the URL you enter into the testing tool, the CrUX report is looking at your entire website.
Connect Google Data Studio and CrUX
- Using one of your Google accounts, log into Google Data Studio.
- Click ‘Create’ and choose ‘Data Source’.
- Do a search for ‘Chrome’ and choose the item shown below.
- Click ‘Authorize’ and follow the prompts to authorize Chrome UX with your Google account.
- Parameters > Enter origin URL: > Enter your domain name (e.g. mylisting.club).
- Click ‘Connect’.
- Click ‘Create Report’ once the connection is established.
- Click ‘Create Report’.
- Click ‘View’.
CrUX Report - Core Web Vitals
At this point, you should be viewing the Core Web Vitals (CWV) data of your CrUX report which is the most important UX (User Experience) data that you should focus on, and while you have a ton of useful data to look at, it’s not perfect (i.e. this is Chrome usage data only), let’s face it…Chrome is still the most used browser by far.
Note: As you drill down into the various reporting tabs (LCP, FID, CLS, etc.), if you are seeing “No data” in places, that means that you do not have enough traffic from real users for Google to provide meaningful information for that particular device type.
MyListing Club CrUX Results
Looking at the results below, this is what Google is reporting the user experience (not performance scores/grades) to be for the entire MyListing Club website, based on real Chrome usage from desktop and mobile devices.
As I eluded to above, in the ‘Chrome Field Data’ section of WebPageTest, the CrUX approach is different in that it looks at your entire website rather than a page-by-page basis, while also measuring from desktop and mobile devices versus just the device entered into WebPageTest.
First Contentful Paint (FCP)
WebPageTest is showing a grade of 89% (i.e. a Good user experience on desktop), while CrUX is showing a grade of 94.04%, so as we can see things are matching up quite nicely in terms of consistency.
Largest Contentful Paint (LCP)
WebPageTest is showing a grade of 93% while CrUX is showing a grade of 94.04%, so as we can see things are matching up quite nicely in terms of consistency.
Cumulative Layout Shift (CLS)
WebPageTest is showing a grade of 89%, while CrUX is showing a grade of 88.78%, so again, the measurements are consistent.
So, What Now With Regards to This CWV Data?
In short, you want to shoot for at least a grade of 75% in the Green (i.e. Good) for both Desktop and Mobile devices, and if you don’t currently meet that threshold, it’s a sign that you need to dig a little deeper into their performance of your website.
One of the really nice things about the reports is you can easily spot when/if performance has deteriorated for a particular month, so you could then circle back and ask yourself “what changed?”. “Did I install a new plugin or an update to a plugin?” “Did I update the MyListing heme around that time?” “Have I changed anything with my infrastructure?”
While optimizing a website may not be the easiest thing in the world to do (everyone would have a fast site if it were easy), auditing your website’s performance can be a super easy endeavor, as I’ve demonstrated here.
If you have recently had your website “optimized” by someone, now would be the time to see what kind of return on investment you received before any more variables are introduced to your environment in terms of updates, plugin additions, settings changes, etc.
Whether you hire someone to optimize your website or you do it yourself, it is super important to understand that it is not a one-time thing, and there must be an ongoing commitment to maintaining the performance of your website.