Poslední tip pro rychlejší načítání stránek je spíše otázkou budoucnosti, konkrétně HTML 5. Jednoduchým HTML tagem můžete, až bude mít prohlížeč „dlouhou chvíli“, načíst další potencionální stránku nebo objekt. Funguje to zcela prostě, pro tiché přednačtení celé stránky stačí do hlavičky HTML dokumentu vložit tento tag:

<link rel=„next“ href=„strana-2.html“>

Odkaz samozřejmě směřuje na stránku, která logicky následuje – stránkování článků, další stránka fotogalerie, apod. Další možnost je načíst jen jeden objekt dopředu, třeba obrázek:

<link rel=„prefetch“ href=„/fotky/dalsi-fotka.jpg“>

Nakonec, Firefox tuto fíčurku již podporuje. Prohlížeče Opera, Safari a Chrome budou tento způsob brzy podporovat, Internet Explorer zhruba za 10 let.

V díle třetím ukážu jednu praktiku, která se hodí pro malé obrázky, typicky třeba ikonky, menší loga apod., kde lze ušetřit 100% HTTP requestů, které jsou největším žroutem času při načítání webu. Technika se jmenuje DATA URIs a podporují ji tyto prohlížeče – Firefox, Safari, Chrome, Internet Explorer od verze 8. Kompletní specifikaci najdete v RFC 2397.

Základním faktem je, že místo URL obrázku zapíšete do „src“ nebo v CSS do"url" zapíšete toto schéma: data:[<mediaty­pe>][;base64],<da­ta>

Například:

<img src=„data:ima­ge/gif;base64,R0lGO­DlhEAAOALMAAO­azToeHh0tLS/7LZv/0­jvb29t/f3Ub/ /ge8WSLf/rhf/­3kdbW1mxsbPmf///yH5BA­AAAAAALAAAAAA­QAA4AAARe8L1E­kyky67QZ1hLnjM­5UUde0ECwLJoEx­Kcpp V0aCcGCmTIHEI­UEqjgaORCMxIC6e0CcguW­w6aFjsVMkkIr7g77­ZKPJjPZqIyd7sJAg­VGoEGv2×sBxqNgYP­j/gAwXEQA7“ width=„16“ height=„14“ alt=„Ikona složky“> 

Výsledkem bude taková hezká ikona, bez jediného HTTP requestu.

Na straně serveru potom musíte toto schéma z obrázku vygenerovat, například podle tohoto článku – http://www.si­tepoint.com/…d-data-uris/ … a rozhodně doporučuji DATA URI kešovat, protože na straně serveru je víc takových operací náročných na paměť. Ale každý ušetřený HTTP požadavek za to stojí! Podívejte se ještě na můj příklad, jak mít stránku bez HTTP požadavků (zjistíte v záložce Síť ve FireBugu).

Příklad stránky s jedním HTTP požadavkem!

Nástroj YSlow od Yahoo

vám poví, kde jsou slabiny vašeho webu a napoví, jak je opravit a jak se jich do budoucna vyvarovat. Kompletní návod v angličtině najdete na adrese http://develo­per.yahoo.com/ys­low/help/Konkrét­ní testy, které YSlow provádí a jejich vysvětlení najdete na adrese http://develo­per.yahoo.com/…e/ru­les.html

Minimalizujte HTTP požadavky

Každý CSS soubor, externí Javascript, každý obrázek (ano, i ty v CSS) se načítá ze serveru a zpomaluje načítání stránky. Snažte se, aby těchto souborů byl co nejmenší počet.

• Zkombinujte CSS soubory do jednoho (pokud možno), ať už pomocí skriptu nebo ručně.
• To samé můžete udělat s Javascripty.
• Desítky mrňavých ikonek jsou zabijáci HTTP požadavků. Zkuste využít CSS Sprites!
• Pro malé obrázky, které máte v HTML dokumentu můžete využít DATA URIs.

Používejte Content Delivery Network (CDN)

To platí pro mezinárodní weby, pro ty české moc význam nemá. Velmi zjednodušeně, statické soubory (css, js, obrázky) jsou servírovány ze serveru, který je nejblíže návštěvníkovi stránek.

