Kaj je AMP in kako deluje – pospešene strani za mobilne naprave

AMP je kratica pospešenih strani za mobilne naprave (ang. Accelerated Mobile Pages). Spletne strani postajajo čedalje “težje” in vsebujejo številne module, ki nam te strani na namiznem računalniku “pričarajo” atraktivne, za mobilne telefone pa velja ravno obratno. Velika večina Slovenije je že pokrita z optičnim omrežjem oziroma imamo doma in v službi spodoben internet in se nam moderne spletne strani s številnimi moduli na računalniku, ki je priklopljen na internetni kabel oziroma WIFI, naložijo v razumnem času (vidno polje, čas nalaganja 1–3 sekunde). Hitro nalaganje na računalniku pa ne pomeni tudi hitrega nalaganja na mobilnih telefonih, saj moramo upoštevati, da določene module, ki jih uporabljamo na spletni strani na mobilnih napravah, preprosto izklopimo oziroma prilagodimo. V letu 2017 ni več izgovorov! Vsaka spletna stran mora biti odzivna (ang. responsive) na vseh napravah, če to za vašo ne velja, stopite v kontakt z nami in z veseljem vam bomo pripravili celovito rešitev (klikni me za več info).

Naša stran Gaming.si je normalno odzivna na vseh napravah, imeli pa smo problem pri nalaganju spletne strani na telefonih, ki niso imeli dostopa do strani s 4G povezavo. Rešitev? AMP oziroma pospešene strani za mobilne naprave. Seveda, rešitev je več, toda zaradi posebnega pristopa Googla k rešitvi AMP je po našem mnenju to prava odločitev za prav vsak portal z novicami.

Na spodnji sliki je primer naše spletne strani v klasičnem odzivnem pogledu na mobilnem telefonu.

Z nekaj vrsticami CSS kode bi lahko tekst razširili čez celoten ekran, prilagodili naslov in pisavo ter tako napravili bolj prijazno izkušnjo bralcu. Toda, kot sem že omenil, je težava v hitrem nalaganju spletne strani na prenosnih napravah. Spodaj prilagam hitrost nalaganja naše klasične spletne strani preko Googlovega orodja za testiranje hitrosti spletnih strani na telefonu, ki se imenuje testmysite.withgoogle.com

Nalagalni čas 9 sekund definitivno ni sprejemljiv, zato smo se odločili, da zadevo izboljšamo in spravimo na želen rezultat. S pomočjo AMP-ja in Googlovih smernic za uspešno verifikacijo vseh AMP strani (več informacij, kako AMP deluje na Googlu, pa dobite s klikom tukaj) smo prišli do želenega rezultata. Spodaj prilagam sliko spletne strani z AMP podporo.

Spletna stran deluje veliko bolj enostavno, saj uporablja samo nujno potrebne kode, te so CSS, HTML in JS, ki omogočijo nalaganje vidnega polja pod 1 sekundo tudi pri zelo slabi internetni povezavi. Spodaj prilagam primer novice.

Kdaj se pojavi ena in kdaj druga stran spletne stran? Klasična spletna stran se bo odpirala na vseh napravah, ki so večje od 7″, vse naprave pod to vrednostjo pa bodo preusmerjene na AMP strani. V bistvu lahko AMP stran odprete tudi v vašem računalniku, na koncu celotne povezave dodate /amp, primer: https://hop.si/amp

Rezultat sicer ni popolnoma takšen, kot smo želeli, saj nimamo CDN-ja, na kar pa so vsa Googlova testna orodja zelo občutljiva. 🙂

Prilagam še drugi test (Gtmetrix.com), ki nakazuje malo več informacij o odzivnosti in problem s CDN-jem, kar nam zbija oceno. Po naših uporabniških testih se nam je AMP spletna stran odpirala instantno tudi na slabših povezavah (v celoti pod 1 sekundo).

Velika posebnost, ki jo pridobite s AMP-jem, je poseben znakec v Googlovem mobilnem iskalniku, ki nakazuje, da ste pravi heker in imate AMP odzivno spletno stran. Prilagam sliko spodaj, bodite pozorni na posebno ikonico, ki ima strelo pri članku naše spletne strani Gaming.si.

Osebno še nisem zasledil, ali so strani v primeru AMP podpore višje postavljene v Googlovem iskalniku, toda zagotovo nas bo zaradi hitrega nalaganja naše spletne strani Googlov iskalnik prikazoval pred drugimi in nam omogočil večje število obiskov na spletno stran. V naslednjih tednih bomo še dodatno testirali in prilagodili AMP dizajn ter izboljšali hitrost in odzivnost, v nogi strani pa boste našli povezavo do naše klasične spletne strani Gaming.si. Za vse, ki želite dosegati podobne rezultate, smo vam z veseljem na voljo na strani www.legit.si.

Vaša reakcija na članek?

🔥Popularno

🛎️ Sveže objave

PUSTI ODGOVOR

Prosimo, vnesite vaš komentar!
Prosimo, vnesite vaše ime