Core Web Vitals nel 2026: cosa fa davvero la differenza | Akousa

tsx

import Head from "next/head";
 
export default function HeroSection() {
  return (
    <>
      <Head>
        <link rel="preload" as="image" href="/images/hero-optimized.webp" type="image/webp" fetchPriority="high" />
      </Head>
      <section className="relative h-[600px]">
        <img
          src="/images/hero-optimized.webp"
          alt="Hero banner"
          width={1200}
          height={600}
          fetchPriority="high"
          decoding="sync"
        />
      </section>
    </>
  );
}

bash

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml;
gzip_min_length 1000;
gzip_comp_level 6;
 
# Brotli (se il modulo ngx_brotli è installato)
brotli on;
brotli_types text/plain text/css application/json application/javascript text/xml;
brotli_comp_level 6;

tsx

// MALE — causa layout shift
<img src="/photo.jpg" alt="Foto del team" />
 
// BENE — il browser riserva lo spazio prima che l'immagine si carichi
<img src="/photo.jpg" alt="Foto del team" width={800} height={450} />

tsx

// MALE — il genitore non ha dimensioni
<div className="relative">
  <Image src="/photo.jpg" alt="Team" fill />
</div>
 
// BENE — il genitore ha un aspect ratio esplicito
<div className="relative aspect-video w-full">
  <Image src="/photo.jpg" alt="Team" fill sizes="100vw" />
</div>

tsx

// Usando next/font — l'approccio migliore per Next.js
import { Inter } from "next/font/google";
 
const inter = Inter({
  subsets: ["latin"],
  display: "swap",
  // next/font genera automaticamente font di fallback con dimensioni regolate
  // Questo elimina il CLS dal cambio di font
});
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

tsx

// Banner cookie — riserva spazio in basso
function CookieBanner() {
  const [accepted, setAccepted] = useState(false);
 
  if (accepted) return null;
 
  return (
    // Il posizionamento fixed non causa CLS perché
    // non influenza il flusso del documento
    <div className="fixed bottom-0 left-0 right-0 z-50 bg-gray-900 p-4">
      <p>Usiamo i cookie. Conosci la procedura.</p>
      <button onClick={() => setAccepted(true)}>Accetta</button>
    </div>
  );
}

tsx

// Video embed senza CLS
function VideoEmbed({ src }: { src: string }) {
  return (
    <div className="w-full aspect-video bg-gray-900 rounded-lg overflow-hidden">
      <iframe
        src={src}
        className="w-full h-full"
        title="Video incorporato"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media"
        allowFullScreen
      />
    </div>
  );
}

tsx

function PostCardSkeleton() {
  return (
    <div className="animate-pulse rounded-lg border p-4">
      <div className="h-48 w-full rounded bg-gray-200" />
      <div className="mt-4 space-y-2">
        <div className="h-6 w-3/4 rounded bg-gray-200" />
        <div className="h-4 w-full rounded bg-gray-200" />
        <div className="h-4 w-5/6 rounded bg-gray-200" />
      </div>
    </div>
  );
}
 