Používejte hlavičky Expires a Cache-Control

Kešování je nejdůležitější a nejefektivnější metoda pro urychlení načítání webu. Jakmile si návštvník poprvé načte logo, css soubor nebo javascriptovou knihovnu, není důvod k tomu, proč by měl při dalším procházení webu stahovat ty samé soubory znovu a znovu, pokud se nezměnil jejich název. Tady jsem našel praktickou ukázku.

GZipuj!

Komprese je podporována ve většině nových prohlížečů, proč toho nevyužít? Gzipovat můžete HTML stránku, CSS soubory i Javascript. Pro server Apache existují moduly mod_gzip a mod_deflate. Tady je anglický článek na toto téma.

CSS styly patří nahoru, Javascript dolů!

Yahoo vyzkoumal, že načtením CSS souborů v hlavičce HTML se stránka načítá progresivně (postupně). Oproti tomu načítání Javascriptu před koncem HTML dokumentu nedochází k blokaci paralelních HTTP spojení, takže se na tyto soubory zbytečně nečeká (návštěvník vidí obsah dřív). Nezapomeňte však veškeré Javascriptové operace s DOM a vypisováním textu dělat až po načtení celého dokumentu. S pomocí jQuery jednouše:

$(document).re­ady(function() { // kod, ktery se provede po nacteni stranky });

Zmenšujte!

Efektivně zmenšit se dá Javascriptový kód, z CSS kódu lze alespoň odebrat komentáře a bílé znaky, obrázky lze také optimalizovat. Tady je super knihovna minify, která zvládne JS i CSS. Na obrázky pak můžete zkusit nástroj Smush It, dokáže zmenšit obrázek i o desítky procent.

Nejdříve vysypte hlavičku

Zajímavá technika, kterou jsem v praxi ještě nevyzkoušel. Kód je jednoduchý převzal jsem jej z Yahoo. Vpodstatě stačí do šablony za konec HEAD vložit PHP funkci flush(), která vypíše obsah bufferu ihned. Než se tedy dokončí celá HTML stránka, lze těch několik desítek až stovek milisekund efektivně využít.

<!-- css, js  → </head> <?php flush(); ?> <body> … <!-- content  → 

Méně důležité objekty načítejte později

Mrkněte na hlavní stránku Googlu. Co se načte první? Logo a vyhledávací pole. Pohnete myší a máte horní panel a spodní odkazy. Na nějaké stránce jsem viděl super techniku, obrázky uvnitř článku se načítaly, až když jsem k nim došel skrolováním. Geniální ;) Podívejte se na ImageLoader od Yahoo.Další tipy z Google Page Speed a pokročilé techniky zase příště ;)

Vysvětlovat, proč je rychlost webu důležitá, by podle mě bylo pouhým marněním času. Tak jen ve zkratce, je důležitá pro lidi a pro vyhledávače. Jednoduchým selským rozumem a vlastní zkušeností lze vypozorovat, že stránky, která se načítají bleskově, nebo alespoň dostatečně rychle, se nám lépe a radostněji prochází, neb se nebojíme, že na další načtení stránky budeme muset čekat půl minuty. Vyhledávačům se pak dobře indexuje, protože za stejný čas projde více stránek než na pomalejších webech.

V několikadílném seriálu (ikdyž, znáte mě… nebo alespoň já se znám) se pokusím vysvětlit a praktikovat několik metod, které, ať už víc nebo míň, k rychlejšímu webu dopomůžou. Jenže! Jak získat nějaké ty údaje?

Doplňky pro prohlížeč Firefox

Page Speed od společnosti Google a YSlow od Yahoo jsou základními měřícími doplňky, bez kterých se nikdy nikam nevydávejte. Pokud si chcete zachovat i přehlednou historii o zvyšování rychlosti vašeho webu, doporučím web ShowSlow.com, nově lze přidat URL do seznamu a ty se budou pravidelně testovat (právě pomocí Page Speed a YSlow). Lze i krásně porovnávat a nebo se nechat vypsat detailní informace.Pro Google Chrome můžete zkusit relativně nový doplněk – Speed Tracer – ale konkrétní zkušenosti zatím nemám.

