Website performance & speed plays a major role in the success of an online business. High-performing fast sites attract and preserve users better than low-performing ones. In this article, we will particularly look at the average page load time in 2021 and the importance of web vitals.

We usually consider a site fast when its pages load in lesser than 3 seconds. Many people often confuse site speed with page speed grades of performance testing tools, which are actually calculated based on multiple factors of a page including its loading speed.

So when we talk about load time, a good grade doesn’t necessarily mean the page is fast. However, when a page returns a good grade on speed testing tools most of the time the page tends to loads relatively faster than those unable to get better speed test tool grades.

The screenshot below explains that page load time and lighthouse performance scores are not the same, yet they are really close to each other.

page-load-time-analysis

With the latest introduction of the Core Web Vital section on GSC + upcoming Google’s core web vital update, site owners are forced to take note of their website speed and web vitals. Since the news comes out in May 2021, there have been so many speculations about whether not passing the web vitals is going to crush rankings? How to get these matrics right and not mess up? and so on.

Importance of page loading speed –

Google checks your website load time and they like it as fast with a better user experience. Ever since Google is switching towards “mobile fast indexing” it’s very important for a webmaster to keep the pages very well optimized to maintain visitor’s + search engine’s satisfaction level high.

Can’t we think of the site loading speed on a scale where benefits are reversely proportional to the speed? The faster sites get the most benefits and slower sites have the opposite output. Consider bounce rate as a benefit, thus pages that load within 2 seconds have an average bounce rate of 9.6%, which becomes 38%+ for the sites which take more than 5 seconds to load.

Load-speed-vs-Bounce-rate

Quote: “How fast your website loads are critical but often a completely ignored element in any online business and that includes search marketing and search engine optimization. And that includes page load times on mobile devices: The average time it takes to fully load a mobile landing page is 22 seconds, according to a new analysis. Yet 53% of visits are abandoned if a mobile site takes longer than three seconds to load. That’s a big problem.” Daniel An, Google, 2017

A page that loads extremely fast gives users more control and a stress-free browsing experience. When a page takes ~10 seconds to load it’s obvious that users lose patience and they are more likely to leave the page.

Quote: “40% of people abandon a website that takes more than 3 seconds to load”

Neil Patel, Internet Marketing expert

According to Google SOASTA research, 2017 the probability of page bounce rate increases with increasing page loading time, because it greatly improves the user experience.

Google-SOASTA-research_output-1

The impact of page performance depends on its speed optimization and is reversely proportional. The reverse order of performance is not good for any business. The graph below displays how the abandonment increases along with the increase in page loading time in seconds.

website_page_load_time_graph

Anonymous analytics data from multiple website sample shows the rate of abandonment can increase by 53% after a website load time reach 3 seconds threshold point.

average page load time	_abandoned-visit-record

Important: The bounce rate may also vary depending upon various other factors such as content quality, type of content, website feature and engagements, topic interest, etc.

QUOTE: ‘For every 100ms decrease in homepage load speed, Mobify’s customer base saw a 1.11% lift in session-based conversion, amounting to an average annual revenue increase of $376,789. Similarly, for every 100ms decrease in checkout page load speed, Mobify’s customers saw a 1.55% lift* in session-based conversion, amounting to an average annual revenue increase of $526,147′  (from wpostats, 2016)

The goal conversion rate of a page too shows similar behaviors with an increase in page loading time. The approximate goal conversion rate decreases per 1 second are 0.4 -0.5, according to statistics provided by mPulse.

page-conversion-rates

Why you need to improve your page web vitals

Google has made numerous changes in recent years to include user interface as a factor for search engine ranking. It’s been a consistent discussion on the topic of page speed, site security, the structure of the site, etc. It reflects Google’s mission is to have a positive experience for all users.

John Mueller answered “YES” to this question in 2019, “site speed is definitely a ranking factor?” 

And now it’s official that core web vitals will be a ranking factor. Although web vitals don’t directly talk about site loading speed collectively it does satisfy the speed factors with improvements on matrices such as largest contentful paint, total blocking time, first contentful paint, etc.

These web vitals are meant to improve your page’s overall user experience. Not only that, it will benefit your site in terms of ranking once the updates started to roll out.

What is Google Web Vitals?

