Rýchle webové stránky s AMP

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ť.

Ďalšie blogy

card img
InterWay a podpora učebnice Internet vecí (IoT)

Záleží nám na kvalitnom vzdelaní budúcich generácií a preto podporujeme školstvo a s ním spojenú tvorbu nových vzdelávacích materiálov.

18.10.2021

card img
Cloudové služby - líder v oblasti kybernetickej bezpečnosti

Zohnať kvalitných ľudí alebo len juniorov v IT je v súčasnosti veľký problém, hovorí náš IT Security špecialista, Pavol Adamek.

01.10.2021

card img
InterWay ako generálny partner ocenenia Vedec roka 2020

29. júna 2021 sme sa ako generálny partner zúčastnili odovzdávania cien na významnom podujatí Vedec roka 2020 SR.

24.08.2021

card img
Komunitný cloud v prostredí štátneho IT

Ak si kladiete otázku, čo je to komunitný cloud, odpovede nájdete v tomto článku a dozviete sa okrem toho aj aké sú vhodné prípady jeho použitia, v čom spočívajú jeho výhody, pred akými výzvami stojí a čo je potrebné zvážiť pred prijatím konceptu komunitného cloudu.

16.06.2021

card img
Bezpečnosť & kybernetické hrozby v roku 2021

Vedeli ste, že s príchodom pandémie Covid-19 sa digitálna transformácia urýchlila odhadom až o 7 rokov? S masívnym prechodom do online režimu vzniklo aj niekoľko nových kybernetických hrozieb, ktorým sme doposiaľ nečelili. Respektíve, ak sa s nimi už ľudstvo už aj stretlo, tak nie v takom množstve, ako v súčasnosti.

23.05.2021

card img
Cloud, dátové centrá a pandémia COVID-19

Druhá vlna cloudu presviedča aj najvernejších fanúšikov vlastných serverovní.

18.05.2021

© 2021 InterWay, a. s. Všetky práva vyhradené | Ochrana osobných údajov
Tieto stránky generuje redakčný systém WebJET.