Google Recommended Page Load Time: Web Vitals Explained

Written by Dileep Thekkethil

Updated on Sep 14, 2020
Category: Technical SEO

There have been many talks about the recent Google announcement about Web Vitals. For many SEOs, this came as a surprise but hasn’t it already been an ongoing discussion for quite some time now? 

Google has been giving many signals about the importance of user experience as one of its ranking factors. 

Many SEOs, including me, believe that it’s still one. However, with the new announcement about Web Vitals, the page speed and user experience will become critical factors in ranking pages on SERP post-2020. 

If you go back to the Google Developer Conference of 2019, there was an exclusive session dedicated to page speed experience wherein the Google Executives made the vision of search engine giant clear – make the website faster or get ready to get knocked out. 

The session, Speed at Scale: Web Performance Tips and Tricks from the Trenches (Google I/O ’19), discussed in detail the key metrics inherent in the Chrome LightHouse tool and how to optimize it a website to score higher in these metrics. 

In this detailed blog on Google Recommended Page Load Time, all the Web Vital metrics are explained along with steps to optimize the performance budget of your site to get the perfect Web Vitals score. 

It’s not the first time that Google is announcing a future speed algorithm update. On January 17, 2018, Google announced the Speed Update that impacted sites that gave the slowest experience to users. 

Coming to the Web Vitals update, the impact may be farfetched than the Speed Update of 2018. This is major because even some of the top websites that I analyzed failed to get the benchmark score. 

Additionally, the announcement also emphasizes Google News Publishers. By 2021, they have to ensure that all Web Vital metrics are all within the green zone, which again is going to be an excruciating task ahead for designers, developers, and technical SEO experts. 

If these publishers fail to adapt to the Google recommended changes, they are given advanced notice that featuring on the Top Stories section of the mobile search results will be hard. 

Google is also signaling a slow phase-out of AMP results on Top Stories with the announcement that starting 2021, AMP version will not be mandatory for news publishers who comply with the Web Vitals.

Core Components of Web Vitals

Web Vitals is a collection of speed and user experience metrics that Google uses to assess the real-time interaction and satisfaction of the users. The Core Web Vitals include three elements or subsects that all webmasters must keep in mind to provide a seamless user experience.

1. Largest Contentful Paint:

This Core Web Vitals Metric senses how capable your server is in displaying the largest content element in the user’s visible area of a web page, often called the viewport. A slow server response time and render-blocking scripts can result in a low Largest Contentful Paint score. Google recommends 2.5 Sec as the ideal score for Largest Contentful Paint. 

2. First Input Delay

Your page loads fast, and the users now ready to make the first interaction. But if the interaction, be it scrolling or clicking one of the links, takes time to respond, the user ends up rage clicking. This is terrible user experience. 

With First Input Delay in Web Vitals, Google is trying to address this specific problem. FID score is the time the browser takes to respond to the user interaction. Google recommends 100 milliseconds or less as the ideal score for First Input Delay.

3. Cumulative Layout Shift

Consider you landed on a payment gateway page by accident, and you want to go back. As soon as you type the back button, the layout shifts and accidentally clicks on the buy option. Such experience is not unheard of and we have experienced it many times while browsing. Cumulative Layout Shift tries to address this issue by detecting the changes in the website’s visual element after it’s displayed to the users. 

Cumulative Layout Shift (CLS) metric in Web Vitals measures the number of times such layout shifts occurring for real-time users. The higher the number, the lower the Cumulative Layout Shift score. The Google recommended Cumulative Layout Shift score is .1.

Read along to know more about Google recommended page load time and how to achieve this by optimizing elements on your website. 

Before deep-diving into Google recommended page load time and other steps to optimize a website for speed and performance, let me give you a throwback on how the concept of speed has evolved over the years.

If you look at history, there has always been an obsession for speed. You would notice that each generation has contributed to making speed enhancements during their time, whether it’s in the field of technology, science, or arts. 

Today, however, speed has become a major deciding factor; be it while buying the car you use to commute, while hiring colleagues you work with, or while rating a delivery guy who just handed you a courier. Each one’s performance is judged based on the speed at which they complete a particular task. 

When you already know that speed has become all-pervasive in our lives, why disregard the slow Page Load Speed of your website?

Google Recommended Page Load Time Explained

What is Google Recommended Page Load Time? 

The recommended page load time for websites on both mobile and desktop devices<3 seconds, says Google. However, the search engine giant says, the current average load time of web pages on mobile devices is 22 seconds.

If you analyze some of the top traffic-driving websites on the internet, you may find a similar pattern – they all have a load speed fewer than 4 seconds. If you’re frustrated while driving through slow-moving traffic, you would be even more frustrated when browsing a slow loading website. 

Unlike slow-moving traffic, when it comes to the web, you have multiple options. If you end up on a website with poor page load speed, you can always go back to the search engine and choose the immediate competitor.

If this is not the case, you can directly type the address of another website that provides similar services and access it. 

If you’re a website owner, put this in perspective of your target audience. If you have a website that takes more than three seconds to load, you may be doing a favor to your competitors by redirecting your target users.

According to a study conducted by AKAMAI in 2018, the traditional Page Load Speed timing has to be revamped as the users’ expectations have grown along with the page complexity. The study says that an average internet user in 2018 expects the web page to be fully interactive as soon as it loads. 

It says that the initial reaction of a user who enters a page is to either click on a button or scroll down. Unfortunately, due to the slow Time To Interactivity (TTI), the users end up going through “click rage,” which is nothing but double-clicking multiple times out of frustration.

This is why it’s crucial for website owners to understand how long the webpage takes to load, at what moment does the user first interacts with the page, and above all, whether the user gets an immersive experience. 

SEO agencies and webmasters are innovating these aspects, and a lot of improvements can be expected in the coming days across the web to ensure the user experience stays pleasant and engaging. 

Google has been at the forefront in making web experiences faster, and it has come up with Lighthouse – an open-source, automated tool for improving the website speed quality. 

Lighthouse comes pre-loaded along with the Chrome browser, enabling even a non-technical user to check the page speed of a website. 

Without further adieu, let’s dive deep into how to make websites and mobile sites load within the Google recommended page load time. Before that, here are a few terms that may pop up within the content. If you’re a beginner, I recommend that you understand the concepts before reading on. 

Here are some important Google Lighthouse terms you should know while optimizing websites for speed.

1. First Contentful Paint (FCP)

First Contentful Paint is the point at which users see the initial text, color, or image that loads from your website. 

2. First Meaningful Paint (FMP)

First Meaningful Paint is the point at which the browser displays the most prioritized content to the user. Optimizing the Critical Rendering Path based on the importance will help in achieving faster FMP. 

3. Speed Index (SI)

Speed Index determines the time taken by real browsers to visually load your webpage. The lower the Speed Index, the faster your website will load. 

4. First CPU Idle

At this point, the user gets the first interaction with your webpage, and until recently, it was called “First Interactive.” At this level, a few of the interactive elements may become accessible to the users but definitely not all. 

5. Time to Interactive (TTI)

Time to Interactive is marked when all the interactive elements within your web page become fully functional. TTI must be considered as a metric to understand whether your site is fully optimized for speed.

There are websites that compromise on TTI and try to load content. This may result in more click rage as the users are stuck on the same page without any scope to interact with it. 

6. Estimated Input Latency (EIL)

Estimated Input Latency is a valuation of how long your app takes to respond to a user input, in milliseconds, during the busiest 5-second window of page load. If the latency is more than 50 ms, users may perceive your app as laggy.

What is Performance Budget?

According to a recent study conducted by Google, top websites do a performance monitoring after every six months to ensure that their users stay happy with the overall experience. In the recent Google I/O that concluded on May 8th, Google engineers introduced a new term called ‘Performance Budget.’