function PostList() {
  const { data: posts, isLoading } = usePosts();
 
  if (isLoading) {
    return (
      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        {Array.from({ length: 6 }).map((_, i) => (
          <PostCardSkeleton key={i} />
        ))}
      </div>
    );
  }
 
  return (
    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
      {posts?.map((post) => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  );
}

tsx

async function processLargeDataset(items: DataItem[]) {
  const results: ProcessedItem[] = [];
 
  for (let i = 0; i < items.length; i++) {
    results.push(expensiveTransform(items[i]));
 
    // Ogni 10 elementi, cedi il controllo al browser
    // Questo permette alle interazioni utente in sospeso di essere elaborate
    if (i % 10 === 0 && "scheduler" in globalThis) {
      await scheduler.yield();
    }
  }
 
  return results;
}

tsx

import { useState, useTransition } from "react";
 
function SearchableList({ items }: { items: Item[] }) {
  const [query, setQuery] = useState("");
  const [filteredItems, setFilteredItems] = useState(items);
  const [isPending, startTransition] = useTransition();
 
  function handleSearch(e: React.ChangeEvent<HTMLInputElement>) {
    const value = e.target.value;
 
    // Questo aggiornamento è urgente — l'input deve riflettere il tasto immediatamente
    setQuery(value);
 
    // Questo aggiornamento NON è urgente — filtrare 10.000 elementi può aspettare
    startTransition(() => {
      const filtered = items.filter((item) => item.name.toLowerCase().includes(value.toLowerCase()));
      setFilteredItems(filtered);
    });
  }
 
  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleSearch}
        placeholder="Cerca..."
        className="w-full rounded border px-4 py-2"
      />
      {isPending && <p className="mt-2 text-sm text-gray-500">Filtrando...</p>}
      <ul className="mt-4 space-y-2">
        {filteredItems.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

tsx

import { useCallback, useRef } from "react";
 
function useDebounce<T extends (...args: unknown[]) => void>(fn: T, delay: number): T {
  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
  return useCallback(
    ((...args: unknown[]) => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
      timeoutRef.current = setTimeout(() => fn(...args), delay);
    }) as T,
    [fn, delay],
  );
}
 
// Utilizzo
function LiveSearch() {
  const [results, setResults] = useState<SearchResult[]>([]);
 
  const search = useDebounce(async (query: string) => {
    const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
    const data = await response.json();
    setResults(data.results);
  }, 300);
 
  return <input type="text" onChange={(e) => search(e.target.value)} placeholder="Cerca..." />;
}

tsx

// worker.ts
self.addEventListener("message", (event) => {
  const { data, operation } = event.data;
 
  switch (operation) {
    case "sort": {
      // Questo potrebbe richiedere 500ms per dataset grandi
      const sorted = data.sort((a: number, b: number) => a - b);
      self.postMessage({ result: sorted });
      break;
    }
    case "filter": {
      const filtered = data.filter((item: DataItem) => complexFilterLogic(item));
      self.postMessage({ result: filtered });
      break;
    }
  }
});

tsx

// useWorker.ts
import { useEffect, useRef, useCallback } from "react";
 
function useWorker() {
  const workerRef = useRef<Worker>();
 
  useEffect(() => {
    workerRef.current = new Worker(new URL("../workers/worker.ts", import.meta.url));
    return () => workerRef.current?.terminate();
  }, []);
 
  const process = useCallback((operation: string, data: unknown): Promise<unknown> => {
    return new Promise((resolve) => {
      if (!workerRef.current) return;
 
      workerRef.current.onmessage = (event) => {
        resolve(event.data.result);
      };
 
      workerRef.current.postMessage({ operation, data });
    });
  }, []);
 
  return { process };
}

tsx

// next.config.ts
import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  images: {
    formats: ["image/avif", "image/webp"],
    deviceSizes: [640, 750, 828, 1080, 1200],
    imageSizes: [16, 32, 48, 64, 96, 128, 256],
    minimumCacheTTL: 60 * 60 * 24 * 365, // 1 anno
  },
};
 
export default nextConfig;

tsx

// Immagine hero a larghezza piena
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  sizes="100vw"
  priority // Immagine LCP — non fare lazy load!
/>
 
// Immagine card in una griglia responsiva
<Image
  src="/card.jpg"
  alt="Card"
  width={400}
  height={300}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>

tsx

import { Inter, JetBrains_Mono } from "next/font/google";
 
const inter = Inter({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-inter",
});
 
const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-mono",
});
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${inter.variable} ${jetbrainsMono.variable}`}>
      <body className="font-sans">{children}</body>
    </html>
  );
}

tsx

import { Suspense } from "react";
import { PostList } from "@/components/blog/PostList";
import { Sidebar } from "@/components/blog/Sidebar";
import { PostListSkeleton } from "@/components/blog/PostListSkeleton";
import { SidebarSkeleton } from "@/components/blog/SidebarSkeleton";
 
export default function BlogPage() {
  return (
    <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
      <div className="lg:col-span-2">
        {/* Questo si carica velocemente — streammalo subito */}
        <h1 className="text-4xl font-bold">Blog</h1>
 
        {/* Questo richiede una query al database — streammalo quando è pronto */}
        <Suspense fallback={<PostListSkeleton />}>
          <PostList />
        </Suspense>
      </div>
 
      <aside>
        {/* La sidebar può caricarsi indipendentemente */}
        <Suspense fallback={<SidebarSkeleton />}>
          <Sidebar />
        </Suspense>
      </aside>
    </div>
  );
}

tsx

// app/blog/page.tsx
// Rivalida questa pagina ogni ora
 
export const revalidate = 300;
 
// app/tools/[slug]/page.tsx
// Queste pagine tool sono completamente statiche — genera al build time
 
export const dynamic = "force-static";
 
// app/api/search/route.ts
// Route API — non cachare mai
export const dynamic = "force-dynamic";

tsx

// components/analytics/WebVitals.tsx
"use client";
 
import { useEffect } from "react";
import { onCLS, onINP, onLCP, onFCP, onTTFB } from "web-vitals";
import type { Metric } from "web-vitals";
 
function sendToAnalytics(metric: Metric) {
  // Invia al tuo endpoint analytics
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating, // "good" | "needs-improvement" | "poor"
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType,
  });
 
  // Usa sendBeacon così non blocca lo scaricamento della pagina
  if (navigator.sendBeacon) {
    navigator.sendBeacon("/api/vitals", body);
  } else {
    fetch("/api/vitals", {
      body,
      method: "POST",
      keepalive: true,
    });
  }
}
 
export function WebVitals() {
  useEffect(() => {
    onCLS(sendToAnalytics);
    onINP(sendToAnalytics);
    onLCP(sendToAnalytics);
    onFCP(sendToAnalytics);
    onTTFB(sendToAnalytics);
  }, []);
 
  return null;
}

tsx

// Invece di GTM che carica tutto
// Carica solo ciò che ti serve, quando ti serve
 
export function AnalyticsScript() {
  return <script defer src="https://analytics.example.com/script.js" data-website-id="your-id" />;
}

tsx

"use client";
 
import { useEffect } from "react";
 
export function DeferredGTM({ containerId }: { containerId: string }) {
  useEffect(() => {
    // Aspetta fino a dopo il caricamento della pagina per iniettare GTM
    const timer = setTimeout(() => {
      const script = document.createElement("script");
      script.src = `https://www.googletagmanager.com/gtm.js?id=${containerId}`;
      script.async = true;
      document.head.appendChild(script);
    }, 3000); // 3 secondi di ritardo
 
    return () => clearTimeout(timer);
  }, [containerId]);
 
  return null;
}

