Core Web Vitals pro stránky PHP: jak opravit LCP, INP a CLS

Stránky Core Web Vitals pro PHP nejsou tématem pouze pro front-end. Pomalá stránka PHP může strávit sekundu pouze vytvářením HTML a žádná optimalizace obrázků to neobnoví. Zároveň velmi rychlý server nepomůže, pokud 1,5 MB velký obrázek hrdiny blokuje největší nátěr. Zde je návod, jak přistupujeme k oběma stranám na našich vlastních stránkách PHP (integrono.com provozuje PHP-FPM za nginx a Cloudflare) a na klientských projektech.

Co měří Core Web Vitals

• LCP ( Largest Contentful Paint): když je vykreslen největší viditelný prvek (obvykle obrázek hrdiny nebo blok nadpisu). Dobré je 2,5 sekundy nebo méně.
• INP ( Interaction to Next Paint): jak rychle stránka vizuálně reaguje po kliknutí, klepnutí a stisknutí kláves během celé návštěvy. Dobré je 200 ms nebo méně.
• CLS ( Cumulative Layout Shift): kolik obsahu přeskakuje při načítání. Dobré je 0,1 nebo méně.

Google je vyhodnocuje na terénních datech od skutečných uživatelů Chrome na 75. percentilu, zvlášť pro mobily a počítače. To znamená, že jedna pomalá šablona nebo jedna pomalá země může selhat celé skupině. Laboratorní nástroje jako Lighthouse slouží k ladění, nikoli ke konečnému skóre.

Krok 1. Změřte správnou cestu

1. Otevřete přehled Core Web Vitals v Google Search Console a zjistěte, které skupiny adres URL selžou a pro kterou metriku.
2. Zkontrolujte PageSpeed Insights jednu adresu URL z každé neúspěšné skupiny. Počítá se horní blok „polních dat“; blok Lighthouse níže je laboratorní test, který vysvětluje proč.
3. Použijte panel Výkon v Chrome DevTools se 4x zpomalením CPU a „Slow 4G“ k reprodukci typického mobilního zážitku.
4. Pro průběžné monitorování shromažďujte data skutečných uživatelů pomocí knihovny JavaScript web-vitals a odešlete je do své analýzy.

<script type="module">
  import {onLCP, onINP, onCLS} from 'https://unpkg.com/web-vitals@4?module';
  const send = (m) => navigator.sendBeacon('/vitals', JSON.stringify({
    name: m.name, value: m.value, id: m.id, url: location.pathname
  }));
  onLCP(send); onINP(send); onCLS(send);
</script>

Krok 2. Nejprve opravte dobu odezvy serveru ( TTFB).

LCP zahrnuje čas před příchodem prvního bajtu. Pokud vygenerování vašeho HTML trvá 800 ms, utratili jste již třetinu rozpočtu. Na stránkách PHP jsou obvyklé páky:

• Povolte OPcache a ujistěte se, že je dostatečně velká, aby pojala všechny skripty. Bez toho PHP překompiluje soubory na každý požadavek.
• Vylaďte PHP-FPM. Příliš málo požadavků ve frontě pracovníků, příliš mnoho vyčerpávající paměti. Podívejte se na stavovou stránku PHP-FPM, kde najdete „frontu naslouchání“ a „dosaženo maximálního počtu dětí“.
• Ukládejte do mezipaměti celé stránky pro anonymní návštěvníky (nginx fastcgi_cache, mezipaměť odpovědí Laravel nebo pravidla mezipaměti Cloudflare) a ukládejte do mezipaměti fragmenty nebo výsledky dotazů pomocí Redis.
• Opravte pomalé dotazy. Zapněte protokol pomalých dotazů, vyhledejte vzory N+1 a přidejte indexy. Stránka, která spustí 120 dotazů, je pomalá bez ohledu na verzi PHP.
• Udržujte PHP aktuální. Novější verze PHP jsou rychlejší a využívají méně paměti.

# php.ini (production)
opcache.enable=1
opcache.memory_consumption=256
opcache.max_accelerated_files=20000
opcache.validate_timestamps=0   ; reload php-fpm on each deploy

# php-fpm pool
pm = dynamic
pm.max_children = 20
pm.start_servers = 4
pm.min_spare_servers = 2
pm.max_spare_servers = 6
pm.max_requests = 500

Nastavte pm.max_children ze skutečné paměti: vydělte paměť, kterou můžete dát PHP, průměrnou velikostí pracovního procesu (zkontrolujte pomocí ps). S validate_timestamps=0 nezapomeňte znovu načíst PHP-FPM po každém nasazení, jinak starý kód zůstane v paměti.

Na úrovni webového serveru povolte HTTP/2 nebo HTTP/3, Brotli nebo gzip a dlouhodobé hlavičky mezipaměti pro statické soubory:

location ~* \.(?:css|js|webp|avif|jpg|png|svg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}
gzip on;
gzip_types text/css application/javascript application/json image/svg+xml;

Použijte názvy souborů s verzí nebo dotaz ?v= na základě času úpravy souboru, aby „nezměnitelný“ nikdy nesloužil zastaralým aktivům.

