WP Speed Optimization – Core Web Vitals(CWV) is part of the Web Vitals initiative by Google. With Google constantly changing rules to improve user experience, it is no surprise; you need to adapt accordingly.
If you are using WordPress and looking to optimize your site with Core Web Vitals, you have come to the right place.
It is now essential for businesses to adapt to the changing guidelines set by Google.
Understanding Core Web Vitals
Google’s new Web Vitals initiative aims to provide unified guidance to improve web user experience.
At the core of Web Vitals, we have Core Web Vitals that simplifies the whole process of optimization. It is a subset that applies to web pages and can be measured and improved. The Core Web Vitals are aimed to improve user experience. According to Google, they will keep evolving the CWV. That means you need to keep revisiting CWV every year to see what’s changed and optimize your website accordingly.
Right now, we are in 2020’s Core Web Vitals standards that have not changed for 2021.
The three core metrics of CWV include:
- Largest Contentful Paint(LCS): LCS captures the loading performance of a web page. According to Google, a web page with an LCP of fewer than 2.5 seconds is considered a good user experience.
- First Input Delay(FIS): The FIS captures the interactivity. It is set to 100ms or less for the best user experience.
- Cumulative Layout Shift(CLS): CLS aims to measure visual stability. It should be 0.1 or less for a good user experience.
As a website owner, it is vital to match the standards set by Core Web Vitals. However, they do not have a very strict policy. If a web page reaches the 75th percentile, it is considered as passing CWV.
Tools To Measure
Developers or site owners can use multiple tools to measure the site’s performance according to Core Web Vitals.
I suggest checking out PageSpeed Insights as it gives you a detailed report about each metric. You can also use Chrome User Experience Report, Search Console, and GTMetrix.
If you want to learn more about Core Web Vitals, then I suggest checking out the official blog post from the Google team.
WP Speed Optimization Steps/Technique with CWV
Here we discuss the optimization techniques for CWV. By following the techniques, you will be able to get the most out of the guidelines and optimize your site for the users.
1) Improving Caching
Caching is a complex topic. As we are talking about both website loading speed and Core Web Vitals, it is vital to take a different path to cache.
If you are new to computers, then caching may seem like an alien word to you. However, in reality, it is a simple concept. It basically keeps a copy of your website resources, including images, HTML, CSS, and JavaScript, locally so that it doesn’t have to fetch it every time a user loads the site.
Caching can be done both at the server level and browser level. At the browser level, the resources are stored locally on the machine’s browser. So, if the user tries to fetch the same site again, it simply checks for the cache and only downloads updated or new resources. It not only saves bandwidth but also makes the page load faster. Servers also have cache built-in, which makes them even faster.
If you are using WordPress, you might use one of the popular cache plugins, including WP Rocket, WP Super Cache, or Hummingbird.
Simply customize the cache to your needs, and you are good to go. Caching can also be achieved by using Opcode, HTTP accelerators, CDN, and object cache.
2) Defer JavaScript
JavaScript is a core component of any modern web page — After All, it adds interactivity to a web page. However, if you are loading a site with a lot of JavaScript, it can slow down your site. Most importantly, it can stop loading the top part of the site.
This happens more often when a site is loaded on the top of the page. As web browsers read the page from top to bottom, it can hinder the page load time. The end result is a web page that doesn’t load fast enough to meet the CWV recommendation. For instance, it can slow down the First Contentful Paint metric.
To solve the issue, you need to async the JavaScript module to load after loading the content.
Most caching plugins offer a good way to handle JavaScript delay. If you are not sure what’s slowing you down, it is better to use GTMetrix or PageSpeed to learn about them. Some JavaScript may not defer with the plugin. That’s when you need to check what needs to be done manually. Also, if you are not sure about what needs to be done, then it is better to hire a developer to optimize your web page.
3) Optimize the image and use Lazyload
Try reading a page without an image, and you will find yourself overwhelmed. That’s why you see images in almost every blog post out there. However, images, when not used correctly, can lead to problems. In fact, images are the number one reason for a site slowing down.
As a webmaster, your job is to use “optimized” images. The images need to look good but also not slow down the server. That makes managing images quite a challenge.
Approaching image optimization might seem easy, but it requires a lot of thought processes if you have a big site.
To get started, you need to use a WordPress image optimization plugin. These plugins are automatic plugins which means that the images are optimized as soon as you upload them. So, what are these plugins? You can try out Smush, or ShortPixel.
If you want to go the extra mile, you can optimize the image before uploading them to your site.
Another thing that you need to take care of is lazy loading. It is a technique that improves the page loading time. So, what does it mean? It tells the browser that the image needs to be loaded only when needed. By doing so, the browser only loads what’s needed, saving bandwidth.
You can achieve lazy loading by enabling it via image optimization plugins. You can also download Lazy load plugins and enable Lazy loading with just one click.
4) Use Content Delivery Network(CDN)
Content Delivery Network can further optimize your site’s speed. But, what exactly is a CDN?
A CDN is an online network of servers that work all around the clock to deliver your site to different geographical locations. CDN stores multiple copies of the site in its server and then delivers them to the user based on the nearest location.
Based on the approach, the site can be rendered in less time due to less time spent in round-trip. As a website owner, you can use any CDN service out there. One of the most popular services out there is Cloudflare. Hosting service providers also offer their own CDN, which is mostly integrated with the hosting plan.
5) Remove animations
Animations might look attractive from the outside but have their own way of impacting page loading time. If you use animations too much, you are going to impact the Cumulative Layout Shift(CLS) score. If you remember correctly from our discussion early on, CLS determines the visual stability of the site. In other words, a bad score will mean an inconsistent user experience.
The animations may work well with the desktop version, but they can really impact mobile scores. With mobile being the more dominant source of visitors, it is obvious that Google has made sure the CLS score covers both mobile and desktop versions.
So, what’s the solution? Should you remove animations altogether? Well, no. You can, however, try to minimize its usage so that your CLS score doesn’t go beyond the prescribed 0.1 seconds. If you still need animations, you should try to check out well-made themes that incorporate animations without a user experience penalty.
6) Change your host for the better
Any website that wants to perform well also requires hosting that can provide the ecosystem for the site to perform. If a hosting lacks the basic functionality or requirements, it will bring down the whole site, impacting revenue and sales.
On the other hand, good hosting would make it easy for the site to load from the second request. For instance, a faster loading site will meet the requirement of First Contentful Paint.
At Vebsiko® Hosting, we aim to provide the best host so that you can take care of the rest. Our servers are optimized to render requests faster and help you achieve better loading time. Our infrastructure also ensures that you get the best possible results even when thousands of visitors are requesting the site.
Is there any SEO Impact from Core Web Vitals?
The Core Web Vitals are aimed to improve user experience. The CWV is intended to impact the SEO ranking factor. So, if your site is not optimized for CWV, you are soon going to find losing rankings.
Now it’s the right time for businesses to get their site within the new guidelines so that they do not get impacted by it.
As we discussed until now, keeping a few things in check will make sure that Website CWV is under control:
- Optimize, optimize, and optimize images.
- Use a caching plugin to implement site-wide optimizations
- Defer or minify JavaScript.
- Use proper CDN solutions to optimize delivery for users across the globe.
Lastly, a good hosting like Vebsiko® Hosting can skyrocket your site for the best user experience. So, why wait? Check out our Hosting plans now!