tsx

"use client";
 
import { useState } from "react";
 
export function ChatButton() {
  const [loaded, setLoaded] = useState(false);
 
  function loadChat() {
    if (loaded) return;
 
    // Carica lo script del widget chat solo quando l'utente clicca
    const script = document.createElement("script");
    script.src = "https://chat-widget.example.com/widget.js";
    script.onload = () => {
      // Inizializza il widget dopo che lo script si è caricato
      window.ChatWidget?.open();
    };
    document.head.appendChild(script);
    setLoaded(true);
  }
 
  return (
    <button
      onClick={loadChat}
      className="fixed bottom-4 right-4 rounded-full bg-blue-600 p-4 text-white shadow-lg"
      aria-label="Apri chat"
    >
      {loaded ? "Caricamento..." : "Chatta con noi"}
    </button>
  );
}

tsx

// next.config.ts
import withBundleAnalyzer from "@next/bundle-analyzer";
 
const nextConfig = {
  // la tua configurazione
};
 
export default process.env.ANALYZE === "true" ? withBundleAnalyzer({ enabled: true })(nextConfig) : nextConfig;

tsx

// MALE — carica l'intero CSS della libreria su ogni pagina
import "some-library/dist/styles.css";
 
// MEGLIO — import dinamico così si carica solo sulle pagine che ne hanno bisogno
const SomeComponent = dynamic(
  () =>
    import("some-library").then((mod) => {
      // Il CSS viene importato dentro il componente dinamico
      import("some-library/dist/styles.css");
      return mod.SomeComponent;
    }),
  { ssr: false },
);

tsx

function RegexTester() {
  const [pattern, setPattern] = useState("");
  const [testString, setTestString] = useState("");
  const [results, setResults] = useState<RegexResult[]>([]);
  const [isPending, startTransition] = useTransition();
 
  function handlePatternChange(value: string) {
    setPattern(value); // Urgente: aggiorna l'input
 
    startTransition(() => {
      // Non urgente: calcola le corrispondenze
      try {
        const regex = new RegExp(value, "g");
        const matches = [...testString.matchAll(regex)];
        setResults(
          matches.map((m) => ({
            match: m[0],
            index: m.index ?? 0,
            groups: m.groups,
          })),
        );
      } catch {
        setResults([]);
      }
    });
  }
 
  return (
    <div>
      <input
        value={pattern}
        onChange={(e) => handlePatternChange(e.target.value)}
        className={isPending ? "opacity-70" : ""}
      />
      {/* rendering dei risultati */}
    </div>
  );
}

Metrica	Cosa misura	Buono	Da migliorare	Scarso
LCP	Performance di caricamento	≤ 2.5s	2.5s – 4.0s	> 4.0s
CLS	Stabilità visiva	≤ 0.1	0.1 – 0.25	> 0.25
INP	Reattività	≤ 200ms	200ms – 500ms	> 500ms

Perché i Core Web Vitals contano ancora nel 2026

LCP: quella che conta di più

Passo 1: trova il tuo vero elemento LCP

Passo 2: precarica la risorsa LCP

Passo 3: elimina le risorse che bloccano il rendering

Passo 4: tempo di risposta del server (TTFB)

CLS: morte per mille spostamenti

I soliti colpevoli

INP: il nuovo che morde

Cosa causa un INP alto

Spezzare i long task con scheduler.yield()

useTransition per aggiornamenti non urgenti

Debouncing degli handler di input

Web Worker per calcoli pesanti

Le vittorie specifiche di Next.js

next/image — ma configurato bene

next/font — font a zero layout shift

Streaming con Suspense

Configurazione del segmento di route

Strumenti di misurazione: fidati dei dati, non dei tuoi occhi

Lo stack di misurazione che uso

La lista nera della cascata

Google Tag Manager (GTM)

Widget di chat

JavaScript inutilizzato

CSS che blocca il rendering

Una storia di ottimizzazione reale

Il punto di partenza

L'indagine

Le correzioni

I risultati

La checklist

LCP

CLS

INP

Generale

Considerazioni finali

Articoli correlati

Regex Cheat Sheet 2026 — Regular Expressions Made Simple

How to Compress Images Without Losing Quality: The Complete 2026 Guide