TL;DR: Addressing Core Web Vitals issues involves a structured approach: testing performance, identifying specific CWV challenges, and implementing optimizations. Some of the techniques include optimizing images and text files to improve LCP, reducing JavaScript execution for better INP, and enhancing layout stability to minimize CLS.
Struggling to pass Core Web Vitals?
According to Google:
54.2% of all websites with CrUX data fall short when it comes to meeting the good threshold for all three metrics – LCP, INP, and CLS.
However, passing the CWV assessment by no means is a mission impossible.
In fact, it’s a 3-step process:
- Run performance tests
- Identify Core Web Vitals issues
- Optimize them
And by the end of reading this article, you will be equipped with all the needed knowledge to perform each step successfully.
So read on!
Quick recap of the Core Web Vitals
You might've stumbled across this Google statement:
“Optimizing for quality of user experience is key to the long-term success of any site on the web.”
But as the famous saying goes – you can’t improve what you don’t measure.
Or at least that was the situation with measuring user experience before CWV.
Back in 2020, Google introduced Core Web Vitals to provide website owners with a definitive set of benchmarks that directly impact and signify the user experience. They were announced as part of Google's broader initiative to emphasize user-centered metrics in evaluating overall web health.
In their core (pun intended), CWV are a set of performance metrics that shed light on the quality of user experience on a webpage. They encompass three main elements:
- Loading performance (LCP)
- Responsiveness (INP)
- Visual stability (CLS)
LCP, or Largest Contentful Paint, measures the loading performance of a page. It gauges the time it takes for the page's main content to load. An optimal LCP is considered to be under 2.5 seconds.
INP, or Interaction to Next Paint, measures the delay between a user's input (such as clicking a link, tapping a button, or typing into a form field) and the visible response to that input on the screen. This includes the time it takes for the browser to process the event, execute any associated JavaScript, and render any changes to the page. А good INP score is anything below 200 ms.
CLS, or Cumulative Layout Shift, evaluates the visual stability of a page. It looks at unexpected layout shifts that occur without user input. A commendable CLS score would be less than 0.1.
The Deprecation of FID
Аs of March 12, 2024, First Input Delay is no longer a Core Web Vital.
The ex-interactivity metric was replaced by INP, as it introduces a more comprehensive way of assessing page responsiveness, measuring all interactions. In contrast, FID only accounted for the input delay of the first interaction.
What does this mean for you?
Chrome tools will no longer guarantee FID availability, and you will have until September 9, 2024, to transition over to INP.
Passing Core Web Vitals: The 75th percentile
When discussing Core Web Vitals metrics, Google often refers to the 75th percentile.
This means a site should aim for performance metrics that meet or exceed the recommended thresholds for at least 75% of its page visits.
It's a way to ensure that a majority of user interactions with the site are satisfactory rather than just focusing on average or median values.
Tools to Identify Core Web Vitals Issues
The first two steps on your Core Web Vitals optimization journey require you to run some tests and identify possible culprits.
There are several popular tools you can leverage along the way:
1. PageSpeed Insights
Google’s PageSpeed Insights offers both page-specific and origin-wide CWV data for the past 28 days. It also delivers actionable advice for boosting performance.
It’s one of the most widely used performance tools due to its friendly UX/UI. The report page includes your Core Web Vitals assessment based on field data and the performance score based on lab data.
And at the bottom, you have the Opportunities & Diagnostics widgets, which provide you with a list of issues and the respective metrics that they affect.
2. Google Search Console
The Core Web Vitals report in Search Console includes performance data for individual URLs. This makes it a great option for identifying specific pages that need improvement. Unlike PageSpeed Insights, Search Console reporting includes historical performance data.
Hence, you can track back how impactful your optimizations are and whether or not you’re moving in the right direction.
Chrome User Experience Report (CrUX)
CrUX gathers real-world user experience data from countless websites, offering key insights on Core Web Vitals based on genuine user interactions.
You can tap into the CrUX dataset in two main ways:
While these methods demand more effort than a quick PageSpeed Insights or GSC check, they present versatile data analysis and visualization options. For instance, BigQuery enables data segmenting and integration with other datasets.
Most Common Core Web Vitals Issues in WordPress
Largest Contentful Paint (LCP) Issues
As you already know, LCP gauges the duration required for the primary content element, like an image or a text block, to become visible on a webpage.
Any delay in retrieving the initial HTML document from the server can push the LCP metric into the unfavorable range.
And these are the main culprits:
1. Slow server response times due to budget hosting
Slow server response times, often observed in shared hosting or overcrowded server environments, can notably influence your LCP score.
When server response times lag, the loading of the LCP elements follows suit, creating a cascading effect of delayed content rendering.
Furthermore, a key characteristic of WordPress is its dynamic nature, frequently requiring content to be fetched from a database. In scenarios where this database is hosted on a sluggish server, the retrieval and display of content can be impacted, further affecting the loading time of the biggest element on your page.
Last, relying on budget hosting can negatively affect your Time to First Byte. TTFB measures the interval for the first byte of information to be dispatched from the server to the user's browser. A prolonged TTFB is often a precursor to a delayed LCP.
And, since resources such as CPU and RAM are divided up among multiple websites on shared hosting, your WordPress site might not always get the resources it needs for efficient loading.
2. Render-blocking JavaScript and CSS introduced by certain themes and plugins
Render-blocking resources are those scripts and stylesheets that act as roadblocks, halting a web page from rendering until they've been fully processed.
When a WordPress theme or plugin introduces elements that obstruct rendering, it inherently delays the core content's visibility, leading to websites failing their LCP assessment.
So, when it comes to your WordPress site, less is more.
In other words, striking the right balance between a site's functionality and speed is pivotal for achieving those green Core Web Vitals.
3. Unoptimized images
According to the Web Almanac:
“72% of mobile pages and 82% of desktop pages have images as their LCP.”
High-resolution images possess substantial file sizes. Without optimization, these bulky files demand more bandwidth, prolonging their download and rendering times.
Additionally, unoptimized images can introduce rendering challenges. When browsers encounter image formats that aren't natively supported or need additional processing, the subsequent decoding can add to the overall rendering time.
Cumulative Layout Shift (CLS) Issues
A poor CLS score indicates that elements on the page are unexpectedly shifting during the lifespan of a page, which can lead to a frustrating user experience, rage clicks, and higher bounce rates.
Here are the things that cause your page content to jump up and down:
1. Images inserted without set dimension
One often overlooked detail in web development is the specification of image dimensions.
Defining width and height attributes for images isn't just about aesthetic precision; it's a practical measure to maintain layout stability.
Without these attributes, a browser lacks the foresight to allocate the necessary space for the image during the initial render. This might seem inconsequential until the image fully loads.
At this point, if its actual dimensions are larger than the default or assumed space, the image pushes aside or displaces nearby content, leading to abrupt and disruptive layout shifts.
2. Ad placements without reserved space
Do you incorporate dynamic elements like ads, videos, or other embedded content?
You should know that this integration comes with its set of challenges.
A significant one is the unpredictability of the content's dimensions. If you don't proactively reserve space for these elements, the page renders without considering the space they'd occupy.
This becomes problematic when these elements, especially dynamic ads, load. If their actual size exceeds the unallocated or default space, they intrude upon other content, causing it to shift.
3. Unoptimized font delivery
In the pursuit of branding consistency and captivating design, custom fonts have become a staple in web design.
But they introduce challenges, namely, FOIT (Flash of Invisible Text) and FOUT (Flash of Unstyled Text).
With custom fonts, especially the heavy ones or those fetched from external sources, there's a temporal gap before they're fully loaded and displayed. During this interval, a page might exhibit FOIT, where text remains invisible, or FOUT, where a fallback system font fills in.
When the loaded custom font varies significantly from its fallback counterpart, it reshuffles the text layout. This sudden change can be both disorienting and frustrating for users engrossed in reading or interacting with text elements.
Interaction to Next Paint (INP) Issues
A blocked main thread is a primary culprit for poor INP scores. When there's extensive work queued up on the main thread, user interactions have to wait in line, leading to perceptible delays.
And these are the resources that most commonly block the main thread:
1. Heavy JavaScript execution
Heavy JavaScript execution can substantially affect INP on websites, primarily due to the single-threaded nature of JavaScript.
When a browser processes extensive JavaScript, it monopolizes the main thread, which is responsible for various critical tasks, including handling user inputs. As a result, if a user interacts with a page during this heavy execution, the response is delayed.
2. Poor resource prioritization
Not all resources loaded on a website have equal significance for the initial rendering or user interactions.
If non-essential resources are prioritized over crucial ones, or if there's no proper prioritization in place, it can cause the main thread to be busy with tasks that slow down the responsiveness of the page.
In other words, effective resource prioritization ensures the browser remains responsive to users by focusing on what's essential first, optimizing the user's experience, and keeping INP scores low.
3. Running excessive amount of third-party scripts
Third-party plugins can significantly impact the responsiveness of your web pages. These plugins, which often come in the form of scripts, analytics tools, advertising networks, or various widgets, can introduce additional processing tasks.
Moreover, many third-party plugins, like analytics, ads management, and forms, aren't optimized for performance, meaning they might not adhere to best practices for non-blocking script execution or efficient resource loading. Some may even cause extensive JavaScript execution or come with large payloads.
Additionally, bear in mind that third-party scripts often rely on external servers. Any delay in their server response times can also introduce latency.
4. Having large DOM size
The Document Object Model (DOM) is the backbone for every web page, presenting an HTML document as a structured tree. Each branch of this tree culminates in a node, which houses various objects. These nodes can depict different segments of the document, like elements, textual content, or commentary.
While the DOM is fundamental to a webpage's function, its size can lead to responsiveness issues because:
The larger the DOM, the greater the demand for a browser to swiftly and effectively render a page.
In simpler terms:
For prompt responsiveness to user actions, it's crucial to streamline your DOM to only essential elements.
You might ponder on the definition of "essential." As per Lighthouse's criteria, a DOM size is deemed burdensome if it surpasses 1,400 nodes.
How to Fix Core Web Vitals Issues in WordPress (Checklist)
Optimizing LCP
LCP is the metric website owners struggle with the most. That’s why there are multiple optimizations you need to apply:
- Upgrade your hosting: Consider moving away from shared hosting. While cost-effective, it can be slower than the more expensive options - dedicated or cloud hosting solutions. Premium hosting options tend to offer faster response times.
- Use a Content Delivery Network (CDN): CDNs store cached versions of your site on multiple servers located globally. This ensures users receive data from the closest server, reducing the time it takes to fetch the data.
- Optimize databases: This includes removing stale data, optimizing queries, and using indexes effectively. For websites with WordPress, plugins like WP-Optimize can assist in database maintenance.
- Choose the right image format: Select the most efficient format for your images. While JPEG is ideal for photographs, PNG is better for images with transparency. Modern formats like WebP can offer high-quality visuals with smaller file sizes.
- Apply compression: Use lossy compression to reduce file sizes without significant visual degradation. Use lossless compression to preserve every detail for images where quality is paramount.
- Resize images: Deliver images tailored for the device and viewport. Avoid using large images that are then resized with CSS or in-browser. Generate different image sizes for various screen resolutions and serve them using the "srcset" attribute. Or try a plugin like NitroPack, which automatically resizes your images.
- Minify JS and CSS Files: Reduce the size of your scripts and stylesheets by removing unnecessary characters, whitespace, and code. Tools like Terser (for JS) and CSSNano (for CSS) can assist with this.
- Use defer or async: Use the defer attribute for scripts that aren't required for the initial page render. This ensures that the JS files are executed in order after the HTML has been parsed. Use the async attribute for scripts that don't rely on other scripts and aren't critical for the initial render. This allows the browser to continue parsing the page while the script is being downloaded.
- Inline Critical CSS: Identify the minimum necessary CSS for the initial page render and inline it directly within the HTML. This ensures that styles essential for the content above the fold are available immediately.
Improving INP
To guarantee smooth and fast page responsiveness, implement the following optimizations:
- Use Web Workers: Offload complex computations to Web Workers. They run JavaScript in the background on a separate thread, ensuring the main thread stays responsive.
- Prioritize Critical JS: Prioritize loading and executing the most essential JS code first. Use rel="preload" to inform the browser about high-priority scripts.
- Reduce unused CSS: While JavaScript is usually the main villain, CSS also blocks the main thread. By reducing unused CSS, you lower the total number of bytes that have to be downloaded. More importantly, you ensure browsers can start rendering the page faster since they have fewer operations to perform.
- Break up long tasks: Split lengthy tasks into smaller, asynchronous chunks using techniques like requestIdleCallback() and scheduler.yield(). This ensures the main thread remains free for user inputs more often.
- Optimize Event Listeners: If you have many event listeners on multiple elements, consider event delegation. This method attaches a single event listener to a common parent, reducing the number of listeners and improving performance.
- Reduce DOM size: To reduce your site’s DOM depth, avoid poorly coded plugins and themes, don’t hide unwanted elements using display:none, move away from page builders that bloat your code, and minimize JavaScript-based DOM nodes.
- Avoid recurring timers: setTimeout and setInterval are commonly used JavaScript timer functions that can contribute to input delay. If you have control over the timers in your code, evaluate their necessity and reduce their workload as much as possible.
Reducing CLS
To eliminate the possibility of users experiencing unexpected shifts, make sure to:
- Define dimensions for images, ads, and embeds: Always Include width and height attributes for your images. This helps the browser allocate the correct amount of space for the image before it's loaded.
- Use font-display: optional: Using font-display: optional in combination with link rel=preload for your most essential fonts is regarded as the best overall font strategy for good CLS. The optional value won’t cause a re-layout when the web font is ready. At the same time, the preloaded font will likely meet the first paint, ensuring no layout shifts occur.
- Reserve space for dynamic content: Always allocate appropriate space beforehand for dynamically loaded content, such as ads or iframes. This will prevent content from pushing other elements around when it loads
Wrap up
Going through the long list of optimizations could be so overwhelming that it might make one think:
Do I really need to pass the Core Web Vitals assessment? Are they that impactful?
And the truth is – it’s not about the metrics themselves.
Yes, running a PSI test and seeing everything in green is always nice. And yes, they are part of Google’s ranking factors, so that you might see a boost in your SERP position.
But the actual value comes from the fact that passing your CWV directly translates into you providing a top-notch user experience.
And this leads to real-world results like:
- Increased conversion rates
- Decrease bounce rates
- Having a website that users love visiting
So, going back to the questions, we would say passing your Core Web Vitals is crucial.
But we would also agree that it’s not easy to deal with all the optimizations.
That’s why we created NitroPack.
NitroPack is a lightweight web performance solution that powers up more than 200,000 websites globally, allowing them to achieve excellent Core Web Vitals, performance scores, and user experience.
Thanks to its 50+ built-in page speed optimization features, NitroPack is the leader in Core Web Vitals optimization:
And the best part is – you can set up NitroPack in 3 minutes. No technical skills or coding required. Simply install the plugin, connect it to your website, and see your performance issues getting fixed.