Performance Budget sets the standards for assessing the performance of your website. The performance budget of a website can be gauged based on different factors. These factors help webmasters identify and fix issues before the users can experience it.

  1. TTI – You can set the TTI or the Time To Interactive as one of the metrics to understand whether the users are getting a seamless web experience. 
  2. Resources – If your webpage has less than 150 kb of resources in the form of text, images, and js, it’s generally considered good. The smaller the size of JavaScript, the faster the page will load.
  3. Lighthouse Performance Index – If the site has an overall speed score of 90 above in Lighthouse, it’s generally considered a positive load speed signal. 

Many top companies like Walmart and Twitter have already set a performance budget to ensure the final build that goes live to the users is not laggy. If a new page resource affects the performance budget by at least 1%, the resource is sent to the technical team to get fixed. 

In addition to this, Google has also announced that the Lighthouse tool will now support the resource quantity budget JSON file that can be uploaded within the Command Line Interface of Lighthouse. 

The new LightWallet feature ensures that the performance budget goals set by your developers are meeting the expectations. This new feature is currently available in the CLI version of Lighthouse. This has been specifically built for small businesses to take control of their website’s load speed without much hassle. 

How to set a performance budget?

A basic budget file created as a JSON script includes resource types, the budget allocated and the overall total requests. If you have trouble creating the budget.json file, you can visit the site Performance Budget Calculator, which can generate a report for your website. 

According to research conducted by Google in collaboration with Awwwards, it was found that Page Load Speed has the most impact on the user’s mobile experience

The study also says that the load speed of a page must be considered critical. Other factors, like the ease of finding what the users are looking for, how well the site fits into the screen, the simplicity and attractiveness of the site are all less important than the load speed of a page. 

The relationship between the high load speed and bounce rate is a subject that requires no introduction. You already know that if you have a site that takes forever to load, the users landing on the page will bounce off without interaction. 

Recent research done by Google has found that a site that loads within 1-3 seconds have a possible 32% increase in bounce rate. Moreover, a site that loads in 1-5 seconds will possibly have a 90% increase in the bounce rate.

mobile speed benchmark

On a business perspective, the load speed of your website has a direct impact on the ROI and the success of your business. 

Imagine yourselves as the owner of a product-based website that takes 6 seconds to load. If 90% of your visitors bounce off the site due to lack of speed, it can decrease the number of sales and page views, thereby affecting the overall success of your business. Investing time and money to optimize your website for speed will pay off, says Google. 

Google recently gave an example during Google I/O about how Pinterest and Tinder increased their ROI by improving the Page Load Speed. It has to be noted that Pinterest and Tinder are official partners of Google.

Case Study of Tinder Website

Tinder, which saw a decrease in the number of swipes on their website, decided to decrease its payload to 210 kb. To achieve the performance budget of 210 kb, the developers reduced the main JavaScript load to less than 150 kb and set their lazy load images to less than 50 kb. 

Result

After implementing the speed improvements, Tinder was able to reduce the TTI to less than 6 seconds on the 3G network, which resulted in a more number of swipes from the website than from mobile devices. 

Case Study of Pinterest

Pinterest saw a decrease in user engagement and went ahead to implement the performance budget. They used advanced tools to bring down the size of the JavaScript payload by 200 kb. 

Result

Soon after the implementation of the new build, the Time To Interactive decreased by 6 seconds. Above all, the new speed optimized website started providing more ROI to Pinterest, and they saw monthly revenue growth of 44%. The website is now their primary source for more signups. 

With all these put together, Google is fundamentally trying to convey to webmasters that its core business, which is search, is using speed as one of the major factors for ranking and displaying websites, Period. 

How to calculate the ideal performance budget for your website?

For a website that aims for a TTI of 4 seconds, it may have to decrease the size of the images, JavaScript, and other resources to less than 400 kb. Specifically speaking about JavaScript, Google says that every additional 100 kb of JavaScript can increase the TTI by 1 second. 

ideal javascript size

Ways to Achieve Google Recommended Page Load Time

As we discussed earlier, many factors result in slow load speeds of a webpage. Images, JavaScript, and the number of requests sent are usually the payload that keeps the browsers busy and the users waiting.

Let’s look at some of the Google recommended ways to ensure that these inevitable components are kept at a modest level so that the user experience stays pleasant, and the website gets more ROI. 

Optimizing Images for Speed

