Google už nějaký čas upřednostňuje v mobilním vyhledávaní webové stránky, které jsou zoptimalizované pro zobrazovaní na mobilních zařízeních. Responzivní dizajn webu je sice super, ale při pomalém internetovém připojení může představovat problém. Například kvůli stahování velkého počtu JavaScriptových knihoven se stránka na pomalém mobilním připojení nemusí správně otevřít a zobrazit samotný obsah.
Společnost Google přišla s elegantním řešením tohoto problému a připravila open source framework pod názvem AMP (Accelerated Mobile Pages), který optimalizuje načítání a vykreslování statických webových stránek.
Stránky věnující se celému projektu najdete na adrese Ampproject.org.
Podle samotného Google se AMP weby načítají 4x rychleji a mají 10x menší datovou náročnost. Systém AMP se skládá z vícerých častí. A to z HTML kódu, JavaScriptu, CSS 3 a AMP Cache na straně Googlu. Jde tedy o sadu pravidel, které je třeba dodržet při psaní kódu.
HTML
Kód AMP stránek je tvořený jednoduchou HTML strukturou a zároveň jsou některé značky nahrazené AMP elementy jako například:
Amp-image: element který funguje jako <img>
Amp-video: náhrada HTML značky <video>
Amp-ad: slouží na vložení reklamy do stránky, podporované jsou víceré reklamní systémy, jako jsou AdSense, Doubleclick, AdReactor, AdTech atd.
Príklad jednoduchej AMP stránky :
<!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>Hello, AMPs</title> <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Open-source framework for publishing content", "datePublished": "2015-10-07T12:02:41Z", "image": [ "logo.jpg" ] } </script> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> </head> <body> <h1>Welcome to the mobile web</h1> </body> </html>
Javascript
Řešení JavaScriptových knihoven je na AMP stránkách nejzásadnějším přínosem pro zrychlení. Všechny JavaScriptové knihoven jsou umístněné v síti CDN (content delivery network) a AMP stránky je stahují asynchronně. Zároveň jsou knihovny umístněné vždy na stejné URL adrese, což zvyšuje pravděpodobnost, že váš mobilní prohlížeč má už soubor stáhnutý v cache a nemusí jej znovu stahovat.
AMP Cache
AMP Cache funguje na principu proxy cache, díky čemuž se stránky zobrazují výrazně rychleji. Zjednodušeně řečeno, když uživatel klikne ve výsledcích vyhledávání na AMP stránku, web se návštěvníkovi zobrazí, a současně stránku načte Google do cache. Dalšímu návštěvníkovi při načítaní stejného webu poskytne Google stránku ze své cache a v tom momente si uloží do cache novou verzi webu ze serveru.
Jak vypadají AMP stránky ve výsledcích vyhledávání
AMP validátor a kontrola indexovaných stránek
Správnost implementace AMP váš web můžete jednoduše otestovat pomocí AMP validátoru:
https://search.google.com/search-console/amp
Současně můžete zkontrolovat i počet indexovaných AMP stránek přímo v Google Search Console.
Závěr
Z předešlých informací je zřejmé, že rychlost načítání stránek je důležitým faktorem v rámci vyhledávání na Google. Proto AMP technologii doporučuji nasadit hlavně na informační typy stránek, jako jsou různé blogy, zpravodajské weby a magazíny.
Původní verzi článku od Petera Svatoňě najdete na blogu slovenské pobočky Visibility.
