Postřehy / Výkon
Rychlost je designové rozhodnutí.
Váha / Požadavky / Stabilita
O rychlé stránce se rozhoduje dřív, než se staví.
01 / VýchodiskoTo první, co návštěvník pocítí
O rychlosti se rozhoduje brzy.
- Rychlost stránky je to, jak brzy ukáže obsah a jak rychle odpoví na první klepnutí.
- Google ji měří třemi metrikami Core Web Vitals: LCP, INP a CLS.
- Většinu rozhodnou písma, obrázky a skripty třetích stran, a to jsou designová rozhodnutí.
Co měří Core Web Vitals?
Tři věci, které návštěvník cítí. Largest Contentful Paint (LCP) říká, za jak dlouho se objeví hlavní obsah; za dobrou hodnotu Google považuje nejvýš 2,5 sekundy. Interaction to Next Paint (INP) říká, jak rychle stránka odpoví na klepnutí nebo klávesu; dobrých je 200 milisekund a méně. Cumulative Layout Shift (CLS) říká, jak moc stránka při načítání poskakuje; dobrá hodnota je 0,1 a méně.
Měří se na skutečných návštěvách, na 75. percentilu. Stránka tedy musí být rychlá pro většinu návštěvníků, ať mají jakékoli připojení.
Proč stránky těžknou?
Málokdy jedním rozhodnutím. Druhé písmo, knihovna pro carousel, analytický skript, chatovací okno, video, které se samo spustí: každé zvlášť dává smysl a každé přidá požadavky, bajty a práci pro telefon.
Když už je stránka pomalá, příčiny jsou rozeseté po celém návrhu. Proto se rychlost na konci přidává tak těžko.
Co je výkonnostní rozpočet?
Limit dohodnutý dřív, než se návrh nakreslí: kolik kilobajtů smí stránka vážit, kolik požadavků smí poslat, jak brzy se musí objevit hlavní obsah. Návrh, který se nevejde, se změní, dokud je změna levná.
Můj vlastní rozpočet na stránku je 250 kilobajtů a šest požadavků při prvním načtení, s hlavním obsahem viditelným do 1,5 sekundy v laboratorním testu na telefonu.
02 / PostupSpolu s rozvržením
Čtyři rozhodnutí, která drží rychlost.
01 / Písmo
Málo písem, vlastní soubory.
Dvě rodiny, ořezané na znaky, které jazyky potřebují, a podávané ze stejné adresy jako stránka.
02 / Obrázky
Správná velikost, pozdě.
Moderní formáty, soubor pro každou šířku obrazovky a načtení, až když přijdou do záběru.
03 / Skript
Málo a nakonec.
Stránka je úplná už jako HTML; skript jen vylepšuje to, co funguje i bez něj.
04 / Třetí strany
Jen z rozhodnutí.
Cokoli ze serveru jiné firmy se přidává vědomě, a tam, kde to zákon žádá, až po souhlasu.
03 / OtázkyKrátké odpovědi
Časté otázky.
Musí rychlý web vypadat stroze?
Ne. Velké písmo, pohyb i obrázky přes celou šířku se do rozpočtu vejdou, když se vybírají s ním: písmo je nejlevnější způsob, jak být výrazný, a moderní CSS animuje bez knihovny.
Je cílem skóre 100 v Lighthouse?
Je to užitečná laboratorní kontrola. Lighthouse testuje jedno načtení na simulovaném telefonu; rozhoduje to, co dostanou skuteční návštěvníci. Používám obojí a víc věřím číslům z provozu.
Co weby zpomaluje nejčastěji?
Obvykle skripty třetích stran, příliš velké obrázky a webová písma načítaná odjinud.
04 / Co si odnéstPrvní dojem je doba načítání
Váha / Požadavky / Stabilita
Stránka, na kterou nikdo nečeká, je součást designu.
Doba načtení je jedna z prvních věcí, které návštěvník o značce zjistí, dřív než přečte jediné slovo.
Experiment / 001Ozvěte se
Ať je to rychlé.
Přineste web, který má na telefonu působit okamžitě.
Začít projekt