AMP neboli Accelerated Mobile Pages

Co jsou Accelerated Mobile Pages (AMP)?

Na úvodní stránce projektu AMP se píše:

„Projekt AMP je open-source iniciativa zaměřená na to, aby byl web pro všechny lepší. Projekt umožňuje vytvářet webové stránky a reklamy, které jsou rychlé, krásné a výkonné napříč různými zařízeními a platformami.“

Co to ale znamená? Googlu a dalším došlo, že rychlost načtení stránky, je celkem důležitá věc. V dnešní hektické době je potřeba, aby se stránka načetla v podstatě okamžitě. Uživatelé nechtějí čekat na to, až se po kliknutí na odkaz stáhne několik megabitů javascriptu a obrázků a pak teprve bude možné stránku prohlédnout. Google dlouhodobě doporučuje všem tvůrcům stránek, aby jejich výtvory byly co „nejrychlejší“. Dokonce vytvořil několik nástrojů, které umožňují měřit a optimalizovat rychlost načtení stránky (PageSpeed Insights, testmysite.withgoogle.com, PageSpeed Module).

Kromě toho, že je dnešní doba hektická (a všichni pořád někam spěchají), je to také doba chytrých mobilních telefonů. A nebudeme si nic nalhávat, ale když používáte stránky na mobilním telefonu, tak budete řešit objem přenesených dat. Představte si, že stáhnete několikamegabytovou stránku ze které si ale přečtete jen kousíček (takhle fungují uživatelé). Jenže kvůli tomu, že jste si přečetli jen kousek, jste si museli stáhnout celou stránku se vším všudy.

Tyhle problémy má řešit AMP!

AMP stránka se má načíst co nejrychleji to bude možné. Vykreslit jak jen to bude možné. A věci, jejich stažení stojí čas a peníze a uživatel je nevidí, se mají stáhnout až ve chvíli, kdy je uživatel má vidět.

Rozdíly mezi HTML a AMP

Pokud jste zvyklí psát HTML stránky, tak AMP stránka je velmi podobná. V podstatě je zde jen pár rozdílů. Tyto rozdíly ale mohou být pro někoho celkem zásadní. Popíšu ty, na které už jsem narazil.

JavaScript je zakázaný

Tvůrci projektu AMP si myslí, že jedním z důvodů proč jsou stránky pomalé, je JavaScript. A tak se prostě rozhodli, že nebude potřeba a zakázali značku <script> 🙂.

A hle, ono to přesto funguje. Spousta věcí, na které se používá JavaScript, je možné vytvořit i jinak. Rychleji. Lépe. A to na co se JavaScript používá a není to možné obejít (analytics, reklamy,…), je speciální komponenta.

Takže sbohem JavaScripte 🙂. Na mých stránkách tohle celkem nebyl problém. Prostě jsem všechny scripty vyhodil. Na funkčnost, která pro mě byla životně důležitá, jsem našel adekvátní komponentu. Google Analytics mají svou vlastní. Reklamy také (ale ty už asi nebudu potřebovat). Na „cookies dialog“ je také samostatná komponenta 🙂.

amp-img pro obrázky

Dalším prvkem, který zpomaluje webové stránky, jsou obrázky. Často narazíte na stránku, která stáhne několik fotografií v rozlišení X Megapixelů a zobrazí vám je jako malé náhledy. WTF??? Obrázky v HTML se také vždy stáhnou všechny. AMP stránka si je načítá až v okamžiku, kdy se mají uživateli zobrazit (uživatel k obrázku doscrolloval).

Aby bylo možné zajistit tuto funkčnost, byl také zakázán element <img>. Jeho náhradou je element <amp-img>. Tento nový element umožňuje načítání obrázků „asynchronně“, až v okamžiku, kdy se mají uživateli zobrazit.

Nahrazení elementu img za amp-img bylo pro mě asi nejrozsáhlejší úpravou. Bylo potřeba je nahradit úplně všude. V hlavičce stránek, patičce i v tělech článků. Navíc je potřeba pro amp-img elementy ve většině případů uvádět výšku a šířku. U klasických HTML stránek se toto velmi často neřeší. Ale AMP potřebuje mít výšku a šířku zadánu, aby nedocházelo po načtení obrázku k posuvům stránky. Musel jsem tedy při skládání stránky začít aktivně používat PHP funkci getimagesize(string $filename), která zjistí rozměry obrázku a já je pak mohu do amp-img zapsat.

amp-youtube pro videa z youtube.com

V některých článcích mám vložena videa z youtube.com. Standardní postup, který nabízí i youtube je vložení divu obsahujícího iframe. Jenže iframe je další ze zakázaných elementů. Naštěstí pro videa z youtube opět existuje samostatná komponenta. Jmenuje se amp-youtube. Nahradit touto komponentou v článcích všechna místa, kde se do stránky vkládá video z youtube, bylo otázkou okamžiku.

amp-iframe pokud je potřeba iframe

Pro vkládání jiných stránek do stránky se používá element <iframe>. Ten je ale v AMP také zakázaný. Když tedy iframe nutně potřebujeme, musíme ho nahradit za element amp-iframe.

Pozor ale na to, že amp-iframe má ještě další omezení:

