Co je technologie AMP a proč bychom ji měli chtít?

AMP (Accelerated Mobile Pages) je frontendový framework zajišťující rychlejší načítání webových stránek. Původně se jednalo o projekt Googlu určený pro mobilní telefony. Díky své efektivitě si ovšem postupem času získal popularitu i v rámci tvorby běžných desktopových verzí webů.

Co je AMP?

AMP je open-source technologie, která prostřednictvím optimalizovaného kódu a specifické distribuci zrychluje načítání webových stránek (nejen) na mobilních telefonech. Reaguje tak na stále se zvyšující požadavky na rychlost reakce a míru interakce, na které jsou uživatelé zvyklí z nativních mobilních aplikací.

Slouží tedy jako nástroj pro zvýšení uživatelské zkušenosti (UX) a pomáhá zvýšit konverzní poměr. Díky optimalizovanému kódu navíc šetří mobilní data a umožňuje rychlý přístup i na pomalejším připojení. Accelerated Mobile Pages se hodí pro weby se statickým obsahem, kde se jednotlivé prvky nemění interakci s uživatelem.

Jsou tvořeny prostřednictvím zmíněného optimalizovaného kódu, který zajistí, že prohlížeč stránky zvládne rychleji interpretovat. Obsah je přitom načítán postupně, můžeme tak zaznamenat, že se například obrázky zobrazí až několik vteřin po textu. V AMP pak není nezbytně nutné tvořit hned celý web. Můžeme strategicky zvolit pouze několik stránek, jako je ku příkladu landing page a zbytek nechat v původní podobě.

Tato technologie bývá mnohdy kombinována s progresivními webovými aplikacemi, které rozšiřují možnosti stránek. Ve výsledcích vyhledávání pak Accelerated Mobile Pages poznáme podle ikony blesku, přičemž Google není jediný, kdo tuto technologii podporuje. Stejně tak ji můžeme využít i na Facebooku nebo LinkedIn.

Výhody technologie AMP

Rychlé načítání stránek a s ním související pozitivní uživatelský zážitek zaujímají jednu z předních příček v žebříčku priorit Googlu, které zohledňuje při hodnocení stránek. Také díky tomu AMP weby přinášejí následující výhody:

• zvýraznění stránek ve výsledcích vyhledávání (SERP) pomoci speciální AMP ikony,
• navýšení míry prokliku,
• šance na umístění ve speciálním banneru, určeném pro AMP weby.

Určitou výhodu pak může AMP web představovat také v kontextu prioritního indexování mobilních verzí stránek (mobile-first indexing) a dočkat se rychlejší i lepšího hodnocení. S tím souvisí i optimalizace pro vyhledávače čili SEO. AMP technologie sice prozatím není hodnotícím faktorem Googlu, avšak rychlost načítání webových stránek do nich rozhodně patří.

Jak funguje AMP

Standardní tvorba webových stránek vyžaduje dvě základní technologie – HTML a CSS. Ty se typicky dále kombinují s dalšími programovacími jazyky, jako je PHP nebo JavaScript, případně jejich frameworky. Všechny tři prvky se používají i při vývoji Accelerated Mobile Pages, ale ve speciální, optimalizované variantě.

V praxi se tak setkáváme s AMP HTML, AMP CSS a AMP JavaScriptem, přičemž první dvě zmíněné technologie používají upravené značky (tagy) a současně definují, které tagy není možné zvolit. Toto omezení vychází právě ze snahy o optimalizaci. V podstatě se tak tímto způsobem vypouštějí datově náročné vlastnosti webu. Nesmí se například používat příkaz !important, který je rezervovaný pro AMP. Stejně tak se CSS neukládá do externího dokumentu, ale přímo do HTML.

Trochu odlišná situace platí pro JavaScript. Jeho používání AMP v podstatě zakazuje, jelikož bývá v mnoha případech příčinou slabšího výkonu webů. Není tedy možné používat jiné frameworky, jako Vue.js a musíme si vystačit s připravenými komponentami (například bannery), které jsou součástí instalace.

Distribuce AMP webů

