V předchozím článku jsem se věnoval datové a časové náročnosti JavaScriptu, fontů a reklam na root.cz. V diskuzním vláknu padlo tvrzení, proč zapínat JavaScript, když to akorát zpomaluje. Problém tohoto argumentu je, myslím si, celkem zřejmý: „Proč povolovat obrázky, když to vše jen zpomalují.“ Ano, máte možnost zakázat si obrázky, ale proč to dělat, když přijdete o nemalou část požitku z prohlížení stránky? Navíc JavaScript roota je povětšinou použit k dotažení věcí, které nejdou řešit pomocí CSS (např. lazy loading obrázků nebo přilepení “asociální lišty” až v určitém bodě posunu po stránce).
V diskuzi jsem uvedl, že mám silné podezření, že za zpomalení nemůže JavaScript samotné stránky, nazvěme jej užitečný JavaScript, ale reklamní, pojmenujme si jej balastní JavaScript, který uživateli navíc nic přímo nepřináší.
Níže jsou výsledky mého měření (každá hodnota je průměr ze tří měření). Začneme zlehka údaji o prvním načtení, které pro normální uživatele, kteří si z rozmaru nečistí cache každých pár hodin/minut, v podstatě nic neznamenají. Běžně si totiž prohlížeč stažený kód v JavaScriptu pamatuje, dokud nevyprší časové razítko od serveru, nebo dokud mu server neřekne, že má novější verzi. Ku příkladu velký bratr Google má nastaveno toto časové razítko na jeden rok.
První načtení stránky
Na rozdíl od minulého článku jsem se uchýlil k více vizuálnímu pojetí, je totiž mnohem názornější a většina čtenářů stejně nebude studovat tabulky obsahující desítky buněk.
Z diagramu je patrné, že rozdíl mezi načtením bez užitečného JavaScriptu (1,52s) a načtením s tímto JavaScriptem je zanedbatelný. Ve skutečnosti mi vyšlo, že se zapnutým JavaScriptem je stránka o 4% rychleji načtená - 1,45s. Může to být způsobeno menším počtem vzorků, nebo skutečností, že doba načtení stránky podstatně více závisí na odezvě od serveru než na “počítání” JavaScriptu. Také fakt, že root používá lazy loading obrázků k tomu mohl přispět (na titulní stránce se načítají pouze obrázky článků, které čtenář vidí v aktuálním výřezu stránky).
| JavaScript | bez × užitečný | užitečný × (užitečný + balastní) |
|---|---|---|
| relativní zpomalení | -4,35% | 376,32% |
| absolutní zpomalení [s] | -0,07 | 5,46 |
Tabulka předkládá srovnání vždy dvou možností, znak × je použit ve významu “versus”. Jak se můžeme přesvědčit, ono zrychlení s užitečným JavaScriptem je z pohledu uživatele zanedbatelné - pouhých 70ms.
Podstatně zajímavější je druhý sloupec, který srovnává čas načtení s užitečným JavaScriptem a čas potřebný k načtení stránky s povolenými reklamami, tzn. i s balastním JavaScriptem. Vychází nám, že zpomalení je značné - je třeba skoro pětkrát více času - 6,91s. Rozdíl přes 5 vteřin se opravdu při načítání stránky neztratí a je velmi znatelný (stránka je sice po pár vteřinách zobrazená, ale jak se zpracovávají reklamy, tak se “seká”).
Další načtení stránky
Nyní se přesuňme k tomu důležitému - doba načtení stránky při normálním používání, tzn. s plnou mezipamětí (cache).
Rudé obdélníky ve variantách bez JavaScriptu a s JavaScriptem bez reklam se liší poměrně málo, ale ne zanedbatelně. Když upřeme zrak na tabulku níže, tak zjistíme, že se zapnutím JavaScriptu jsme se dostali na zpomalení o 42%. Může to vypadat hrůzostrašně, ale když si uvědomíme, že absolutní rozdíl je 0,39 vteřiny (z 0,93 na 1,32), tak to není žádná tragédie. Možná rozdíl v době načítání ani nepostřehneme. Zato určitě oceníme plně funkční stránku, kterou lze používat tak, jak tvůrci zamýšleli. Bez JavaScriptu si např. na rootu nezobrazíme informace o profilu, překryté položky v horním menu nebo neohodnotíme příspěvek.
| JavaScript | bez × užitečný | užitečný × (užitečný + balastní) |
|---|---|---|
| relativní zpomalení | 41,98% | 206,08% |
| absolutní zpomalení [s] | 0,39 | 2,71 |
Reálný problém nastává až s reklamami. Tam, kde nám s užitečným JavaScriptem stačilo v průměru 1,32 vteřiny, najednou musíme čekat 4 vteřiny - to je třikrát více než bez reklam! A musím říct, že rozdíl mezi zhruba vteřinou a sekundami čtyřmi pocítí snad každý.
Můj odhad byl správný, reklamní balast tvoří 67% doby načítání z celkových 4,03 vteřin, tvoří tak režiji v podobě 2,7 sekund. Naopak užitečný JavaScript si bere 29% ale z pouhých 1,32 vteřiny a lehce posouvá dobu načítaní o pouhé 0,39 sekundy. Neodpustím si trochu bulvarizování na závěr.
Pokud tedy zablokujete reklamy, tak získáte zrychlení přes 200%!
A to se vyplatí!
PS: Pokud máte velmi slabý HW, pak je tedy nejlepší volba buďto blokovat reklamy, nebo veškerý JavaScript, a zvážit, zda nepodpořit roota jinou cestou.