Krok 3. Opravte prvek LCP

Najděte prvek LCP v PageSpeed Insights nebo na panelu Výkon nástroje DevTools. Na většině obsahových stránek je to obrázek hrdiny. Pak:

• Nebuďte líní-nakládejte to. loading="lazy" na obrázku LCP to zdržuje. Místo toho použijte fetchpriority="high".
• Podávejte správnou velikost. Obrázek o velikosti 2400 px pro slot o velikosti 900 px plýtvá bajty. Použijte srcset a sizes.
• Použijte WebP nebo AVIF. Typické úspory jsou 30 až 60 procent oproti JPEG v podobné kvalitě.
• Vyhněte se řetězům. Obrázek nastavený přes CSS pozadí nebo vložený JavaScriptem je objeven pozdě. Vložte jej do HTML jako <img>.
• Předpřipojte nebo sami hostujte zdroje třetích stran, na kterých závisí LCP (fonty, image CDN).

<img src="/images/hero-1200.webp"
     srcset="/images/hero-640.webp 640w, /images/hero-1200.webp 1200w"
     sizes="(max-width: 1040px) 92vw, 960px"
     width="1200" height="630"
     alt="Descriptive alt text"
     decoding="async" fetchpriority="high">

Toto je vzor, který článek na tomto blogu používá: dvě velikosti WebP, explicitní rozměry a vysoká priorita načítání pro hrdinu.

Krok 4. Odstraňte posuny rozvržení ( CLS)

• U obrázků, videí a prvků iframe vždy nastavte width a height (nebo aspect-ratio v CSS), aby si prohlížeč vyhradil místo.
• Vyhraďte prostor pro bannery, upozornění na soubory cookie a reklamy. Vložte je do nádoby s pevnou minimální výškou místo toho, abyste obsah po naložení stlačili dolů.
• Fonty: použijte font-display: swap nebo optional, předem načtěte soubor hlavního fontu a podnastavte jej. Vyberte záložní písmo s podobnými metrikami.
• Nevkládejte obsah nad existující obsah, pokud jej nespustil uživatel.
• Animujte pomocí transform a opacity, nikoli pomocí vlastností, které mění rozvržení (top, height).

Krok 5. Zlepšení INP: méně JavaScriptu v hlavním vláknu

INP je nejnovější metrika a vývojáři PHP ji zanedbávají, protože ji server přímo neovlivňuje. Příčiny jsou v prohlížeči: dlouhé úlohy z velkých balíčků, náročné skripty třetích stran (analytika, widgety chatu, správci značek) a obslužné nástroje, které vykonávají příliš mnoho práce synchronně.

• Audit skriptů třetích stran. Odstraňte to, co nikdo nepoužívá, zbytek naložte s defer nebo po první interakci.
• Rozdělte dlouhé úkoly. Rozdělte práci na části pomocí requestIdleCallback, setTimeout nebo rozhraní Scheduler API; přesunout náročné výpočty na Web Worker.
• Udržujte DOM malý. Tisíce uzlů zpomalují každou aktualizaci.
• Vyhněte se nuceným synchronním rozvržením ve smyčkách (střídavě čtení a zápis vlastností rozvržení).
• Před zahájením pomalé práce ukažte okamžitou zpětnou vazbu (stisknutý stav nebo rotátor).

Krok 6. Chraňte jej v procesu nasazení

Výkon tiše klesá: nová značka, těžší hrdina, další dotaz na domovské stránce. Přidejte Lighthouse CI nebo plánovanou kontrolu PageSpeed API pro svých pět nejdůležitějších šablon, nastavte rozpočty ( LCP, celkovou velikost JS, váhu obrázku) a upozorněte, když jsou překročeny. Porovnejte TTFB před a po každém vydání; pokud skočí, příčinou je téměř vždy dotaz nebo mezipaměť, která již nenarazí.

Realistický řád práce

1. Změřte data pole a identifikujte skupiny URL, které selhávají.
2. Povolte OPcache, zkontrolujte nastavení PHP-FPM, přidejte mezipaměť celé stránky pro anonymní provoz.
3. Opravte obrázky hrdinů: formát, velikost, priorita, rozměry.
4. Vyhraďte místo pro vše, co se načte pozdě.
5. Snížit a odložit JavaScript; odstranit nepoužívané třetí strany.
6. Změřte znovu po 28 dnech, protože data v terénu jsou pohyblivé okno.

Očekávejte, že se vylepšení ve Search Console budou objevovat postupně: přehled používá data zhruba za posledních 28 dní, takže dnes odeslaná oprava je plně viditelná až po měsíci.

Jak můžeme pomoci

Pracujeme na výkonu na projektech PHP a Laravel jako součást technického SEO zapojení a jako jednorázové ladění: ukládání do mezipaměti, dotazy, obrázky a front-end opravy dodávané v kódu. Pokud chcete vědět, která z výše uvedených změn by se na vašem webu vyplatila, objednejte si konzultaci nebo analýzu serveru. Chcete-li získat širší kontrolní seznam týkající se procházení a indexování, přečtěte si náš technický kontrolní seznam auditu SEO.