Kako narediti AMP stran za hitrejšo mobilno stran

Kaj je AMP in zakaj je pomemben

AMP (Accelerated Mobile Pages) je odprtokodno ogrodje, ki ga je Google razvil leta 2015 z namenom dramatično pospešiti nalaganje spletnih strani na mobilnih napravah. V svetu, kjer več kot 60 % internetnega prometa prihaja z mobilnih telefonov, hitrost nalaganja strani neposredno vpliva na uporabniško izkušnjo, stopnjo zapuščanja in položaj v rezultatih iskanja. Raziskave kažejo, da 53 % mobilnih uporabnikov zapusti stran, ki se nalaga dlje kot 3 sekunde. AMP ta problem rešuje tako, da omeji HTML, CSS in JavaScript na način, ki jamči izjemno hitro izrisovanje strani.

Strani AMP se običajno naložijo v manj kot eni sekundi, kar je 4–5-krat hitreje od povprečne mobilne strani. Google AMP vsebino dodatno pospeši s predpomnjenjem na svojih strežnikih prek sistema AMP Cache, tako da se stran dostavi z Googlove lokacije, ki je uporabniku najbližja. To privede do skorajda trenutnega nalaganja, ko uporabnik klikne rezultat AMP v Googlovem iskanju.

Kako AMP deluje

Tri komponente AMP

AMP je sestavljen iz treh ključnih komponent, ki skupaj zagotavljajo hitro nalaganje. Prva je AMP HTML — razširjena različica HTML-a s prilagojenimi oznakami, ki standardne elemente HTML zamenjajo z optimiranimi različicami za slike, video in vrtiljake. Druga komponenta je knjižnica AMP JS, ki upravlja vire, asinhrono nalaga zunanje vire in zagotavlja, da nič ne blokira izrisovanja strani. Tretja je AMP Cache — na posredniku osnovan CDN, ki samodejno prenese strani AMP, jih validira in predpomni za hitro dostavo.

Omejitve AMP

Da bi dosegel izjemno hitrost, AMP uvaja stroge omejitve. Uporaba lastnega JavaScripta ni dovoljena — uporabite lahko samo komponente AMP in omejen element amp-script. CSS mora biti inline in omejen na 75 KB. Vsi zunanji viri (slike, oglasi, videi) morajo svojo velikost deklarirati vnaprej, da lahko brskalnik izračuna postavitev, preden se viri naložijo. Obrazci in interaktivni elementi uporabljajo posebne komponente AMP. Te omejitve se morda zdijo stroge, a ravno one jamčijo dosledno hitro izkušnjo.

Struktura strani AMP

Osnovna predloga AMP HTML

Vsaka stran AMP se začne s specifično strukturo. Doctype je standardni HTML5, oznaka html pa mora vsebovati atribut amp ali emotikon strele. V razdelku head so obvezni meta oznaka charset, meta oznaka viewport, kanonska povezava na ne-AMP različico strani, AMP boilerplate CSS, ki predstavlja standardizirane sloge za preprečevanje Flash of Unstyled Content, in sklic na knjižnico JavaScript AMP. Telo strani za medijsko vsebino uporablja oznake, specifične za AMP, namesto standardnih elementov HTML.

Komponente AMP

AMP ponuja bogat ekosistem komponent za različne potrebe. Za slike uporabite amp-img z obveznima atributoma width in height. Za videovsebino obstajata amp-video in amp-youtube. Med interaktivne elemente spadajo amp-carousel za drsnike, amp-accordion za razširljive razdelke, amp-lightbox za modalne prikaze in amp-form za obrazce. Za analitiko uporabite amp-analytics, ki podpira Google Analytics, Facebook Pixel in druge platforme. Vsaka komponenta se naloži asinhrono in ne blokira izrisovanja.

Implementacija AMP na WordPress strani

Uradni vtičnik AMP

Najpreprostejši način za dodajanje AMP na stran na WordPressu je uporaba uradnega vtičnika AMP. Ta vtičnik ponuja tri načine delovanja: Standard mode pretvori celotno stran v AMP, Transitional mode ustvari različice AMP vseh strani poleg originalnih, Reader mode pa ustvari različice AMP samo za objave. Za večino strani priporočamo Transitional mode, saj omogoča postopno migracijo. Po namestitvi vtičnik samodejno ustvari različice AMP vaših strani in doda potrebne meta oznake za povezavo z originalnimi stranmi.

Vtičnik AMP for WP

AMP for WP je alternativni vtičnik z več možnostmi za prilagajanje oblikovanja. Ponuja več kot 10 vgrajenih tem za strani AMP, podporo za WooCommerce, integracijo s priljubljenimi SEO vtičniki, kot sta Yoast in Rank Math, ter napredne možnosti za oglase. Brezplačna različica pokriva osnovne potrebe, različica Pro pa doda prilagojene predloge AMP, podporo za Contact Form 7 in napredno analitiko. Če vam je vizualna identiteta strani AMP pomembna, ta vtičnik ponuja več prožnosti v primerjavi z uradnim vtičnikom.

