You've used PageSpeed Insights and tested your website to check your speed performance, and you've got to the point where Google gives you some metrics.

How do you interpret them and how much does the score provided by google really matter in your analysis?

Hopefully, this article will clear some things out for you.

Before you continue reading it, you might want to check these ones out first:

General notes regarding a 'fast' website

When talking about site speed performance, the most common approach is that a fast website is one that passes all core web vitals in the Field Data reported.

→ Google only takes into account Field Data for a ranking boost, so it’s important that when we perform an analysis, we interpret the data correctly.

The performance score (the red/yellow/green number) is based on Lab Data, so you might observe differences between the score and Field Data.

→ A low site performance score does not mean that your website will not get found by users in the Google Search. If your core web vitals result is better, Google will reward you with a ranking boost.

Please keep in mind that Core Web Vitals are just one out of many ranking signals that Google takes into account

→ The speed of your website depends on numerous factors, such as:

  • Your hosting provider;

  • Images used throughout your site;

  • Videos used throughout your site;

  • Your WordPress setup;

  • Assets loading;

  • Fonts;

  • Icons;

You will find our recommendations for all of these in a table in this article, here.

Having all of these ideas in mind, please remember that as a website owner, finding the right balance between ultimate performance and complex functionality can be challenging.

Our job is to try and offer you as many suggestions as we can, and advise you what can be done in order to improve your Core Web Vitals.

Our suggestions and take regarding site speed

How does Thrive Themes optimize for Core Web Vitals?

Core Web Vitals optimization is an ongoing piece of work. Google has made it quite clear that site speed optimization is something that they’ll continually work on over the coming months and years by introducing new metrics and initiatives to make the web faster.

We are fully committed to staying up-to-date with the changes that are coming, and for this reason, we’ve built our asset optimization tool. In short, this means that our optimization algorithm can continue to evolve in line with Google’s official recommendations.

Suggestions for core web vitals optimization:

Images

  • In order for your content to be as optimized as possible, you should constantly ask yourself “Do I need an image here?”
    Images are generally fairly “heavy” and you should try to use them only where needed.

  • We also recommend using an image optimization plugin, such as Optimole, for example.
    You can set it up from the Thrive Theme Builder Site Speed tab directly, check out this article for guidance.

  • We highly recommend using CDNs (Content Delivery Networks) allow images to be loaded from a location that’s geographically closer to the end-user. This leads to reduced latency and faster image loading on your site.

  • Google recommends that you set specific dimensions for images:

    "Always include width and height size attributes on your images and video elements. Alternatively, reserve the required space with CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading."

    However, in Thrive Architect, the dimensions of the image are specified automatically, so you don't have to worry about that.

  • Compressing images is another great way to optimize them. You can do it manually, using tools such as Photoshop or Canva, or you can try some websites that do it for you, such as Kraken.

  • Using modern image formats will also be suggested in your analysis.
    WebP image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. WebP images, for example, are usually around 25–35% smaller than JPEG or PNG.
    This decreases page sizes and improves performance. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.

  • You can also reduce the dimensions of the background images used throughout your site.

    You should consider avoiding full-width image backgrounds on your blog posts, and you can consider using patterns instead of a background image in the Thrive editors.

    There are plenty of patterns you can choose from inside our Thrive Architect/ Thrive Theme Builder/ Thrive Apprentice editor, and you can use those ones to create a nicely designed page without impacting your load times too much.

  • Enabling Lazy Loading images is another thing that will reduce the initial load time of a piece of content from your site.

Videos

  • Just like in the case of images, the first rule of adding videos to your pages is to make sure that you only add the videos where you actually need to.

    Adding a video, coming from any video hosting platform, will heavily add time to your page loading time.

  • In the very near future, Thrive Suite will include video optimization in Project Lightspeed - which means that if you simply activate asset optimization from your Thrive Dashboard, the scripts that are loading your videos will be optimized.

WordPress Setup

  • Only use the plugins that you really need. While some of the plugins are lightweight and will not necessarily impact the performance of your site, others can have a large negative effect on your Core Web Vitals score.

  • Use caching plugins. There are a few that we highly recommend, and you can find them listed in the Site Speed tab of Thrive Theme Builder.

JavaScript and CSS Files

  • We highly recommend you use our asset optimization tool - Project Lightspeed. The purpose of us creating this tool was to let our users decide how the assets will be loaded on their site.


    Activating this tool will only load the necessary assets on each page.


    The reason this is so important is that, if the tool is disabled and all of the JavaScript and CSS files are loaded sitewide, Google will report “Remove unused Javascript” when your site is analyzed.

