A Google az elmúlt években igen nagy hangsúlyt fektet a mobilfelhasználókra. Ez nem véletlen, hiszen ma már nem ritka, ha egy weboldal látogatóinak 30-40%-t a mobilozók adják (mobil: okostelefonok, tabletek stb…). A Google legújabb irányvonala az AMP, ezt hivatott támogatni.

[mks_pullquote align=”right” width=”300″ size=”14″ bg_color=”#e8f1fb” txt_color=”#000″]”A reszponzív weboldal (RWD) egy olyan megközelítéssel tervezett weboldal, amelynek a célja az, hogy optimális megjelenést biztosítson – könnyű olvashatóság, egyszerű navigáció a lehető legkevesebb átméretezéssel és görgetéssel – a legkülönfélébb eszközökön (az asztali számítógép monitorjától egészen a mobiltelefonokig).” [/mks_pullquote]

A hagyományos weboldalak, melyeket nem optimalizáltak mobileszközökre, lassúak és megterhelik a mobilokat, továbbá szinte senki nem fogja elolvasni a 1-2mm-es betűket (persze lehet nagyítani, de akkor sem túl felhasználóbarát).

A reszponzív oldalak ugyan megfelelően jelennek meg az eszközökön, viszont mivel javarészt CSS segítségével alakítjuk át az oldalt mobilra, ezért a letöltött adatmennyiség lényegében nem változik, csak átalakul.

Az AMP célja, hogy gyorsabbá tegye a tartalomelérést és az információátadást a felhasználóknak. A Google legújabb szabványát természetesen már a WordPress is támogatja a következő bővítmény segítségével: https://hu.wordpress.org/plugins/amp/ (fejlesztő: Mohammad Jangda, Joen Asmussen és természetesen az Automattic).

[mks_pullquote align=”left” width=”300″ size=”14″ bg_color=”#e8f1fb” txt_color=”#000″]”A WordPress AMP bővítmény csak a bejegyzéseket jeleníti meg AMP módban. Nem vált át automatikusan és a bejegyzéseken kívül (jelenleg) mást nem támogat. Ne felejtsük el, hogy jelenleg még csak a 0.3-as verziónál járunk.” [/mks_pullquote]

Az AMP szabvány segítségével egy olyan HTML oldalt kapunk, amin csak a „lényeg” található meg.

Például: Nézzük Tamás cikkének a forrását AMP módban: http://wphu.org/wordpress-frissitesek/hibajavito-verzio-4-5-1-megerkezett/amp/

Nézzük a vonatkozó forráskódot:
A normál oldalon el kell helyezni egy hivatkozást a következő módon:

<link rel="amphtml" href="http://wphu.org/wordpress-frissitesek/hibajavito-verzio-4-5-1-megerkezett/amp/" />

Természetesen ezt a WordPress AMP bővítmény elvégzi helyettünk!

AMP HTML felépítése:
A Google szerencsére sok példát biztosít a számunkra: Create Your AMP HTML Page

Az előbb említett cikkünk forrása:

<!doctype html>
  <html amp>
    <head>
      <meta charset="utf-8">
      <title>Hibajavító verzió: 4.5.1, megérkezett!</title>
      <link rel="canonical" href="http://wphu.org/wordpress-frissitesek/hibajavito-verzio-4-5-1-megerkezett/">
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
      <script async src="https://cdn.ampproject.org/v0.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>
    </head>
    <body>
...
    </body>
  </html>

Tehát kaptunk egy lebutított oldalt, amin csak a szöveg látszódik (mint 1995-ben), ami gyorsan betöltődik, jól olvasható és vélhetőleg sokkal kevesebb erőforrást eszik.

Az új szabvány előnye és hátránya is egyben, hogy bizonyos HTML, JS és CSS kódokat tilt, ezáltal tudja csökkenteni a betöltési sebességet.

Az előnyöket fent írtam. A hátrányai lehetnek (az oldal tulajdonosok szemszögéből) például a reklámfelületek csökkenése, hiszen a nagyobb reklámokat elfelejthetjük. Persze a Google Adsense működik AMP módban is (szépen is nézne ki, ha nem menne az egyik legfontosabb Google termék).

Adsense használhat:

<amp-ad width=300 height=200
    type="adsense"
    data-ad-client="ca-pub-XXXX"
    data-ad-slot="YYYY">
</amp-ad>

Ezt csak úgy érdekességképpen jegyeztem meg. Akit jobban érdekel az AMP Adsense, annak ajánlom ezt a jó kis cikket: How to Make AMP Adsense Ads Responsive (Accelerated Mobile Pages).

Azok a weboldalak, akik alkalmazzák az AMP-t, valószínűleg forgalomnövekedést könyvelhetnek el a Google-ből, hiszen jobb pozíciót fognak kapni a Google találati listáján. Az egyenlőre nem egészen világos, hogy a Google hogyan fogja ezeket az oldalakat megjeleníteni. Várjuk a fejleményeket! Viszont addig is nem árt, ha felkészítjük a WordPress oldalunkat.

Összességében az Accelerated Mobile Pages jó dolog. Én látok benne fantáziát, de szerintem csak akkor fog elterjedni, ha a Google érezhetően előnyben részesíti azokat a weboldalakat, amelyek használják.

Felhasznált források: