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: