Rýchle webové stránky s AMP

Domov / Blog / Rýchle webové stránky s AMP
07.06.2019 2 min Z našej IKT dielne

AMP (Accelerated Mobile Pages) od Google cieli na zrýchlenie responzívnych webov.

Google sa už dlhšiu dobu snaží riešiť problémy s rýchlosťou načítania webových stránok na mobilných zariadeniach. Častokrát majú používatelia k dispozícii pomalšie internetové pripojenia, čo v kombinácií s dátovo náročnejšími stránkami spôsobuje príliš pomalé načítanie stránky a následnú stratu návštevníka / potenciálneho zákazníka. 

Štatistiky na úvod:

  • Podľa štatistík Google sa weby na mobilných zariadeniach načítajú kompletne v priemere za 15.3 sekúnd.
  • Vyše 33% používateľov smartfónov uvádza negatívny pohľad na značku, ak je jej web pomalý.
  • Vyše 50% používateľov má negatívny pohľad na značku, ak nie je prispôsobená na mobilné prehľadávanie.
  • Mobilné stránky, ktoré sa zobrazia do 2 sekúnd, majú o 15% vyššiu konverziu ako priemerná mobilná stránka.
  • 53% návštevníkov opustí vašu stránku, ak sa načítava dlhšie ako 3 sekundy.

Google v roku 2015 začal s vývojom nového frameworku, ktorý mal pomalé načítanie webov eliminovať. Čo je vlastne AMP (Accelerated Mobile Pages):

  • Open source framework od Google, ktorý optimalizuje načítanie a vykreslenie webových stránok.
  • Určený pre mobilné zariadenia.
  • Cieľom je zrýchlenie zobrazenia webu.
  • Google uvádza 4x rýchlejšie načítanie webu a 10x menšiu dátovú náročnosť.

Z čoho sa skladá AMP

Systém AMP sa skladá z týchto základných častí: HTML a JS na vlastnej strane a Google Cache na strane Google. Tým sa zaistí rýchle načítanie obsahu.

  1. HTML – jednoduchá štruktúra s minimálnym množstvom tagov, primárny je obsah.
  2. JS – základný JavaScript (AMP knižnice), ktorý je postačujúci pre rýchle zobrazenie webu.
  3. Google Cache – cez validačný systém načíta HTML, JS, obrázky. Potom všetko uloží do vlastnej cache a vďaka HTTP 2.0 veľmi rýchlo zobrazuje obsah.

 

Kúzlo Prednačítania

Zadáme kľúčové slovo vo vyhľadávači a kým si pozeráme výsledky vyhľadávania, prehliadač sťahuje všetky AMP stránky v týchto výsledkoch vyhľadávania. Tieto stránky sa ukladajú do cache, a keď si používateľ zobrazí vybranú stránku, zobrazí sa mu okamžite. Používateľ v takomto prípade nie je presmerovaný na samotnú stránku, stále ostáva vo výsledkoch vyhľadávania, avšak tieto výsledky momentálne prekrýva vrstva s naším obsahom.

URL stránky, ktorú si takto zobrazíme má takýto formát:
https://www.google.com/amp/s/www.interway.sk/o-spolocnosti/blog-amp/test-amp.html%3fforceBrowserDetector=amp
Ako je možné vidieť, AMP stránky sú označené vo výsledkoch vyhľadávania symbolom blesku. Google tieto stránky uprednostňuje a umiestňuje vo výsledkoch vyhľadávania vyššie.

porovnanie rýchlosti načítania AMP verzie a štandardnej stránky

Ako vyzerá HTML kód v AMP verzii

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample document</title>
    <link rel="canonical" href="./regular-html-version.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style AMP-custom>
      h1 {color: red}
    </style>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Sample document</h1>
    <p>
      Some text
      <amp-img src=sample.jpg width=300 height=300></amp-img>
    </p>
    <amp-ad width=300 height=250
        type="a9"
        data-aax_size="300x250"
        data-aax_pubname="test123"
        data-aax_src="302">
    </amp-ad>
  </body>
</html>

AMP elementy

