Articles
Drupal

Core Web Vitals in Drupal — common problems and how to fix them

Google measures three performance metrics — time to load the largest element, layout stability and response time — and uses them in search ranking. Drupal sites have specific causes and solutions for each.

Core Web Vitals are three performance metrics established by Google, measured using real user data. They are not only a technical benchmark — they affect search ranking.

The three metrics

LCP — Largest Contentful Paint measures the time until the largest visible element appears on screen (typically an image or heading). The target is under 2.5 seconds.

CLS — Cumulative Layout Shift measures layout instability — how much elements on the page shift during loading. An example: the user is about to click a button, but an advertisement loads first and pushes the button down. The target is under 0.1.

INP — Interaction to Next Paint measures the time until the page responds to a user action (click, typing). It replaced FID in 2024. The target is under 200 milliseconds.

Common issues on Drupal sites

LCP issues

The most common LCP problem on Drupal sites is large images. Editors upload original images without compression — Drupal does automatically create size variants, but:

  • the loading="lazy" attribute is sometimes applied to the LCP image as well, which slows exactly that image;
  • WebP format has not been configured;
  • server-side caching is not enabled, so every visit regenerates the page.

CLS issues

Layout shifts typically come from external elements that load asynchronously:

  • advertising blocks with no reserved space;
  • fonts that load after text and change character spacing;
  • Drupal's Toolbar, which in admin view adds a bar at the top of the page.

INP issues

INP problems are more often related to JavaScript. Drupal itself adds many scripts to the page — modules, libraries, initialisation scripts. When these block the main thread, INP problems result.

How to improve in a Drupal context

Images: Drupal Image Styles and WebP support are built in but must be configured. The LCP image also needs to load early (<link rel="preload">).

Caching: Drupal Internal Page Cache and Dynamic Page Cache must be enabled. Varnish or other server-side caches provide additional speed.

JavaScript: Loading scripts with the defer or async attribute, minimising third-party scripts and disabling unused modules.

Server speed: TTFB (time to first byte) directly affects LCP. PHP-FPM configuration, query optimisation and server location all play a role.

How to measure

Google Search Console shows Core Web Vitals data based on real traffic. PageSpeed Insights provides lab data and specific recommendations. Both are free.

The Drupal platform assessment does not measure Core Web Vitals directly (that requires browser-based measurement), but shows several server-side factors that affect performance. For a deeper performance analysis, the audit and testing service is the right step.

Kaido Toomingas Kaido Toomingas WebPro Company OÜ

Need Drupal help?

If the article describes your situation, you do not have to read everything first. A real person will help you choose the next step.

Contact us