Accelerated Mobile Pages (AMP) je technologie, jejímž cílem je vylepšit uživatelský prožitek z webů pomocí zrychlení jejich zobrazení. Google s ní přišel v roce 2015 a zatím je docela úspěšná.
To je dostatečný důvod věnovat AMP třídílný seriál. Podíváme se na technologii z mnoha úhlů pohledu. Můžete se těšit na ukázky jejího využití, nové možnosti, srovnání s Facebook Instant Articles, ale také na kritiku. Nejdříve si ale musíme vysvětlit, jak tahle kontroverzní technologie vlastně funguje.
AMP očima technika
Jde vlastně o mírně upravené HTML a omezené CSS, předvyrobené javascriptové knihovny, umístění stránky na Google CDN a hlavně… přednačtení stránky zajišťující bleskurychlé zobrazení.
Extra HTML stránka se speciálními znaky
O HTML kódu pro AMP už Lupa něco psala, ale raději připomenu, že nejobvyklejším způsobem vytvoření AMP verze webu je stránka se zvláštní adresou. Pokud například produkt v e-shopu existuje na adrese example-eshop.cz/produkt, v HTML hlavičce upozorníme na AMP verzi stránky:
<link rel="amphtml" href="https://example-eshop.cz/amp/produkt">
No a pak ji vytvoříme. AMP HTML je jen upravené HTML. Tady je ukázka minimální AMP stránky:
<!doctype html>
<html amp lang="cs">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Stránka produktu</title>
<link rel="canonical" href="http://example-eshop.cz/produkt">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
</head>
<body>
<h1>Vítejte na stránce produktu!</h1>
</body>
</html>
Pro webaře tady není nic nového, snad kromě:
- slova amp ve značce
<html>, <link rel="canonical">s odkazem na kanonickou (tedy tu původní) stránku.
Nyní je možné do AMP verze vkládat další prvky, které ve standardním HTML nenajdeme. Většina složitějších komponent je v AMP udělána jinak.
Týká se to například už obyčejných obrázků, které je potřeba vkládat přes značku <amp-img>. Ve specifikaci ale najdete řadu složitějších komponent uživatelského rozhraní, které v HTML nejsou: počínaje karuselem a lightboxem a konče dynamickými prvky.
Možná by bylo dobré už tady zmínit, proč vlastně AMP některé věci v HTML dělá jinak: <img> například nezajistí odložené načtení obrázku. Takzvaný lazyloading je pro zrychlení načtení stránky dost důležitý, ale webař jej musí „ručně“ implementovat. V <amp-img> už to všechno je.
CSS nesmí být v externím souboru
CSS je pro prohlížeč vždy blokující zdroj, proto se v AMP verzích stránky vkládá přímo dovnitř HTML. Například následovně:
<style amp-custom>
h1 {
color: blue;
}
</style>
Vzhledem k tomu, že AMP stránky se načítají skoro vždy jednotlivě a po první AMP stránce už uživatel přechází na běžnou verzi webu, je vložení CSS do HTML z pohledu rychlosti načítání dobrá technika. Prohlížeč totiž nečeká na externí zdroje.
Vkládání do HTML je opět známo z jiné „ručně“ dělané techniky – kritického CSS.
AMP podporuje drobně omezenou sadu CSS vlastností. Nesmí se kromě jiného používat direktiva !important nebo není možné animovat jiné vlastnosti než ty, jež jsou akcelerované pomocí grafického procesoru zařízení. Ano, tahle technologie nehlídá jen rychlost načtení, ale také výkon stránky v prohlížeči.
Žádný vlastní JavaScript
Z pohledu vývojáře je tohle největší omezení. Není prostě možné vložit si do stránky javascriptové knihovny vlastní nebo třetích stran.
Jak už jsem ale psal, AMP nabízí spoustu vlastních komponent, které je možné pro výrobu plnohodnotné stránky využít. Vezměme už zmíněný příklad karuselu. Do stránky je potřeba zalinkovat jeho knihovnu:
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
A pak karusel vložit na místo, kde jej chceme použít s vlastním nastavením:
<amp-carousel width="450"
height="300">
<amp-img src="images/image1.jpg"
width="450"
height="300"></amp-img>
<amp-img src="images/image2.jpg"
width="450"
height="300"></amp-img>
</amp-carousel>
Vy, kteří občas nějaké ty weby děláte, asi uznáte, že se zde dost myslí na pohodlí běžného webového kodéra. Veškerou konfiguraci prostě zapíšeme v AMP HTML.
Omezení JavaScriptu je hodně kritizovanou vlastností AMP. Jenže on prostě JS dnes je největší zabiják výkonu webu.
Nemusíte vždy vyrábět extra AMP verzi
Musím samozřejmě zmínit, že výrobu AMP verze je možné nechat na pluginu. Pro volně dostupné redakční systémy, jako je WordPress nebo Drupal, je zde řada pluginů. Moc to nedoporučuji. AMP verze stránky pak totiž obvykle bude vypadat a používat se jinak než běžný web.
TIP: Přehledného průvodce návrhem a implementací responzivních uživatelských rozhraní najdete v knize Martina Michálka Vzhůru do (responzivního) webdesignu
Není nutné dělat vždy AMP extra verzi. Pokud se pro tuto technologii rozhodnete, velmi doporučuji jí přizpůsobit výchozí verzi webu. Všechny komponenty AMP budou fungovat na každém běžném webu. Tomuto přístupu se říká „AMP-first“, a pokud je to jen trochu možné, doporučuji jej.
Třetí, kompromisní přístup používám na svém Vzhůru dolů: V backend kódu je pár podmínek, které na několika místech posílají AMP verzi trochu jiný kód než běžné verzi webu. Drtivá většina kódu je pak společná a vývojáři nemusejí spravovat dvě verze.
AMP je ale na rozdíl od HTML a CSS velmi přísný, takže vás nepustí dál, dokud nebudete mít validní AMP stránku.
Umístění na Google CDN
Teď přijde to hlavní: Jakmile roboti Google zjistí, že na svém webu odkazujete na AMP verzi, stáhnou ji a umístí na googlích serverech. Následně se začnou nabízet ve výsledcích vyhledávání Google.
Nahoře e-shop Bella Rose a jejich původní článek na blogu, pak jeho umístění v Google hledání a nakonec AMP verze téhož, řešená WordPress pluginem. Totéž dole u pana Cuketky, který AMP řeší vlastním přístupem.
Stránka se pak ještě na serverech trochu upraví a následně zobrazí v „AMP Viewer“, což je ono prostředí, kde si prohlížíte AMP weby s lištou Google nahoře.
Píšu o „robotech Google“, ale to umístění na vlastní serverové cache může udělat jakákoliv platforma, přes kterou se lidé dostávají na váš obsah. Pokud je mi známo, AMP verze stránek používají například nativní mobilní aplikace LinkedIn nebo Twitteru.
Dobře, ale k čemu to celé je?
Vytvořením stránky pomocí technologie AMP si u běžných webů dost výrazně vylepšíte rychlostní ukazatele. Tim Kadlec nedávno ukázal, že AMP stránka je obvykle výrazně rychlejší než normální stránka od stejného týmu.
Umístěním statické stránky na Google CDN se to dále mírně zlepší, protože u načítání obvyklých webů hraje nemalou a nehezkou roli také serverový čas. Co ale hraje větší roli, je série statických optimalizací, která se na AMP stránkách udělá.
To opravdové kouzlo ovšem přichází až s dalším krokem.
Přednačtení ve výsledcích vyhledávání
Kromě toho, že ve výsledcích vyhledávání Google AMP stránky označí (čímž je už trochu zvýhodní), na pozadí načte první v pořadí. Výsledky jsou samozřejmě skvělé:
|
Bella Rose |
Cuketka |
|
|
Web na hostingu |
22 885 |
12 971 |
|
AMP na hostingu |
9 467 |
15 722 |
|
AMP na Google |
6 951 |
11 660 |
|
AMP na Google s přednačtením |
274 |
163 |
Tabulka: Srovnání Speed Indexů různých verzí detailů článků. Běžný web, pak AMP verze na hostingu u běžného webu, AMP na hostingu u Google.
Speed Index je skóre, které ukazuje, jak rychle je viditelný obsah stránky naplněn do stavu stoprocentního vykreslení. Čím nižší je, tím lépe. Na referenční rychlosti 3G Slow lze o výborném výsledku mluvit už ve chvíli, kdy je skóre nižší než 5000 bodů.
Mrkněte se na poslední řádek tabulky. Nedá se už pak samozřejmě mluvit o rychlosti načtení. Jde o okamžité zobrazení.
Rozdíly ve Speed Indexu vám, na rozdíl ode mě a jiných expertů na rychlost webů, velký vítr v hlavě udělat nemusejí. Pojďme se proto podívat na některé případové studie ze světa i z ČR.
Jak AMP pomáhá obchodním ukazatelům?
Z dostupných případových studií vyplývá, že většinou docela dost:
- Známý Washington Post vylepšil nasazením AMP rychlost o 88 %. Následně pak počet uživatelů, kteří se do týdne vrátí zpět, o 23 %.
- Když Triplelift začal servírovat AMP reklamy na weby Time.com, šestkrát zvýšili rychlost načtení reklamy a příjmy z ní o 13 %. Tady je také možné si povšimnout, že pro distribuci používají Cloudflare, a nikoliv výlučně servery Google, jak by si někdo mohl myslet.
- V Česku vytáhl čísla Pavel Ungr z AMPů nasazených u našeho společného klienta, e-shopu Bella Rose – po redesignu blogu a nasazením AMPu vzrostla návštěvnost z vyhledávačů o téměř 800 %.
Hosting pro WordPress Kinsta, na druhou stranu stranu, ukazuje, že nasazením AMP klesla návštěvnost z mobilů o 59 %. Rockstar Coders klesly konverze o 70 %. Případové studie ale neukazují podstatné informace: Jak vypadaly jejich AMPy a pro jaké stránky je nasadili? Jaká byla metodika měření?
Dobré změření výsledků po nasazení AMP je věda a cizí zkušenosti jsou prostě… cizí. Takže opět nezbývá, než abyste si to vyzkoušeli sami. Opatrnost je zde na místě, takže vám doporučuji „zapnout AMP“ nejprve na menší skupině stránek a výsledky pak pečlivě vyhodnotit. Dobrou metodu mi ukazoval Pavel Jašek z Google – zapnout si „split test“ v Google Ads a porovnat výsledky AMP stránek s běžnými.
V dalším článku se od technikálií posuneme o úroveň výš, zamyslíme se, proč AMP vznikl, a prodiskutujeme nejčastější výtky vůči němu.
ČLÁNKY DO MAILU