2018. november 8., csütörtök

AMP technológia - villámgyors mobil weboldalak

Accelerated Mobile Pages, röviden AMP

Az “Accelerated Mobile Pages” projekt (röviden AMP) egy, a Google által üzemeltetett, de a fejlesztői közösség által folyamatosan továbbfejlesztett - weboldal publikálási technológia, amely egy szinte azonnal betöltődő mobil felhasználói élményt tesznek lehetővé az ezt a technológiát alkalmazó weboldalak számára.

Az AMP egy nyílt forráskódú webfejlesztői formátum, amely a webhely látogatói számára mobileszközről böngészve is nagyszerű felhasználói élményt nyújtanak.

A tartalomkészítők maguk dönthetnek arról, hogy a weboldalukon kínált tartalmat hogyan jelenítik meg és mely technológiai megoldásokat alkalmazzák, a weboldal teljesítmény összetevőinek optimalizálása mellett (pl. betöltődési sebesség, navigálhatóság).

Az AMP technológia kidolgozása egy széleskörű szakmai összefogás eredménye, melyben több ezer webfejlesztő, tartalomkészítő, weboldal, disztribúciós platform és technológiai cég vett részt. Több mint 1,5 milliárd weboldal került publikálásra 2018. októberéig, valamint 100-nál is több analitikai-, hirdetési technológiai- és tartalomkezelő rendszer (CMS) támogatja az AMP formátumot.

A Google által elindított nyílt forráskódú weboldal publikálást segítő technológia célja tehát a mobil böngészés élményének és biztonságának fokozása, melynek használatával 10 másodperc helyett akár 1 másodpercen belüli oldalbetöltést érhetünk el, ráadásul idegesítő felugró ablakok sincsenek az ilyen weboldalakban, valamint ezek a gyorsan betöltődő weboldalak a Google organikus találati listájában is előkelőbb helyre kerülhetnek.

Mitől ilyen gyorsak az AMP weboldalak?

Az AMP technológia többek között az alábbi megoldásokkal teszi villámgyorssá a weboldalunkat:

  • JavasScript technológia: alapjában véve a javascript egy fontos eszköz, amellyel a weboldalunk szinte bármely részét módosíthatjuk, azonban blokkolhatja a megjelenő tartalmat azáltal, hogy lassítja a betöltődést (oldal renderelést). Az AMP weboldalak csak a technológiai megoldás saját javascript kódjait tartalmazhatják, egyedi javascript kódok használata nem megengedett. Az AMP technológiai kizárólag aszinkron javascripteket használ, ezek az oldalbetöltődést nem lassítják.
  • Statikus objektum méretek használata: az AMP technológia esetében az egyes megjelenítendő weboldal elemek méretét maga a HTML kód tartalmazza, statikus módon. Az AMP technológia 1 mp alatt betölti az oldal layoutját anélkül, hogy külső forrásokból várakozna a további, az oldal betöltéséhez szükséges elemek letöltésére.
  • Oldalbetöltődést gátló külső mechanizmusok kikerülése: egy szokványos weboldal esetében a külső féltől történő HTTP lekérések blokkolják az oldal megjelenítését. Az AMP weboldalak esetében ez nem történik meg, mivel egy saját fejlesztés révén az AMP technológia nem vár pl. egy iframe tartalmára egy külső forrásból, hanem előállítja az iframe bokszot már azelőtt, hogy tudná, milyen tartalom kerül bele.
  • CSS definíciók alkalmazása: a CSS-ek (amelyek egy weboldal stílusdefiníciói) általánosságban véve lassíthatják a weboldal betöltődését, főként akkor, ha túlságosan sokat vagy nagy méretű CSS-eket alkalmazunk. Az AMP technológia esetében kizárólag ún. “inline” CSS alkalmazása engedélyezett, a teljes CSS pedig összesen maximum 50 kbyte-os lehet.
  • Betűtípusok használata: a webes fontkészletek általában véve nagy fájlméretűek, ezért a weboldalunk fontkészletének optimalizálása kulcsfontosságú a gyors betöltődés szempontjából. Az AMP technológia külső forrásból tölti le a fontkészletet és ennek kezdetésig semmilyen más HTTP lekérést nem engedélyez, tehát a weboldal szöveges tartalma töltődik be először.

Ha az elkészített AMP weboldalunk hibátlan az oldalméret és technológia szempontjából, akkor bekerül a Google Cache-be, ami azonnali oldalbetöltést biztosít a Google keresési találatok oldaláról:

AMP weboldalak - példák

A legnagyobb tartalomgyártók közül például olyan ismert és elismert médiumok használják az AMP technológiát villámgyors mobiltartalmak előállítására, mint a The New York Times, a globo.com, a The Washington Post és a Wired magazin.

A legnagyobb e-commerce platformok közül olyan világcégek használják az AMP technológiát a kiváló mobil vásárlási élmény biztosításához, mint az eBay, az Eventbrite, az Overstock, az AliExpress és a J.Crew.

Az ismert hirdetési technológiai platformok közül pl. a ShareThrough, a TripleLift, a Teads és az Index Exchange is az AMP technológiát használja.

Készítsük el a saját AMP weboldalunkat!

A cikk végi hivatkozásokban felsorolt források és útmutatások segítségével egy AMP specializációval rendelkező szakértő elkészíthet egy villámgyors mobil weboldalt, sőt, tapasztalatainak megosztásával segíthet az AMP technológia továbbfejlesztésében is.

Ha többre kíváncsi a témában, érdemes elolvasnia egy korábbi blogcikkünket, amely a Google Hackathon fejlesztői esemény beszámolóját tartalmazza. Itt kollégáink egy meglévő ügyfelünk számára készítettek el egy villámgyors AMP weboldalt.

Ha Ön is szeretne villámgyors mobil weboldalt, ebben a WebMa fejlesztői csapata szívesen segít Önnek.


Felhasznált források: