Článek
Jak vypadá AMP web?
V zemích, kde Google již poskytuje AMP výsledky pro uživatele mobilního vyhledávání, se při hledání v SERP zobrazují „karty“ s popisem Page AMP. Tyto karty představují AMP výsledky, tedy máte jistotu, že když budete tyto výsledky otevírat, stránka se velmi rychle načte, nebo minimálně významně rychleji než neAMP verze. Karty můžete posouvat a hledat tak výsledek na serveru, který vás zajímá. Kliknutím na výsledek se web otevře a můžete hned číst. Pokud chcete, můžete na mobilním telefonu přecházet mezi jednotlivými výsledky. Tečky nahoře představují jakousi navigaci, kde se nacházíte. Díky tomu můžete projít daleko více obsahu, než byste jinak chtěli. To je dobré jak pro publishery, tak pro uživatele.
Proč to všechno vzniká
Protože nás limituje rychlost mobilního připojení i rychlost mobilních zařízení. Problémů, které způsobují, že se na mobilních připojeních weby otevírají tak dlouho je několik. Jedním z nich je samotné připojení k internetu. Nejde jen o samotnou rychlost, jde i o latenci. Pokud máte web, který pro načtení stahuje 10 zdrojů (javascripty, externí css aj.) tak si prohlížeč v mobilním telefonu musí každý takový zdroj stáhnout. V případě, že budete připojení na 3g síti, kde se průměrně bude latence připojení pohybovat kolem 300 ms, tak jen stažení těchto 10 zdrojů bude trvat 3 vteřiny + samotná doba stahování. Pokud byste byly na připojení EDGE tak by to bylo 6,5 vteřiny. Toto i další problémy AMP projekt řeší.
Díky čemu jsou AMP weby rychlejší
Google na své I/O 2016 uvedl, že díky AMP technologii se weby načítají v průměru 4x rychleji a mají 10x nižší datovou náročnost. Jak toho ale dosahuje?
AMP není nic extra speciálního. Skládá se z částečně upraveného HTML 5, Javascriptu, CSS 3 a AMP Cache.
Některé HTML značky jsou nahrazeny jako je AMP-Image, AMP-video, ale mnoho jich zůstává stejných. Toto není z pohledu rychlosti načítání až tak zásadní. Co je zásadní a v čem je AMP projekt největším přínosem jsou Javascripty. AMP JS Library se skládá z velmi minimalistických JS, které jsou umístěny v CDN a které si vždy AMP dokument stahuje asynchronně. To znamená, že mobilní prolížeč nečeká na stažení a tím se neblokuje vykreslení webu. Další velkou výhodou pak je, že umístěním zdrojů v CDN a jejich odkazování vždy ze stejné URL zvyšuje pravděpodobnost, že váš mobilní prohlížeč má již soubor stažený a vůbec jej tedy znovu stahovat nemusí. To pak ušetří čas i data. Další částí jsou kaskádové styly (CSS 3). AMP se liší tím, že neumožňuje odkazovat na externí stylesheet a všechny styly si tedy nese HTML dokument přímo v sobě. Tím se ušetří jeden dotaz na server a teoreticky to i zajistí, že vývojáři nebudou odkazovat na tunu nepotřebných stylů, které se ani používají. Poslední částí a tou, která je velmi zajímavá je AMP Cache. Jde o proxy based cache, díky které Google dokáže poskytovat výsledek vyhledávání významně rychleji ať už jste kdekoliv. Funguje to tak, že při prvním odkázání se dokument načte a zobrazí uživateli. V tu chvíli se uloží do cache a další návštěvník pak dostává výsledky významně rychleji. Cache ukládá dokument a pokud přijde někdo další, poskytne mu výsledek z cache a v tu stejnou chvíli si uloží ze serveru novou verzi. Díky tomu se tedy může stát, že někteří uživatelé uvidí neaktuální verzi, ale je to velmi dobré řešení z pohledu výkonu. V případě velmi exponovaných serverů si Google stahuje dokument jednou za 15 vteřin. Pokud by tedy přišlo 1000 uživatelů v 15 vteřinách, tak první by dostal výsledek aktuální a dalších 999 by dostalo výsledek z cahce. 1001 návštěvník by pak dostal ten stejný výsldek a v tu chvíli by se do cache načetla nová verze. Díky tomu AMP technologie významně šetří kapacitu serveru. Na tomto videu, je vidět rychlost načtení článku na anglickém BBC. Vlevo je jeho AMP verze, vpravo pak responzivní verze. K připojení byl použit Iphone 6, web jsme otevírali z Prahy a simulovali jsme připojení 3G s latencí 300 ms. Tedy poměrně reálnou situaci.
Rozdíl v rychlosti je významný. V reálném scénáři, tedy když bych se na web dostával přes Google vyhledávač by situace byla ještě lepší. Zaprvé bychom již pravděpodobně měli JS zdroje uložené v prohlížeči, tedy nebylo by třeba je znovu stahovat a potom by se výsldek servírova, z cache, nikoliv ze serveru, který se pravděpodobně nachází kdesi v UK. Více informací, naleznete na stránkách projektu ampproject.org a v prezentaci Michala Vojáka na SEO restart 2016.
https://www.slideshare.net/AW-dev/amp-accelerated-mobile-pages-seo-restart-2016 from https://designdev.cz
Jaké jsou výsledky
Google Adsense na svém Twitteru uvádí, že 90 % publisherů zaznamenalo nárust CTR pro své reklamy. AMP weby se načítají rychleji, uživatelé jsou spokojeni.
Závěr
Implementujte AMP na své weby. Pokud máte magazín, blog, informační web nebo jiný podobný obsahový projekt, tak je pro vás AMP velmi zajímavé již nyní. Může se stát, že Google zapne podporu AMP v mobilním vyhledávání pro Českou republiku velmi rychle a vy byste měli být připraveni. Pokud máte e-shop nebo jiný dynamický obsah, přihlašování apod. tak pro vás zatím AMP moc použitelné není. NIcméně celý projekt se velmi rychle posouvá kupředu a rozhodně stojí za to jej sledovat.
