tools and suggestions • Yoast

We can check the performance of the server with tools like NewRelic or DataDog, which monitor how your site behaves and responds from the ‘inside’.

Another tool that may be interesting to look at is WebPageTest.org. This tool lets you test how your page performs on various types of networks and devices.

Since 2021, Google introduced Core Web Vitals – a set of metrics to measure websites’ speed and user experience, which made their way into Google’s core algorithm update. Essentially, Core Web Vitals look at three aspects of a web page: loading performance, interactivity, and visual stability.

  • Loading – Largest Contentful Paint (LCP): Measures how long it takes for the most significant piece of content to appear on the screen. 
  • Interactivity – First Input Delay (FID): Measures how fast the page can respond to the first user interaction.
  • Visual Stability – Cumulative Layout Shift (CLS): Measures the stability of visual elements on your page. In other words, does stuff move around on the screen while loading?
Metrics in Core Web Vitals

From the moment when you click on a link or hit ‘enter’ in your URL bar, a process begins to load the page you requested. That process contains many parts, but they can be grouped into several stages which look something like this:

4 stages of the loading process of web page, which include the: DNS lookup and TCP connection stage, the HTTP Request and Response stage, Server response stage, and Client-side rendering stage.
The “one-second timeline” from Google’s site speed documentation.

Generally speaking, if you have both field and lab data on a page, you should prioritize using field data and base your optimization efforts on that. That means looking at the data in Google Search Console and PageSpeed Insights. Google also recommends prioritizing field data. Since field data reflects the experience real-world users get, you can better understand what issues they are facing and what you need to do to fix those.

Wrap up

You can read more about these metrics in Google’s documentation.

Get practical: How to check your page speed

Clicking on one of these groups will show you the full list of URLs on your right bar. And if you click on an URL, a box will appear with a link that takes you to an audit of the page on PageSpeed Insights.

PageSpeed Insights

When optimizing your page performance for SEO, these three metrics are the most important to look out for. To pass Core Web Vitals, you need your page to get a green “score” for all these three metrics. And it’s good to know that at least 75% of your real-world users need to experience the green “score” in order for your page to have a pass.

To see this report, go to Google Search Console and look for “Page experience” in the left navigation bar. You should see an overview of how your mobile and desktop pages perform.

The Page experience overview in Google Search Console

The tool also provides suggestions to optimize your page, which you can find under the “Opportunities” section. They are good starting points and can be helpful when you’ve just started out with speed optimization. But it’s good to know that following these suggestions may help your page to load faster, but they might not directly affect the performance score. There are also a bunch of other things you could do other than what’s listed here.

From there, identify what your pages are lacking and focus your effort on optimizing your pages to pass Core Web Vitals. The suggestions that Google gives on PageSpeed Insights may provide you with a good starting point. However, don’t rely on them all the time. There is so much more you can do!

If you’re new to page speed optimization, then Google Search Console and PageSpeed Insights probably give you enough information to start working. This section is more useful for those who would like to have more data and want to dive deeper into their website’s performance.

Tools to check server performance

Now, the challenge for website owners is not only to make pages load faster, but also to give visitors the “perception” that the page is indeed fast. In fact, being able to deliver the “perception” that a page is fast is crucial, as it ties into the “experience” that visitors get on your website. In order to create this “perception” of a fast-loading page, it’s good to get a grasp of the loading process of web pages.

Web page loading process 101

Assuming that you’re working on improving your page speed to gain competitive advantages in search ranking, then you’re probably using Search Console a lot already. Not only does the tool give an overview of your search performance, but it also provides a great overview of how your pages perform according to the page experience standards. 

They’ll provide charts and metrics around things like slow database queries and slow scripts. Armed with this information, you can get a better understanding of whether your hosting is up to scratch, and if you need to make code changes to your theme/plugins/scripts.

HTTP request and response: After a connection is established, your user’s device sends a request to your web server asking for the page and its accompanying files and content. Your web server must process this request and prepare the requested content. Your hosting infrastructure, your web server, and the availability of a CDN have an impact on this stage.

If you scroll down a bit, you’ll find a diagnostic that provides you with the causes of why your page is failing Core Web Vitals. The reasons listed here are unique to a page and can range from a redundancy of third-party code, JavaScript error, lack of caching, etc,…

For instance, the image below is the waterfall view of the homepage of Yoast.com. It looks quite daunting at first, but it does become easier to understand once you run the test yourself. Remember the model of the stages of the loading process we mentioned earlier? This waterfall view tells us that the first stage (DNS lookup and TCP connection) takes about 0.55 seconds to complete. Then the HTML file is sent from the web server to the browser (but not rendered) and then onto other assets.

WebPageTest.org results for yoast.com

Field data vs Lab data

Generally speaking, you don’t have a whole lot of control over what happens here. It’s also hard to measure or impact this part of the process. But it’s good to note that there are technologies that exist to speed up this process, including CDN, intelligent routing, etc. However, these technologies are more useful for sites that serve large international audiences. If you have a site that serves mostly local audiences, there are other things that you can do to speed up your pages.

Server response stage

In an ideal world, we’d click on a link in the search result page and the web page would appear instantly before our eyes. But we all know that our technologies haven’t reached that point yet. At the same time, websites nowadays are incredibly complex, with web pages getting heavier and harder to load. 

Did we miss anything in this post? Or do you have great tips on page speed optimization? Let us know in the comment!



منبع

Server response time: Server response time refers to the time it takes for a server to return the initial HTML, excluding the network transport time. This stage is about how fast your web server can return information. Your hosting infrastructure, web server, themes, and plugins can affect this stage.

Browser-rendering stage

Please note that the above model refers to the delivery and rendering of content above the fold. The model is also mobile-centric.

Even if you try to simplify all of this to something like “the time it takes until it’s completely loaded“, it’s still tricky to give that a useful number. For instance, you can run an analysis that shows you that your page loads in 5 seconds. But this number may only apply to a percentage of your users. Someone who lives further from your web server, with a slower internet connection, and uses a slower device will experience a longer load time.