Core Web Vitals pre stránky PHP: ako opraviť LCP, INP a CLS

Core Web Vitals pre stránky PHP nie sú len front-end témou. Pomalá stránka PHP môže stráviť sekundu len vytváraním HTML a žiadna optimalizácia obrázkov to neobnoví. Zároveň veľmi rýchly server nepomôže, ak 1,5 MB obrázok hrdinu blokuje najväčšiu farbu. Takto pristupujeme k obom stranám na našich vlastných stránkach PHP (integrono.com prevádzkuje PHP-FPM za nginx a Cloudflare) a na klientskych projektoch.

Čo meria Core Web Vitals

• LCP ( Largest Contentful Paint): keď je vykreslený najväčší viditeľný prvok (zvyčajne obrázok hrdinu alebo blok nadpisu). Dobré je 2,5 sekundy alebo menej.
• INP ( Interaction to Next Paint): ako rýchlo stránka vizuálne reaguje po kliknutí, ťuknutí a stlačení klávesov počas celej návštevy. Dobré je 200 ms alebo menej.
• CLS ( Cumulative Layout Shift): koľko obsahu preskočí pri načítavaní. Dobré je 0,1 alebo menej.

Google ich vyhodnocuje na terénnych údajoch od skutočných používateľov prehliadača Chrome na 75. percentile, oddelene pre mobilné zariadenia a počítače. To znamená, že jedna pomalá šablóna alebo jedna pomalá krajina môže zlyhať celú skupinu. Laboratórne nástroje ako Lighthouse slúžia na ladenie, nie na konečné skóre.

Krok 1. Zmerajte správnym spôsobom

1. Otvorte prehľad Core Web Vitals v Google Search Console a zistite, ktoré skupiny webových adries zlyhali a pre ktorú metriku.
2. V PageSpeed Insights skontrolujte jednu adresu URL z každej neúspešnej skupiny. Najvyšší blok "údaje poľa" je to, čo sa počíta; blok Lighthouse nižšie je laboratórny test, ktorý vysvetľuje prečo.
3. Použite panel Výkon v nástrojoch Chrome DevTools so 4-násobným spomalením CPU a „Slow 4G“ na reprodukciu typického mobilného zážitku.
4. Na priebežné monitorovanie zbierajte údaje skutočných používateľov pomocou knižnice JavaScript web-vitals a odošlite ich do svojej 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. Najprv opravte čas odozvy servera ( TTFB).

LCP obsahuje čas pred príchodom prvého bajtu. Ak generovanie kódu HTML trvá 800 ms, minuli ste už tretinu rozpočtu. Na stránkach PHP sú obvyklé páky:

• Povoľte OPcache a uistite sa, že je dostatočne veľká na uloženie všetkých skriptov. Bez neho PHP prekompiluje súbory pri každej požiadavke.
• Vylaďte PHP-FPM. Príliš málo požiadaviek v rade pracovníkov, príliš veľa vyčerpanej pamäte. Sledujte stavovú stránku PHP-FPM, kde nájdete informácie o „fronte počúvania“ a „maximálnom dosiahnutom počte detí“.
• Uložte do vyrovnávacej pamäte celé stránky pre anonymných návštevníkov (nginx fastcgi_cache, vyrovnávaciu pamäť odpovedí Laravel alebo pravidlá vyrovnávacej pamäte Cloudflare) a uložte do vyrovnávacej pamäte fragmenty alebo výsledky dotazov pomocou Redis.
• Opravte pomalé dopyty. Zapnite denník pomalých dopytov, vyhľadajte vzory N+1 a pridajte indexy. Stránka, ktorá spúšťa 120 dotazov je pomalá bez ohľadu na verziu PHP.
• Udržujte PHP aktuálne. Novšie verzie PHP sú rýchlejšie a využívajú menej pamäte.

# 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 zo skutočnej pamäte: vydeľte pamäť, ktorú môžete poskytnúť PHP, priemernou veľkosťou pracovného procesu (skontrolujte pomocou ps). S validate_timestamps=0 nezabudnite znova načítať PHP-FPM po každom nasadení, inak starý kód zostane v pamäti.

Na úrovni webového servera povoľte HTTP/2 alebo HTTP/3, Brotli alebo gzip a hlavičky pre statické súbory s dlhou životnosťou:

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žite názvy súborov s verziou alebo dotaz ?v= na základe času úpravy súboru, aby „nezmeniteľný“ nikdy neslúžil zastaraným aktívam.

Krok 3. Opravte prvok LCP

Nájdite prvok LCP v PageSpeed Insights alebo na paneli Výkon v nástrojoch DevTools. Na väčšine obsahových stránok je to obrázok hrdinu. potom:

• Nezaťažujte ho lenivo. loading="lazy" na obrázku LCP to oneskoruje. Namiesto toho použite fetchpriority="high".
• Podávajte správnu veľkosť. Obrázok s rozlíšením 2 400 pixelov pre slot s veľkosťou 900 pixelov míňa bajty. Použite srcset a sizes.
• Použite WebP alebo AVIF. Typické úspory sú 30 až 60 percent oproti JPEG v podobnej kvalite.
• Vyhnite sa reťazcom. Obrázok nastavený cez CSS pozadie alebo vložený JavaScriptom je objavený neskoro. Vložte ho do HTML ako <img>.
• Pôvodné zdroje tretích strán, od ktorých závisí LCP (písma, CDN obrázka), vopred pripojte alebo sami hostite.

<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, ktorý používa článok na tomto blogu: dve veľkosti WebP, explicitné rozmery a vysoká priorita načítania pre hrdinu.

Krok 4. Odstráňte posuny rozloženia ( CLS)

• Na obrázkoch, videách a prvkoch iframe vždy nastavte width a height (alebo aspect-ratio v CSS), aby si prehliadač vyhradil priestor.
• Vyhraďte priestor pre bannery, upozornenia na súbory cookie a reklamy. Vložte ich do nádoby s pevnou minimálnou výškou namiesto toho, aby ste obsah po naložení tlačili nadol.
• Fonty: použite font-display: swap alebo optional, vopred načítajte hlavný súbor fontov a podnastavte ho. Vyberte záložné písmo s podobnými metrikami.
• Nevkladajte obsah nad existujúci obsah, pokiaľ to nespustil používateľ.
• Animujte s transform a opacity, nie s vlastnosťami, ktoré menia rozloženie (top, height).

Krok 5. Zlepšenie INP: menej JavaScriptu v hlavnom vlákne

INP je najnovšia metrika, ktorú vývojári PHP zanedbávajú, pretože server ju priamo neovplyvňuje. Príčiny sú v prehliadači: dlhé úlohy z veľkých balíkov, náročné skripty tretích strán (analytika, widgety chatu, správcovia značiek) a obslužné programy, ktoré vykonávajú príliš veľa práce synchrónne.

• Audit skriptov tretích strán. Odstráňte to, čo nikto nepoužíva, zvyšok naložte s defer alebo po prvej interakcii.
• Rozdeľte si dlhé úlohy. Rozdeľte prácu na kúsky pomocou requestIdleCallback, setTimeout alebo Scheduler API; presunúť náročné výpočty na Web Worker.
• Udržujte DOM malý. Tisíce uzlov spomaľujú každú aktualizáciu.
• Vyhnite sa núteným synchrónnym rozloženiam v slučkách (striedavo pri čítaní a zapisovaní vlastností rozloženia).
• Pred začatím pomalej práce ukážte okamžitú spätnú väzbu (stlačený stav alebo otáčanie).

Krok 6. Chráňte ho v procese nasadenia

Výkon sa potichu znižuje: nová značka, ťažší hrdina, ďalší dopyt na domovskej stránke. Pridajte Lighthouse CI alebo plánovanú kontrolu rozhrania PageSpeed API pre svojich päť najdôležitejších šablón, nastavte rozpočty ( LCP, celková veľkosť JS, hmotnosť obrázka) a upozornite na ich prekročenie. Porovnajte TTFB pred a po každom vydaní; ak skočí, príčinou je takmer vždy dotaz alebo vyrovnávacia pamäť, ktorá už nezasiahne.

Realistický poriadok práce

1. Zmerajte údaje poľa a identifikujte zlyhávajúce skupiny URL.
2. Povoľte OPcache, skontrolujte nastavenia PHP-FPM, pridajte celostránkové ukladanie do vyrovnávacej pamäte pre anonymný prenos.
3. Opravte obrázky hrdinov: formát, veľkosť, priorita, rozmery.
4. Vyhraďte miesto pre všetko, čo sa načíta neskoro.
5. Znížiť a odložiť JavaScript; odstrániť nepoužívané tretie strany.
6. Zmerajte znova po 28 dňoch, pretože údaje v teréne sú pohyblivé okno.

Očakávajte, že vylepšenia sa v Search Console budú objavovať postupne: prehľad používa údaje približne za posledných 28 dní, takže dnes odoslaná oprava je plne viditeľná až po približne mesiaci.

Ako môžeme pomôcť

Pracujeme na výkone na projektoch PHP a Laravel ako súčasť technického zapojenia SEO a ako jednorazové ladenie: ukladanie do vyrovnávacej pamäte, dotazy, obrázky a front-end opravy dodávané v kóde. Ak chcete vedieť, ktorá z vyššie uvedených zmien by sa na vašej stránke oplatila, objednajte si konzultáciu alebo analýzu servera. Ak chcete získať širší kontrolný zoznam týkajúci sa indexového prehľadávania a indexovania, prečítajte si náš technický kontrolný zoznam auditu SEO.