Here, we will share the 10 most common mistakes that affect your core web Vitals. Moreover, we will share their potential solutions to help you get rid of them. After reading this article, you can improve your website's core web vitals. Let’s quickly start with the first issue!

TTFB Issues

TTFB stands for time to first bite. It means the time required to establish a connection. The connection here means the time between the user’s HTTP request and the server’s response. A slow TTFB means the website loads quickly. Longer TTFB issues commonly cause the largest contentful paint (LCP), a key metric of core web vitals.

Following are some of the most effective techniques to improve TTFB score

  • Use a Fast Web Host
  • Use Caching
  • Use GZIP Compression
  • Optimize Your Database
  • Use a CDN
  • Keep WordPress, Plugins, and Themes Updated
  • Reduce Queries
  • Use a Premium DNS Service
  • Use the latest PHP version

Render-Blocking Javascript And CSS

The second issue that usually comes up in core web Vitals assessment is render-blocking Javascript and CSS. These prevent the browser from displaying content until these files are fully loaded and processed. It can negatively affect both LCP and FID.

Follow the steps below to fix this issue

  • Identify your render-blocking resources.
  • Don't use CSS imports.
  • Load conditional CSS with media attributes.
  • Defer non-critical CSS.
  • Use the defer and async attributes to eliminate render-blocking JavaScript.
  • Find and remove unused CSS and JavaScript.
  • Split code into smaller bundles.
  • Minify CSS and JavaScript
  • Load custom fonts locally

Unoptimized Images

Images cover a large portion of a website’s total load size. Uncompressed or improperly sized photos can slow down your website. It is among the common core web vitals issues.

Following are some practical tips to optimize your images

  • Use Modern Image Formats like WebP
  • Compress Images
  • Optimize the HTML image element for speed with attributes like SRC, width and height, alt, secret, decoding, lazy load, fetch priority
  • Ensure the image is downloaded as fast as possible
  • Eliminate layout Shift
  • Protect the main thread

It is an essential part of site speed optimization.

Overuse Of Third-Party Code

The 4th common cause of failed core web vitals test is the overuse of third-party scripts. These could be ad networks, tracking tools, social media widgets or others. These scripts are loaded from external servers and are usually less optimized than your resources.

reshepe - Overuse Of Third-Party Code

To avoid this issue, you can use the following tips

  • Remove unnecessary scripts.
  • Load Third-Party Scripts Asynchronously
  • Use a Tag Manager like Google Tag Manager to control and optimize third-party tags
  • Use "async" and "defer" to prevent scripts from blocking the DOM
  • Avoid "document. write()" scripts, as they can't load asynchronously
  • Self-host third-party scripts and update them regularly to prevent issues
  • Use library like partytown to load third-party scripts outside of the main thread

Inefficient Web Fonts

Another problem we have in core web vitals assessment is inefficient web fonts. Excessively using custom fonts and not optimizing them can delay text rendering and cause layout shifts. It can affect your website loading time and hurt both LCP and CLS.

Follow the instructions below to solve this issue

  • Try to use system fonts as much as possible
  • Preload essential fonts with ""
  • Limit font weights and styles to reduce load
  • Use "font-display: swap" to avoid invisible text

These changes are essential to improve your core web vitals SEO.

Client-Side Rendering

CSR frameworks require the browser to execute JavaScript to build the page fully. It may delay content display and affect your website's core web vitals.

Following are some practical solutions for this issue

  • Use Server-Side Rendering (SSR) to improve LCP and FID
  • Consider Static Site Generation (SSG) for faster load times
  • Optimize hydration in Client-Side Rendering (CSR) to display static content immediately

Large Javascript Bundles

Large javascript bundles slow down your website interactivity. A browser has to download, analyze, and execute the Javascript files when a user opens it. The larger the file, the more time it takes for the browser to download and execute. It eventually slows the user experience and affects the FID score.

reshepe - Large Javascript Bundles

Here is how to fix the large javascript bundles issue

  • Use code-splitting to load only needed JavaScript.
  • Lazy load of non-essential JavaScript.
  • Minify JavaScript to reduce file sizes.

It is essential for passing core web vitals assessment.

Sudden Layout Changes

Layout shift means the sudden changes in page content when it's loading. It could be due to ads, banners, late-loading images and several other reasons. This can increase your CLS score and harm core web vitals.

Here is how you can reduce sudden layout shifts

  • Specify size attributes for images and videos to avoid layout shifts.
  • Avoid inserting content above existing content unless it's triggered by user interaction.
  • Use transitions and animations to smooth page changes and prevent sudden shifts.
  • Plan for ad placements to understand their impact on the layout.

Using Heavy Themes

Themes are also one of the common reasons for slow website speed. Using unoptimized heavy themes with a lot of features, widgets, and styles that your websites don't even need can hurt your core web vitals.

Here are potential solutions for this issue

  • Choose lightweight themes optimized for performance
  • Remove unnecessary features like widgets and sliders
  • Use modular themes to load only needed components
  • Only use premium or specially developed themes by developers

Not Prioritizing Above-The-Fold Content

Not prioritizing the loading of above-the-fold content can harm your core web vitals seo. The above-the-fold content means the content that is visible on the page before loading. It should load as fast as possible. A quick loading above-the-fold content can significantly reduce the bounce rate.

reshepe - Not Prioritizing Above-The-Fold Content

Here are some tips to optimize above-the-fold content

  • Prioritize loading above-the-fold content to improve speed and user experience.
  • Lazy load below-the-fold content to focus resources on visible content first.
  • Inline critical CSS to reduce render blocking for key content.
  • Preload key resources like fonts and images for faster above-the-fold rendering.
  • Minimize JavaScript and CSS blocking to ensure above-the-fold content loads quickly.

Hopefully, you will understand why your website fails the core web vitals test. Implementing the shared solutions will boost your core web vitals score. These are practical and effective techniques if implemented correctly.

How Can reshepe Help To Improve Your Website's Core Web Vitals?

reshepe is an online tool that provides a detailed core web vitals analysis. It checks several metrics, including load times and responsiveness. It finds errors and problems and helps you in getting rid of them. You can integrate it with WordPress, JavaScript, Vue and React. It will analyze the following things:

  • Web vitals include first and largest contentful paint, cumulative layout shift, time to first bite and interaction to next paint.
  • You can also view data from the past in real-time.
  • You can view data for specific routes and countries as well.

In Short, it will improve your website speed and user experience, which will eventually help you rank higher and gain more traffic.

contact us now to see how we can help you

bad performance ends here
get started with reshepe today

on this page

TTFB IssuesRender-Blocking Javascript And CSSUnoptimized ImagesOveruse Of Third-Party CodeInefficient Web FontsClient-Side RenderingLarge Javascript BundlesSudden Layout ChangesUsing Heavy ThemesNot Prioritizing Above-The-Fold ContentHow Can reshepe Help To Improve Your Website's Core Web Vitals?