Images make up the bulk of the payload that browsers receive. Optimizing the images can crank up the speed and eventually help in providing better user experience.

A well-optimized image is your magic wand to good user experience. You can do this by implementing three different tactics on your website — Lazyload, CDN, and Responsive. 

What is Lazy Loading, and how does it impact the page speed?

Let’s say your website is a fashion niche and a bulk of its resources are images. Since you cannot compromise on the image quality, you may end up uploading images at are either 1MB size or over 5 MB.

You have to understand that a majority of the population around the world is still using slow internet. Your website is going to give them a hard time as it takes away their precious internet data, and more importantly, time! Here is where Lazy Load can help you. 

By implementing Lazy Load on your website, you can ensure that only a few image resources, typically the on-screen images, are pushed to the browser as it loads initially.

The off-screen images get delivered as and when the user reaches the viewport set in your website’s design. During the initial loading, only the dimensions of the off-screen images are loaded to ensure that the page doesn’t break.

Lazy Load - Javascript

You can enable Lazy Load on your website by adding a few codes of JavaScript. If you’re using a WordPress installation, there are plenty of plugins that you can use.

However, Google has made the task easy for developers as it announced a new set of JavaScript that works with the Chrome browser.

All you have to add is a JavaScript <image loading=lazy> code. Chrome will start to lazy load all the images on your website.  

The same capability also comes for iFrames and you can now lazy load iFrames by adding the code <iframe loading=lazy>. According to Google, implementing lazy load on an image-heavy website will result in a 76% decrease in the initial loading of image bytes. 

How responsive images help in saving the resource budget?

People are accessing websites using multiple devices. This makes it imperative that your images fit into all these screen sizes so that users get an immersive experience. This makes responsive images an important part of website optimization.

SEO Guide on Responsive Images

What responsive images does is create multiple versions of the same image in sizes that fit the user’s screen. The browser chooses the one that fits the device perfectly. For example, a 200KB image in Desktop reduces to 100KB when browsed through a mobile device as images on desktop and tablets are usually of very high resolution.

It needs to be noted that the retina display, which has the pixel density of 2, is the highest resolution screen available in the market currently. Optimizing images for pixel density 3 and 4 will serve no purpose and could result in higher image size. 

You can create responsive images for your website using two methods – based on image width or based on pixel density.

The smaller image width and pixel density, the faster will the image load, which also means an increase in the pixels and width can result in an increase in the image size.

How CDNs help in better optimization of the images?

Unlike the other image optimization techniques that we discussed until now, CDN must be considered as an image optimization service.

Usually, Content Delivery Network (CDN) is a highly sophisticated service offered by a company that is specialized in delivering fast, efficient and secure content to websites and Internet services.

Since companies that offer CDN services use technologically advanced features for image compression, it’s hard for a developer to replicate the same efficiency.

CDN providers equip website owners with the power to manipulate images. CDN services choose the best-optimized version of the image for a website, and this takes away the pain from the website owners to build and maintain a separate software to perform the same action. 

CDN services often come with features such as Auto Cropping, Auto Quality, WebP, and Color Channel Tuning that helps websites reduce the total image resource size by 80%.

Importance of Optimizing JavaScripts for Faster Load Speed

After images, JavaScript has been identified as the single most time-consuming resource while loading a website. A majority of the JavaScripts are put into a webpage in the form of Ads, Analytics codes, and widgets. 

According to a study conducted by Patrick Hulce, a former Googler, 3rd party JavaScripts account for 65% of all script execution time on the web. The research was conducted based on the HP Archive Data of over 4 million websites. 

This data throws light at the huge delay in displaying the top website to the user end just because of the third party JavaScripts.

It also has to be noted that some CPU intensive JavaScripts may even delay the loading process or even crash, leading to bad user experience. 

The quick fix that Google recommends for rectifying the slowing JavaScript is to defer all the JavaScripts, including the ones that third-party and websites own.

According to Google, deferring the JavaScripts can improve the load speed of a website and thereby decrease the overall bounce rate. They say a speed improvement of 75% can result in a 31% decrease in bounce rate.

