Rychlost e-shopu: PageSpeed Insights

Rychlost webových stránek je v poslední době často skloňované téma a mnozí provozovatelé webu nebo e-shopů se mu čím dál častěji začínají věnovat. Rychlost načtení vašich stránek totiž není důležitá jen z hlediska uživatelské přívětivosti, ale také hraje nemalou roli při budování vašich pozic ve vyhledávačích (fulltextu). A protože pomalá želva vyhrává nad zajícem jen v bajkách, tak se pojďme nyní podívat, jakým způsobem z vašeho webu nebo e-shopu udělat přinejmenším zajíce.

Určitě se shodneme na tom, že nikdo rád nečeká a určitě rádi nečekají ani vaši zákazníci. Proto je nesmírně důležité, aby se váš e-shop vykreslil co možná nejrychleji. Pokud budou vaši zákazníci na načtení produktů v kategorii čekat jak v obchoďáku u pokladny, tak je opravdu velká pravděpodobnost, že nakoupí jinde, kde čekat nemusejí. A to, že zákazníci neradi čekají, ví i Google a proto i on ve svém vyhledávání upřednostňuje na předních pozicích weby a e-shopy, které se rychleji načítají a kde zákazník nemusí čekat. Google již v roce 2010 oficiálně potvrdil, že upřednostňuje weby, které se načítají rychle.

Želva nebo zajíc?

Tohle není otázka servírky v asijské restauraci, ale dotaz na to, jak si váš e-shop v současnosti stojí? V následujícím odstavci si tedy řekneme, jak zjistit, zda je váš e-shop onou pomalou želvou nebo čiperným zajícem. K tomu, aby jsme to zjistili, máme řadu nástrojů. Tím nejznámějším je PageSpeed Insights z dílny vývojářského týmu Google.

Dalším nástrojem, který můžeme pro analýzu e-shopu použít je například Pingdom, který vám pomůže zjistit například to, zda máte pomalý server nebo databázi, zda máte na stránkách příliš mnoho skriptů nebo zbytečně velké obrázky.

Podívat se můžete i na WebPageTest, Page Scoring nebo GTmetrix.

My se však více podíváme na prvně jmenovaný PageSpeed Insights (PSI).

Použití PSI je jednoduché, do vstupního pole zadáme URL stránky, kterou chceme měřit a pak už jen čekáme několik okamžiků na výsledek testu, který vám zobrazí největší prohřešky proti rychlosti, které na stránce našel, ale také vám poradí, jakým způsobem tyto chyby napravovat.

Celkové skóre

“Modrá je dobrá…” Tady to bohužel neplatí. Pokud máte celkové skóre v zelené barvě, tak jste vyhráli, a dál už ani nečtěte. Dejte si nohy na stůl a užívejte si rychlost vašeho e-shopu.

Ale ne, kecáme, vždycky je co zlepšovat, a i když je vaše homepage e-shopu jak Usain Bolt na Redbullu, tak je potřeba zkontrolovat i další typy stránek na vašem e-shopu, jako je výpis kategorie a detail. Respektive byste měli mrknout do Google Analytics a zkontrolovat všechny vstupní stránky vašeho e-shopu.

Pokud je vaše skóre oranžové, tak je vaše rychlost e-shopu velmi dobrá, ale rozhodně byste ani vy neměli usínat na vavřínech a podívat se na doporučení uvedené níže, které říká na čem by bylo potřeba ještě zapracovat.

A pokud na vás čertovsky pomrkává červené skóre rychlosti, tak je potřeba se začít rychlosti pomalu věnovat. A pokud jsou navíc naměřené hodnoty pod 20 bodů, tak si z předchozí věty škrtněte slovo pomalu. Netřeba však věšet hlavu, ale pustit se do práce. Protože i ten váš šneček může za chvíli běhat tak, že mu budou vlát tykadla.

Při měření je také nutné počítat s tím, že hodnoty měření se mohou při opakovaných pokusech lišit až o 10 bodů. Nástroj je totiž závislý na vytížení vašeho serveru a sítě. Proto je vhodné měření opakovat s dostatečným odstupem a třeba i v různých částech dne.

Data pole – rychlost od skutečných uživatelů

Zde najdete měření od skutečných uživatelů vašeho e-shopu, tedy od těch, kteří používají jako prohlížeč Google Chrome. Data zde zobrazená jsou za posledních 30 dnů měření. Může se stát, že v této sekci nebudete mít žádná data, protože “není k dispozici dostatek dat o rychlosti v reálném světě”, v takovém případě je vaše testovací stránka málo navštěvovaná a Google nemá dostatek dat pro zobrazení metrik.

Pokud se vám naměřená data zobrazují, tak nás v těchto grafech budou zajímat především dvě rychlostní metriky a to První vykreslení obsahu (First Contentful Paint – FCP), tedy to kdy se vašemu uživateli poprvé zobrazí obsah, a Prodleva prvního vstupu (First Input Delay – FID), která říká, za jak dlouho od prvního kliku stránka zareaguje.  

V grafech tedy vidíme, jak si v jednotlivých metrikách vedou uživatelé vašeho e-shopu. Ti jsou rozděleni do tří kategorií zastupujících rychlý, průměrný nebo pomalý uživatelský prožitek. Zjednodušeně čím více je ve vašem grafu zelené než červené barvy, tím lépe. 

Laboratorní data

Tyto hodnoty pocházejí ze strojového měření, při kterém dva virtuální počítače změří váš  e-shop pro desktop (zařízení s rozlišením 1366px) a mobil (s rozlišením 412px).

Podívejme se teď na jednotlivé naměřené metriky.

První vykreslení obsahu (First Contentful Paint – FCP) nám prozradí, kdy se návštěvníkovi vašeho e-shopu poprvé zobrazí nějaký text nebo obrázek.

Doba do interaktivity (Time to Interactive – TTI) říká, kdy začne být stránka plně interaktivní.

Index rychlosti (Speed Index – SI) udává, kdy se vykreslí celá obrazovka nad zlomem stránky.

Celková doba blokování (Total Blocking Time – TBT) je součet všech dob mezi FCP a TTI, u nichž délka úlohy překročila 50 ms.

Největší vykreslení obsahu (Largest Contentful Paint – LCP) udává čas, kdy byl vykreslen největší text nebo obrázek.

Kumulativní změna rozvržení (Cumulative Layout Shift – CLS) měří přesuny viditelných prvků v zobrazované oblasti a udává stabilitu vzhledu stránky během vykreslování.

Nejvyšší váhu na celkové skóre rychlosti mají metriky LCP (největší vykreslení obsahu) a TBT (Celková doba blokování), každá se podílí na skóre 25 %.

Příležitosti a Diagnostika

V těchto částech reportu se dozvíte doporučení co ve vašem e-shopu vylepšit. V části Příležitosti vám Google zobrazuje možnosti pro další optimalizaci rychlosti e-shopu s odhadovanou úsporou času při její realizaci.

Poslední částí reportu je Diagnostika, která vám přináší informace o výkonu vaší stránky.

Pro základní optimalizaci rychlosti byste měli vyřešit minimálně doporučení z těchto dvou částí. V příštím dílu našeho seriálu se proto podíváme, jak jednotlivá doporučení realizovat v praxi.