Web Performance – rychlost a výkon je na internetu rozhodující

Se stále se zvyšující rychlostí a stabilitou internetového připojení už není v dnešní době technicky problém využívat internet k věcem, které ještě nedávno nebyly možné. Právě rychlost a dostupnost internetového připojení umožnila vytvořit podmínky pro přenos do té doby nemyslitelných obchodních aktivit.

Jak zvýšit své šance na trhu

Dnes už si ani nikdo nevzpomene, že ještě celkem nedávno byla doba, kdy nebylo možné poslouchat v dobré kvalitě hudbu, sledovat filmy nebo jen chtít nakoupit zboží, které si nakonfigurujete přesně podle svého přání kompletně online. Člověk si samozřejmě na pohodlí rychlého a stabilního internetu snadno zvykl. Tak moc jsme si už navykli na tento komfort, že je až paradoxem, jak moc jsme citliví na každé drobné výkonnostní zakolísání, které samozřejmě zásadně ovlivňuje naši uživatelskou zkušenost. A protože konkurence nespí, neexistuje v podstatě žádný prostor pro chyby. Konzumenti obsahu, my lidé, zkrátka očekáváme, že vše poběží bez zadrhávání, a obsah, pro který jsme přišli, se nám načte nejpozději do dvou, maximálně tří sekund. To samo o sobě znamená, že čím bude provoz vaší aplikace nebo stránky pomalejší, tím bude dramatickým tempem klesat provoz, protože pro výkon je nejvíce viditelným faktorem právě rychlost. Výkonově nedostatečně optimalizovaný web bude způsobovat problémy a nepomůže vám ani to, že budete mít lákavý a hodnotný obsah, protože vaši zákazníci zkrátka raději odejdou jinam, kde vše zařídí rychleji a bez zdržování. Naopak dobře optimalizovaný web bude tím nejlepším klíčem k úspěchu jakéhokoli online podniku, kde je nutné získat a udržet zákazníka. Proto si pamatujte, že výkon zcela zásadně ovlivňuje výsledný provoz na vašem webu, množství zkonvertovaných zákazníků a uživatelskou zkušenost z používání webu. Aby bylo možné zlepšit odezvy vašeho webu, je potřeba nejprve správně chápat, co vše musí prohlížeč webových stránek (dále jen prohlížeč) udělat předtím, než vám zobrazí požadovaný obsah.

Kritickým okamžikem je doba renderování obsahu

Odborně tomu říkáme Critical Rendering Path (CRP). Přeloženo do lidské řeči to znamená, že prohlížeč webových stránek provádí sekvenci několika kroků, během kterých zajistí kompletní načtení všech částí požadované stránky, kterou následně vykreslí v pixelech na vaší obrazovce (tj. konvertuje HTML, CSS a JavaScript). Z pohledu zlepšení výkonu (performance) jsou tyto kroky velmi důležité, protože pokud se je týmu vývojářů podaří dostatečně optimalizovat, pak se celý proces načtení stránky výrazně zkracuje a návštěvníci vašich stránek budou mnohem šťastnější, protože nebudou muset dlouho čekat na obsah, který je zajímá. Mějte na paměti i to, že pro samotnou dobu, která předchází zobrazení načtené stránky, se ustálil výraz Critical Loading Time. Jak je z názvu patrné, jde o kritický čas, protože čím je doba načítání stránky delší, tím více se zvyšuje riziko odchodu vašeho zákazníka, který to čekání zkrátka nevydrží. Představte si, že se mu něco takového děje na více stránkách vašeho webu. Pak si vše sečtěte a zjistíte, že zákazník stále jen a jen na něco čeká, přitom přišel, aby vše rychle vyřídil. Proces optimalizace jednotlivých kroků, které prohlížeč při načítání stránky provádí, je náročný a pracný. Není vždy snadné jej vyladit a nedá se aplikovat pokaždé stejný postup u různých webů. Dobře vyladit celý proces vyžaduje velkou opatrnost, dobré technické znalosti, kvalitní testování, ale také odvahu celého realizačního týmu. A jaké kroky to tedy prohlížeč provádí?

DOM není žádný domeček (tree)

Můžete si být jistí, že prohlížeč rozhodně nezahálí. Každou stránku nebo akci, kterou po něm chce uživatel zobrazit, se snaží poctivě načíst a „přeložit“ do vizuální podoby. Aby to dokázal, musí vykonat několik důležitých a celkem pracných kroků. Tím prvním je sestavení DOM (Document Object Model). Jedná se o proces, během něhož prohlížeč načte základní zdrojový kód stránky, který definuje jednotlivé obsahové prvky. Tomuto kódu se říká HTML a jde o značkovací jazyk, který přesně určuje, jak má prohlížeč chápat prvky obsahu stránky, aby je člověku správně interpretoval. Tento jazyk pomáhá prohlížeči přesně určit a identifikovat například hlavičku stránky, část s metainformacemi, hlavní obsah, nadpisy a odstavce textu, odkazy, obrázky a další obsahové prvky. Samozřejmě prohlížeč také dokáže určit, kde například odstavec textu začíná a kde zase končí. Tomuto rozdělování říkáme vytváření tokenů, obecně tokenizace. Celý proces vytváření DOM prohlížeč nakonec zakončuje rozdělením takto vytvořených tokenů podle podřízenosti a rozdělením na jednotlivé základní části obsahu na uzly (Nody). Tím vznikne stromová struktura celého dokumentu (stránky). Představte si to například tak, že odstavec textu musí být vždy vnořen do těla stránky nebo že hlavička stránky s metainformacemi musí vždy předcházet hlavnímu obsahu. Nyní už tedy víme, že DOM není žádný domeček, ale je to naopak obsah stránky převedený do hierarchické stromové struktury, která popisuje a identifikuje, jakou strukturu bude stránka mít a jaké budou asi očekávané vlastnosti. Tedy o jaký obsah půjde.

Příliš mnoho skriptů by i vola umořilo

U stránek, kde se očekává větší dynamika, si pouze s HTML a CSS většinou nevystačíme. Téměř vždy potřebujeme při určitém specifickém požadavku do stránky dostat nějaký dynamický prvek a vepsat informace navíc, anebo jiné modifikovat. Všechny tyto změny, které chceme provádět, vždy rozšiřují základní statický obsah stránky a prodlužují tak CRP (Critical Rendering Path), protože manipulují přímo s DOM. Představte si například, že jste na stránce e-shopu. Něco si vložíte do košíku, ale nenakoupíte. Druhý den se na e-shop vrátíte a ejhle, e-shop si pamatuje, co jste do košíku vložili, a ještě vás po načtení stránky na zboží upozorní. To je přece skvělé, nemyslíte? Co není skvělé, je právě ono prodloužení CRP. Proč se to ale děje? V době, kdy se generuje DOM a CSSOM, prohlížeč při procházení zdrojového kódu stránky naráží v obsahu na vložené skripty (JavaScript). Jakmile na takový skript narazí, sestavování DOM se zpomalí, protože prohlížeč musí skript projít a správně ho interpretovat, a to stojí samozřejmě milisekundy navíc. Pokud je kromě toho skript vložen formou externího odkazu na soubor, pak se musí prohlížeč ještě dotázat serveru, který mu soubor vrátí, aby jej mohl prohlížeč přečíst, a to jsou samozřejmě další cenné milisekundy, které budou na zobrazení potřeba. Pokud se vrátíme k příkladu s košíkem, může se jeden takový skript starat právě o to, že se do stránky natáhne informace, že jste včera do košíku něco vložili. Problematika závislostí a vazeb HTML, CSS a Javascriptu je samozřejmě mnohem složitější, ale je důležité si zapamatovat, že čím více scriptů ve stránce bude, tím se bude prodlužovat CRP a o to déle se bude čekat na vykreslení plně funkční stránky. Bohužel je potřeba také říct, že u hodně složitých aplikací je potřeba více skriptů, bez kterých se zkrátka neobejdete. A to je ta chvíle, kdy musíme celý proces začít ladit, aby byla celková odezva stránky na podněty uživatele dostatečně rychlá.

Nejen malíř potřebuje štětec, barvy a měřítko

Po sestavení DOM prohlížeč začne pro změnu vytvářet objektový model CSS (CSSOM – CSS Object Model). Představte si to jako kreativní popis, kterým musíte obohatit už vytvořený popis stránky (DOM). Díky existenci definice typografických stylů dokáže prohlížeč aplikovat na jednotlivé prvky struktury stránky také popis zamýšleného vizuálního vzhledu. Například ten nadpis článku bude velký a modrý a onen krátký text pod odstavem bude kurzívou, protože je to přece citace. A odstavce textu budou uprostřed stránky ve dvou sloupcích na jeden řádek. Ovšem prohlížeči to celé ztěžuje fakt, že CSSOM se nesestavuje jen z typografických stylů, které definoval vývojář stránky, ale musí také zohlednit výchozí typografické styly konkrétního prohlížeče (a že těch různých verzí máme), které jsou v prohlížeči vestavěné, a musí brát i ohled na uživatelské styly, které si může uživatel v prohlížeči sám nastavit. Této funkce využívají například lidé se zrakovým postižením. Nyní víme, že CSSOM není nic jiného než seznam typografických pravidel, na jejichž základě dokáže prohlížeč později stránku přesně „vymalovat“ na obrazovku v pixelech.

Rendering a painting aneb prohlížeč umí stavět i malovat

Jakmile prohlížeč chápe, jak bude stránka strukturována, jaké bude mít vlastnosti a jak by měla být vizuálně zobrazena (tzn. je dokončeno sestavení DOM a CSSOM), přistoupí k renderování layoutu a aplikaci typografických vlastností na různé prvky obsahu na obrazovku uživatelova zařízení. Všechny vlastnosti musí nyní kompletně převést do vizuální podoby a vykreslit v pixelech. To, jak rychle dokáže prohlížeč vykreslit na obrazovku funkční stránku, závisí na tom, jak dobře stránku vývojáři optimalizovali.

V příštím článku se už podíváme na to, jak lze zvýšit výkon vašeho webu a také na šest základních měřících technik, pomocí kterých měříme výkonnost.

Web Performance – rychlost a výkon je na internetu rozhodující
Čtěte dál
Design

Třetí rozměr pohledu na váš byznys. Víte, co je lentikulární tisk a jak ho využít?

Ne, že by klasickým plakátům úplně odzvonilo. Ale pro prezentaci ve 21. století můžete využít ještě daleko sofistikovanější metody tisku. Jednou z nich je například tzv. „lentikulární tisk“. Je dobré o něm vědět především z jednoho důvodu: zákazníci na něm mohou oči nechat.

28. 07. 2021
Vývoj

PHP - Kontroverzní jazyk, který ještě neřekl poslední slovo

Mnozí predikovali postupný a pomalý zánik PHP jako nástroje pro tvorbu webových aplikaci. Proč vlastně používat jazyk, který vznikal jako pomocný nástroj pro potřeby jednoho člověka? Proč používat PHP, pokud existuje Java, Golang, TypeScript? Realita ale poněkud překvapující: jazyk žije, rozvíjí se a přináší spoustu vychytávek, které mu umožňuji úspěšně konkurovat na trhu. Vlastně dokonce být lídrem toho trhu ;)

11. 05. 2021