Měření v Google Webmaster Tools

Pokud už váš web má nějakou historii ve Webmaster Tools a alespoň nějakou návštěvnost, je možné, že vám Google ukáže podobný rychlostní graf i s informací o průměrné době načítání a přesnosti. Dokáže i porovnat s ostatními weby, takže vám může říct: „Načítání je rychlejší než u 73% ostatních webů.“

Page Speed (Google)

Tento nástroj se od svého bratra dost liší v metodice měření, ikdyž bodová stupnice je stejná, 0 až 100, přičemž 100 je ideální výsledek a dosáhnout ho nemusí být taková sranda, jak se na první pohled může zdát (pokud nemluvíme o jednodstránkovém textovém webu).

Přikládám první příklad, zapracovali jsme na optimalizaci homepage fotobanky Pixmac. Posledním doporučením je „Use efficient CSS selectors“ (používejte efektivní CSS selektory). A rovnou přiloží i příklady. Třeba „#categoriespage .categorypage_box ul li a“ není dobrý selektor.

Takovýchto bodů a doporučení je tu přes 20 a postupně je všechny projdu a popíšu, jak je vyřešit.

YSlow (Yahoo)

Měřící nástroj od Yahoo je daleko přísnější ;) Tam kde Google Page Speed dává 96/100, tam YSlow jen 81/100, takže prostor pro vylepšení tu stále je. A co, že YSlow na webu Pixmac.com nejvíc trápí? Počet HTTP requestů (21 obrázků v CSS) a Expire Headers u statických souborů.YSlow dává jednotlivým bodů i přesnější hodnocení, jako ve škole. A až F, takže přesně víte, kde je prostor pro zlepšení. A nezapomeňte, 80% výkonu ušetříte uděláním 20% optimalizací (Paretův princip). Takže příště už o jednotlivých bodech (i prakticky), těch nejdůležitejších. Pro pokročilé pak třeba Data URIs nebo Link prefetching z HTML 5. Takže, změřte si stránky ;)

Poslední důležitá věc v Google Webmaster Tools, kterou bych chtěl zmínit, je správnost vašich TITLE tagů a META DESCRIPTION. Tyto tagy jsou nejdůležitejšími faktory vašich stránek (společně s dobrým a kvalitním obsahem ;). Obsahují text, který se zobrazí ve výsledcích vyhledávání, takže je jen a jen ve vašem zájmu mít je kvalitní.

Unikátnost

Nejdůležitější vlastnost TITLE i META DESCRIPTION tagů, kterou je dobré dodržovat vždy a všude. Na následujícím screenshotu můžete vidět chybičku v redakčním systému Wordpress, který nevloží do TITLE tagů číslo stránky, takže vznikají duplicitní titulky. V tomto případě by se na konec titulku mělo přidat „ – stránka: X“, každý titulek by se tak stal unikátním a Google by pro přeindexování tyto chyby ze svého systému vymazal.

Délka

Ani krátký, ani dlouhý. Přesně takový by měl být… ehm… titulek a popisek. Přikládám screenshot z fotobanky Pixmac.cz, kde jsem podcenil META DESCRIPTION u několika stránek a Google si toho prakticky ihned všiml. Díky němu tak můžu popisky doplnit a zvýšit tak šance na prokliknutí z výsledků vyhledávání. A ještě odstaveček, kterým se vám Google odvděčí, když opravíte chyby na které vás upozorní ;)

V případě vašeho webu jsme nezjistili žádný problém týkající se obsahu. Při procházení váš web kontrolujeme a na stránkách zjišťujeme všechny potenciální problémy týkající se obsahu, zejména duplicitní, chybějící nebo problematické značky <title> nebo značky metadat „description“. Tyto problémy nepovedou k tomu, že se váš web nezobrazí ve výsledcích vyhledávání Google, ale pokud jim budete věnovat pozornost, získá vyhledávač Google více informací a dokonce to na váš web může přitáhnout větší provoz. Název a text popisů metadat se může zobrazit ve výsledcích vyhledávání a na užitečný a popisný text kliknou uživatelé s větší pravděpodobnos­tí.Naposledy aktualizováno 31.5.2010