Jak dostat vaše webové aplikace do kondice

Jak to všechno začalo?

Naši klienti za námi přicházeli nešťastní z chabé výkonnosti jejich webů. Nejčastěji řešili problémy s nízkými nebo klesajícími konverzními poměry, se špatným UX, nevyhovující SERP pozicí, nízkým konverzním poměrem v mobilní aplikaci nebo problémy s přetížením serverů ve špičkách nebo o prázdninách.

Říkali jsme si, že někde musí být zakopaný pes, ale kde? Udělali jsme několik testů a zjistili jsme, že většina webových stránek není v souladu s Core Web Vitals. Pokud chcete, aby byl váš web výkonnější, musíte nejdříve zjistit, jak si stojíte. Jak? Je to vcelku jednoduché, použijte Google Search Console a Google PageSpeed Insights. 

Efekt sněhové koule

Pokud jste provedli test, možná jste přišli na to, že máte stejný problém jako naši klienti. Jak se to mohlo stát? Co jsme udělali špatně? No, asi to pro vás nebude úplně převratný objev, ale spousta klientů si to neuvědomuje. Zjednodušeně řečeno je to tím, že se na stránky pořád přidávají nějaké featury. Featury jako jsou chatbot, A/B testovací nástroje, nové bannery apod. a tím zároveň přidáváte stovky KB na váš frontend. A vaše stránky se stávají větší a větší, což má značný vliv na jejich uživatele.

Věřte nebo ne, během posledních tří let narostl datový objem webových stránek o 40 %! A to určitě není dobře, protože to má zásadní vliv na jejich výkonnost. Dalším důvodem vašich problémů může být to, že váš frontend je zastaralý. Aplikace jsou tvořeny jedním velkým balíkem dat a uživatelé nemají možnost stahovat menší balíky, což dělá stránky pomalými a vede k dlouhé odezvě na uživatelské akce, např. kliknutí na tlačítko “přidat do košíku” trvá několik sekund.

Jak si udržet konkurenceschopnost a zlepšovat se

Teď už víte, že máte problém, takže je na čase najít řešení, ale jak by mělo vypadat? Radíme našim klientům zvážit následující 4 parametry: škálovatelnost, SEO, developery a technologii. Musíte najít řešení, které zvládne velký traffic během špiček, růst vašeho businessu, které má dobré UX, vyhovuje všem robotů a taky vašim developerům. Navíc by ono řešeni mělo obsahovat zabudovaný mechanismus, který udrží výkonnost webu na vysoké úrovni, bude odpovídat aktuálním trendům a v neposlední řadě bude v souladu s Core Web Vitals.

Udělali jsme si takový malý průzkum trhu, abychom takové řešení našli a hádejte co? Žádné takové jsme nenašli! Existující řešení totiž nesplňovala všechna naše kritéria, a to z mnoha důvodů. Jedním z nich bylo to, že vznikala v době dávno před Web Vitals. Mezi další problémy patřilo to, že se nesoustředila na jednu platformu nebo chyběly guideliny pro jednotlivé účastníky (např. tým vytvářející obsah webu, týmy pro SEO a analýzu apod.) na to, jak udržet výkonnost na vysoké úrovni.

Když to nemůžeš najít, musíš to vyrobit

Všechna řešení, na která jsme narazili, byla založena na PWA. To určitě není a priori špatně, PWA je moderní a výkonná technologie, ale má i své mouchy.

Problém #1: PWA mají pomalé úvodní načítání

Kliknete na e-shop a… nic se dlouhou dobu neděje, pak se objeví načítací kolečko, pak pomalu nějaký obsah a těsně před tím, než kliknete na nějaký produkt, poskočí stránka o velký kus dolů a vy místo toho kliknete třeba na banner. To fakt nechcete! Ani vaši zákazníci si nic takového nezaslouží. Proč se to děje? PWA jsou aplikace tvořené pouze JavaScriptem, není tam žádné html pro server k načtení.

Naše řešení? Server-side rendering, což umožňuje vidět část obsahu hned, zanedlouho se objeví hlavní motiv a zbytek následuje krátce poté. Toto řešení dává prostor pro zvýšení konverzního poměru, pro nižší bounce rate a dobrou customer experience. Zároveň to má velký vliv na Web Vitals:

• lepší First Contentful Paint (obsah je viditelný hned)
• lepší Largest Contentful Paint (velké obrázky jsou přednačteny, a proto viditelné hned)
• nulový Cumulative Layout Shift (server-rendered markup chrání stránku před posouváním při načítání dynamického obsahu)  
• lepší SEO & SERP pozice ZDARMA! (protože je jednodušší pro vyhledávače procházet server-side renderované aplikace než ty, které obsahují čistě JS)

Problém #2: JavaScript negativně ovlivňuje výkonnost 

JavaScript je také ve své podstatě dobrá věc. Umožňuje nám dělat webové stránky interaktivní s dobrým UX. Ale když se to s JS přežene, nastane problém. Trvá dlouho, než se stránka stane interaktivní a začne reagovat (může to trvat 15 s i více).

Naše řešení? Přístup založený na výkonnosti, což v podstatě znamená, že stránku rozdělíte na menší části/bloky, u kterých dopředu rozhodnete, kdy se má načíst Java Script. Některý JS musí být načtený ihned (jako např. košík nebo produkty), některý se načítá při interakci (jako např. menu, filtr, vyhledávání), některý se načte až v momentě, kdy blok uvidíme (jako např. zápatí) a některý JS se nemusí načíst nikdy nebo jen na vyžádání (logo, drobečková navigace).

To neznamená, že tyto komponenty nejsou viditelné, uživatel je normálně vidí, akorát načteme kód, který je nezbytný pro jejich interaktivitu až ve chvíli, kdy je skutečně potřeba. Pro lepší pochopení se podívejte na obrázek níže. 

A jaký má tento přístup vliv na Web Vitals? Nižší Time to Interactive (JavaScript je načten pouze na interakci s danou komponentou) a nižší Total Blocking Time (méně JavaScriptu je stáhnuto a vykonáno).

Problém #3: Flexibilita

Co když chtějí zákazníci či firma něco speciálního? Platforma musí být flexibilní a umožnit všemožné modifikace.

Naše řešení? Modularita. Aplikace je rozdělena do mnoha malých modulů (katalog, blog, pokladna) a tyto moduly se mohou vzájemně modifikovat. Můžete si např. vytvořit vlastní modul s bestsellery a jednoduše přidat tuto funkcionalitu do katalogu. Můžete mít spoustu různých modulů a ty vypínat a zapínat, jak se vám to zrovna hodí. A jaký má tento přístup vliv na Web Vitals? Lepší Time to Interactive & Total Blocking Time (JavaScript je potřeba jen když je odesílán do prohlížeče).

Hmm, to zní dobře…

Tak co, dává vám to smysl? Nám a našim klientům ano. Naše nová platforma se jmenuje StoreFront X. Více o ní se dozvíte na této stránce.

Chcete se dozvědět víc o Web Vitals, PWA a jejich dopadu na váš byznys? Klikněte na tlačítko níže a podívejte se na záznam celého webináře Time to speed up!