1. nesmí se vyskytovat v prvních 75% stránky nebo musí být nejméně 600 pixelů od vrcholu.
   V případě, že je toto pravidlo porušeno, iframe se nezobrazí. Vyzkoušeno 🙂.
2. stránka, která se má v iframu zobrazit musí být dostupná přes HTTPS.
3. stránka, která se má v iframu zobrazit nesmí být ze stejné domény. Například moje doména je charlieblog.eu, tak v iframu nemohu žádnou jinou stránku z domény charlieblog.eu zobrazit. Mohu ale zobrazit stránky z domény amp.charlieblog.eu a podobných. Samozřejmě také stránky z jiných domén (seznam.cz, novinky.cz, flexibee.eu,… ). V dokumentaci se píše, že pokud chcete vkládat stránky ze stejné domény musíte sandboxu nastavit parametr allow-same-origin. To ale u mě z nějakého důvodu nezabralo 😞.
4. amp-iframe nesmí být používán pro zobrazování reklamy. Na to jsou v AMP jiné komponenty.

Google analytics a amp-analytics

Další věcí, která se vkládá do většiny stránek, je Google Analytics. Každý chce vědět, zda jsou jeho stránky navštěvovány a co na nich uživatelé dělají. Vzhledem k tomu, že JavaScripty jsou na AMP stránkách zakázané, bylo nutné i pro Analytics vytvořit použít samostatnou komponentu. Pro tyto účely slouží komponenta amp-analytics.

Samozřejmě používám Google Analytics. Ale také si samostatně u článků eviduji jejich návštěvy. Potřeboval jsem tedy způsob, jak si při zobrazení AMP stránky, poslat informaci na server. Nakonec jsem i pro tento požadavek použil amp-analytics. Tato komponenta totiž neslouží jen pro Google Analytics, ale je ji možné použít i pro jakýkoliv jiný analytický systém. I pro ten můj jednoduchoučký 🙂.

Cookies dialog pomocí amp-user-notification

Pokud na stránce chcete zobrazit Cookies dialog, tak komponenta amp-user-notification je tou pravou. Po načtení stránky se v dolní části zobrazí panel s hlášením a potvrzovacím tlačítkem.

Zda se má notifikace uživateli zobrazit nebo ne, je možné řídit. Buď ponecháme standardní chování využívající local storage, nebo využijeme server endpoint. Notifikace využívající local storage se uživateli zobrazí při prvním přístupu na stránku. Po potvrzení se do local storage uloží, že byla notifikace potvrzena a už se nikdy nezobrazí.

Pokud využijete server endpoint, je potřeba naprogramovat dva scripty. První bude vracet jednoduchý JSON objekt {"showNotification" : true | false }. Hodnota true znamená, že se má hlášení zobrazit. Hodnotu false bude script vracet v případě, že již byl dialog potvrzen jinde. Tohoto chování je dobré využít pokud uživatel může přecházet mezi bežnými a AMP stránkami. Druhý script, je zavolán v okamžiku odsouhlasení notifikace. Tato informace se zároveň uloží do local storage a tak již nedochází k dalším voláním na server.

Původně jsem nejdříve chtěl popsat tuto komponentu a až pak amp-analytics. Ale nakonec mi to přijde takto logičtější, protože pro amp-user-notification je potřeba mít amp-analytics.

Cachování stránek u Google

Proč se tohle všechno dělá? Aby byly stránky rychlejší. Jednou z věcí, které tomuto napomáhají je cachování stránek u Googlu. Je to podmínka. Bez toho nemají AMP stránky moc velký smysl.

Pozor ale na to! Jakmile Googlu jednou řeknete o AMP stránkách, tak je začne v určitých případech preferovat. Takovýmto případem je vyhledávání v Chrome na Androidu. Tohle mám vyzkoušené. Pokud zkusím vyhledat nějaký z mých článků, tak mi Google nabídne jeho AMP variantu z cache. V jiných prohlížečích, které jsem zkoušel (Firefox, Samsung prohlížeč, Chrome na desktopu), Google nabízí běžnou variantu stránek.

Také v případě, že na stránce je nějaký „dynamický“ (stále se měnící) obsah, je nutné na cachování myslet. Například u mých článků je sekce komentářů, které sem tam někdo přidá. Pokud by se komentáře načítali z cache mohlo by trvat dost dlouho, než někdo nový komentář uvidí. Řešením je využít amp-iframe nebo amp-list.

Co mi AMP stránky daly?

Několik věcí, které jsem díky doplňování podpory AMP stránek, zjistil.

1. No, je to zajímavý experiment 🙂.
2. Google je u mě výrazně častěji než dříve.
3. Články se načítají rychleji. Především v případě, že je v článku víc obrázků, které ale nejsou hned viditelné.
4. Opravil jsem díky tomu spoustu chyb a nedokonalostí (a spoustu určitě zase nadělal 🙂).

Na co si dát pozor?

1. Na chyby. Každá „hloupost“ vyřadí stránku z vyhledávání.
2. Z vyhledávání přes Google se stránky zobrazují z cache. Někomu to vadit nemusí (jako já), někomu ano. Toto cachování není možné vypnout.

Ukázky mých AMP stránek