Seznam důležitých podmínek, které by měl webový projekt splňovat, aby mohl být úspěšně indexován vyhledávači, rychle se vykresloval v prohlížeči a byl user-friendly. Tipy jak zrychlit web. Postupně budu doplňovat další.
Checklist
- Meta tagy v hlavičce webu
– unikátní description popisující obsah stránky 100-180, měl by obsahovat klíčová slova
– unikátní title obsahující klíčová slova (max. 100 znaků) - Vykreslení kritického obsahu jako první (pokud web načítá např. widget 3. strany, měl by být v kódu až za obsahem webu)
- TTFB pod 200ms
- Omezení počtu zdrojů a jejich velikosti (méně requestů = rychlejší web)
– spojení JS do jednoho souboru se zdrojovou mapou (umí např. gulp-uglify)
– spojení CSS do jednoho souboru se zdrojovou mapou (umí např. gulp-clean-css)
Co je rychlost webu
Rychlost načtení webu v prohlížeči je pěkně popsána v Chrome User Experience Report, zdroj: článek na blogu Google.
První vykreslení (First Paint)
Definováno https://w3c.github.io/paint-timing/#first-paint, umí měřit např. prohlížeč Chrome od verze M60+. První vykreslení je doba, kterou prohlížeč potřeboval k prvnímu zobrazení po navigaci. Vyloučeno je vykreslení výchozího background, ale zahrnuje ne-výchozí vykreslení background. Toto je ten první klíčový moment vývojářů starajících se o načtení stránky – kdy prohlížeč začal renderovat stránku.
První vykreslení obsahu (First Contentful Paint)
První vykreslení obsahu je doba, kdy prohlížeč vyrenderoval poprvé nějaký text, obrázek (včetně obrázků v background), ne-bílý canvas nebo SVG. Včetně textu nabíhajících fontů. Toto je první moment, kdy prohlížeč něco viditelného zobrazí.
DOMContentLoaded
Definován zde. DOMContentLoaded je doba, kdy prohlížeč načetl HTML kód bez čekání na styly, obrázky, vnořené rámy.
onload
onload je doba, kdy prohlížeč dokončil načtení zdrojů.
Výkonnost webu může bude rozdílná v závislosti na typu zařízení (bude jiná pro každý phone, tablet nebo desktop), vlastností sítě (jaký máte typ připojení) a dalších proměnných.