Jak jsme zkrátili dobu načítání webu pod jednu sekundu
Rychlost není jen kosmetické číslo — hýbe pozicemi ve vyhledávání i tržby. Zde je přesný postup optimalizace výkonu, který provádíme u každého projektu, v pořadí od nejdůležitějšího.
Většina pomalých webů není pomalá z nějakých záhadných důvodů. Jsou pomalé kvůli několika předvídatelným problémům navršeným na sebe – a opravují se v předvídatelném pořadí. Když k nám přijde klient s třísekundovou dobou načítání, málokdy potřebujeme exotické triky. Potřebujeme disciplínu.
Tohle je stejný kontrolní seznam, který procházíme u každého projektu zaměřeného na výkon, zhruba v pořadí podle priorit. Každý krok je vzhledem ke svému dopadu levný a většina webů působí po prvních třech krocích výrazně rychleji.
Měřte, než na cokoli sáhnete
Nemůžete zlepšit to, co neměříte, a rozhodně nemůžete prokázat zlepšení bez výchozího stavu. Každý projekt začínáme s reálnými daty z terénu, nejen s výsledky z laboratoře.
- Laboratoř – Lighthouse a WebPageTest pro kontrolovaný, opakovatelný snímek.
- Terén – metriky reálných uživatelů (CrUX / RUM) pro zachycení toho, co lidé skutečně zažívají.
- Rozpočet – pevný strop pro každou trasu, aby se regrese zachytily v CI, nikoli v produkci.
Laboratorní skóre 100 neznamená nic, pokud jsou vaši skuteční uživatelé na telefonech střední třídy a nestabilním připojení. Optimalizujte pro reálný provoz.
Odstraňte zdroje blokující vykreslování
Největším vítězstvím u většiny webů je odstranění CSS a JavaScriptu z kritické cesty. Prohlížeč nemůže vykreslovat, dokud nedokončí parsování zdrojů blokujících vykreslení – čím méně jich tedy je, tím dříve se něco zobrazí.
// odložit vše, co není kritické
const load = () => import('./analytics.js');
if ('requestIdleCallback' in window)
requestIdleCallback(load);
else setTimeout(load, 2000);Vložte malé množství CSS potřebné pro první vykreslovanou oblast (viewport) přímo do stránky (inline) a zbytek načtěte asynchronně. Odložte nekritické skripty. Cílem je první vykreslení, které nečeká na nic, co nezbytně nepotřebuje.
Považujte obrázky za součást rozpočtu
Obrázky jsou obvykle tou nejtěžší částí stránky a je nejsnadnější u nich udělat chybu. Tři pravidla pokrývají devadesát procent případů:
- Servírujte moderní formáty – AVIF nebo WebP – se záložním řešením (fallbackem).
- Přizpůsobte velikost obrázků jejich vykreslovaným rozměrům; nikdy neposílejte 3000px banner (hero) do 600px okna.
- Používejte lazy-loading (odložené načtení) pro cokoli pod ohybem stránky (below the fold) a vyhraďte prostor pro obrázky, abyste předešli posunům rozvržení (layout shift).
Cachujte na edge serverech
Jakmile je stránka štíhlá, další otázkou je, jak rychle se bajty dostanou k uživateli. CDN s rozumně nastavenými hlavičkami pro caching promění 600ms cestu ke zdrojovému serveru (origin) v 30ms odezvu z edge serveru. Pro dynamický obsah vám stale-while-revalidate poskytne okamžitou odpověď, zatímco se data aktualizují na pozadí.
Výkon je funkce. Plánujeme pro něj rozpočet stejným způsobem, jako pro kteroukoli jinou část projektu.
Výsledek
U projektu, který byl inspirací pro tento článek, se Largest Contentful Paint domovské stránky snížil z 3,1 s na 0,9 s a organické konverze během měsíce znatelně vzrostly. Nebylo v tom žádné kouzlo – jen výše uvedený kontrolní seznam aplikovaný popořadě.
Pokud máte pocit, že je váš web pomalý, a nevíte, kde začít, ozvěte se nám – krátký audit obvykle odhalí dvě nebo tři změny, které mají největší význam.