Jestliže jste si dali pořádnou práci se všemi kroky vedoucími ke správně vytvořenému webu, tak by byla škoda rychle odbýt pár posledních kroků na závěr. Někomu se můžou zdát nedůležité, ale myslíte-li to se svým webem opravdu vážně, pak byste je neměli zanedbat. V tomto článku vám popíši, proč byste se měli zajímat o rychlost svého webu. Rychlost načítání webu je totiž jedním z důležitých faktorů on-page optimalizace, a proto si jej dnes rozebereme podrobněji. Pojďme společně na to.

Co to rychlost webu je a co ji ovlivňuje?

Rychlost webu je jedním z technických faktorů optimalizace pro vyhledávače. Rychlost tedy nejen ovlivňuje celkový návštěvnický prožitek z vašeho webu, ale je i jedním z více jak 200 faktorů, které Google i další vyhledávače používají v algoritmu výpočtu pozic konkrétních stránek ve výsledcích vyhledávání. Je-li váš obor konkurenční a chcete-li mít lehce konzumovatelné a vysoce hodnocené stránky ve vyhledávačích, rychlost své stránky byste neměli podceňovat. Může totiž jít o hlavní důvod, proč nejste v současnosti tolik vidět v přirozených výsledcích vyhledávání. Rychlost webu často souvisí s pozicemi stránek ve vyhledávačích a ovlivňuje množství organické návštěvnosti z vyhledávačů na váš web a tím i šance na vyšší konverzní poměr. Výsledky WPO stats například ukazují, že zvýšením doby načítání z 1 na 3s, stoupne míra okamžitého opuštění webu o 32 %, což je výrazné zhoršení. I proto na tento faktor Google pohlíží na velice důležitou věc při řazení výsledků vyhledávání.

Jak si otestovat rychlost webu

Ke zjištění rychlosti webua odhalení problémů je k dispozici mnoho nástrojů. Vyzkoušejte například PageSpeed Insights, který zhodnotí výsledek v mobilním zařízení a na desktopu. Můžete dostat třeba takovýto výsledek:

Červeně označené metriky jsou problémové, oranžově v normě, ale ne ideální, zeleně označené jsou dobré výsledky. Často z testu zjistíte, že váš web má špatnou hodnotu metriky Largest Contentful Paint, někdy označovanou zkratkou LCP, což česky znamená vykreslení největšího obsahu. Tedy jak dlouho trvalo vykreslení největšího obsahového prvku na stránce v prohlížeči. To by mělo být dle Googlu ideálně méně než 2,5s. Web může mít problém také s metrikou Cumulative Layout Shift, někdy označovanou zkratkou CLS, což česky znamená kumulativní změna rozvržení. Určitě jste to také někdy zažili. Jste na webu, chcete kliknout na nějaký článek a najednou se obsah posune, objeví se reklama či jiný právě vykreslený prvek a místo na článek kliknete jinam. Tyto a další neočekávané změny rozvržení stránky Google hodnotí pomocí skóre CLS. Čím nižší číslo je, tím lépe. Ideálně byste se měli pohybovat pod hodnotou 0,1, což analyzovaný web nesplňuje. Vysvětlení dalších metrik naleznete v nápovědě v nástroji.

Nástroj PageSpeed Insights vám také ukazuje v sekci “Příležitosti” věci, které pokud opravíte, pomohou vám zrychlit načítání stránky. Může jít například o problém se zastaralými formáty obrázků (kterými jsou třeba PNG či JPEG) či přebytečným kódem na stránce. Tyto věci jsou často úkolem především pro programátora.

Co tedy rychlost vaší stránky nejvíce ovlivňuje?

Spolehlivý hosting

Jedním z nejdůležitějších faktorů rychlosti webu je vhodně zvolený hosting. Cílíte-li na českou návštěvnost, tak by se i server, na kterém budete mít umístěné své stránky, měl nacházet v České republice. Dále nepodceňujte rychlost zařízení, které si pronajímáte. Obecně by se dalo říct, že je důležité synchronizovat technologie použité při tvorbě stránky s výkonem hardwaru, na kterém je budete mít.

