Page speed has been the center of discussion for the SEO community lately, with much impetus given to Google’s new speed metric, WebVitals.
Google and other search engines were very vocal that user engagement is a significant ranking factor for quite some time. So naturally, webmasters have been trying to reach the best page speed score since then.
The optimization efforts are based on a few myths about the ideal page speed score. If you have a question regarding page speed and Web Core Vitals, don’t hesitate to reach out.
However, this was put to an end with the introduction of Core WebVitals by Google.
The announcement of the new WebVitals metrics has steered clear of all controversies surrounding page speed.
These days, websites are concentrating more on the accumulated scores that show up on tools like Pagespeed Insights, Pingdom, GTMetrics, Measure, and WebPageTest.org.
There is no doubt that advanced tools that are effective in checking the speed of a web page. But the focus shouldn’t be on the overall speed score but rather on individual ones that matter to the users.
Google’s Core WebVitals metrics have been introduced to ensure the webmasters spend quality time improving the speed metrics that matter to the users more than anything else.
What is Core WebVitals?
WebVitals, according to Google, is a unified metric that analyzes the speed signals required to deliver a superior user experience on the web.
The pre-announcement of Google confirms that WebVital compliance will be the latest entry to Google’s ranking signals starting 2021. It’s already in play for 2021, and dev teams need to quickly start working on Core Vitals.
Website owners need to ensure that user experience metrics such as core web vitals, mobile-friendliness, safe browsing, HTTP security are considered to ward off any impact from future Google Algorithm Updates.
Core Web Vitals Metrics
The core WebVitals is an important metric introduced in May 2020 by Google. It is a score assigned to a page based on site speed, responsiveness, and visual stability. Google classifies these three metrics as follows:
- Largest Contentful Paint (LCP): It is the amount of time it takes for a page’s primary content to load. The ideal LCP measurement should be 2.5 seconds or faster.
- First Input Delay (FID): It is the time taken by a page to become interactive, and the ideal value for this is less than 100 ms.
- Cumulative Layout Shift (CLS): It is the measure of the visual stability of a page. The recommended measurement of CLS is less than 0.1.
The core web vitals speed scores may change over time based on the advancements in web technologies. In addition, the scores are subject to change based on what users perceive as a good web experience.
How to Achieve the Perfect WebVitals Score?
Most SEOs tend to overlook the slow speed of a website as it requires more expertise than changing the title and description of a page. Besides, it would be best to have a certain level of expertise in technical SEO to achieve the desired results.
Adding a cache plugin and optimizing the images, CSS and JavaScript are easy fixes that webmasters come up with. These optimization efforts definitely help to improve the server response time and reduce the overall resource size.
However, through our research, we have identified that the websites could not achieve the ideal Core WebVitals score despite these easy fixes.
This is why:
- Cache plugins improve site performance and speed up the server response time only when users come back to your site or browse through several pages during the same session. If the cache expires soon, this advantage will go to waste.
- Images, JavaScript, and CSS are important for the overall look and feel of any site. When the sequence of responses for each of these is delayed, it can result in bad user experience, which usually ends up breaking the site.
- If you’re running a CMS, you might need several Plugins or Apps to optimize each resource, and this makes your site even slower.
The strategy that you’re about to learn has worked for many of our clients, and we have guided them to achieve the perfect WebVitals score by following this process.
We realized achieving the ideal WebVitals score will be hard if the same web server tries to deliver primary and secondary resources.
However, hosting platforms like WP-Engine and AWS come ready with all the features mentioned above. Moving forward, choosing such hosting providers will be the key, which means SEO will begin much before you decide on the host.
You might wonder how some websites hosted on WP-Engine, and Amazon Web Server achieve a great WebVitals score. Don’t worry; the remaining part of this blog will cover that.
Resource Optimization for WebVitals
Several factors contribute to slowing down page load times. First, massive image files, CSS files, Javascripts, and the requests made from each increase the payload on browsers and keep users waiting for a long time.
Fortunately for you, some Google-recommended solutions can improve your site’s user experience while improving your ROI.
We’ve used the same techniques to get the perfect WebVitals score for our client.
1) Optimizing Images for Page Speed
Large image files cause maximum payload on browsers. Therefore, optimizing these images can help speed up your site and enhance the user experience as well.
Image CDN: If your images load from the same server, there might be a lot of load pressure on the server. An effective way to dismiss this issue is with the help of a CDN server. AWS and Cloudflare are currently the top choices if you’re looking for a great Image CDN provider.
WebP Format: You also need to make sure that the CDN you have chosen converts the images into WebP format, the Google Recommended Image format for Web images.
LazyLoad: Incorporating a lazy loading technique also increases the WebVitals score. Only the onscreen image resources come along with the initial payload.
The off-screen images will load as and when the viewers reach that certain image viewpoint on the site. Only the dimensions of the off-screen images load to avoid page breaks during the loading process.
2) Optimizing Java and CSS
GZip Compression: GZip compression has become a normal practice for most websites as it makes the files smaller and enables faster network transfer.
Minifying Resources: The first step in optimizing the JavaScript and CSS is to minify these resources. Minification is the process by which the non-critical and redundant resources are removed to increase the speed of the process. This is a standard feature offered by many optimization plugins.
Combine CSS and Javascript: Using a single file for loading, the JavaScript code and CSS will curtail the number of requests and accelerate the rendering.
When this is enabled, a single file will deliver all the CSS resources, and each resource will be organized by media type.
The same goes for JavaScript. As a result, the number of DOM requests can be reduced, increasing overall speed performance.
Reduce Render Blocking: One of the common reasons for the slow PageSpeed score is the steep use of Javascript and CSS. Though some Java and CSS files are crucial for the overall stability of a website, not all of them load above the fold, making it render-blocking.
It’s essential to optimize the execution of non-critical JavaScript and CSS. Ensure that these files are rendered only after the user interaction with the site is detected. This will improve the PageSpeed score and help you to achieve the perfect WebVitals score.
By now, many of you might be thinking, I have done all these, but my WebVitals Score is not up to what Google expects. If that’s the case, it’s probably because you missed out on one of the major aspects of CSS and Java delivery – the CDN again.
Deliver CSS and JavaScript Using CDN: Until you implement the CDN for loading JavaScript and CSS, you exert pressure on your server’s speed to deliver all these resources.
Without the CDN, you can reduce the load put on the server most of the time, but it will still sweat. However, our tests have come out with mind-blowing results for websites that have it enabled.
3) Optimizing the Font
Font rendering behavior is a very important speed drainer.
Browsers don’t render the text unless the font loads from the payload. This causes many delays in rendering the pages and leads to slower page speed.
To optimize the font, make sure your CDN can override font rendering behavior. For example, a good CDN can switch the font of the rendered text and showcase the original font as soon as it loads from the CSS.
Usually, this happens within a few microseconds as both resources are delivered from the same CDN server simultaneously. This can significantly decrease the Cumulative Layout Shift and give you a perfect WebVitals score.
4) Embed Codes
Embedding images and videos on a site can have a major impact and slow down a site. However, most businesses cannot eliminate these videos as they are a part of their product demo or introduction video.
Google recommends a solution for embedded images and videos where you can lazy load these assets too. Also, ensure the video resources load only when the user selects the “Play media/video” button.
When we implemented this, there was a 70% improvement in performance in Lighthouse.
5) AMP Pages
A slow server can majorly affect the performance of your website. AMP cache can help optimize delivery, but it may cause significant UI changes and impact conversion when you enable AMP for desktop. So making sure your server is responsive and fast remains an important task.
Conclusion
Some website owners might find the introduction of Core Web Vitals overwhelming. However, attaining the perfect web vitals score promises a better user experience and improved conversions.
Google says the global average load time for mobile devices and desktop is less than 3 seconds. However, if you check the list of three top-ranking websites on Google, most of them have achieved a page speed of fewer than 4 seconds.
Your visitors may leave your website and visit your competitor’s site instead if your website loads at a slow pace.
Often, this ends up in “click rage.” Click rage happens when a user tries an action with no result. This can cause frustration, and the user may not revisit the same site.
Detection of click rage using tools such as HotJar is a warning to the website owners to improve the speed experience.
With Google laying out these metrics, it will be easier for webmasters to optimize their site for improved SERP rankings and prioritize user experience above everything else.
SEO Inc also has another updated Web Core Vitals article you might be interested in here.
Author Bio:
Senthil Kumar Hariram, Vice President of Marketing at Stan Ventures, has over 14 years of experience in the SEO industry. Senthil heads the Core Marketing Strategy for Stan Ventures and its 100+ global clients. Senthil hosts a podcast series titled “SEO On-Air,” where he interacts with various SEO industry leaders like Garry Grant, Neil Patel, Rand Fishkin, Bruce Clay, and Barry Schwartz, to name a few, on popular SEO growth hacks and strategies. LinkedIn
Garry Grant, CEO of SEO Inc: Garry Grant is a veteran expert in search engine optimization and digital marketing. With over 25+ years of experience, Garry has successfully built a multi-service operation at SEO, Inc., developing proprietary technologies through complex strategic solutions. In addition, he has extensive experience in critical initiatives and operational responsibilities grounded in information technology and performance management.