Core web vitals are modern performance metrics that analyze page speed signals that are crucial to providing a superior web experience. These metrics are highly useful to calculate the “page experience” of a page.

In a nutshell, these are the unified guidance from Google for quality signals that are crucial to delivering a great webpage user experience. Each metrics of the Core Web Vitals are measurable and reflects the real-world experience of a webpage.

LAB-data-PSI
  • Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
  • First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less.
  • Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.
MetricsGoodNeed ImprovementPoor
FCP[0, 1800ms](1800ms, 3000ms]over 3000ms
FID[0, 100ms](100ms, 300ms]over 300ms
LCP[0, 2500ms](2500ms, 4000ms]over 4000ms
CLS[0, 0.1](0.1, 0.25]over 0.25

Although these are only three matrices they some of the most important aspects of website UX and performance. Simply, it ensures that your site UX is not annoying and load instantly.

Take LCP as an example, which is a single matric that refers to the time taken by a page to paint the essential items on the screen. If your LCP is less than 2.5 sec then you can say additional elements of the page will load fast. Not only that, those matrices that come before LCP will do even better.

Overall Page Speed Insight’s score depends upon all the matrices, but LCP and TBT data do make a great difference on PSI score. Check the calculator image below –

PSI-calculator-average page load time

The factors that impact on LCP:

  • Slow origin server response times
  • Render-blocking JavaScript and CSS on page load
  • Page Resource load times
  • User side page rendering

Factors that impact on FID:

  • Render blocking java scripts.
  • Serving non-essential third-party scripts.
  • Ads

Factors that impact on CLS:

  • loading ads without a designated room.
  • Images without size attribute.
  • Lazy loading core scripts from theme.
  • 3rd party widgets

Various other factors impact these matrices but the above-mentioned matrices are often considered as key to improving your site’s collective experience. If you can fix these areas of your site then we can say it is well optimized for performance and user experience.

When you get these matrices right that reflects on your Google search console’s web vital and page experience section. Check this image –

page-experience

Average page load time in 2021

Average page loading time varies based on the testing environment. According to GTmetrix average loading time of web pages according to their calculation over 1000+ websites is 7.2 seconds.

Lighthouse says on web pages on mobile devices take an average of 9 – 11 seconds. According to DoubleClick research, the average load time for mobile sites is 19 seconds over 3G connections. 

QUOTE: “From the millions of tests performed using our website speed tests, we found that the average load time for a webpage is 3.21 seconds (on desktop)…What we found was that, unsurprisingly, a page’s load time directly impacts bounce rate….as soon as the page load time surpasses 3 seconds, the bounce rate soars, to 38% by the time it hits 5 seconds!” Pingdom, 2018

The data from backlinko states that the average page takes 87% longer to load on mobile devices vs desktops. It is the direct impact of Time to First Byte (TTFB) which is 1.28 seconds on desktop vs average of 2.5 seconds on mobile devices.

mean-ttfb-speed-on-desktop-and-mobile-1-1

“Fully loaded page” has an impact on the average load time too. As the name suggests, a page can be called Fully Loaded is when 100% of the page’s elements are loaded and all rendered.

So when it comes to the fully loaded pages, page size plays an important role in the calculation of average page load time. Most websites hold a great number of assets on their pages and loading the full assets does take time. Higher page loading time for a large group of sites means a rise in average page load time.

This goes the same for a particular website. Take a site where every page takes >8 sec to load then imagine the average page load time for that single site. Now imagine if the previous test were conducted with a stable connection and you still have to test it with a 3G connection as many users still having to use a relatively slower network.

Check this analysis (published on backlinko.com) explains how the full load time of a page are distributed over the assets and their impact on Mobile and Desktop devices.

factors-that-impact-fully-loaded-on-desktop-and-mobile-960x1256-1

Average load time of WordPress sites:

WordPress is the most popular CMS in the world because of its simplicity. You can make beautiful-looking websites with the supports of millions of themes & plugins available. While simplicity is a great advantage WordPress site often do badly in terms of performance.

Now is that a fault of WordPress? No, as a site owner it’s your job to find the most optimal ways and assets that make your WordPress site faster. Thanks to the awesome caching plugins available for WordPress will make your site much faster and make your pages feel lightweight when configured correctly.

Since you have access to these tools/extensions the average page load time of your WordPress should be lesser than 5 seconds max. Think again! as a visitor would you be waiting 5 seconds to load a page after clicking a link?

An optimum WordPress page size should be 25KB. This is obviously very small and realistically, nowadays most WordPress sites serve a lot more kilobytes than that. Even some of the fastest page does hold more data than 1MB but with correct asset loading strategy, you will be able to achieve <2 sec page load time.

average-page-load-time-vs-size

Role of web servers in page load time –

You must have been suggested to choose a fast web server for better performance and reliable uptime. Lots of other factors comes into consideration of web server but we will keep the focus on speed.

So, do web server really makes a difference? On our speedy.site service we find many people declared that they couldn’t improve site performance even after switching to a fast server.

I believe web server speed does matter. When you have a fast server it doesn’t mean your site will automatically do better in terms of performance. You will still be configuring your site caching and organize the assets in such a way that the page passes web vital tests + and loads a lot quicker. Once you have configured the cache settings properly here comes the help of server response time and TTFB (Time To First Byte). Again server response time is something that doesn’t solely rely on the origin server but it does play a big role here.

Better servers will have lesser server response time, whereas slow and cheap servers might struggle with response time and when requests overload. Faster response time means browsers will get quicker asset delivery and thus your site will be benefited from a smoother surfing experience.

Faster-response-time-leads-to-quicker-page-loading

PSI test too suggests you improve your server response time –

reduce-server-response-time

QUOTE: “For Googlebot, a speedy site is a sign of healthy servers, so it can get more content over the same number of connections. On the flip side, a significant number of 5xx errors or connection timeouts signal the opposite, and crawling slow down.” Gary Illyes,  Google, 2017

Ways to improve page loading time

How would you make sure your site loads fast?

To speed up your WordPress site you can reduce TTFB, enable caching on your site, use optimized images, configure a fast theme, avoid resource-hungry plugins, avoid JavaScript in menus (especially on mobile), lazyload 3rd party javascript, and a lot more. You can consider adding “load more comment” or “lazyload comment” to optimize the pages even more.

#1. Test your pages

Start by testing your page on a speed testing tool such as Google Page Speed Insight, webpagetest.org, GT Metrix, etc. Make sure to note your current core web vital status for the page you are testing. On PSI, look for the overall page performance score and lab data for the live test report.

PageSpeed-Insight-test

Or you can get web vital report in Google search console which has specific mobile and desktop sections displaying how your website’s URLs are affected. Although it only suggests whether you need to improvement on LCP, CLS and FID. You can inspect URLs in concern directly from search console report which takes you to PSI.

Web-vital-search-console

Regardless of the testing tool you are going to use the primary idea here is to get an idea where your pages are at.

#2. Enable caching

You can find many caching plugins available for WordPress, make sure you have installed and configured one of them. While doing so, it’s necessary to avoid using multiple caching plugins to not run into cache conflict. WP Rocket, Lightspeed caching, W3 Total Cache are some of the best caching plugins you can use on your site. You might have to test multiple plugins before discovering the most suitable configuration for your site.

Many cache plugins allow you to enable mobile caching, make sure to take advantage of this feature so that your site is ready for mobile fast indexing. Set your cache duration properly – keep it short for a site that updates its content regularly and long for those sites struggling with server response time and lesser activity.

Set-mobile-caching-enabled

#3. Reduce TTFB With Faster Hosting

If your TTFB is over 600ms Lighthouse marks it failing. You need to get a reliable fast web host to get constant <600ms TTFB. I would suggest doing your own research rather than leaning towards the dedicated reviews found on the internet or join groups like WPhosting to share experiences with users around the world.

We have discussed earlier how a fast server can be really useful in your site optimization campaign. Some signs that your host is doing great in terms of TTFB are,

  1. The WordPress admin dashboard loads instantly
  2. No long waiting during page load.
  3. No above ~2 second server response time warning on PSI test
  4. Reliable uptime (Not related to TTFB but constant downtime can send visitors away)’

#4. Use image optimizer and adaptive images

An image optimization plugin is a must. An additional option to use adaptive images is a bonus point. Adaptive images will serve smaller-sized images to mobile devices. Set an automatic image optimization plugin that compresses the images without losing quality as well as resizes bigger size images within your standard pixel size.

Additionally, the ability to serve WebP images would be do everything you need to do in terms of image optimization. Plugins like ShortPixel, Smush, Imagify are very much capable to do all of these tweaks automatically. So make sure you get a good image optimization extension on your WordPress.

resize-onthefly-average-page-load-time

If you want to serve images from cloud drive use this plugin called Media Storage to Cloud, this is easy to configure and can sync images automatically for future changes. You do have to keep in mind that serving content from cloud drives (which are 3rd party platform) you are not increasing the overall loading time. WebP media for WP can convert 3rd party images into webP format for even faster delivery – use this plugin if that make sense.

#5. Optimize JavaScript and CSS

Make sure to minify, compress, defer and delay JavaScript files based on the test. This is not as easy as enable the settings and the plugin will handle the rest. You might have to go through series of tests before applying the JavaScript tweaks, so be careful when you are doing it.

Applying the right strategy to serve javascript can significantly improve your average page loading time as well as your web vitals. You can use plugins such as Asset Cleanup and Perfmatters to unload unnecessary javascript & CSS with classified rules for the entire website.

Remove-javascript-average-page-loading-time

Similar to javascript make sure to generate critical CSS (serving optimal CSS) and minify + combine CSS to reduce render blocking and remove unused CSS warning by speed testing tools. Remember, minification of CSS can create CLS issue on web vital – it varies from site to site so couple of tests might help you pick the right choice.

Ideally, if your site is big then disable CSS minification and keep it enable for smaller site with lower assets.

#6. Optimize third-party code 

Avoid loading too much 3rd party resources on your site. 3rd party codes make your server wait for extra resources to be fully loaded and increases page loading time. A better idea is to locally host assets such as Analytics, fonts, images, GTM, etc. You can serve google analytics script locally with WP rocket or use Perfmatters. There are many other options available in the WordPress repository.

Lazyload ad scripts and social media plugin scripts to prioritize your main content loading ahead of 3rd party content. To avoid layout shifting issues with ads you can reserve space for ads by specifying dimensions in the div code. With WP rocket and Perfmatter, you can easily delay 3rd party scripts.

To detect these scripts you can either use browser’s developer tool to identify 3rd party networks or save your time with Page Speed Insight’s warning.

delay-3rd-party-codes

#7. Preload fonts

Preloading is a good technique to let the browsers know that these are the resources got to be used inside the page and can be prefetched. Try preloading fonts, you can find them in your Page Speed Insight’s report and test each one’s impact on load times.

Remember, overdoing preload may affect loading speed especially when a page doesn’t have those elements.

You can take help of caching plugin to preload fonts or do it manually on header section like this –

<link rel='preload' href='/image.png' as='image'>
<link rel='preload' href='/font.woff2' as='font' crossorigin>

#8. Reduce your plugin count

Although, plugins are a great help to lift your online business and add features to your site, consider limiting the plugin count to 20. Many sites do have a lot of plugins and most of them are not passing core web vitals. Try finding many features in one plugin to avoid installing multiple plugins doing almost the same task on your site.

For example, if you know how to connect your analytics to WordPress (it takes a simple script configuration) or use your caching plugin to host analytics scripts locally, then you should probably avoid installing another analytics plugin on the site.

30+ plugins will more likely to put additional load on your server and increase server response time.

#9. Use a CDN for faster content delivery

You must have heard the CDN makes your site faster. CDN like Cloudflare, Bunny CDN, QUIC.cloud CDN are my personal favorite. Bunny CDN is a cheaper choice than others but it does deliver good performance. Once your CDN is configured you can connect/use CDN URL in your caching plugin. It’s very easy to configure yet super useful.

If you are already using Cloudflare CDN it is worth enabling the automatic platform optimization. It can significantly reduce your TTFB and improve content printing time.

Cloudflare-Automatic-Platform-Optimization

Wrapping up: I think if you take these steps correctly, you will be able to resolve most of the speed-related issues on your site and notice a significant improvement already in terms of page loading speed and web vital matrices.

Additional content: Check out our last year’s article on average page loading time in 2020.

Are you using Speedy Site?

Website speed optimization with speedy.site ensures your WordPress site is loading fast throughout the day, around the world, and on various devices as well as passing Google's code web vitals.