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 svijetu gdje preko 60% internet prometa 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 rješava ovaj problem tako što ograničava HTML, CSS i JavaScript na način koji jamče iznimno brzo renderiranje stranice.

AMP stranice se tipično učitavaju za manje od jedne sekunde, što je 4-5 puta brže od prosječ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 funkcionira

Tri komponente AMP-a

AMP se sastoji od tri ključne komponente koje zajedno osiguravaju brzo učitavanje. Prva je AMP HTML - proširena verzija HTML-a sa prilagođenim tagovima koji zamjenjuju standardne HTML elemente sa optimiziranim verzijama za slike, video i carousel komponente. Druga komponenta je AMP JS biblioteka koja upravlja resursima, asinhrono učitava eksterne resurse i osigurava da ništa ne blokira renderiranje 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 iznimnu brzinu, AMP nameće stroga ograničenja. Nije dozvoljeno korištenje vlastitog 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 deklarirati svoju veličinu unaprijed 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 djelovati strogo, ali upravo ona jamču 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 standardizirane stilove za sprječavanje Flash of Unstyled Content, i referenca na AMP JavaScript biblioteku. Telo stranice koristi AMP-specifične tagove umjesto 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 renderiranje.

Implementacija AMP-a na WordPress sajtu

Official AMP plugin

Najjednostavniji način da dodate AMP na sajt na WordPress-u je korištenjem oficialnog AMP plugina. Ovaj plugin nudi tri režima rada: Standard mode pretvara cijeli 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 generira 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 vizualni identitet AMP stranica važan, ovaj plugin nudi više fleksibilnosti u usporedbi 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 generiraju validan AMP HTML. Koristite WordPress hooks za dodavanje kanonskih linkova između AMP i ne-AMP verzija. Ovaj pristup zahtijeva 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 zahtjeve 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 gdje 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 identifikira probleme koji mogu spriječ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štenje nedozvoljenih HTML tagova umjesto 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 vrijeme 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 gdje je cijeli sajt AMP, kanonski link pokazuje na samu sebe. Ovo osigurava 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štenje 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 generiraju iznimno 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 rješenje - ograničenja u JavaScript-u i dizajnu mogu biti problematična za kompleksne sajtove. Na BeoHosting-u naši serveri su optimizirani i za AMP i za standardne stranice, sa brzim SSD skladištem i LiteSpeed web serverom koji osigurava iznimne performanse bez obzira na pristup koji odaberete.