Edit post

1 min read · published

Title

Slug

/blog/core-web-vitals-wordpress

Excerpt

Content (Markdown)

## The plugin trap

The instinct when Lighthouse turns red is to install something. Three optimisation plugins later the site is slower, harder to debug and one update away from a white screen.

## Measure the right thing

LCP is almost always one of three elements: the hero image, an H1 inside a webfont, or a slider. Find yours before touching anything.

```js
new PerformanceObserver((list) => {
  const entry = list.getEntries().at(-1);
  console.log("LCP element:", entry.element, entry.startTime);
}).observe({ type: "largest-contentful-paint", buffered: true });
```

## Fix the hero image

Serve AVIF with a WebP fallback, set explicit dimensions, and preload it. Never lazy-load the LCP image — that is the most common self-inflicted regression on WordPress.

```html
<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">
```

## Kill render-blocking CSS

Inline the critical above-the-fold rules, defer the rest. On most themes this alone moves LCP by 600–900ms.

## Fonts

`font-display: swap` plus a self-hosted subset. Third-party font CDNs add a DNS lookup, a TLS handshake and a privacy question you do not need.

## Server side still matters

TTFB is the floor your LCP sits on. Object caching with Redis and PHP 8.3 on a tuned VPS routinely halves it versus shared hosting.