Core Web Vitals

Core Web Vitals are a set of user-centric performance metrics defined by Google to measure real-world user experience on the web. These metrics focus on loading performance, interactivity, and visual stability.

Largest Contentful Paint (LCP)

Measures loading performance. It marks the time when the largest visible content element (image, video, or text block) is rendered.

  • Good: ≤ 2.5s
  • Needs Improvement: 2.5s – 4.0s
  • Poor: > 4.0s

Interaction to Next Paint (INP)

Measures responsiveness. It evaluates how quickly a page responds to user interactions.

  • Good: ≤ 200ms
  • Needs Improvement: 200ms – 500ms
  • Poor: > 500ms

Cumulative Layout Shift (CLS)

Measures visual stability. It tracks unexpected layout shifts during page load.

  • Good: ≤ 0.1
  • Needs Improvement: 0.1 – 0.25
  • Poor: > 0.25

Measuring Web Performance

Performance can be measured using both lab tools and real user monitoring (RUM).

Browser Performance API

// Measure Largest Contentful Paint (LCP)
const observer = new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP:', lastEntry.startTime);
});

observer.observe({ type: 'largest-contentful-paint', buffered: true });

// Measure Cumulative Layout Shift (CLS)
let clsValue = 0;

const clsObserver = new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
    }
  }
  console.log('CLS:', clsValue);
});

clsObserver.observe({ type: 'layout-shift', buffered: true });

Using Web Vitals Library

import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP((metric) => {
  console.log('LCP:', metric.value);
});

onINP((metric) => {
  console.log('INP:', metric.value);
});

onCLS((metric) => {
  console.log('CLS:', metric.value);
});

Using Lighthouse (CLI)

npm install -g lighthouse

lighthouse https://example.com --view

Server-side Logging Example (Node.js)

app.post('/metrics', (req, res) => {
  const { name, value } = req.body;

  console.log(`Metric: ${name}, Value: ${value}`);

  res.sendStatus(200);
});

Optimize Core Web Vitals

Improving LCP

  • Optimize images (compression, modern formats like WebP)
  • Use responsive images
  • Reduce server response time
  • Preload critical resources
<link rel="preload" as="image" href="/images/hero.webp">

<img 
  src="/images/hero.webp" 
  alt="Hero Image" 
  width="800" 
  height="400" 
  loading="eager">

Improving INP

  • Minimize JavaScript execution time
  • Break long tasks into smaller chunks
  • Use requestIdleCallback or setTimeout
function processLargeTask(items) {
  function processChunk(start) {
    const chunkSize = 50;

    for (let i = start; i < start + chunkSize && i < items.length; i++) {
      // Process item
    }

    if (start + chunkSize < items.length) {
      setTimeout(() => processChunk(start + chunkSize), 0);
    }
  }

  processChunk(0);
}
  • Use passive event listeners
document.addEventListener('scroll', handleScroll, { passive: true });

Improving CLS

  • Always define width and height for images and videos
  • Reserve space for ads and embeds
  • Avoid inserting content above existing content
<img src="/images/banner.jpg" width="600" height="300" alt="Banner">

.ad-slot {
  width: 100%;
  height: 250px;
}

SEO

Overview of SEO

Search Engine Optimization (SEO) is the process of improving a website’s visibility in search engine results, primarily on platforms like Google.

SEO involves optimizing content, structure, and technical aspects of a website to ensure it is easily discoverable, crawlable, and relevant to search queries.

Key Components of SEO

On-Page SEO

  • Optimize title tags and meta descriptions
<title>Best WordPress Development Practices</title>
<meta name="description" content="Learn best practices for WordPress development including performance, security, and SEO.">
  • Use semantic HTML
<article>
  <h1>Understanding Core Web Vitals</h1>
  <p>...</p>
</article>
  • Proper heading hierarchy
<h1>Main Topic</h1>
<h2>Subtopic</h2>
<h3>Details</h3>

Technical SEO

  • Improve site speed (Core Web Vitals)
  • Ensure mobile responsiveness
  • Use HTTPS
  • Optimize crawlability
# robots.txt
User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php

<!-- sitemap.xml -->
<url>
  <loc>https://example.com/</loc>
  <lastmod>2026-04-15</lastmod>
</url>

Structured Data

Use schema markup to help search engines understand content.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Core Web Vitals Guide",
  "author": {
    "@type": "Person",
    "name": "Ashish Verma"
  }
}
</script>

Off-Page SEO

  • Backlinks from authoritative websites
  • Social signals
  • Brand mentions

Accessibility and SEO

Accessible websites often perform better in search rankings.

<img src="chart.png" alt="Performance comparison chart showing LCP improvement">

<button aria-label="Open navigation menu">☰</button>