Were you told to improve your website’s Core Web Vitals after a speed and SEO (Search Engine Optimization) test but don’t know how? The term has been around since mid-2021 and is based on Google’s metrics that determine a ranking for your website’s user experience. As you can guess, visitors don’t want slow-loading websites that are hard to navigate when they finally load. Also, even if fully visible after a fast loading, how much time does it take for the web page to become fully usable? That’s something to consider as we demonstrate how to optimize your WordPress website for Core Web Vitals.
What are Google Core Web Vitals?
Google Core Web Vitals represent several performance metrics that Google deems crucial for a website’s overall user experience. These metrics, determined by the web page experience score for the entire website will play a crucial role in its SEO rankings. To put it simply, Google will use the data it collects to examine which website provides the best user experience based on the loading speed, and the time it takes for the home page to become fully visible and functional. Google utilizes three tests of the quality of web pages on a website, known as Core Web Vitals:
- LCP (Largest Contentful Paint)
- FID (First Input Delay)
- CLS (Cumulative Layout Shift)
Unsurprisingly, an empty page would load the fastest, but your goal is to also provide informational content. Although a topic of a separate metric, that’s something the search engine also looks for, meaning you shouldn’t compromise quality for performance. Now, let’s explain the Google Web Vitals one by one:
1. Largest Contentful Paint (LCP)
LCP or Largest Contentful Paint is a metric Google uses to determine how fast the primary content on a web page becomes visible to a visitor. “Primary” content is what’s most prominent on the page—a paragraph, description, quote, animation, image, or video. The metric tells the search engine how quickly the biggest piece of content loads compared to the rest of the page.
2. First Input Delay (FID)
FID or First Input Delay is represented by the time between the user’s interaction on a web page and the processing of the event handles by the web browser. The best-known example is the difference in time between the user clicking on a link and the time a browser processes the event, such as opening the page in a new tab. Clicking the Next, Continue, or Submit buttons on a web page is another common event.
3. Cumulative Layout Shift (CLS)
CLS or Cumulative Layout Shift is a metric that shows the time it took for a website layout to stabilize. For example, a page loads quickly and users are ready to use the website, but some elements are still loading and the moving ruins the user experience. Think of a blog post with embedded content in the middle. While the text may load swiftly, a video or a large picture may take longer, then push some content down on the page.
How do you measure Core Web Vitals?
Users can measure Core Web Vitals in their Google Chrome browser by right-clicking the web page, selecting Inspect (or pressing Ctrl+Shift+I on the keyboard), switching to the Lighthouse tab in the top menu, then clicking Analyze page load. An external tool to test your Core Web Vitals is Google WebDev PageSpeed Insights.
Why do I need to optimize Core Web Vitals?
You, as a WordPress website owner, need to optimize your Core Web Vitals because they are an excellent way to determine your website’s user experience rating. Besides performance, these improve visitor satisfaction, boost page views, and increase the conversion rate. Plus, Google’s algorithm uses Core Web Metrics to determine site rankings since May 2021.
1. Optimize your WordPress website hosting to increase all Core Web Vitals
A primary way to enhance your score for Google Core Web Vitals is to get high-quality, reliable, fast web hosting. Even if you apply all the adjustments, poor performance from a cheap company with unoptimized, overcrowded servers will drag it down. We studied different types of web hosting and reviewed many hosting providers. Shared or cloud hosting is great for the start, but dedicated hosting is the goal when you can afford it.
2. Use a WordPress caching and/or CDN plugin to improve an FID score
To know why using a caching plugin for a WordPress website is pivotal, read our guide on killer ways to increase website speed. Since many events remain static (outside occasional website overhauls), a cached action will speed up the loading of pages and event handling by the web browser since it doesn’t have to load them from scratch. We also explained how a CDN (Content Delivery Network) ensures that your web page content is delivered to the visitor from (geographically) the closest server, shortening the page loading time. Both play a role in increasing your FID (First Input Delay) score.
3. Boost the LCP score by adjusting your main content on web pages
Performing an in-browser or Google PageSpeed Insights analysis will tell you which content is the largest part of a page’s viewport. The aforementioned article also demonstrates the optimization of media on your WordPress website to boost Core Web Vitals. If it’s a video or animation, consider hosting it on an external website, then linking to it. If you must host it, employ compression to reduce its size without a major quality decrease. For images, you can resize them to fit the page perfectly rather than downsizing them in HTML or CSS. Alternatively, use lazy loading and serve scaled images on a WordPress website.
4. Define the transfer size and dimensions of content to increase your CLS score
If an element is causing the “Avoid large layout shifts” problem, dragging the user experience and CLS (Cumulative Layout Shift) score down, consider removing it. If that’s not an option, double-check that the element has a clearly defined height and width. An error or undefined size in HTML or CSS may unknowingly delay the loading of a stable page. In case it’s a media file, also apply the size-reducing methods above.
5. Enhance CLS score by removing render-blocking elements Google discovers
If Google PageSpeed Insights tells you to “Eliminate render-blocking resources”, it’s time to dive deep into the problematic files, usually CSS or JavaScript. Those are usually caused by your WordPress plugins and themes, page animations, advertisements, Google Analytics, and affiliate link banners. The page speed increase guide shows how to minify, compress, and lazy-load your code. Additionally, you can defer JavaScript parsing.