Ročna konfiguracija

Za popoln nadzor nad implementacijo AMP lahko v svoji WordPress temi ustvarite prilagojene predloge AMP. Ustvarite posebne datoteke predlog, ki generirajo veljaven HTML AMP. Uporabite WordPress kljuke (hooks) za dodajanje kanonskih povezav med različicama AMP in ne-AMP. Ta pristop zahteva več tehničnega znanja, a omogoča popoln nadzor nad videzom in obnašanjem strani AMP. Priporočamo ga samo naprednim razvijalcem s specifičnimi zahtevami, ki jih vtičniki ne morejo izpolniti.

Testiranje in validacija strani AMP

AMP Validator

Google ponuja več orodij za validacijo strani AMP. AMP Validator na validator.ampproject.org je spletno orodje, v katero vnesete URL ali kodo HTML in dobite podrobne informacije o napakah. Chrome DevTools ima vgrajeno validacijo AMP — na konec URL-ja AMP dodajte #development=1 in odprite konzolo za prikaz napak. Orodje AMP Test v Google Search Console prikaže, kako Google vidi vaše strani AMP, in prepozna težave, ki lahko preprečijo indeksiranje. Vsako stran AMP obvezno validirajte pred objavo, saj neveljavne strani AMP ne bodo predpomnjene niti prikazane z oznako AMP v iskanju.

Pogoste napake

Najpogostejše napake pri implementaciji AMP vključujejo uporabo nedovoljenih oznak HTML namesto ekvivalentov AMP, CSS, ki presega omejitev 75 KB, inline sloge z deklaracijo important, ki v AMP ni dovoljena, nedovoljen JavaScript v telesu strani, slike brez deklariranih dimenzij in obrazce brez končne točke (endpoint) za dejanje AMP. Validator jasno opozori na vsako napako z opisom in vrstico kode, kar olajša popravljanje.

AMP in SEO

Vpliv na razvrščanje

AMP sam po sebi ni neposreden dejavnik razvrščanja v Googlovem iskanju. Vendar pa AMP posredno izboljša SEO, saj drastično skrajša čas nalaganja, kar je dejavnik razvrščanja, izboljša metriko Core Web Vitals, zmanjša stopnjo zapuščanja, ker uporabniki ne čakajo na nalaganje, in poveča angažiranost uporabnikov, kar Googlu pošilja pozitivne signale. Strani AMP so se prej prikazovale v posebnem vrtiljaku na vrhu mobilnega iskanja, a od leta 2021 so lahko v tem razdelku prikazane tudi ne-AMP strani. Kljub temu imajo strani AMP zaradi AMP Cache še vedno prednost v hitrosti dostave.

Kanonske povezave

Pravilno postavljanje kanonskih povezav je ključno za SEO AMP. Vsaka stran AMP mora imeti povezavo link rel canonical, ki kaže na originalno ne-AMP različico strani. Originalna stran mora imeti povezavo link rel amphtml, ki kaže na različico AMP. Če uporabljate Standard mode, kjer je celotna stran AMP, kanonska povezava kaže sama nase. To zagotavlja, da Google pravilno indeksira in poveže obe različici strani brez težav s podvojeno vsebino.

Alternativa AMP

AMP ni edini način za doseganje hitrih mobilnih strani. Sodobna spletna optimizacija s poudarkom na Core Web Vitals lahko doseže podobne rezultate brez omejitev AMP. Lazy loading slik in videov, učinkovito upravljanje CSS in JS, uporaba CDN-a, optimizacija strežnika in sodobne slike v formatih WebP in AVIF lahko dramatično pospešijo stran. Next.js, Gatsby in podobna ogrodja generirajo izjemno hitre strani brez AMP. AMP razmislite, če vam je prioriteta vidnost v Google News ali če imate stran s pretežno statično vsebino. Za kompleksne spletne aplikacije z veliko interaktivnosti je standardna optimizacija boljša izbira.

Zaključek

AMP je lahko močno orodje za pospešitev mobilne strani, še posebej za strani s pretežno besedilno vsebino, kot so blogi, novičarski portali in informativne strani. Implementacija prek WordPress vtičnika je razmeroma preprosta in lahko prinese znatno izboljšanje mobilne izkušnje. Vendar AMP ni univerzalna rešitev — omejitve pri JavaScriptu in oblikovanju so lahko problematične za kompleksne strani. Pri BeoHosting so naši strežniki optimirani tako za AMP kot za standardne strani, s hitrim diskovjem SSD in spletnim strežnikom LiteSpeed, ki zagotavlja izjemno zmogljivost ne glede na pristop, ki ga izberete.