The entire world of online publishing was shaken when Google announced its Core Web Vitals algorithm update in mid-2020. It was not instant, and Google gave everyone a time of around one year to implement all they could, find the best setting for their websites, and follow all the guidelines that came along with the algorithm update.
While these algorithm updates are very common, the Core Web Vitals update was a major one to create waves in the industry because it put all the heavy-lifting tasks on the shoulders of publishers and webmasters.
So what are these Core Web Vitals, and why is it so important for publishers to follow every step of the guidelines that come with this major update? The amount of importance Google has given to this update, and the reach, which is global across all the languages, makes the CWV update perhaps the most important update so far.
This article will cover all you need to know about this update and not just that. Then, we’ll elaborate and explain all the steps you can take to improve your website’s core web vitals, get better scores for your website, and enjoy increased traffic.
Why Algorithm Update?
An algorithm update is a regular update that Google improves its search engine. There have been many famous algorithm updates in the past. Each of these updates fine-tunes the search engine’s performance to better suit the users’ needs.
However, irrespective of the algorithm update, publishers and webmasters need to keep only one thing in mind; all the updates will always focus on improving the user experience. So if webmasters already work on their websites to achieve the same, then all the future updates, including the Core Web Vitals, will aid their website in growth. This topic then brings us to the next component of this article; User Experience.
User Experience
User experience is the most important aspect of a search engine. It is what Google focuses on, which is what webmasters should also focus on. While most of the algorithm updates, such as the Penguin update, the BERT update, and so on, were to improve the semantics and understanding of human language by the AI, Core Web Vitals, and the upcoming updates in the future will focus on user experience.
So what comes under user experience? The first and foremost are how quickly the entire webpage loads, how easy it is for the user to use the website on both desktop and mobile devices, how smooth the entire process of browsing the website is, and great content and user intent getting satisfied. This is what broadly captures user experience.
Let’s see how Core Web Vitals enhances user experience.
What’s Core Web Vitals?
Core Web Vitals are some metrics of a website that Google considers to evaluate how good a website would be for the user’s experience. For example, these web vitals calculate how long a website takes to load the first element, be it a block of text or an image.
In addition, how much of a total layout shift occurs when a website first loads and then completely loads, and how much time the largest element of the web page takes to load. These are the three major metrics that Google considers and hundreds of other minor metrics.
While the other metrics do not affect the web vitals that much if you add up the tiny contribution of hundreds of factors, they do create a substantial impact on the vital scores. The metrics for the vitals will change and evolve over time, but for now and later as well, these metrics are very important to be improved.
Let’s take a look at the major metrics used to evaluate the core web vitals in detail.
Web Vitals Metrics
Web admins need to focus on four core web vitals metrics the most. These are abbreviated as follows:
- LCP stands for Largest Contentful Paint
- FCP stands for First Contentful Paint
- CLS stands for Cumulative Layout Shift
- FID stands for First Input Delay
These four factors can make or break your website in terms of ranking. In addition, all these factors dictate how fast your website opens, how convenient it is for the users to use it and how much bounce rate your website will have.
With these four metrics, Google understands some aspects of your website that will most affect the user experience. For example, it tells Google how responsive your website is, its visual stability, and other minor factors that enhance the website’s experience.
Let’s understand these four metrics in detail.
1. LCP or Largest Contentful Paint
This is perhaps the most important metric, not for Google, but from a user’s perspective. For example, does largest Contentful Paint refer to the loading time for the heaviest element of your website, confused? Here’s a simple explanation. When you click on a website, there is a slight delay, the loading delay when the search result page disappears, and you get a blank sheet of the website.
The Largest Contentful Paint metric measures your website’s time to load the largest, heaviest element of the web page. It could be anything; an image, an embedded video, or just a large chunk of text. Whatever be the heaviest element, Google checks how long it takes for it to load. This gives the search engine how long other lighter elements will take to load.
This metric was present earlier, too, when core web vitals were not a major factor considered by Google for ranking, but it was still a factor that indirectly affected it. Back then, it was called First Meaningful Content. The problem with this metric was that there was no way for Google to know which part of the web page’s content was “meaningful.” Hence, they replaced it with something actually meaningful.
Google recommends that a good LCP time should be under 2.5 seconds. This means that the heaviest element of a web page should be loaded completely within 2.5 seconds or lower. If this period is above 2.5 seconds and under 4 seconds, then some improvements are needed.
But still, your web page will be considered as an average page, nothing too negative for SEO and ranking factors. But if the LCP is higher than 4 seconds, Google suggests that you should improve this metric.
A higher LCP shows that your website is excessively slow in loading heavy elements, and in many cases, large, important blocks of texts. Remember that Google considers these elements as meaningful content. So if there is no meaningful content being loaded quickly, it will be a negative factor for SEO.
2. FID or First Input Delay
The First Input Delay or FID is the metric used to measure the responsiveness of the web page. As the name suggests, this metric calculates the delay in registering the first input by the user.
So whenever you open a website and click or swipe on the web page, or maybe interact with a button or element, the time it takes for the website to register this input and show its effect (reacting to the user request) is called the First Input Delay.
This metric is used to check the responsiveness of the web page. The larger the delay, the slower the website or the web page would be in responsiveness. Imagine opening a website, and even though it has completely loaded, it still takes a good second to register a swipe (if you are using your mobile phone, which Google considers as the majority) or if you click on some element or button.
Google suggests that a good First Input Delay is lower than 100 milliseconds. Anything above this and below 300 milliseconds is considered okay or average. This means that if your website is getting responsive in under 300 milliseconds, it is passable and won’t negatively affect ranking.
However, if this number crosses 300 milliseconds, then that becomes a serious negative ranking factor. Since care is better than cure, even if your website is under 300 seconds for FID, you should try to get it down to below 100 milliseconds.
3. CLS or Cumulative Layout Shift
Cumulative Layout Shift measures the visual stability of the website or the web page, but at the same time, it also measures how interactive it is, which directly affects the user experience.
Cumulative Layout Shift looks at how much of a total shift all the elements of a web page experience when these elements are first loaded and when the complete website loading is finished.
This is something you might have noticed, and if you are unlucky enough, this might have affected your experience as well. Whenever a website loads, there is a slight shift in all the elements (since there are interstitial elements that load later, pushing the major elements). While it might seem unimportant at first as to why Google will consider this as a ranking factor, when the CLS is terrible, the user experience is degraded.
Imagine opening a website, and there is the menu button, or maybe some other button that you want to click or touch. And just as you are about to click on the button, the site finishes loading, or maybe a popup element comes on the screen, right next to the button, and you find yourself clicking that popup element. Wouldn’t that be frustrating?
This is why Google has included CLS as a major ranking factor and a core part of the web vitals. While popups are really annoying, Users and visitors can manage them to a certain extent.
The main reason layout shifts occur in websites is due to some spam advertisements. Since these adverts are third-party codes running over the website, they exist in the interstitial spaces.
What are interstitial spaces?
A website is made of codes, HTML, CSS, and JS. All these codes define everything about the website’s look and functionality. But when a website starts running advertisements, The browser cannot edit the website’s code to make space for the adverts codes. This is when the ad creates interstitial spaces between the different elements of the website.
And hence, this is the reason for layout shifts. While ads are not the only reason for this shift, they are the most common and biggest reason.
4. FCP or First Contentful Paint
First, Contentful Paint, as the name suggests, is the time a website takes to load any element, be it an image, text, video, or website element. Of course, these elements need not be loaded completely.
All that matters is when someone clicks on a website, the white canvas that the website starts with must be filled with an element as soon as possible. This is more important than you think.
FCP is an indirect indicator of the website’s page load speeds. When someone clicks on a website, the only thing that can encourage them to stay on the website while they wait for it to load completely is the first contentful paint.
If an element, an image, or a block of text loads quickly, the user is more likely to stay and wait for the website to load completely.
Imagine if you clicked on a website and all you saw was a blank, white canvas on the screen for 3 seconds. You are more likely to wait if you instantly see some texts or images.
Here’s what some case studies have shown about user behaviors based on page load times:
Suppose the page load time of a website increased from 1 second to just 3 seconds, bounce rate increases to a damaging 32%. But here’s the bigger blow. If the page load time increased from 1 second to 6 seconds, the bounce rate increased by a whopping 106%! This means that none of your visitors are ever going to come back to your website. This is why FCP is so important.
A good first contentful paint time is anything below 1.8 seconds. Anything above this and below 3 seconds is average but can be improved. Anything above 3 seconds should be improved at all costs if a website wants visitors to stay on the site.
These were the big four metrics for the Core Web Vitals that should be the first priority if you want to optimize your WordPress website better and get better rankings. While taking care of these four will bring you to the safe zone, why stay in the safe zone when you can actually lead?
So to be more detailed on this topic, we have decided to include other vital web metrics that Google considers, although not as much as the big four. Take a look at all the minor metrics.
Improving Core Web Vitals Through WordPress Optimization
Improving the Core Web Vitals is very important to get better rankings. Not only would improving these boost traffic, but there are some negative repercussions if your core web vitals are poor—reduced traffic, lower rankings, and more difficult to get ranked for other keywords. Trust us, having poor core web vitals is not a good thing at all.
So how to improve the core web vitals? There are a few. Let’s look into each of these steps.
1. Optimize Images
Imagine optimization is the first on this list because it is one of the most common reasons for a bad web vital score and an overall slow website. The best part is that optimizing images is very easy, very effective, and could solve almost 60% of your site loading issues, boosting your web vital metrics.
So what are the things that you can do to improve your media situation? Here are some of the best methods for optimizing images for your website:
Compress
There are so many tools out there, even easy to use online ones such as Optimizilla Image Compressor, which instantly compresses images of all formats and up to a considerable range too, without too much loss in the quality.
Compressed images are so much faster to load, take less server storage space, and look as good as uncompressed counterparts.
So the next time you have to upload some images, make sure you compress them. Some compression can reduce the size of images by as much as 60% without the loss of quality.
But what if your website is image-centric, and there are already hundreds, if not thousands of images uncompressed, taking a lot of space? There is a workaround for that too.
You need to get an image compressor plugin, some are paid, but most of them are free. Permit them, and the plugin will auto-detect the images and compress them to the optimal degree without any quality loss.
Do note that it will take an ungodly amount of time for the entire process to happen if there are many pictures, but everything is worth it if it boosts your rankings.
Use Better Format
Images come in different formats. JPEG, PNG, and some other formats are the most common ones. But which format suits the requirements better? While JPEGs go well with everything, they are better for images with shapes, while PNG is sharper, with anti-aliasing better than JPEG. This means PNGs are better for images with a lot of text or sharp edges.
Also, PNG offers lossless compression, which means Compressors can compress them a lot without losing quality. This is why PNGs are preferred. But there is one more format that should be the one to rule them all; webP
The web is the standard format for images on the web. This is because they are the lightest format, virtually reducing the size of the images to nothing. This is achieved by image caching, where the image that the browser shows is just a cached version of the real image.
So the actual heavy image is never loaded by the browser, increasing loading times. The only issue with this format is sometimes. Some browsers fail to load such images. Get a plugin that shows the WebP version of all the images on your site and notice how much your web vital score gets boosted.
Dimension matters
Most websites just haphazardly upload the image without caring about the dimensions. It is advised, not only by us but also by Google, to keep a uniform dimension for all your images.
A uniform dimension ensures a lighter image and improves the load times, cumulative layout shift, and general visual stability of the website. Choose the format that is best for both mobile and desktop devices. Anything between 700 x 1000 pixels to 900 x 1200 or 1000 x 1000 (for square images) would be the best for both worlds.
Image CDN
Some plugins and other third-party services offer image content delivery networks. We’ll discuss more CND later, but what it does is store a version of all the images on your website in different servers placed all around the world.
This allows preloading of the image, so browsers don’t have to load your images repeatedly, increasing your website loading speeds and improving your CV.
Use Lazy Loading
Lazy loading is a miraculous tool to use to improve your website loading speed, first contentful paint, and even the largest contentful paint. When you open a website or a web page, the browser loads all the website elements one by one.
So even if you haven’t scrolled down, the browser loads all the images in the background. This increases the time to interactive time and even the First Input delay in some cases.
Lazy loading prevents these images from being loaded in the background. Instead, it allows the browser to load these images only when the user scrolls down, and the image comes to the screen—a must-have tool for all the websites, especially if your site is hosted on shared hosting servers.
2. Use CDN
When slow load times are a problem, especially with low-powered servers, then CDN is your way to improve your loading times. The added advantage? Your website gets a fast loading time, better FCP time, near-instant server response time.
All of these things happen worldwide, not just in areas closer to your server’s location. CDNs are relatively cheaper, and the cost depends on the size and traffic of your website. But we’d suggest using Cloudflare’s free plan for your website as the performance is great for smaller websites.
3. Reduce Server Response Time
Reducing the time your server takes to respond to requests from the devices can shave off lots of milliseconds from your core web vital report. This is something that mostly depends on the type of server you use or your hosting plan.
The worst performers for this are shared hosting servers. So to improve this, the easiest and fastest way would be to change your hosting plan and move to cloud hosting or VPS hosting. We’ll discuss more on this later in this article.
4. Compress Website
Image compression is great, but how about compressing your entire website? Website compression or Text compression is something that is a standard employed by almost all websites.
Your website’s HTML and other text files can be compressed, essentially making the size of your entire website (which is sent and received via the server) very small. So how to do it?
Website compression is a piece of cake with something called GZIP. GZIP removes the unnecessary bulk of your websites which are in terms of codes being repeated and such other things. This can drastically make your website faster and lighter.
The easiest way to enable GZIP compression is by going to online GZIP compression sites and then entering your website URL. Note that GZIP compression is also called Brotli compression.
5. Minify JS And CSS
JSS and CSS are some of the heaviest elements of your website. These are codes that dictate various aspects of your website. CSS handles all the styling, graphics, and other visual elements of the site, whereas JavaScript adds all the functional elements to your website.
A website with only HTML (text) would be the fastest website, but browsing the website will be an unbearable experience. So CSS and JS are very important.
So what is to be done? Unfortunately, we can’t just remove these two elements. The best way to reduce their negative impact on core web vital scores is by minifying them. Minifying is just a simple process of removing the white spaces from the code, repeating lines, unnecessary commands, basically removing all the useless bits from a poorly written website code.
If you are experienced with website coding or can hire a developer, then minification can be done by editing the website’s code.
But most of us are not well experienced with coding, and some can’t hire coders. There are some great plugin options that you can get from the WordPress plugin store, all for free (some might cost money). These plugins allow for one-click minification of both JS and CSS scripts.
The only caution we would advise is that before you do any minification, always do it on a staging site or a child theme (a copied version of the actual theme). This is because some plugins, when editing the JS and CSS scripts, can break the website, either how it looks, how it functions, or sometimes both.
Remove Unused JS and CSS
There is a difference between the entire website and the web pages it has. While the website can have multiple pages, all with their own functionality and styling, each web page can also have their own features and styling.
But a problem occurs when all the unused, unnecessary parts of the codes such as JS and CSS are still loaded in parts of the website where they are not needed. This why a smart thing to do is removing these unused codes from the loading pages. Caching plugins and website optimization plugins can do this.
6. Inline Critical CSS
Inlining critical CSS means keeping the important CSS codes at the beginning of the entire execution chain so that the browser starts loading these important elements first. This allows for a better First Contentful paint and traffic retention since the page appears to load very fast.
With poorly designed and coded themes and websites, all the important CSS codes are below some useless, non-critical codes. So a website may be coded in a way to load the footer fonts first and the main webpage logo later.
This is not an efficient design. Keeping all the CSS codes for the elements of a website that populate the page first is very important for improving the load times responsiveness and boosting your core web vital scores.
7. Third-Party Code
While there could be a hundred types of third-party codes based on the functionality of your website, we are going to refer to the most common one; advertisement codes. These codes are the least optimized, very heavy, and incoherent mess in the website’s code.
However, these are the advertisements that you see on a website, and since most of the themes come with minimal to no availability of ad spaces, these codes are placed interstitially.
So when a browser is loading the website, there are these resource-intensive advertisements that load as well, taking not only the processing power but your internet speed too. This is why websites with too many ads are just impossible to navigate.
Not only do ads affect the website’s performance, but they also ruin the user experience if there are too many of them. But ads are the necessary evil. They are required to sustain the websites. But they don’t have to destroy the user experience.
The best way to manage these ads is by deferring the ad codes to load at last, when the entire website is loaded and is completely responsive. This improves all the metrics, from LCP, CLS, FID, and even FCP. It also improves user experience as users don’t have to see the ads getting loaded first and then the contents of the websites.
Another get-around trick to solve this issue is by applying lazy loading for ads with the help of a plugin. This works just like lazy loading works for images.
However, the ads won’t load as long as the user has not scrolled down to the ads. These two are the only useful methods for beginners to improve their vital web scores if the third-party code is drastically decreasing.
8. Excess DOM Size
Here’s why we say to have a simple and light website; The DOM size, which is a core web vital metric, is directly dependent on the complexity of the website. DOM stands for Document Object Model, and it is the measure of how many elements are present in a web page.
The more elements, the more DOM size, the more processing and time it takes to load, and the slower the website loads, reducing the time for all the vital metrics.
The best way to reduce the DOM size is by keeping the website light and simple. Use a well-coded theme with minimal bloat. Remember to focus on function and less on fashion. The website should be clean and simple.
9. Server Level Caching
Your hosting provider must have this option; all you need to do is find it and enable it. Server-level caching creates a lighter, simpler copy of your website that contains all the important and basic information about your site, including the loading codes (HTML, CSS, JS).
So when a browser requests for the website, the server just gives this compressed snapshot of the real data. This increases the load times drastically, allowing your website to be loaded quickly.
Make sure that server-level caching is enabled. If you cannot find the option, just contact the support team and ask them for it.
10. Caching Plugins
Server-level caching is one thing, but you must also get a caching plugin (if you are not using a CDN service, if yes, then third-party caching plugins are not required because the CDN does the same thing). Caching plugins do the exact thing that server-level caching does, but it happens on the website. The results include faster loading times, better FCP, and FID.
11. Too Many Plugins
Websites that use too many plugins suffer a lot from the laggy experience, slow load times, poor script execution, and a lot more. This is because these plugins have the codes that they want the browser to run in order for the plugin to run.
Therefore, we advise only keeping the most important plugins active and getting rid of the rest. Do not try to add more functionality to your website using plugins.
These functions include a slideshow gallery, a clock, some other display area in the website, design elements, etc. Anything that you add that is already not presented natively on the website is a third-party code. Third-party codes are the biggest culprits of a poor web vital report. So steer clear from these extra, useless plugins.
12. Analytics Plugins
Another major cause for slowing your website is these analytics plugins. Since these plugins require real-time data from the users who are visiting your website, these plugins are active the entire time someone is visiting your website. But analytics are also very important.
So for this, we’d recommend using Google Analytics code rather than any other analytics plugins such as Monster Insights. While Google Analytics does affect the website, the impact is not as bad as other analytics plugins.
Minor Web Vitals and How to Improve It
1. TTFB
TTFB stands for Time To First Byte, and this is the time, according to Google, taken for a request to go to the server, the waiting periods, and the request to come back to the user. It might sound confusing, but in layman’s terms, it is very simple.
Whenever you click on a website link, your device sends an access request to the server where the web pages are stored. This request is then processed by the server, which is also called the waiting period. Then, after approval, the server sends back the request to the device, allowing access to the web page. The time this entire process takes is called the Time to First Byte or TTFB, and it is entirely dependent on the type and configuration of the server your website uses and the physical location of the server from the user.
The best way to check your website’s TTFB is by using a quick and simple website called Bytecheck. According to Google, a good TTFB should be anywhere between 250 milliseconds to 450 milliseconds. The lower, the better. Anything above that is a bad sign for your website’s performance.
How to improve it:
Sadly, there is not much you can do to improve the TTFB as this totally depends on the type of server your website uses. Slower servers, especially the ones used in shared hosting, have the worst TTFB. However, getting a faster, more powerful server with low latency, such as Cloud hosting or VPS hosting, can improve the TTFB drastically. So that is your only option.
Another factor for TTFB is the server’s geographical location from the users. The farther your website visitors are from the server, the higher will be the TTFB. So it is advised to choose the server location closest to your visitors’ location. Having a premium DNS service can also improve TTFB, such as Cloudflare.
2. Total Blocking Time
Total Blocking time is the time between when the first element of the website is loaded, or the first contentful paint happens, and when the website becomes interactive. So if you click on a web page, from the moment you see the first element, which could be an image, a block of text, or just the logo of the website, till the website becomes responsive to your input, which is when the site starts to scroll and responds is called the Total Blocking time of the web page. It is the time when all the user actions are blocked.
All the web pages have a TBT, and the shorter this TBT is, the better is the user experience as the website is light, fast, and easy to load. There are multiple reasons for the TBT to be longer. First, when a website is being loaded, multiple tasks are executed in the backend.
These tasks are called threads, and they are lines of codes that are executed to run the website. When these codes are being run, the web page becomes unusable; hence it is considered as the blocking time.
On average, a good Total Blocking Time is anything below 200 milliseconds. Anything more than 500 ms is considered very poor, and you have to improve your website as it can negatively affect the user experience.
How to improve it:
There’s not much in the upfront that you can do to improve your TBT since all the codes are in the backend of the website. The most accessible way for people who are not experienced with website coding is to use a very lightweight, simple theme without too many styling elements. Another major source of high TBT is using advertisements.
These third-party codes (along with other third-party codes such as analytics integration) are some of the most impactful elements of increased TBT. Using an AMP theme also reduces the threadwork, making TBT very low. But if you can reduce the TBT to under 400 milliseconds, you should not sacrifice website functionality to get a perfect TBT.
3. Speed Index
The speed index is directly connected to the page load speeds of the website. So the faster is the page load speed, the faster will be the speed index. So what is the speed index? It is the measure of how fast the elements of the website populate the empty canvas. Remember, this is very different from First Contentful Paint.
The speed index is not the measure of how fast the first element comes on the screen after a webpage is loaded. Instead, it is the measure of how fast all the elements come on the screen. As you can see, it is directly connected to the page load speed.
A speed index of 3.4 seconds or lower is great, while anything above 3.4 seconds to 5.8 seconds is average, and it could be improved. Anything above 5.8 seconds is considered terrible and should be worked.
If someone opens a website and it takes more than 6 seconds for all the elements to load, it is not a great experience. This also affects the CLS of the website, which is one of the core web vitals.
How to improve it:
Again, improving the speed index is very similar to improving your TBT. Using a light theme with simple makeup would help a lot since simpler websites have lighter codes, which reduces the main thread work.
Another way of improving the speed index is by reducing JavaScript execution time. This can be done by minimizing the JS code, compressing it, deferring the lesser important codes to load later.
Another great way of improving this metric is by avoiding the use of custom fonts. Font loading time can drastically affect the speed index. It is best to use web-fonts or default device fonts that are already available to load.
4. Time to Interactive
This one was once a very important factor in improving user experience, and to a certain extent, it still is. Time to Interactive is the time a website takes to become completely interactive.
Note that it is very different from First Input Delay, one of the core web vitals. Where TTI is about the complete intractability of a website, First Input Delay is the time a website takes to be interactive, not completely.
Any form of interactivity would satisfy the FID, but TTI requires the entire website to be completely interactive.
Google says that anything below 3.8 seconds would be considered as a great time to interactive metric. Anything between 3.8 seconds and 7.3 seconds is considered average or moderate. If your website has a TTI metric in this range, you can work on it but do not sacrifice functionality to improve it. Anything above 7.3 seconds is considered terrible and should be improved at all costs.
How to improve it:
Again, as for the other minor metrics, minimizing the threadwork of the website or by choosing a light theme without too much styling and functional elements (such as a clock, extra plugins, etc.) would help in improving the TTI.
Reducing the JS execution time also improves the TTI. Finally, remember that having advertisements on your website will increase the TTI.
5. Server Response Time
This is the factor that is totally dependent on the server specification and the server’s location from the device. As the name suggests, it is the time taken by the server to respond to the request made by the browsing device.
Whenever you click on a website, a request to access the server is sent. The time it takes the server to respond to this request is called the server response time. This is different from TTFB or Time to First Byte because that includes the entire round trip, including the waiting period for the server.
A good server response time is usually anywhere under 200-300 milliseconds. In contrast, anything from 300 to 800 milliseconds is considered average or decent response time, but it can be improved, especially in the higher range.
Conversely, anything over 1 second or 1,000 milliseconds is considered to be very poor. Unfortunately, some shared hosting services come with an abysmal server response time of over 2,000 milliseconds!
How to improve it:
Server response time can only be improved by upgrading your server or your hosting plan. Since everything is dependent on the server, nothing can be done from the website end to improve its response time.
But we have seen this to be an exclusive problem of shared hosting services, and rarely the case in Cloud or VPS hosting. So if you are using some cheap shared hosting plans and getting terrible response times, it is better to upgrade your hosting plan.
One more way of improving this would be to figure out which country your website’s major traffic comes from and then get a server that is situated in that country or closest to that country. Geographical location affects the server response time a lot.
6. Render Blocking Resources
Render blocking resources are some codes in the website that prevent the website from loading quickly or rendering it quickly. These render-blocking resources are not junk codes that are not useful. On the contrary, these codes are very important for the functionality of your website.
The problem is not with the code but rather with the presence of the codes in the file.
When a website is being loaded by the browser, it reads lines sequentially, from line one to line two, and so on. Render blocking resources are the codes, usually JavaScript or CSS codes, that can be rendered later without affecting the website’s functionality, but these codes are present at the beginning of the code.
So when a website is loaded, the first thing it loads is the logo, but then, instead of loading the HTML part, which contains the main text of the website or even the image (which is the First Contentful Paint of the website), the JS code makes the browser load some obscure functionality of the website, such as how the button would function when clicked.
This code is important, but it can be rendered later also. So it would be much better first to load all the text and images so that the First Contentful Paint is faster and the visitors can actually see things getting loaded on the blank canvas.
How to improve it:
Improving this requires a bit of code editing, and if the readers are not well-versed with HTML or JS coding, then it is advised not to tamper with the website code. The best way to improve this problem would be by using simple, optimized themes such as Astra or GeneratePress.
These theme codes are already optimized to defer JS scripts to load, at last, improving the FCP and load times.
There are some free plugins as well that come with the feature to defer JavaScript at the end so that there are no render-blocking resources. Most of the free and paid caching plugins come with these features.
These were the minor web vital metrics that affect the performance of your website. But it is not limited to just these factors. There are some other factors that you cannot control, nor your server can, which affect all these factors.
So let’s take a look at these factors and understand why they are beyond your control.
Some other Factors Affecting the Performance of website
1. Net speed
The internet speed and availability of the user devices is something that you cannot control. In rural parts where faster internet is not available, and people still rely on 3G and even 2G in some cases, your website is bound to perform badly.
Faster internet has a great impact on improved website loading and performance since they have wider bandwidth and lower latency. While you cannot control the speed of the internet, you can have a simple version of the website to be loaded in case the user’s device has a slower internet connection.
2. Devices
Low-powered, order devices cannot handle heavy websites due to the lack of processing power. Web browsers require a lot of RAM and processing power to load websites, and if it is lacking, get ready for a very slow and faulty website load.
Again, keeping your website simple or using an AMP version of your website for low-powered devices can help a lot, but a lot of features and sections of your website (even advertisements in some cases) are lost with AMP pages.
So the best remedy for this would be to use a simple, light theme with all the important functionality, minus the decoration and unnecessary elements.
3. Browsers and Website
The type of browsers being used to load the website can make a lot of difference. There are some browsers that might not be compatible with certain elements of your website.
While most browsers are very comparable in terms of performance, some websites load faster in Safari, Apple’s browser, while others load faster in Chromium-based browsers such as Chrome or Brave. Different browsers, different stats.
4. Website complexity
Website complexity also plays a big role in this. If you have an information-based website, it is better to keep the HTML part as the priority, with all the text and images loading first.
Give minimal importance to the styling, animations, graphics, and other heavy elements of the website. Your goal is to serve the information, and while other functionality and design matters, it should not come at the expense of speed and responsiveness.
Keep the styling and functionality minimal.
Conclusion
Core Web Vitals is a vital part of deciding which websites will rank and which website shall remain in the dark depths of undiscoverability.
Furthermore, the CVW algorithm is recent, and it is going to get more and more impactful in the time to come. Therefore, this would be the best time to implement all the changes and optimization to stay in the safe zone because delaying it further can harm your rankings.
It has been more than one year since Google announced this update and ever since the announcement. Google has been fine-tuning the algorithm, making little changes so that web admins get the time to settle with the changes.
Google’s time shows how important it is to consider this update to be. This is definitely a wave that you can ride on and get a boost in ranking and visitors. Or this wave could take you down the depths of the sea, and your website can never get to see the light of ranking. The choice is yours.
Implement all these practices, and your core web vitals will improve. That’s our guarantee. This is the best time to get it done. Just remember to implement all these changes carefully, as many of these improvements can cost the website’s functionality.
