Understanding Web Vitals and Site Performance for?SEO

Wondering why your site is doing everything Google asked you to but still not getting better SEO? Or why are your users complaining about your site’s performance, when you meant to give them best visually rendered experience? It’s indeed your site’s performance!!?

But why does speed?matter?

Performance plays a major role in the success of any online venture. High-performing sites engage and retain users better than low-performing ones. Poorly performing sites and applications can also pose real costs for the people who use them. In fact, when it comes to user experience, speed matters as a consumer study shows that the stress response to delays in mobile speed are similar to that of watching a horror movie or solving a mathematical problem, and greater than waiting in a checkout line at a retail store.

When sites ship a lot of code, browsers must use megabytes of the user’s data plan in order to download the code. Mobile devices have limited CPU power and memory. This creates poor performance which leads to unresponsiveness. Knowing what we know about human behavior, users will only tolerate low performing applications for so long before abandoning them.

So how do we measure our?speed?

Well that’s not ideal if you see… Real-world performance is highly variable due to differences in users’ devices, network connections, and other factors. Therefore, comes the difference between Lab Data and Field Data.

Lab Data vs Field Data

Lab Data is the performance data collected within a controlled environment with predefined device and network settings.?

• To measure the lab data one can use Lighthouse. It takes a URL and runs a series of audits against the page, generating a report on how well the page did. There are multiple ways to run Lighthouse, including an option to easily audit a page from within Chrome DevTools.

Field Data is the performance data collected from real page loads experienced by your users in the wild.

• Field data can be measured using CrUX. Chrome User Experience Report provides metrics showing how real-world Chrome users experience popular destinations on the web.

What is a Good website?speed?

Although with lab and field data methods there are also metrics defined that helps us measure the speed of a website… The most widely common metric used is Web Vitals.

Following are the 3 Core Web Vitals:

• LCP (Largest Contentful Paint) measures loading performance
• FID (First Input Delay) measures interactivity.
• CLS (Cumulative Layout Shift) measures visual stability

So as you see, for a good website speed, LCP should be under 2.5 seconds, FID should be under 100ms and CLS should be less than 0.1viewport (height/width) for the elements.

Note that these metrics were calculated by Google itself by doing a survey of all the available indexed sites and these metrics help you identify, how your site performs against the rest of the available sites on the web, to yield better SEO for the users browsing through google.

Got it! But how do I improve my performance knowing all?this?

Following are some key points to keep in mind for enhancing performance of your site:

• Reduce the number of HTTP requests: Browsers usually have a limit on the number of parallel network requests, so if you have many requests queued up, some of them will be blocked if the queue is too long.
• Switch to HTTP/2: HTTP/2 has several advantages over HTTP/1.1. Among them is the ability to send multiple files at the same time, over the same connection. This avoids the overhead of multiple requests.
• Optimize Image Sizes: There’s a good guide on how optimizing image size on Shopify. Other than that make sure to use JPEG for images with lots of colors (e.g., photos), and use PNG for simpler graphics.
• Use a Content Delivery Network (CDN): CDNs will optimize the delivery of static files such as CSS, images, fonts, and JavaScript to your visitors
• Minimize TTFB: Time to First Byte, is the time it takes for the browser to receive the first byte of data from the server. As a gamer you can take this as your PING. A TTFB below 200ms is great. You can have a lot more info curated at Google’s blog at Web.dev.
• Choose the right hosting: Shared, VPS, Dedicated, Serverless… Choose what’s write for you… Shared hosting may be problematic for your application… Try upgrading to a better option.
• Implement Gzip compression: It minimizes the size of HTTP responses for certain file types. Make sure to check into it as it could reduce the size of images, videos and what-not by a LOT less.
• Minify and combine HTML, CSS, and JS files: You must have already seen the file types?.min.js… Yep, they are the minified / compiled version of the webpage being requested from the browser.
• Load JavaScript Asynchronously: One of the great features offered by a single threaded language, JavaScript, is that it let’s you run code asynchronously making your execution faster.
• Use Website Caching: There are lots of advantages to enabling browser caching as it can reduce bandwidth consumption, decrease load times, reduce latency, and the workload of the server.
• Reduce number of plugins: Plugins are great features to add functionality but they do come at a cost. Each plugin will almost certainly load additional CSS and JavaScript files. Some plugins will increase the TTFB time as well.

Conclusion

Improving website performance can be challenging, especially with the vast differences in devices, connectivity, browsers, and operating systems, but it will have a significant positive impact on one’s business if the business relies on their website as one of the main channels for reaching the customers. SEO is based on your sites’ overall content and the service it provides to the user, focusing on how your site is performing on the user’s end will greatly improve your site’s SEO.

Hope this article was useful to you. If you want me to make a part 2 of this post where I explain “how to use with Google Lighthouse to measure and optimize your site’s performance”. Let me know in the comments below I’ll be happy to put it out for ya. If you wanna personally reach out to me, you can do so on Twitter. I’ll be happy to assist you in any way I could.

Till we meet again’ ??