S obměnou se setkáváme také u způsobu distribuce, tedy průběhu procesu, jehož cílem je zobrazení webu uživateli. Klasický web máme umístěný na serveru, odkud si jej při požadavku o načtení stránky vyzvedne internetový prohlížeč (Chrome, Opera, Safari, …). V případě Accelerated Mobile Pages se ovšem o distribuci starají CDN servery, obvykle Googlu.

Z hlediska terminologie se jedná o takzvanou AMP cache neboli mezipaměť, kde je optimalizovaná stránka uložena. Po uložení na CDN server je web dále optimalizován, dochází ku příkladu ke konverzi formátu obrázků a ilustrací. Poslední částí AMP ekosystému je pak speciální vrstva mezi webových prohlížečem a stránkou – AMP Viewer, který se stará o zobrazení stránek a jejich přednačtení.

AMP v praxi

Prvním krokem je tedy vytvoření AMP verze webových stránek. Pokud začínáme s vývojem nového digitálního produktu, můžeme web napsat rovnou v AMP. Pokud už máme stránky hotové, tak vytvoříme jejich AMP kopii čili naprogramujeme stejný web, avšak s využitím výše uvedených prostředků.

Tyto dvě verze se propojí odkazem, aby prohlížeč vždy zobrazil správnou variantu – AMP na mobilních zařízeních a klasickou na počítači (pokud existuje pouze AMP verze webu, tak ji zobrazí pokaždé). Na desktopovou verzi je pak nutné vložit kanonický odkaz, aby Google stránky nevyhodnotil jako duplicitní obsah.

Jakmile máme web hotový a zkontrolovaný validátorem, tak Google sám umístí stránku do cache a odtud se s využitím http/2 standardu zobrazí uživatelům. Prohlížeč ji tedy nebere z našich serverů, ale z CDN. Validitě stránky je oproti klasickému HTML kladen zvláštní důraz. Pokud totiž web validací neprojde, tak nebude umístěn do cache ani vyhodnocen jako AMP. K testování správnosti můžeme využít pluginy do prohlížeče nebo Google Search Console.

Accelerated Mobile Pages a WordPress

O něco snazší přechod na AMP pak nabízejí open-source CMS, jako je WordPress nebo Drupal. K převodu nám postačí speciální plugin, který původní HTML tagy a další obsah změní na AMP HTML. Tento proces můžeme aplikovat na všechny, nebo pouze na vybrané stránky a rovnou si je zkontrolovat prostřednictvím integrovaného validátoru.

Nevýhody AMP technologie

Z popisu, jak AMP funguje vyplynulo několik nevýhod. V první řadě může být problém URL webu, která je umístěna na cizí doméně. To může mít negativní dopad na budování značky. Google navíc získává větší přehled o našich webech, zatímco my ho ztrácíme. Jako další nevýhody Accelerated Mobile Pages můžeme jmenovat:

• správa dvou verzí webu = vyšší náklady,
• omezenější analytika = menší přehled o uživatelském chování,
• poměrně úzký výběr komponent,
• limitované možnosti monetizace prostřednictvím reklamy.

Kdy zvolit / nezvolit ke tvorbě webu AMP

Technologie AMP je vhodná zejména pro obsahové weby, jednoduché firemní stránky, blogy a menší e-shopy. Proto se také stal volbou značek New York Times, eBay nebo AliExpress. Obecně ho můžeme použít pro většinu webů s nižší mírou interakce s uživatelem. Nehodí se tedy například pro diskuzní fóra, kde by se mohla projevovat latence obnovení stránky v cachi.

Stejně tak se AMP příliš nehodí pro weby, které potřebují pokročilejší funkce a mají spíše dynamický než statický obsah. Kvůli omezenějším možnostem reklamy pak není příliš vhodný ani pro stránky, které jsou na zobrazování komerčních bannerů závislé. V některých případech je tak zkrátka lepší dobře optimalizovaný responzivní design, případně vytvořit prostřednictvím Accelerated Mobile Pages pouze několik stránek, například s detaily produktů na zmíněném e-shopu.

Pokud o tvorbě AMP webu uvažujete, neváhejte využít naší bezplatné konzultace, kde vám rádi s rozhodováním pomůžeme. Společně vybereme tu nejlepší možnou variantu a zrealizujeme web podle vašich představ.