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?
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 the 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.
Google has confirmed that Core Web Vitals will be part of its ranking factor starting 2021.
This means you have to seriously consider optimizing the page speed experience to avert any web ranking drop.
Are you new to the concept of Core Web Vital?
Most site owners are unaware of what Core Web Vitals are and they don’t know how to check their site for compliance.
It is a unified guide that webmasters can keep as a benchmark. It is largely believed that Web Vitals-friendly sites give users a superior page experience.
Metrics Within Web Vitals
There are 9 metrics within the Web Vitals that can be found in the Chrome user experience report. Webmasters can optimize the user experience of their website using these 9 key user experience metrics.
These metrics are used to interpret the page experience of websites either using PageSpeed Insights field data analysis or through real-time simulations.
The first paint refers to the key moments after the browser starts rendering the page. This involves the rendering of non-default background paints.
First Contentful Paint
This is the critical juncture in webpage rendering wherein the browser displays any text or images (not essentially with the exact CSS styles.) This is the first time users see a visual element on their browser window.
DOMContentLoaded is the time frame wherein the initial HTML is rendered completely.
This is the moment when all the dependent resources, including stylesheets and images, are loaded.
First Input Delay
FID measures the experience a user has when trying to interact with a partially loaded page.
Largest Contentful Paint
At this point, users see the main critical content within the page.
Cumulative Layout Shift
Users may experience a shift in layout after a page loads the CSS. If this shift happens when the user is on the verge of taking a decisive move, it results in a bad user experience signal.
Making the Cumulative Layout Shift as low as possible gives the page visual stability and ensures a better user experience.
Title to First Byte
Time to First Byte is a user experience metric that aids in knowing the responsiveness of the webserver and other network resources.
The Notifications API allows web pages to control the display of system notifications to the end-user.
Out of these 9 web vitals metrics, three are critical to user experience signals, and they combine to form the Core Web Vitals.
What Are Core Web Vitals?
A great content supplemented with quality links should be able to help your rank on top, right? Sorry, starting 2021, this whole web ranking dynamic is going to go for a toss. Here is why.
Google is going to measure the Core Web Vitals score of your web pages along with the other ranking factors before pushing your up to the top tier.
That essentially means you have another factor joining the list of Google ranking signals. The good thing is that you know it’s coming and you can optimize your website before anybody else.
By now, you may already be thinking about what’s this new ranking factor and how your website can achieve the perfect web vitals score.
But before that, let me clarify: Core Web Vitals is a set of page experience metrics that analyze the page load speed, interactivity, and, most importantly, the visual stability.
Google will analyze each of these separately to know the overall user experience provided by a page.
Which are the 3 Core Web Vitals Metrics?
Largest Contentful Paint (LCP)
Largest Contentful Paint: LCP refers to the largest piece of content that is on a page. This is usually an image or video that takes the maximum time to render as page loads.
According to Google, it’s ideal to keep the Largest Contentful Paint below 2.5 seconds. Anything above 4 seconds is considered poor, and it can impact the web rankings starting 2021.
First Input Delay (FID)
While the Largest Contentful Paint is related to the page load speed, the First Input Delay (FID) is more focused on interactivity.
The data is related to the responsiveness of the page when the user first tries to interact with it for example clicking the read more link. The idea FID is less than 100ms.
Cumulative Layout Shift (CLS)
Google’s CLS score is the most critical aspect of Coreweb score, and it is related to the stability of a web page.
Google considers the visual stability of a page as an important usability factor.
A shift in the position of design elements can end up confusing the users and sometimes, even resulting in unintended actions.
This causes great annoyance to the users, and Google now wants such pages to be pulled down in the search results.
Any unexpected layout shift that occurs during the loading of a page, mostly due to position changes in the viewport, results in low CLS. The ideal measurement of CLS is less than 0.1.
I recommend you want the official Google Video that explains the Core Veb vitals for a better understanding of it.
Importance of Core Web Vitals
By announcing page speed experience as a ranking signal, the search engine giant makes the tough statement that they are concerned about the satisfaction of the users who visit the pages within its search results.
This means, starting 2021, despite having high-quality content and countless backlinks, a site may not rank on the first page if the page experience it provides is subpar.
The object-based approach of analyzing the page speed is efficient than all of the currently used metrics (like the score provided by third-party tools)
Here, Google assigns a specific score for each object element – LCP, FID, CLS.
With a combined score, where each element is assessed separately, Google decides whether the page experience is good or bad.
A New Ranking Factor
Google has figured out that tons of sites out there are yet to be Web Vitals-friendly.
Wishing all those sites to comply with the WebVitals standards that too within May 2021 seems to be a far-fetched desire (not only for us SEOs but also for Google.)
However, Google made an announcement that helped many SEOs vent a sigh of relief.
A few days back, the search engine giant during Google I/O said that the Core Web Vitals will not only impact mobile search results, but desktop results too.
However, we may have to wait a few more months to see the changes within the desktop results.
That was a pretty big announcement in itself. This is the first time that Google is fore-warning the implications of an upcoming ranking factor. Google’s Official Announcement says Core Web Vitals will become a ranking factor in May 2021.
There has been a lot of discussions after Google made this big statement last week, and one of these was about websites that have AMP enabled.
As you know, AMP makes the pages lighting fast, and since the pages are rendered from Google’s cache, they load in split seconds on mobile devices. So, does that mean that such AMP-enabled pages are automatically Web Vitals friendly?
The Core Web Vitals will find a sweet spot within the same section in Google’s algorithm where intrusive interstitials, mobile-friendly, safe browsing, and HTTPS have been placed.
These are all factors that are directly related to the page experience of the users. However, Web Vitals may get the upper hand or a bigger share of signals when compared to the rest.
The catch here is that Google says the Page Experience Metric is subject to changes as the internet ecosystem evolves.
This is one important clause within the announcement made in June that not many took cognizance of.
Google has stated that the new Page Experience metrics will see new additions over the coming years as it plans to evaluate and add new user experience objects annually.
Know Your Core Vitals Score Using Chrome Extension
Before I give you tips to improve the Page Experience score, you need to assess your current website performance.
Thanks again to Google, they have provided a free Chrome Extension to check the page experience signals by analyzing all three objects within the Core Web Vitals.
Just download it from Github and unpack the extension in your Chrome browser.
You can see the overall report with details of the individual score received by all three user experience factors.
This is a foolproof and the most recommended extension as it uses the web-vitals library that Google will use starting 2021 for ranking and indexing purposes.
How to Analyze Mobile and Desktop Core Web Vitals Scores
Now that you have installed the Chrome extension, you want to check the score.
But before you do that, here is something you must know. The score will different for mobile and desktop.
Don’t worry, the same extension can be used to check for both devices or if you are not comfortable installing a Google extension for privacy concerns, which we all understand. Just use the Google LightHouse tool or PageSpeed Insight tool.
Both the Google tools allow you to analyze the score of your website.
Checking Web Vitals Score Using Google LightHouse
Step 1: Just open the site in your browser
Step 2: Select Developer Option
Step 3: Click on LightHouse Tab on the far right
Step 4: Toggle between Mobile and Desktop
Step 5: Click on Generate Reports and Check the Performance
Checking Core Web Vitals Using PageSpeed Insight
NB: PageSpeed Insights Field Data is collected over 28 days. If the page is new and if Google is unable to get enough samples for generating aggregated field data, a simulated load of the page is rendered, and the score is displayed.
Step 1: Go to PageSpeed Insights Tool
Step 2: Input your URL and Analyze
Step 3: Toggle between Mobile and Desktop
Step 4: Look for pa or Stimulated Data (Lab Data)
How to Check Core Web Vitals Issues Using Google Search Console
In addition to these Google tools, Search Console also offers a great deal of information about the page performance.
Recently, they added the Web Vitals as an enhancement feature on the search console, which now indicates whether all the pages within the site are Web Vitals compliant.
Checking Page Speed Experience Issues Using Google Search Console
Step 2: Click on Core Web Vitals in Enhancements Tab
Step 3: Check the Score for Mobile and Desktop Devices
Step 4: Open Reports to See Issues
Difference Between Lab Data and Field data
As you start doing the above-mentioned process, you may encounter discrepancies in the data.
I’m not talking about the different speed scores you get as you check multiple pages. But I’m specifically talking about the data you see for the same page using multiple tools mentioned above.
The lab data you see is more of stimulation that is done by Google Chrome Browser API. This data is collected based on the event timers triggered and also by calculating the approximation of user interactivity.
When a real user visits the page, depending on factors including the connection speed and the device used, this score is subjected to changes.
On the other hand, field data is collected based on the Chrome User Experience data that is collected over 28 days from a variety of samples. This data is more accurate or closer to the real-time user experience.
If you are not getting the field data, rely on the lab data for page experience optimization. In the later stage, check the search console for real user experience data for individual pages and make the tweaks.
Don’t think that these are highly technical SEO stuff. If Google has added Core Web Vitals to the search console, SEOs must learn inside out about its implications, and the same is applicable for developers.
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.
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.
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.
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.
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
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
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?
How to Improve Page Experience Score?
Don’t think that optimizing websites for better page speed experience is the task of the developer?
SEOs have to be equipped with technical knowledge in order to keep pace with the changing trends.
If you’re not familiar with coding, you should try to understand how the fixes will improve the site speed and user experience. This is very critical if you want to give the right instructions to the developers.
The answer to this question is both Yes and No. The reason being that some of the fixings can help in making a little improvement, but when it comes to the goal of improving the web vitals, they have little impact.
This is quite evident in the research done here at Stan Ventures. We analyzed the Web Vitals score of some of the in-house websites after making minor changes.
Installed a Cache Plugin
Minimized the CSS
Used Defer Attribute
The result was nothing impressive worth sharing. The GTMetrics and Pingdom tool said we were doing great, but the Google Web Vitals Extension said the page experience signals sucked.
Here is why:
1. Server response time can be improved by installing a cache plugin, but it only works when the users revisit your site. This is very useful when your users browse through multiple pages. But let’s say that you haven’t set the right expiry for the resources, the whole purpose of adding the cache plugin may be futile.
3. There is no one panacea for all the fixes for page speed. If you are running a WordPress site, or any other CMS, you need to install multiple plugins for optimization. This can further deteriorate the speed of the site.
Optimizing Images for Page Speed
One of the prime reasons for bad page experience is the heavy payload of images that are rendered by browsers as page loads.
Better image optimization will speed up the site and help you to achieve the perfect Web Vitals score. Here are a few quirky ways to optimize images:
Use Image CDN: If you have an image-heavy design, your server is already stressed out when delivering the resources to the user’s browser. It also provides other resources within the payload simultaneously to the browser, making the user wait long for the whole page to load.
Using the image CDN servers, you take the pressure off from your server as the images are served using CDN servers in the closest proximity to the user’s location. Currently, AWS and CloudFlare are the best Image CDN providers in the market.
WebP Format: Ever tried using the WebP format for your images? This is a Google-approved image format that reduces the image size by at least 36% compared to JPEG.
Most of the modern-day CDNs deliver images in WebP format as it supports transparency, and typically provide 3× smaller file sizes compared to PNG.
LazyLoad: LazyLoad has been there for a long time, and this is a tried and tested strategy to reduce the load speed.
We found that lazy loading images will improve the web vitals score as the server is not loaded with image requests all of a sudden.
With LazyLoad enabled, only the initial set of images are rendered while users land on the page, giving them a seamless user experience.
The other images load only when the users reach the particular viewpoint.
Optimizing Java and CSS
When you enable GZIP compression, it can reduce the size of the transferred resource significantly, and hence reduces the time to download the resources as well. GZIP compression has become a standard practice for the majority of websites.
Minification is the process of removing redundant data from your JS and CSS files. It is done to reduce load time on websites and bandwidth usage.
To minify JS, CSS and HTML files, comments and extra spaces need to be removed. This can be done with the help of most optimization plugins.
Reduce Render Blocking
You can force JS files to wait to load until other elements of the page are ready. One of the most sought after ways to defer JS is through asynchronous loading.
We’ve analyzed that websites that have enabled the below features successfully reduced the server load and allowed faster rendering.
Optimizing the Font
Custom fonts may make your site look really attractive, but such font rendering behavior can increase the load on servers and slow down your site.
To fix this issue, ensure that your CDN can override font rendering behavior.
By doing so, your CDN can swap the rendered text and display the original text as it loads on the CSS. Since both resources are delivered simultaneously from the same server, the actions occur in a few microseconds.
Embedded images and videos can slow down the speed of a website. Many businesses cannot choose to ignore these features on their site. For them, Google recommends lazy loading, which means that these media files will load only when promoted by the users.
Implementing this technique has shown a 70% performance improvement in LightHouse.
The Core Web Vitals might seem like a complicated concept but achieving a perfect score isn’t a mammoth task. It will enhance the user experience by several folds and aids in conversions.
If your web page takes forever to load, people will choose to leave your site and visit your competitors, or they’ll keep clicking on your webpage in frustration. This action is known as “click rage,” which is an actionable insight for many webmasters to improve their site loading speed.
Google has benchmarked the average page load speed of webpages on mobiles and desktops to 3 seconds. The majority of high-ranking websites fall under this speed threshold. With this new ranking factor, Google will now ensure that websites prioritize user experience above everything else. Failing to do so will lead to consequences like losing web traffic and SERP rankings.
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.