Revoluce v mobilním vyhledávání – Accelerated Mobile Pages (AMP)

Revoluce v mobilním vyhledávání. Tak by se dal popsat open source projekt Accelerated Mobile Pages. Všichni jistě dobře znáte tu situaci, kdy se snažíte najít nějakou informaci na mobilním telefonu. Zadáte co hledáte, Google vám najde příslušné výsledky, kliknete a čekáte. Čekáte. Čekáte a jestli se dočkáte, tak třeba zjistíte, že jste hledali něco jiného a čekáte na další stránku. AMP nám dává možnost, jak toto změnit a co víc, můžete si AMP verze na svůj web nasadit již nyní.

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.

Zdroj: ampproject.org

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ší.

Rychlost a latence mobilního připojení

Zdroj: Martin Michálek, Seologer, 26.1.2016

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?

Zdroj: https://youtu.be/xeGzQhAU2XI

AMP není nic extra speciálního. Skládá se z částečně upraveného HTML 5, Javascriptu, CSS 3 a AMP Cache.

]4 Zdroj: https://youtu.be/xeGzQhAU2XI

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.

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.

adsense amp

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.

Pomohl vám tento článek? Sdílejte jej dále.
Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someone

1 komentář u „Revoluce v mobilním vyhledávání – Accelerated Mobile Pages (AMP)

  1. Pingback: SEO restart 2016 prezentace a odkazy | Medio Blog

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *