Kako napraviti AMP stranicu za brži mobilni sajt

Šta je AMP i zašto je važan

AMP (Accelerated Mobile Pages) je open-source framework koji je Google razvio 2015. godine sa ciljem da dramatično ubrza učitavanje web stranica na mobilnim uređajima. U svetu gde preko 60% internet saobraćaja dolazi sa mobilnih telefona, brzina učitavanja sajta direktno utiče na korisničko iskustvo, stopu napuštanja i poziciju u rezultatima pretrage. Istraživanja pokazuju da 53% mobilnih korisnika napušta sajt koji se učitava duže od 3 sekunde. AMP rešava ovaj problem tako što ograničava HTML, CSS i JavaScript na način koji garantuje izuzetno brzo renderovanje stranice.

AMP stranice se tipično učitavaju za manje od jedne sekunde, što je 4-5 puta brže od prosečne mobilne stranice. Google dodatno ubrzava AMP sadržaj keširanjem na svojim serverima putem AMP Cache sistema, tako da se stranica isporučuje sa najbliže Google lokacije korisniku. Ovo rezultira gotovo trenutnim učitavanjem kada korisnik klikne na AMP rezultat u Google pretraži.

Kako AMP funkcioniše

Tri komponente AMP-a

AMP se sastoji od tri ključne komponente koje zajedno obezbeđuju brzo učitavanje. Prva je AMP HTML - proširena verzija HTML-a sa prilagođenim tagovima koji zamenjuju standardne HTML elemente sa optimizovanim verzijama za slike, video i carousel komponente. Druga komponenta je AMP JS biblioteka koja upravlja resursima, asinhrono učitava eksterne resurse i obezbeđuje da ništa ne blokira renderovanje stranice. Treća je AMP Cache - proxy-baziran CDN koji automatski preuzima AMP stranice, validira ih i kešira za brzu isporuku.

Ograničenja AMP-a

Da bi postigao izuzetnu brzinu, AMP nameće stroga ograničenja. Nije dozvoljeno korišćenje sopstvenog JavaScript-a - možete koristiti samo AMP komponente i ograničeni amp-script element. CSS mora biti inline i ograničen na 75KB. Svi eksterni resursi (slike, reklame, videi) moraju deklarisati svoju veličinu unapred kako bi browser mogao da izračuna layout pre nego što se resursi učitaju. Forme i interaktivni elementi koriste specijalne AMP komponente. Ova ograničenja mogu delovati strogo, ali upravo ona garantuju konzistentno brzo iskustvo.

Struktura AMP stranice

Osnovni AMP HTML šablon

Svaka AMP stranica počinje sa specifičnom strukturom. Doctype je standardni HTML5, ali html tag mora sadržati atribut amp ili emotikon munje. U head sekciji obavezni su charset meta tag, viewport meta tag, kanonski link ka ne-AMP verziji stranice, AMP boilerplate CSS koji predstavlja standardizovane stilove za sprečavanje Flash of Unstyled Content, i referenca na AMP JavaScript biblioteku. Telo stranice koristi AMP-specifične tagove umesto standardnih HTML elemenata za medijski sadržaj.

AMP komponente

AMP nudi bogat ekosistem komponenti za različite potrebe. Za slike koristite amp-img sa obaveznim atributima width i height. Za video sadržaj postoji amp-video i amp-youtube. Interaktivni elementi uključuju amp-carousel za slajdere, amp-accordion za proširive sekcije, amp-lightbox za modalne prikaze i amp-form za formulare. Za analitiku koristite amp-analytics koji podržava Google Analytics, Facebook Pixel i druge platforme. Svaka komponenta se učitava asinhrono i ne blokira renderovanje.

Implementacija AMP-a na WordPress sajtu

Official AMP plugin

Najjednostavniji način da dodate AMP na sajt na WordPress-u je korišćenjem oficialnog AMP plugina. Ovaj plugin nudi tri režima rada: Standard mode pretvara ceo sajt u AMP, Transitional mode kreira AMP verzije svih stranica pored originalnih, i Reader mode kreira AMP verzije samo za postove. Za većinu sajtova preporučujemo Transitional mode jer omogućava postepenu migraciju. Nakon instalacije, plugin automatski generiše AMP verzije vaših stranica i dodaje potrebne meta tagove za povezivanje sa originalnim stranicama.

AMP for WP plugin

AMP for WP je alternativni plugin sa više opcija za prilagođavanje dizajna. Nudi preko 10 ugrađenih tema za AMP stranice, podršku za WooCommerce, integraciju sa popularnim SEO pluginima poput Yoast i Rank Math, kao i napredne opcije za reklame. Besplatna verzija pokriva osnovne potrebe, dok Pro verzija dodaje prilagođene AMP šablone, Contact Form 7 podršku i naprednu analitiku. Ako vam je vizuelni identitet AMP stranica važan, ovaj plugin nudi više fleksibilnosti u poređenju sa oficialnim pluginom.

