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.

“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).”

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

“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.”

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:

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:

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:

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:

A szerzőről

Patai László

Patai László

15 éve foglalkozom nyílt forrású rendszerekkel, ebből több, mint 10 éve a WordPress bűvöletében! Véletlen? Aligha!

  • Rottenbacher Tamas

    Érdekes. Vajon a tartalomba ágyazott kódot is kicsit megszűri?

    • Patai László

      Igen, egészen jól megszűri. Nézd:
      http://wphu.org/karesooptimalizalas/google-amp-te-felkeszultel/amp

      Sok témaspecifikus gyorskódot használtam.

      • Rottenbacher Tamas

        A max szélességgel a kódrészletnél még bírkózik, de reméljük eredményesen továbbfejlesztik az oldalakra is és a bővítményeknél ellenőrzik. 🙂

  • Rottenbacher Tamas

    Tényleg, erre a mobil böngészők vajon már felkészültek?

    • Patai László

      Nekem chrome alatt egész jó. Nem rossz ötlet ez.

      • Rottenbacher Tamas

        Az várható volt, hogy sajátja egyből kezelni fogja. Noha én ha megnyitom a 4.5.1-es frissítős hírt Androidon, Chrome-ban, akkor még nem az AMP-s jön be. 🙂

      • Patai László

        Írtam is, hogy nem vált automatikusan át 🙂 /amp/-t írd a végére. Gondolom ez majd a találati listáról fog előjönni.

      • Rottenbacher Tamas

        Úgy persze, hogy bejön. Azt hittem, a link rel=”amphtml”-ot észleli a böngésző és automatikusan oda átirányít. Legalább is szerintem így lenne ésszerű. 🙂

      • Rottenbacher Tamas

        Vajon ha a WordPress wp_is_mobile lekérésével átirányítást teszek be, az mennyire lehet szerinted eredményes ezzel az AMP bővítménnyel karöltve? 🙂

Yes No