JavaScript (JS) ovlivňuje načítání a rychlost stránky. Odstraněním neduhů vylepšíte mnoho dalších problémů s metrikami v červených číslech z Page Speed Insight a v rámci Core Web Vitals. Nerozumíte těmto termínům a je to takhle na vás zhurta? Tak pojďme od začátku.
Co to je JavaScript
JavaScript (JS) je vysokoúrovňový programovací jazyk používaný pro tvorbu dynamických webových stránek a interaktivních uživatelských rozhraní. Je to skriptovací jazyk, což znamená, že se používá k vytváření skriptů, které jsou následně spouštěny ve webových prohlížečích.
JS umožňuje webovým stránkám reagovat na uživatelské interakce, jako jsou například kliknutí na tlačítka nebo posunutí kolečkem myši. Také umožňuje vytvářet animace, měnit obsah stránek dynamicky, validovat uživatelské vstupy a komunikovat se serverem bez nutnosti aktualizace celé stránky.
Vývoj a historie JavaScriptu v rámci webů
V minulosti roboti vyhledávačů, jako například Googlebot, neprohledávali a neindexovali obsah vytvořený dynamicky pomocí JavaScriptu a byli schopni zobrazit pouze to, co bylo ve statickém zdrojovém kódu HTML.
To se však změnilo s nárůstem webových stránek a frameworků bohatých na JavaScript, jako jsou Angular, React, Vue.JS, jednostránkové aplikace (SPA) a progresivní webové aplikace (PWA). V tomto ohledu se Google se vyvinul a zrušil své staré schéma procházení AJAX a nyní webové stránky před jejich indexováním vykresluje jako moderní prohlížeč.
Ačkoli Google je obecně schopen procházet a indexovat většinu obsahu v jazyce JavaScript, stále doporučuje používat vykreslování na straně serveru nebo předběžné vykreslování (tzv. server side rendering), nikoli se spoléhat na přístup na straně klienta (tzv. client side rendering), protože zpracování jazyka JavaScript je obtížné a ne všechny vyhledávače jsou schopny jej úspěšně nebo okamžitě zpracovat.
Jaký je rozdíl mezi server side rendering a client side rendering
Odskočme si ještě k některým pojmům, které byste měli znát před hledáním jádra pudla. Obecně server-side rendering (SSR) a client-side rendering (CSR) jsou dva různé způsoby, jak se webová stránka vykresluje a zobrazuje uživateli.
Server-side rendering znamená, že požadavek na stránku je nejprve zpracován na serveru, který vygeneruje hotovou stránku a pošle ji jako odpověď na prohlížeč klienta. To znamená, že prohlížeč obdrží hotovou stránku s kompletním obsahem a stylizací. Výhodou SSR je, že stránka se zobrazí rychleji, protože se již načetla na serveru. SSR také umožňuje lepší SEO optimalizaci, protože vyhledávače mohou snadněji analyzovat statický HTML obsah.
Na druhé straně, client-side rendering znamená, že se stránka nejprve načte v prohlížeči klienta a následně jsou pomocí JavaScriptu načteny další části obsahu a interakce. To umožňuje interaktivitu a rychlejší odezvu stránky na uživatelské akce, protože se načítají pouze ty části stránky, které jsou potřebné. To znamená, že stránka se načítá pomaleji, ale poskytuje lepší uživatelskou zkušenost.
Oba přístupy mají své výhody a nevýhody a volba mezi nimi závisí na konkrétním použití. SSR je vhodné pro statické webové stránky, jako jsou například blogy, kde je důležitá rychlost načítání a SEO optimalizace. CSR je vhodné pro dynamické webové aplikace, jako jsou například e-shopy nebo sociální sítě, kde je důležitá interaktivita a rychlá odezva na uživatelské akce.
Existuje také mix těchto druhů načítání a jedná se o tzv. hybridní rendering. Hydratace a hybridní vykreslování (nazývané také „izomorfní“) je situace, kdy vykreslování může probíhat na straně serveru pro počáteční načtení stránky a HTML a na straně klienta pro pozdější nekritické prvky a stránky.
Mnoho frameworků JavaScriptu, jako je React nebo Angular Universal, umožňuje vykreslování na straně serveru a hybridní vykreslování.
Alternativním řešením je použití dynamického vykreslování. To může být užitečné v případě, že nelze provést změny v kódové základně front-endu. Dynamické vykreslování znamená přepínání mezi vykreslováním na straně klienta (CSR) pro uživatele a předvykreslováním obsahu pro konkrétní uživatelské roboty (v tomto případě vyhledávače). To znamená, že vyhledávačům bude pro prohledávání a indexování servírována statická verze HTML webové stránky.
Dynamické vykreslování je považováno spíše za přechodné řešení než za dlouhodobou strategii, protože nepřináší takové výhody pro uživatele a výkon jako některá z výše uvedených řešení.
3 způsoby, jak zjistit, že stránka používá JavaScript
Eixstují 3 (pro matadory 4) jednoduché metody, jak zjistit, že web používá JS:
- Přímo v kódu stránky
- Pomocí Page Speed Insights
- Skrz Google Chrome Extension JavaScript Switcher
- Pro pokročilé: Pomocí nástroje Screaming Frog
Tipl bych si, že pokud vypnete JS na jakémkoliv vámi vybraném webu, tak nejspíše zjistíte, že tam pár věci nebude fungovat. Často se jedná o interaktivní prvky, jako je obrázkový karusel, FAQ či vyskakovací okna typu cookie lišta. Nejhorší verze je, pokud po vypnutí nejde vidět celý web.
Na webu by proto měly fungovat bez Java Scriptu tyto prvky:
- Hlavička a patička
- Navigace
- Produkty
- Administrace zákazníka
- Veškeré odkazy a jejich anchory
Pokud se ale jedná o web stavěný v JS frameworku (angular, react, vue apod.) jako CSR, je pomocí JS generován obvykle veškerý obsah. Jestliže tyto hlavní části nejdou vidět, je třeba klientovi doporučit implementaci SSR. Implementace SSR i pro uživatele může pomoci web zrychlit. Obecně platí, že web by měl fungovat i bez JS.
V kódu stránky se vyskytuje studnice všeho vědění
A to není myšleno ani s nadsázkou. V kódu je prostě vše a najdete tam také JavaScript.
- Otevřete si jakoukoliv stránku v Chromu a pravým tlačítkem na myši dejte prozkoumat.
- Tam stačí pomocí cmd+f (mac) nebo ctrl+f (windows) vyhledat příkazový řádek v rámci karty elements, kam zadáte „javascript“.
- Zkonztrolujte prvky na webu, kterých se to týká.
Pokud spustíte vyhledávání a nenajdete obsah nebo odkazy ve zdrojovém kódu, budou dynamicky generovány v DOM a zobrazí se pouze ve vykresleném kódu.
Jestliže je tělo pak prázdné, je to celkem jasná indikace, že to není značka SEO ideál. Příklad viz screenshot, žádné odkazy, pouze JS:
Extension do Chromu JavaScript Switcher
Zkuste si přes Quick JavaScript Switcher zjistit u vašich klientů, jak moc je JS skript je napojen váš web. Často se jedná o cookie lištu, interaktivní moduly jako kalkulačka, obrázkové carousely, nebo FAQ. Po instalaci najdete jednoduše Switcher vpravo příkazového řádku a nebo v seznamu extensions. Následně stačí na něj kliknout až se vám zobrazí oranžové světýlko. Následně porovnejte stav před zapnutím a po zapnutí JS Switcher.
Tip: Řešite rychlost a chete zjistit, jaké prvky jsou na webu vázané na JavaScript? Pomocí Chrome Extensiony JavaScript Switcher si jej vypnete.
Odkaz na tuto extension od Google Chrome najdete zde.
JavaScriptový web má výrazný vliv na rychlost webu. Pokud je využíván a stavěn špatně, ovlivňuje to uživatelskou zkušenost a zákazník při špatném a pomalém načítání může ze stránky brzo odejít.
Používejte nástroje od Google, třeba Page Speed Insights
Kromě JavaScript Switcher lze identifikovat stránku používající JS pomocí Google nástroje Pagespeed Insights.
- Zde si zadejte svoji stránku do příkazového řádku nahoře.
- Po načtení přejděte dolů k příležitostem. V nich rovnou zjistíte, jak si vaše stránka potýká s JavaScriptem a kde se vyskytují problémy.
Výhoda u Pagespeedu je, že rovnou můžete řešit, kde se vyskytují problémy a o který JS se jedná. Stačí si rozkliknout šipku dolů.
Závěrem: Doporučuji, aby JavaScript nebyl problém pro Google
Jelikož na Googlu vyhledává přes 80 % populace ČR, doporučuji se řídit hlavně guidelines od Googlu. V podstatě to znamená, aby otisk webu byl dobře čitelný také v HTML. Dále aby se optimalizovalo využití JS a ten nepoužívaný odstraňoval. Také bych doporučil, aby jednotlivě psané úlohy v JS nebyly příliš dlouhé a rozdělily se na menší subúkoly. Tak zvaně lépe parsovat DOMy.
Pokud by vás zajímalo, jak identifikovat problémový Java Script v nástroji třetí strany Screaming Frogu, tak mi dejte vědět do komentáře. Jistojistě se za mě jedná o nejdetailnější způsob analýzy problémového JS.
