Web Performance Optimization: Core Web Vitals Guide

LCP (Largest Contentful Paint) — Loading
  Good: ≤ 2.5s | Poor: > 4.0s

INP (Interaction to Next Paint) — Interactivity
  Good: ≤ 200ms | Poor: > 500ms

CLS (Cumulative Layout Shift) — Visual Stability
  Good: ≤ 0.1 | Poor: > 0.25

<picture>
    <source srcset="hero.avif" type="image/avif">
    <source srcset="hero.webp" type="image/webp">
    <img src="hero.jpg" alt="Hero" width="1200" height="600"
         loading="lazy" decoding="async">
</picture>

<!-- LCP image: preload and eager load -->
<link rel="preload" as="image" href="hero.avif" type="image/avif">
<img src="hero.avif" fetchpriority="high" alt="Hero">

<link rel="preload" href="/fonts/inter.woff2" as="font"
      type="font/woff2" crossorigin>
<style>
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter.woff2') format('woff2');
    font-display: swap;
}
</style>

<script src="app.js" defer></script>
<script src="analytics.js" async></script>

const Dashboard = () => import('./pages/Dashboard.vue');

requestIdleCallback(() => {
    loadAnalytics();
    prefetchNextPage();
});

Route::middleware('cache.headers:public;max_age=3600;etag')
    ->get('/api/posts', [PostController::class, 'index']);

opcache.enable=1
opcache.memory_consumption=256
opcache.jit=1255
opcache.jit_buffer_size=100M