Väčšina HTML elementov je valídna aj v AMP verzii, niektoré však potrebujú prerobiť na AMP elementy. Týka sa to hlavne obrázkov, videí, iframe-ov a pod. Zmena tagov sa týka tých, pri ktorých dochádza k väčšej dátovej náročnosti pri načítaní, čiže obrázky, videá, iframe a pod.

Ukážka AMP tagov:

Obrázok:

<amp-img alt="A view of the sea"
  src="images/sea.jpg"
  width="900"
  height="675"
  layout="responsive">
</amp-img>


Video:  

<amp-video controls
  width="640"
  height="360"
  layout="responsive"
  poster="images/kitten-playing.png">
  <source src="videos/kitten-playing.webm"
    type="video/webm" />
  <source src="videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

AMP obmedzenia / zmeny

  • Štýly nie je možné linkovať externe, musia byť súčasťou HTML v tagoch.
  • Použitie !important nie je validné.
  • Nie je možné použitie externých fontov, je však možné pridať fonty od Google z fonts.googleapis.com.
  • Žiadny vlastný JavaScript.
  • Žiadne vlastné merajúce skripty.
  • Žiadne vlastné reklamy.

AMP JavaScript

Obmedzenie JavaScriptu je najväčším zásahom oproti štandardným webom, zabudnite na jquery a iné externé knižnice. AMP podporuje iba vlastné skripty.

  • 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 komponenty

Komponenty slúžia na vkladanie rôznych funkcionalít do stránky. Či už sa jedná o slider, obrázkovú galériu alebo formulár. 

Jedná sa o open source, Google umožňuje pracovať na vývoji komponent prakticky každému - vývoj AMP komponent

  • V AMP je možné momentálne využiť vyše 70 rôznych komponent.
  • Platí nová komponenta = nová AMP js knižnica.
  • Komponentu vieme pridať jednoduchým nalinkovaním príslušného skriptu do nášho dokumentu.
  • Každá komponenta má vlastný tag odvodený od svojho názvu.

          

         

AMP stories

  • Stories, ako ich poznáme z Instragramu.
  • Náhľad sa zobrazuje priamo vo výsledkoch vyhľadávania.
  • Zaujímavá vec z pohľadu marketingu.
  • Jednoduchá tvorba aj cez online tool https://app.makestories.io/.
  • Export AMP verzie.
  • Komponenta je stále v stave vývoja, dostupná experimentálna verzia.

Validácia AMP

Správnosť nasadenia AMP sa dá jednoducho otestovať cez AMP validátor :
https://search.google.com/search-console/amp

Využitie AMP vo webjete

WebJET CMS podporuje použitie AMP. Nie je potrebné duplikovať stránku, stačí nastaviť šablónu a na základe parametra v URL sa stránke priraďuje príslušná šablóna. V štandardnej šablóne sa odkazuje na AMP verziu stránky cez tag <link rel="amphtml" href="">, na základe ktorej si už pre danú stránku Google dokáže napárovať AMP verziu stránky. 

Obrázky sa automaticky prekonvertujú na AMP valídne a nevalídne prvky ktoré majú vlastný JS sa zo stránky vyhodia. Vzniká tak jednoduchá stránka s rýchlym zobrazením a zameraná v prvom rade na obsah, čo znamená najväčšie využitie pre weby/sekcie s článkami/blogmi.

Pokiaľ chceme napríklad na niektorý adresár aplikovať AMP verziu, je potrebné celému adresáru nastaviť šablónu s názvom Blog template, ktorá generuje štandardnú verziu stránky. Na základe parametra ?forceBrowserDetector=amp  sa následne detekuje AMP verzia stránky, na ktorú sú aplikované príslušné podmienky.

Testovacia stránka na ktorú je aplikovaná AMP verzia stránky:

Záver

Google nám v AMP ponúka šikovný nástroj pre zrýchlenie webov, ktorý však má stále obmedzené použitie. Využitie vidíme v prvom rade pri weboch, ktoré produkujú články/blogy. Je však vidieť veľký potenciál do budúcna, samotná využiteľnosť AMP verzie sa bude celkom isto rozširovať.

Ešte niečo viac?

Zaujímavé články, novinky
a pohľad do zákulisia.

Na našom blogu sa nacházda
množstvo zaujímavých článkov.

Zobraziť všetky články
IWAYNEWS
Kariéra 19