Deferring the JavaScript execution will allow the primary resources to load first and then the JavaScripts, thus providing a better TTI.

Google also recommends reducing the number of lines in the codes rather than minimizing or Gzipping a 100kb of JavaScript. This is mainly because of the user experience issues that can happen due to the Gzipping of JavaScripts. 

Embed Codes

Most people look at a website and think that it’s static, but if you find an embedded video or any other embedded resources, chances are the page takes time to load despite its static-like appearance. Embeds are notorious when it comes to delaying the TTI of a website. This is something that all webmasters should worry about. 

However, there is an easy fix for sites that face slow loading speeds because of embeds. Let’s say your homepage has a promo video describing the services and benefits that you’re providing to the target users. 

Since the video is important for your business, throwing it in the trash is not an option that you can consider. But you can definitely think of ways to make the video load only after your website is ready for interactivity. 

According to an in-house testing conducted by Google on the homepage of the Chrome browser, a YouTube embed code put along with the static HTML caused the page to load in 13 seconds. 

Google found a quick fix to reduce the load speed of the site by using an interactive feature that lazy loaded the video in a pop-up only when the user clicks on the “Watch Video” button. This seemingly improved the website’s performance in Lighthouse by 69%, and the overall load speed reduced to just 3.1 seconds.

More Optimization Techniques to Follow

With continuous advancements in technology, it’s possible to find new ways to improve the load speed of a website.

The future of search will depend heavily on how effectively the websites can deliver intent-based results to the users at the minimum possible time.

The above recommendations are just the tip of the iceberg. We will soon come up with some of the more advanced methods to improve the site load speed to match up with Google recommended page load time. Stay tuned for more!

Frequently Asked Questions on Page Speed

Q. What is the ideal page speed for any content to rank better on SERP?

Ans. Google measures page speed by categorizing pages as really good or pretty bad. As per Google’s Martin Splitt, there’s not much of a threshold between the two extremes as far Google algorithm is concerned. From this statement, it can be presumed that there is no ideal speed that Google is looking for. You just have to make sure that the pages are fast enough to load and whether it will make a visitor stay or leave your website.

Q. If a website’s mobile speed using the Test My Site tool is good and GTmetrix report scores are high, how important are high Google PageSpeed Insights score for SEO?

Ans. Google’s John Mueller recommends using different types of these tools and looking at the data to discover the glitches on your web pages that are slowing the website down. Each of these tools measures slightly different things and presents results in a different way, hence Splitt from Google suggests site owners be mindful about it and choose the best one for their audience.

Q. What is the best metric(s) to look at when deciding if page speed is “good” or not? Why / why not should we focus on metrics like FCP (First Contentful Paint) / FMP (First Meaningful Paint) instead of scores given by tools like PageSpeed Insight?

Ans. It depends. The importance of these metrics depends on what users are doing on your website. If they intend to visit your site to just read content and not interact with anything, then FMP and FCP would be the best metrics to look at. On the other hand, if people are landing on your page and interacting with things immediately, then the best metrics would be TTI and FCI. Splitt and Mueller from Google recommend site owners to look at multiple sets of data and find areas of improvement according to what’s important for the audience.

About Dileep Thekkethil

Dileep Thekkethil, a Journalism Postgraduate, was formerly with a US-based online magazine, is the SEO Expert at Stan Ventures. A He is a frequent blogger who keeps a tab on the latest updates in SEO and technology arena. Reach me @ Mail | LinkedIn | Twitter | Facebook or View all posts by Dileep

You May Also Like…

5 Comments

  1. Avatar

    Thanks Dileep Sharing such a good post.

    Reply
    • Avatar

      Thank you Acharya.

      Reply
  2. Avatar

    Where did you find this information?

    “According to Google, <3 seconds is the recommended page load time for websites on both mobile and desktop devices."

    A link to the source would be nice.

    Reply
    • Avatar

      Thank you for the suggestion. I’ve added the relevant link.

      Reply
      • Avatar

        i too searching for that only can you ?

        Reply

Submit a Comment

Your email address will not be published. Required fields are marked *