Nejdůležitější faktorem však je, aby váš hosting neměl časté výpadky. To by pak mohl být web z hlediska vyhledávače shledán jako nespolehlivý a vy byste kvůli tomu mohli být postiženi. Cílem vyhledávačů je posílat návštěvnost na co nejspolehlivější stránky. A web, který se v SERPu objevuje nahodile, není vzorem spolehlivosti.

Než se rozhodnete své webové stránky umístit na hosting, tak se určitě ujistěte, jak moc spolehlivý hosting je. Zajímat by vás měla historická dostupnost hostingu a v praxi si rozhodně vyzkoušejte dostupnost běžících projektů a rychlost jejich načítání. Pokud už své stránky někde máte a s hostingem nejste spokojeni, tak neváhejte a stránky přesuňte jinam. Kvůli pár korunám ušetřeným za hosting byste mohli přijít o zakázky za tisíce.

Obrázky v rozumné kvalitě a velikosti

Máte rádi veliké a kvalitní obrázky? Já také, ale pozor na to, abyste jimi nezpomalovali chod vašich stránek. V náhledových obrázcích používejte obrázky odpovídající velikosti. Pokud je na vaší stránce galerie, tak zobrazujte pouze optimalizované obrázky v odpovídající kvalitě. Do kategorie obrázků by mohl spadat i neprofesionálně vytvořený a neúsporný grafický návrh webu. Ohlídejte si grafika a kodéra. Co nemusí být nakreslené, vytvořte pomocí CSS, nebo použijte nové formáty obrázků, jako např WebP či AVIF.

Přehlcení reklamou

Nejenže reklama vaše návštěvníky obtěžuje, ale také zpomaluje váš web. Nejsou‑li konverzní cíle webu čistě reklamního charakteru, měli byste se přehlcení reklamou rozhodně vyvarovat. Vždy se snažte spočítat, zda se vám reklama na webu vyplatí více než rychlý a prozákaznický web bez reklamy. Není‑li web tvořen výhradně pro účely reklamy, tak ji využívat příliš nedoporučuji. Případně pouze v citlivé formě, která neprodlouží dobu načítání stránek.

Přehlednost a velikost kódu

Dalším z faktorů, který ovlivňuje rychlost stránky, je velikost a optimalizace zdrojového kódu stránky. Vaším cílem by měl být přehledný kód, který zbytečně nezatěžuje stránky, databázi ani server.

Pluginy a widgety v redkačním systému

Nejpoužívanějším redakčním systémem na světě, na kterém běží tisíce webů, je WordPress (díky němu můžete snadno vybudovat jakýkoliv web – podívejte se, jak si založit na WordPressu vlastní stránky). Existuje však mnoho dalších rozšířených nástrojů na správu obsahu webu a téměř každý je rozšiřitelný tisíci různými dostupnými pluginy a doplňky. Různé (často i amatérské) pluginy si ale vybírají svou velkou daň, a tou je nižší rychlost vaší stránky. Čím více pluginů na svém webu používáte, tím je stránka pro vyhledávače často horší pro procházení. Zdrojový kód je plný nepotřebných úseků, a proto je dobré se před užitím pluginů opravdu zamyslet. Položte si otázku: „Opravdu plugin potřebuji?“ nebo „Vyplatí se mi plugin používat za cenu pomalejšího webu?“

Další střípky kódu, které kradou rychlost

Mezi další věci, na které byste se měli soustředit, patří různé affiliate kódy, přihlašovací formuláře, analytické kódy a podobné prvky. Jsou to všechno milisekundové položky v rychlosti vaší stránky, ale jste-li opravdu rychlostní fanatik, měli byste svůj zrak upnout i k těmto „požíračům“ rychlosti načítání.