Ručna konfiguracija

Za potpunu kontrolu nad AMP implementacijom, možete kreirati prilagođene AMP šablone u vašoj WordPress temi. Kreirajte posebne template fajlove koji generišu validan AMP HTML. Koristite WordPress hooks za dodavanje kanonskih linkova između AMP i ne-AMP verzija. Ovaj pristup zahteva više tehničkog znanja, ali omogućava potpunu kontrolu nad izgledom i ponašanjem AMP stranica. Preporučujemo ga samo naprednim developerima koji imaju specifične zahteve koje plugini ne mogu da ispune.

Testiranje i validacija AMP stranica

AMP Validator

Google nudi nekoliko alata za validaciju AMP stranica. AMP Validator na validator.ampproject.org je online alat gde unosite URL ili HTML kod i dobijate detaljne informacije o greškama. Chrome DevTools ima ugrađenu AMP validaciju - dodajte #development=1 na kraj AMP URL-a i otvorite konzolu za prikaz grešaka. AMP Test Tool u Google Search Console prikazuje kako Google vidi vaše AMP stranice i identifikuje probleme koji mogu sprečiti indeksiranje. Obavezno validirajte svaku AMP stranicu pre objavljivanja jer nevalidne AMP stranice neće biti keširane niti prikazane sa AMP oznakom u pretraži.

Česte greške

Najčešće greške pri AMP implementaciji uključuju korišćenje nedozvoljenih HTML tagova umesto AMP ekvivalenata, CSS koji prelazi limit od 75KB, inline stilovi sa important deklaracijom koja nije dozvoljena u AMP-u, nedozvoljeni JavaScript u telu stranice, slike bez deklarisanih dimenzija i forme bez AMP action endpoint-a. Validator jasno ukazuje na svaku grešku sa opisom i linijom koda, što olakšava ispravljanje.

AMP i SEO

Uticaj na rangiranje

AMP sam po sebi nije direktan faktor rangiranja u Google pretraži. Međutim, AMP indirektno poboljšava SEO jer drastično smanjuje vreme učitavanja što jeste faktor rangiranja, poboljšava Core Web Vitals metriku, smanjuje stopu napuštanja jer korisnici ne čekaju učitavanje i povećava angažovanje korisnika što šalje pozitivne signale Google-u. AMP stranice su se ranije prikazivale u posebnom karuselu na vrhu mobilne pretrage, ali od 2021. godine i ne-AMP stranice mogu biti prikazane u ovoj sekciji. Ipak, AMP stranice i dalje imaju prednost u brzini isporuke zahvaljujući AMP Cache-u.

Kanonski linkovi

Pravilno postavljanje kanonskih linkova je ključno za AMP SEO. Svaka AMP stranica mora imati link rel canonical koji pokazuje na originalnu ne-AMP verziju stranice. Originalna stranica mora imati link rel amphtml koji pokazuje na AMP verziju. Ako koristite Standard mode gde je ceo sajt AMP, kanonski link pokazuje na samu sebe. Ovo obezbeđuje da Google pravilno indeksira i povezuje obe verzije stranice bez problema sa dupliranim sadržajem.

Alternativa AMP-u

AMP nije jedini način za postizanje brzih mobilnih stranica. Moderna web optimizacija sa Core Web Vitals fokusom može postići slične rezultate bez AMP ograničenja. Lazy loading slika i videa, efikasno CSS i JS upravljanje, korišćenje CDN-a, optimizacija servera i moderne slike u WebP i AVIF formatima mogu dramatično ubrzati sajt. Next.js, Gatsby i slični framework-ovi generišu izuzetno brže stranice bez AMP-a. Razmotrite AMP ako vam je prioritet Google News vidljivost ili ako imate sajt sa pretežno statičkim sadržajem. Za kompleksne web aplikacije sa mnogo interaktivnosti, standardna optimizacija je bolji izbor.

Zaključak

AMP može biti moćan alat za ubrzavanje mobilnog sajta, posebno za sajtove sa pretežno tekstualnim sadržajem poput blogova, news portala i informativnih sajtova. Implementacija putem WordPress plugina je relativno jednostavna i može doneti značajno poboljšanje mobilnog iskustva. Međutim, AMP nije univerzalno rešenje - ograničenja u JavaScript-u i dizajnu mogu biti problematična za kompleksne sajtove. Na BeoHosting-u naši serveri su optimizovani i za AMP i za standardne stranice, sa brzim SSD skladištem i LiteSpeed web serverom koji obezbeđuje izuzetne performanse bez obzira na pristup koji odaberete.