Site QA: Page Speed

Quality Assurance

If you own or manage a website you might know how important it is to regularly inspect your site to check if everything is working as it should. Now, there are various ways of doing this and each to their own. But, if you are like me, whichever method simplifies the process most is what I’m going with.

There are two tools in particular that provide the kind of information you would want to know when you inspect your site. The first tool is called Page Speed Insights (PSI) and the other is called GTmetrix. We focus specifically on the PSI tool because it’s the most inclusive one of the two.

In this blog, we dissect the data that PSI provides. We also discuss why it matters to webmasters and brainstorm ways to implement some of the suggestions that the tool offers.

Manual Inspection

The most basic way of checking your website is through manual inspection. To do this you simply enter your website URL into the web browser to see if the site is up and running. If the URL works then great, you’ve covered one of the most important bits.

Next, test the overall navigation on the site. Are you able to move between pages easily and is everything displaying how it is supposed to and positioned where it’s supposed to be? If that’s in order you can test out the links or buttons that you have on your front page and child pages. Double-check that each link is working and that it’s directing to the intended page. It’s also a good idea to right-click and inspect your site to see how it appears on various mobile devices.

Website Inspection

If you want to pay closer attention to the individual pages on your website to see if they are displaying any errors there are ways to do that. One particularly useful tool for this purpose is called Screaming Frog. You can use the tool to crawl your site by simply inserting your URL. It will list every page URL that exists on your site as well as provides additional formation for each page. Here are some of the features available on the tool:

  • Filter listed pages using metrics on the drop-down list
  • Choose to see only internal or external pages
  • View specific details about the page like meta title, description and headings
  • See list of every image that exits on the site
  • Export the data to excel or csv format
  • See which pages are a 404 error
  • View pages that have 301 errors

Page Speed Insights (PSI)

Now, it’s great to have a beautifully designed website that has all the right information, but if your pages aren’t behaving the way they should it does discredit your site a little bit. Page speed is a major factor and if you don’t work to improve this continuously you may suffer consequences like high bounce rates and low conversion rates.

Page speed insights is a free tool that offers information about the performance of a website or individual page on mobile and desktop. Additionally, it also offers suggestions on how the page can be improved. Because the tool is free, accessing it is super easy. You simply type “page speed” into Google and select the right option from the SERPs.

How It Works

When you type a URL into the PSI search bar, the tool will gather all information it has using its Chrome User Experience Report dataset. Once the information is exported the first thing you will see is the overall score of your page or website in either green, red or yellow. An overall score of 90 and above is considered great while a score ranging between 50 and 90 is acceptable too. Anything below 50 is poor. This information is followed by your pages performance result as far as first contentful paint, largest contentful paint, time to interactive, speed index and total blocking time is concerned. We explain more on this below.

Page Speed Insights

First Contentful Paint (FCP)

First contentful paint, or FCP for short refers to the time it takes your page to start loading up until every bit of information is rendered on screen. Content in this instance refers to text, images and all other background elements. Ideally, your page or website should load this information in 1.8 seconds or less to be in the green. Anything more will result in a moderate or poor rating.

Largest Contentful Paint (LCP)

This metric measures the time it takes for the largest block of text or image on your page to load and compares it to the time it takes the entire page to load. This way you are able to see exactly which parts of your page takes the longest and can work on it.

You should strive to have an LCP score of 2.5 seconds or less. Anything between 2.5 and 4 seconds is considered moderate while a score below 4 seconds is poor.

Cumulative Layout Shift (CLS)

Cumulative layout shift refers to unexpected page movements. Have you ever experienced being on a page when suddenly the screen jumps, or you’re about to click on a link or button and it moves so you end up clicking on something else? Or worse, you click on something else and it takes you to a whole other page? Yes, this is what we mean by cumulative layout shift and there are various reasons why it happens.

The CLS metric helps you identify and address this issue by measuring how frequently visitors to your page experience this. It measures and stores the biggest CLS scores for every unexpected shift on your page, and does so for the entire lifespan of that particular page.

For the best user experience, you should strive for a CLS score of 0.1 seconds or less. Anything more requires urgent attention.

Time to Interactive (TTI)

At times, a page may seem like its fully loaded and ready but that’s not always the case. And, you won’t pick this up until you try to interact with it, like scrolling or clicking. The time to interactive metric measures how long it takes for your page to become fully interactive with the user. A page or website is only considered interactive when all content Is rendered on screen and everything is working.

Page Speed Overview

The rest of the page speed report will provide further opportunities, a more detailed diagnostics report, and also reveal the passed audits for your site or page. Opportunities are simply suggestions made by the tool on how you can improve. It also shows by how much your score will improve should you decide to implement the suggestions.

The diagnostics information offers more detailed stats about your page’s performance, while the passed audits section gives an overview of the things that you have done right so far.

Related Posts