Fotobanka Pixmac odedneška dodává komerční výsledky do Seznamáckého vyhledávání obrázků na Obrázky.cz ;)

• http://obrazky­.cz?q=byznys
• http://obrazky­.cz?q=praha
• http://obrazky­.cz?q=pláž

Sérii o rychlosti webu plynule nahradím sérií o javascriptovém frameworku jQuery. Nebudu rozebírat důvody, proč je dobré používat framework a už vůbec vám nebudu radit, který je nejlepší. Na to si člověk musí přijít sám ;) Sám jsem nahradil Prototype právě knihovnou jQuery.

Standardní funkce a efekty frameworků se v zásadě od sebe neliší, všude máte nějaké to vyjíždění, zasouvání, zkrácený přístup k elementům přes $(‚#id_elementu‘), pohodlnou práci s DOMem a selektory, práce s Javascriptem je pak spíše zábava než práce. Ostatně, příkladů lze na internetu najít čím dál tím víc. Budu tedy střídat základy práce s frameworkem jQuery a užitečnými tipy a návody. Jinak jQuery má super dokumentaci, dobré příklady a rozsáhlé fórum. Tyto odkazy doporučuji v první řadě.

Horké klávesy (hot keys)

Znáte je z desktopových programů, ale čím dál více se začínají dostávat i do web aplikací, ve kterých je pak radost pracovat a bavit se. Klávesové zkratky jsou bezvadným doplňkem „user experience“ a to je v dnešní době obzvlášť důležité. Používáte v Google Docs zkratky? Všechny důležité fungují stejně jako v desktopových kancelářských aplikacích. A co Facebook? Stránkujete obrázky pomocí šipek na klávesnici nebo se snažíte pokaždé trefit myší na „Další“?

A právé teď přichází na scénu jQuery plugin hotkeys, který zvládne všechny zkratky ve všech moderních prohlížečích. Miniverze pluginu má jen 4.4 Kb, takže není třeba se bát stokilových molochů. „Bindování“ zkratek je pak až neskutečně triviální.

Zapínám odchytávání zkratky Ctrl+C (kopírování):

$(document).bin­d(‚keydown‘, ‚ctrl+c‘, fn);

A tady zase vypínám:

$(document).un­bind(‚keydown‘, ‚ctrl+c‘, fn);

Čekali jste něco víc? Bohužel, je to až takhle jednoduché. Další informace a živé ukázky přímo na stránkách projektu. A ještě jedna ukázka praktického využití tohoto pluginu. U nás ve fotobance Pixmac je stránkování ve výsledcích vyhledávání jednou z nejdůležitějších funkcí. Najít ten pravý obrázek do prezentace nebo na billboard prostě někdy není jednoduché. Maximální komfort tak zaručí náš „Auto result“ a stránkování pomocí šipek na klávesnici. Auto result spočítá maximální možný počet fotek na stránce (z viewportu), takže na malém monitoru dostanete třeba 8 fotek, kdežto na velkém třeba 30. Konec nepohodlného skrolování ;) Pak přichází na řadu přednačítání další stránky v době, kdy prohlížíte fotky na stránce současné. Je to tak směšně prosté a elegantní, že to nikdo z konkurentů nemá. V době kdy prstem mačkáte klávesu „vpravo“ (viz. plugin hotkeys) už jsou náhledy dávno načteny a další stránku dostanete rychleji než bys řek „jQuery“. Předchozí stránka je pak stále schovaná v DOMu a tak stisknutím klávesy „vlevo“ dostanete předchozí výsledek hledání stejně rychle.Však si to vyzkoušejte na nějakém příjemném tématu – žena v plavkách – a samozřejmě uvítám i kritiku, neb sto očí vidí víc, než jen těch deset našich. Díky ;)

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 ;)