Rychlost stránky a SEO pro pokročilé

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: http://developers.google.com/speed/pagespeed/insights/.

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

• http://gtmetrix.com/
• http://tools.pingdom.com/fpt/
• http://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í.

Nicméně rychlost je jeden z nich.