Rychlost Stránky A SEO Pro Pokročilé

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.

PPC Hero Quality Score

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/.

PageSpeed Insights

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

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.

rychlost webu

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.

GIDNetwork

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ů.

WP Super Cache

Ú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.

Tomáš Erlich Jak vybrat správný hosting

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.

Tomáš Procházka

Konzultant Včeliště.cz se zaměřením na obsahové strategie, copywriting a SEO. Více o něm naleznete na Impleo.cz nebo sledujte jeho Twitter a Google+

Tento článek má 0 komentářů

  1. Ja bych jeste doplnil lazy loading obrazku (pokud jich je hodne na strance)… Uz jsem videl eshopy co maji obrazkove kategorie a pri nacteni stranky se vygeneroval cely strom a prohlizec treba 4 vteriny nacital jen ty obrazky (i kdyz vetsina navstevniku ani menu neotevrela).

    Prohlizec nacita naraz z jedne domeny jen 4 requesty.

    Dalsi vec bych doporucil minifikaci a spojeni ruznych css a js. Kor u WP treba ma kazdej plugin sve css a js, takze prohlizec musi nacist treba 8 css a 8 js. Pritom by stacilo mit jedno css a jedno js. JS nacitat az pred koncem body. Google dokonce posledni dobou doporucuje nacitat i css az na konci a ty nejzasadnejsi styly mit v hlavicce ve style.

    Existuje dalsi spousta moznosti optimalizace, ale to uz je spise na technicke urovni – nasazeni reverzni proxy, pokrocile cachovani obsahu atd.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Tyto stránky používají cookies. Tím, že na stránkách setrváte, souhlasíte s jejich používáním. Více informací

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close