Hlavní navigace

AMP HTML: impuls pro weby, které se na mobilech načítají pomalu

Bohumil Jahoda

Accelerated Mobile Pages se týká převážně obsahových webů. Má jim pomoci, aby se na mobilních zařízeních načítaly co nejrychleji.

AMP HTML je způsob tvorby webu, při kterém je stránka dobře uzpůsobena rychlému načítání na mobilních zařízeních.

Zkratka AMP znamená Accelerated Mobile Pages (akcelerované mobilní stránky). Projekt má web na adrese ampproject.org. Anglické představení si je možné přečíst zde. Ukázková kostra stránky vyhovující principu AMP je potom na GitHubu.

Tento text původně vyšel na blogu Je čas.

Hlavní myšlenka

Mobilní připojení je stále značně slabší než u desktopů. Pokud web načítá hromady JavaScriptových knihoven, na pomalém přípojení se stránka vůbec nemusí načíst a obsah zobrazit. Přitom samotný obsah, kvůli kterému návštěvník hlavně přišel, by tolik dat nevyžadoval.

Accelerated Mobile Pages se tedy týká převážně obsahových webů. Na stránce může být z klasického HTML pouze text. Všechno ostatní se řeší amp-* komponentami – těmi se potom vkládají obrázky, videa, lightboxy, reklamy nebo meřicí skripty.

Věci vyžadující JavaScript se tak budou řešit prověřenými AMP komponentami.

Použití

Základem je následující HTML kostra:

<!doctype html> 

<html ⚡> 

<head> 

<meta charset="utf-8"> 

<link rel="canonical" href="hello-world.html"> 

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">

<script src="https://cdn.ampproject.org/v0.js" async></script> 

<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> 

</head> 

<body>Hello World!</body> 

</html>

Za povšimnutí stojí symbol blesku v značce <html>, nutnost použít <link rel="canonical"> nebo použití minimal-ui v <meta name="viewport">. Možnost minimal-ui jeden čas fungovala v mobilním iOS 7.1 (ve versi 8 byla zrušena) pro zmenšení rozhraní prohlížeče, což se hodilo u webových aplikací:

Nakonec se připojuje samotný skript „AMP HTML“, ten má necelých 40 kB.

Vestavěné komponenty

Cokoliv pokročilejšího než běžný text se řeší tzv. komponentami. Některé jsou vestavěné přímo v připojovaném skriptu:

  • <amp-img>  pro vložení obrázku, funguje obdobně jako  <img>. Proč nevkládat obrázek standardní cestou? Použití vlastní značky je kvůli lazy loadingu – obrázky se načtou, až když na ně návštěvník odroluje.
  • <amp-video>  – náhrada HTML5 značky  <video>
  • <amp-ad>  – slouží pro vložení reklamy (podporovány jsou reklamní systémy A9, AdReactor, AdSense, AdTech a Doubleclick)
  • <amp-pixel>  – slouží pro počítadlo návštěv pomocí pingnutí 1×1px obrázku

Externí komponenty

Další věci jako lightboxy, vložení videa z YouTube, vložení obsahu z rámu a podobně se řeší externími komponentami.

To funguje tak, že se připojí další JavaScripty, které přidají potřebnou funkčnost.

Připojovat takovou spoustu skriptů se zdá být nerozumné. Při rozšířeném používání Accelerated Mobile Pages by ale všechny tyto knihovny v sobě měla už cache prohlížeče, takže by šlo používat hotové JS funkce bez načítání dalších dat.

Validace AMP HTML

Po připojení skriptu jde provést kontrolu, jak si stránka stojí s představou AMP HTML. Validace se zapne přidáním #development=1 do adresy stránky. Výsledek validace se objeví v JS konsoli ve vývojářských nástrojích:

Připojit si na zkoušku AMP skript do existujícího webu může být docela zajímavé. Člověk se dozví, co jeho web nesplňuje.

Využití

U použití této technologie pro obsahový web vidím zásadní problém v nemožnosti použít:

  • obrázky – značka <img>  je zakázána a je otázka, jak obrázky vložené pomocí <amp-img>  budou nalezitelné vyhledávači;
  • formuláře – i na obsahovém webu se občas hodí

Další věc je, že je možné vytvořit rychlejší a univerzální stránku i bez použití AMP HTML.

Pro stránky, které se na mobilech načítají pomalu, to ale může být impuls ke změně.

Našli jste v článku chybu?

9. 10. 2015 10:59

Tomáš2 (neregistrovaný)

tohle je ještě otevřené téma a probíhá diskuze, jakou variantu zvolit. Hlasy o tom, že řada lidí prostě na to nevidí a chce to zvětšit také jsou, já jsem jednoznačně pro a pokud se to dostane na některý náš projekt, zoom bude povolený.

Můžeš se do diskuze zapojit a přednést svoje argumenty https://github.com/ampproject/amphtml/issues/481 a ne jen vyřvávat "NEEEE" v komentářích.

9. 10. 2015 7:57

Za tu vzorovou kostru bych jejího autora pověsil za koule do průvanu jménem všech, kteří potřebujou mobilní web zoomovat. Klazule meta tagu viewport "minimum-scale=1,maximum-scale=1,user-scalable=no" v podstatě znamenají, že web je naprosto nepoužitelný pro nás, co ještě využívame naše nepatrné zbytky zraku a obsah si zoomojeme, abychom ho vůbec přečetli. GRRRRRRR!!!!!!!

Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

DigiZone.cz: Optimedia: hybridní kampaň Nescafé

Optimedia: hybridní kampaň Nescafé

Vitalia.cz: Znáte „černý detox“? Ani to nezkoušejte

Znáte „černý detox“? Ani to nezkoušejte

Měšec.cz: U levneELEKTRO.cz už reklamaci nevyřídíte

U levneELEKTRO.cz už reklamaci nevyřídíte

Měšec.cz: Zdravotní a sociální pojištění 2017: Připlatíte

Zdravotní a sociální pojištění 2017: Připlatíte

120na80.cz: Stoná vaše dítě často? Upravte mu jídelníček

Stoná vaše dítě často? Upravte mu jídelníček

Měšec.cz: Europlatby: někde bez poplatku, jinde i 350 Kč

Europlatby: někde bez poplatku, jinde i 350 Kč

Měšec.cz: Vklad na cizí účet je draze zpoplatněn (přehled)

Vklad na cizí účet je draze zpoplatněn (přehled)

Vitalia.cz: Spor o mortadelu: podle Lidlu falšovaná nebyla

Spor o mortadelu: podle Lidlu falšovaná nebyla

DigiZone.cz: Rádio Šlágr má licenci pro digi vysílání

Rádio Šlágr má licenci pro digi vysílání

Podnikatel.cz: Alza.cz má StreetShop. Mall.cz více výdejních míst

Alza.cz má StreetShop. Mall.cz více výdejních míst

Měšec.cz: Za palivo zaplatíte mobilem (TEST)

Za palivo zaplatíte mobilem (TEST)

Vitalia.cz: Pravda o přibírání na zimu

Pravda o přibírání na zimu

Podnikatel.cz: Vládu obejde, kvůli EET rovnou do sněmovny

Vládu obejde, kvůli EET rovnou do sněmovny

Podnikatel.cz: EET: Totálně nezvládli metodologii projektu

EET: Totálně nezvládli metodologii projektu

Podnikatel.cz: Udávání kvůli EET začalo

Udávání kvůli EET začalo

Vitalia.cz: Jsou čajové sáčky toxické?

Jsou čajové sáčky toxické?

120na80.cz: Pánové, pečujte o svoje přirození a prostatu

Pánové, pečujte o svoje přirození a prostatu

Měšec.cz: Air Bank zruší TOP3 garanci a zdražuje kurzy

Air Bank zruší TOP3 garanci a zdražuje kurzy

Vitalia.cz: Když přijdete o oko, přijdete na rok o řidičák

Když přijdete o oko, přijdete na rok o řidičák