Google už nejaký čas uprednostňuje v mobilnom vyhľadávaní webové stránky, ktoré sú úplne zoptimalizované pre zobrazovanie na mobilných zariadeniach. Responzívny dizajn webu je síce super, ale pri pomalom internetovom pripojení môže predstavovať problém. Napríklad kvôli sťahovaniu veľkého počtu JavaScriptových knižníc sa stránka na pomalom mobilnom pripojení nemusí správne otvoriť a zobraziť samotný obsah.

Spoločnosť Google prišla s elegantným riešením tohto problému a pripravila open source framework pod názvom AMP (Accelerated Mobile Pages), ktorý optimalizuje načítanie a vykresľovanie statických webových stránok.

Stránky venujúce sa celému projektu nájdete na adrese Ampproject.org.

Podľa samotného Google sa AMP weby načítajú 4x rýchlejšie a majú o 10x menšiu dátovú náročnosť. Systém AMP sa skladá z viacerých častí. A to z HTML kódu, JavaScriptu, CSS 3 a AMP Cache na strane Googlu. Ide teda o sadu pravidiel, ktoré treba dodržať pri písaní kódu.

HTML:

Kód AMP stránok je tvorený jednoduchou HTML štruktúrou a zároveň sú niektoré značky nahradené AMP elementami ako napríklad:

Amp-image: element ktorý funguje ako  <img>

Amp-video: náhrada HTML značky  <video>

Amp-ad: slúži na vloženie reklamy do stránky, podporované sú viaceré reklamné systémy, ako sú  AdSense, Doubleclick, AdReactor, AdTech atď.

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:

Riešenie JavaScriptových knižníc je pri AMP stránkach najzásadnejším prínosom pre zrýchlenie. Všetky JavaScript knižnice sú umiestnené v sieti CDN (content delivery network) a AMP stránky ich sťahujú asynchrónne. Zároveň sú knižnice umiestnené vždy na rovnakej URL adrese, čo zvyšuje pravdepodobnosť, že váš mobilný prehliadač má už súbor stiahnutý v cache a nemusí ho teda znovu sťahovať.

AMP Cache:

AMP Cache funguje na princípe proxy cache, vďaka čomu sa stránky zobrazujú oveľa rýchlejšie. Zjednodušene povedané. Ak užívateľ klikne vo výsledkoch vyhľadávania na AMP stránku, web sa návštevníkovi zobrazí, no zároveň si stránku načíta Google do cache. Ďalšiemu návštevníkovi pri načítaní rovnakého webu poskytne Google stránku zo svojej cache a v tom momente si uloží do cache novú verziu webu zo servera.  

Ako vyzerajú AMP stránky vo výsledkoch vyhľadávania

amp stránka

AMP validátor a kontrola indexovaných stránok

Správnosť nasadenia AMP na vaše stránky si viete jednoducho otestovať cez AMP validátor :

https://search.google.com/search-console/amp

Zároveň si viete skontrolovať aj počet indexovaných AMP stránok priamo cez nástroj Google Search Console.

Záver

Z predchádzajúcich informácií je zrejmé, že rýchlosť načítania stránok je dôležitým faktorom v rámci vyhľadávania Google. Preto AMP technológiu odporúčam nasadiť hlavne na informačné typy stránok, ako sú rôzne blogy a magazíny.