Závěr

Soustředíte-li se v tvorbě nového webu na rychlost stránky, tak byste měli mít na paměti jedno základní pravidlo: nepoužívejte to, co opravdu nepotřebujete. Všechny pluginy, které vám přijdou zbytečné, vymažte. Náhledové obrázky používejte v co nejmenší verzi. Zkuste se držet pravidla – méně je více. Usnadníte tak prohlížení stránek vašim návštěvníkům. Není nic horšího než kvalitně vybudovaný web, kde jsou všechny on-page faktory optimalizace v pořádku, ale stránky se ve výsledku zoufale pomalu načítají.

Tento článek byl naposledy aktualizován 1. 6. 2022 Josefem Řezníčkem. Původní článek napsal Tomáš Procházka 30. 4. 2013.

Článek Proč byste měli mít rychlý web se nejdříve objevil na Včeliště.

O rychlosti stránky jsme loni napsali článek. Pokud se SEO začínáte, bude se vám líbit. Byl totiž součástí našeho seriálu SEO pro začátečníky, jehož výstupem je příručka 15 prvních SEO kroků pro začátečníky. Tu si jednoduše stáhněte v sekci publikujeme. Po roce nastala správná doba pro rozšíření vědomostí pro ty, kteří už SEO rozumí alespoň trochu.

Většina z vás tuší nebo ví, že rychlost stránky je důležitá nejen pro návštěvníky, ale také pro vyhledávače. V dnešním článku vám dáme pár tipů na to, jak ji vylepšit. Pokud by vám článek nestačil a zajímají vás mnohem více technické aspekty rychlosti webu, přečtěte si tento článek. Pro programátory takřka povinnost.

Než začnete číst, je třeba krátké opakování, proč je rychlost webu důležitá:

• Uživatelé se cítí lépe, z webu neodchází a více konvertují ke konkrétním akcím.
• Váš web získá lepší hodnocení z hlediska SEO - pro vyhledávače je rychlost důležitá.
• Ušetříte na PPC reklamách sítě AdWords - rychlost ovlivňuje quality score konkrétní landing page.

Prvním krokem na cestě k rychlému webu je poznat jeho současnou rychlost. K tomu můžete využít různé nástroje. Jako první doporučujeme vyzkoušet vychytávku od Googlu. Váš web si proto nejprve zanalyzujte zde: https://developers.google.com/speed/pagespeed/insights/.

Výsledek můžete porovnat i s dalšími analyzátory jako jsou například:

• https://gtmetrix.com/
• https://tools.pingdom.com/fpt/
• https://www.webpagetest.org/

Většina lidí testuje pouze hlavní stranu webu, ale to není ideální přístup. Relevantnější výsledek získáte, pokud otestujte několik nejvýznamnějších podstránek vašeho webu. Pěkný článek na toto téma, v němž naleznete jednotlivé nástroje pro testování rychlosti pěkně popsané,  je zde.

Rychlost stránky a Analytics

Rychlost vaší webové stránky můžete také dobře sledovat v Google Analytics. Většina z vás asi tuto možnost již zná, ale pokud patříte mezi ty, co o tom slyší poprvé, naleznete tyto informace na obrázku vlevo.

Trackování rychlosti provedete snadno. Pokud používáte redakční systém WordPress, použijete příslušné pluginy pro Google Analytics (např. Google Analyticator nebo známý Google Analytics plugin od Yoast).

Nefungujete-li přes WordPress, budete muset do zdrojového kódu webu přidat několik řádků pro trackování načtení rychlosti stránky. Kód pak bude vypadat asi takto:

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 
'UA-xxxxxxx-x']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);

(function() {
	var ga = document.createElement('script');
	ga.type = 'text/javascript'; ga.async = true;
	ga.src = ('https:' == document.location.protocol 
? 'https://ssl' :
	'http://www') + '.google-analytics.com/ga.js';
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(ga, s);
})();

</script>

Poté ještě do kódu přidejte tuto řádku:

_gaq.push(['_setSiteSpeedSampleRate', 5]);

Číslo pět v tomto případě znamená procento návštěv, které budou Analytics na vašem webu sledovat pro účely měření. 5 % se ve většině případů jeví jako ideální. 

Zvyšujeme rychlost

Nyní byste se měli nacházet ve fázi, kdy víte, jak na tom jste. Pojďme se podívat na to, co a jakým způsobem budete nejčastěji opravovat.

Zbytečně velké obrázky

Nejčastějším problémem mnoha webů jsou zbytečně velké obrázky. Sami si můžete nyní rychle a jednoduše otestovat, jak na tom váš web je.

Jděte na Google do záložky obrázky. Napište do vyhledávacího pole příkaz "site:nazevvasehowebu.cz" a vyjedou vám všechny indexované obrázky. Jednoduše pak zjistíte podle filtrace dle velikosti, kolik a jak velkých se na vaší stránce nachází. Zaměřte se zejména na ty velké a u každého pečlivě zkontrolujte, jestli je jeho velikost opravdu nutná. Pokládejte si otázku "Nešly by nějaké zmenšit?"

Kromě zmíněného jednoduchého postupu můžete k nalezení velkých obrázků použít náš oblíbený Screaming Frog. Screaming frog jsme na blogu nedávno dvakrát zmiňovali. První článek byl o úpravě meta description - popisků, ve druhém jsme řešili titulky a nadpisy. Kromě těchto věcí ale Screaming frog umí odhalit i velké obrázky. Stačí přejít do záložky "Images" a vyfiltrovat si obrázky větší než 100 kb. Podobně jednoduše můžete celý seznam velkých obrázků vyexportovat do souboru ve formátu .csv a potom s ním dále pracovat.

Tip: I když jazyk HTML umožňuje zmenšovat obrázky, nedělejte to.

GZIP komprese CSS  a JS souborů

Další možností, jak výrazně zvýšit rychlost webu, je použít kompresi GZIP. Je to sofistikovaná metoda, kterou můžete využít pro snížení velikosti kaskádových stylů, javascriptů nebo třeba i fontů. Pomocí tohoto nástroje si můžete jednoduše zjistit, zda váš web tuto metodu už využívá či nikoliv. Nemělo by smysl zde popisovat podrobný postup - opravdu dobře to totiž udělal Tomáš Erlich v tomto článku.

Kešování souborů pomocí .htaccess

Kromě GZIP komprese je vhodným doplněním pro zrychlení stránek kešování souborů. Pokud využijete tuto metodu, nebudou některé soubory stránek muset uživatelé stále stahovat ze serveru, ale využije se k tomu jejich disk, který je mnohonásobně rychlejší. Opět podrobně rozvádí Tomáš Erlich na svém blogu. Pokud používáte redakční systém WordPress, zkuste využít některé z volně dostupných pluginů.

Úprava rychlosti pomocí data URI a CSS sprite

Díky metodě CSS sprite snížíte počet požadavků, které má stránka vykonat. Kvůli sníženému počtu požadavků dovolíte prohlížeči stahovat stránky rychleji. Podobná, ale dle Tomáše ještě lepší, je metoda data URI.

Hosting je základ

Kvalitní hosting je základ. Jak ho vybrat a na co se soustředit, popisuje tento návod pro začátečníky.

Závěr

Doufáme, že vám tento článek opět trochu rozšířil obzory. Možná teď trnete hrůzou a přemýšlíte, zda rychle rychlost webu vylepšit. Rád bych vás uklidnil, kromě rychlosti webu, jak říká SEO guru Matt Cutts, je i dalších cca 200 faktorů, které o umístění vašeho webu rozhodují.

Článek Rychlost stránky a SEO pro pokročilé se nejdříve objevil na Včeliště.