Fonts

  • As for the fonts go, we recommend you consider using system fonts. System fonts are those that are supported natively by the browser. When using these, no extra requests will be required upon page load, to download a font from a third-party service (like Google).

    A reduced number of requests means less load time, which will increase your speed performance score.

    The drawback, of course, is that most system fonts aren’t very appealing aesthetically.

  • If you are using custom fonts, try to not use too many. Instead of having a separate font for each type of heading and blog text (a setup that would require a high number of individual requests), we recommend sticking to one or two fonts and consistently use them across your site.

Layout Shifts

A bit lower in this article, we have explained what layout shifts are and what Google measures via them.

The fewer such layout shifts you have throughout your site, the better your score will get.

  • For this reason, we recommend that you avoid using elements with functionality that displaces the layout of the page on load, such as scroll mats, ribbons, etc.

Interpreting the score and metrics

When testing your site speed with PageSpeed Insights, you will get some results that look something like this:

You will have a big red/yellow/green score on top of the screen, as well as some Field Data and Lab Data metrics.

We have explained these terms here, so please take a look if you need information about what each type of data represents:

You will also have these other Opportunities and Diagnostics metrics shown:

Here is, briefly, what this data means:

→ Field Data

As we've explained in our other article, Field Data is the data collected by Google from their Google Chrome Browser, and only from users that have agreed to share such data. This means it is real-world data, reporting metrics back to Google that your site visitors have actually experienced.

Under the Field Data section, you'll see these metrics:

  • First Contentful Paint (FCP)

According to web.dev, this measures the time from when the page starts loading to when a part of the web page is rendered on the screen.

  • Largest Contentful Paint (LCP)

While the First Contentful Paint metric measures the amount of time until any part of the page starts loading, the Largest Contentful Paint metric measures the amount of time until the page's main contents have finished loading.

  • First Input Delay (FID)

First Input Delay is used to measure load responsiveness, as it represents the first impression users have of how fast your website loads.

FID measures the time from when a user first interacts with a page (opens a link/ clicks on a button/ etc.) to the time when the browser starts processing the event and responds to that interaction.

  • Cumulative Layout Shift (CLS)

Cumulative Layout Shift is used to measure layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

A layout shift represents the moment when a visible element changes its position on the web page, from one rendered frame to the next.

→ Lab Data

Lab Data represents a simulation of what your website’s user experience would be for a particular user, the specific device they use, and the quality of their internet connection. Unlike Field Data, Lab Data is immediately available. You can test your site, make a change, and test again to see what difference it makes - no need to wait 28 days.

Under the Lab Data section of your analysis, you will see some of the data shown under the Field Data section, such as FCP and LCP, as well as the CLS. Besides those, which we've explained above, you will also get these metrics:

  • Speed Index

Speed Index will determine how quickly the contents of a page are visibly populated. The metric represents the average time at which visible parts of the page are displayed.

  • Time to Interactive

The Time to Interactive metric represents the time it takes for a page to become fully interactive.

  • Total Blocking Time

Total Blocking Time is the amount of time that passes between the First Contentful Paint (when the first part of the web page is rendered) and the Time to Interactive (when the page fully loads and becomes fully interactive).

→ Opportunities

The next section is the "Opportunities" one, where Google will give you some suggestions on what you can do to improve your score. Clicking on each opportunity will open more information about it:

To be noted here is that:

  • If you are not using an image optimization tool, you will get some suggestions related to the images used on your site, such as trying different image formats, re-sizing them, etc.

  • If you have not activated Project Lightspeed, you will be suggested to reduce unused JavaScript and CSS files; enabling our asset optimization tool will do just that.

→ Diagnostics

The diagnostics represent additional information about the performance. Here, too, you can click on each item, to receive detailed information about it:

Once you run the analysis on your site, you can go ahead and check each metric, and see what you can improve, on both the desktop and the mobile versions of your site.

We cannot stress enough that Thrive Themes can only do so much to help you with the site performance score. All of our recommendations are valuable and will help you increase the speed of your site, but there are other things to keep in mind, as well.

Hopefully, this article was useful to you. Don't forget to check out the rest of the articles from our knowledge base, and leave a smile on your way out 😄

Did this answer your question?