Web Perf

Automate and integrate Web Performance tools for faster, optimized website and app delivery

Web Perf is a community skill for optimizing web application performance, covering Core Web Vitals measurement, critical rendering path optimization, resource loading strategies, JavaScript execution profiling, and performance budgeting patterns.

What Is This?

Overview

Web Perf provides patterns for measuring and improving web application loading and runtime performance. It covers Core Web Vitals including Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift measurement, critical rendering path optimization that prioritizes above-the-fold content loading, resource loading strategies with preload, prefetch, lazy loading, and priority hints for controlling load order, JavaScript execution profiling to identify long tasks that block the main thread, and performance budgeting that sets limits on bundle size, load time, and third-party script impact. The skill enables developers to build fast web applications that score well on real user metrics and search ranking signals.

Who Should Use This

This skill serves web developers optimizing page load speed and Core Web Vitals scores, teams implementing performance monitoring and budgeting in CI/CD pipelines, and engineers diagnosing runtime performance issues with browser DevTools.

Why Use It?

Problems It Solves

Large JavaScript bundles block initial rendering and increase time to interactive. Layout shifts from dynamically loaded content degrade user experience and CLS scores. Unoptimized images and fonts add significant weight to page loads. Third-party scripts execute on the main thread competing with application code for CPU time.

Core Highlights

Web Vitals measurement tracks LCP, INP, and CLS in real user sessions. Resource hints control preload and priority for critical assets. Code splitting defers non-critical JavaScript with dynamic imports. Performance Observer API monitors long tasks and layout shifts programmatically.

How to Use It?

Basic Usage

<!DOCTYPE html>
<html>
<head>
  <!-- Preload critical assets -->
  <link rel="preload"
    href="/fonts/inter.woff2"
    as="font" type="font/woff2"
    crossorigin />
  <link rel="preload"
    href="/hero.webp"
    as="image"
    fetchpriority="high" />

  <!-- Inline critical CSS -->
  <style>
    .hero {
      height: 400px;
      background:
        url(/hero.webp)
        center/cover;
    }
    .content {
      max-width: 800px;
      margin: 0 auto;
    }
  </style>

  <!-- Defer non-critical CSS -->
  <link rel="stylesheet"
    href="/full.css"
    media="print"
    onload="this.media="
    + "'all'" />
</head>
<body>
  <div class="hero"></div>
  <div class="content">
    <h1>Welcome</h1>
  </div>

  <!-- Defer non-critical JS -->
  <script type="module"
    src="/app.js"></script>
</body>
</html>

Real-World Examples

// Core Web Vitals monitoring
import { onLCP, onINP,
  onCLS } from 'web-vitals';

function sendMetric(metric) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    id: metric.id,
    page: location.pathname,
  });

  if (navigator.sendBeacon) {
    navigator.sendBeacon(
      '/api/vitals', body);
  }
}

onLCP(sendMetric);
onINP(sendMetric);
onCLS(sendMetric);

// Long task observer
const observer =
  new PerformanceObserver(
    (list) => {
      for (const entry
          of list.getEntries()) {
        if (entry.duration > 50) {
          console.warn(
            `Long task: `
            + `${entry.duration}ms`,
            entry);
        }
      }
    });

observer.observe({
  type: 'longtask',
  buffered: true,
});

// Lazy load below-fold images
document.querySelectorAll(
  'img[data-src]')
  .forEach((img) => {
    img.loading = 'lazy';
    img.src =
      img.dataset.src;
  });

Advanced Tips

Use fetchpriority attribute to boost critical images and lower priority for off-screen resources. Implement requestIdleCallback for deferring non-urgent work to idle periods. Set up Lighthouse CI in your pipeline to fail builds that exceed performance budgets.

When to Use It?

Use Cases

Optimize a marketing site to achieve good Core Web Vitals scores for search ranking benefits. Implement real user monitoring that tracks performance metrics in production. Set up CI performance budgets that prevent bundle size regressions.

Important Notes

Requirements

Browser DevTools or Lighthouse for performance analysis. web-vitals library for real user metric collection. Build tooling with code splitting support for bundle optimization.

Usage Recommendations

Do: measure real user metrics with web-vitals rather than relying solely on synthetic lab tests. Preload fonts and hero images that impact LCP. Use native lazy loading for images below the fold.

Don't: preload everything which defeats the purpose of prioritization. Add third-party scripts to the head without defer or async attributes. Optimize based on assumptions without first profiling to identify actual bottlenecks.

Limitations

Lab metrics from Lighthouse may differ from field data collected from real users. INP measurement requires user interaction which makes it harder to test in CI. Third-party scripts are often outside developer control making their performance impact difficult to mitigate. Performance gains on fast connections may not reflect improvements experienced by users on slow mobile networks.

More Skills You Might Like

Explore similar skills to enhance your workflow