WordPress AMP – kako ubrzati stranice za mobilne uređaje

WordPress AMP je implementacija Google AMP inicijative (akronim za Accelerated Mobile Pages) na vaš blog ili sajt.

AMP je Open source projekat koji ima za cilj da ubrza učitavanje članaka na mobilne telefone vaših čitalaca. Projekat je pokrenut 2015. godine u kompaniji Google, sa idejom da se poboljša iskustvo čitalaca na internetu. AMP projekat treba da omogući kreiranje sajtova koji obezbeđuju konstantnu brzinu i protok od servera do uređaja klijenata optimizujući sadržaj i prateće komponente koje se učitavaju zajedno sa stranicama.

Zbog masovnog prelaska korisnika sa desktop računara na mobilne telefone pri pretraživanju Interneta i potrebe da se sajtovi pregledaju na mobilnim uređajima sa ograničenim pristupom mreži, jasno je da stranice moraju da se optimizuju kako bi iskustvo korisnika bilo slično ako ne i bolje od iskustva na koji su naviknuti dok rade za svojim računarima. Google predlaže da implementirate ovo rešenje, a neke analize ukazuju da može značajno da pomogne da se bolje rangirate u pretragama.

 

Različiti sajtovi na mobilnim telefonima

 

Slične projekte 2015. godine pokrenuli su Facebook kroz Instant Article i Apple putem News Format inicijative. Cilj ovih projekata je potpuno isti kao i kod kompanije Google – omogućiti poboljšano iskustvo prilikom učitavanja vesti i članaka. Značajna razlika između ova tri projekta je da su to u principu zatvoreni sistemi namenjeni isključivo za objavu na svojim mrežama. I dok se Facebook orjentisao na korisnike Facebook mobilne aplikacije, Apple svojim korisnicima mobilnih telefona, Google je AMP projekat namenio kao servis svojoj mašini za pretraživanje.

Naravno da ne treba isključiti niti jedno ponuđeno rešenje za ubrzanje objave članaka, ali nije teško zaključiti da Google AMP postaje skoro obavezna komponenta web servisa koji pružate, jer će se skoro izvesno stranice koje su implementirale ovo rešenje naći u vrhu pretraga. Ako ste neko ko se bavi blogom ili poslovanjem na internetu morate implementirati ovo rešenje u bliskoj budućnosti, ako ne već i danas dok čitate ovaj članak.

Google AMP unosi novine u brzini prikaza sadržaja

Statistike govore da više od 40% korisnika napuste sajt kome treba više od 3 sekundi da se učita. Mobilinim korisnicima će iskustvo u otvaranju stranica biti značajno gore jer učitavanje mobilnih stranica uobičajeno traje značajno duže nego na desktop verzijama. Kao posledica loše optimizovanih sajtova dolazi loša posećenost i rang na pretraživačima, i lošija konverzija korisnika odnosno zarada.

Šta nudi AMP koncept prikaza stranica

AMP stranice (Accelerated Mobile Pages) su osnov izmenjene strukture dokumenta koji omogućava brzo učitavanje i do 5 puta brže. Putem AMP tehnike stranica se optimizuje smanjivanjem veličine dokumenta i scriptova za prikaz na mobilnom uređaju.

AMP projekat se oslanja na tri ključne komponente:

  • AMP HTML
  • AMP JS
  • AMP Cache

AMP HTML je kastomizovan i proširen HTML kod. Postojeći HTML kod se menja na način da upotrebom AMP tagova optimizuje način učitavanja elemenata strane.

Neki jednostavan AMP HTML blok bi mogao da izgleda recimo ovako:

Iako je većina tagova u AMP-u ista kao i na običnoj stranici, neki HTML tagovi unose AMP specifičnosti na stranice poput amp-img koji generiše srcset i za brouzere koji ne podržavaju ovaj atribut. HTML tagovi za AMP se nalaze na ovoj zvaničnoj stranici gde možete da nadjete uputstva za ručno kreiranje AMP stranica ukoliko se odlučite za taj korak.

AMP JS bibljoteka se brine za brzi rendering stranice implementacijom najboljih tehnika iz prakse. Najveća prednost ove bibljoteke je asinhrono učitavanje eksternih resursa tako da stranica ne bude ni na koji način blokirana tokom učitavanja sadržaja.

AMP Cache je sistem koji servira keširane AMP HTML stranice. U osnovi ovog servisa stoji proxy CDN (Content Delivery Network) za isporuku i validaciju AMP dokumenata. Tokom učitavanja ovaj servis omogućava da se sve slike i JS skripte učitavaja sa istog domena i to HTTP 2.0 protokolom.

Prednosti integracije Google AMP koda u vaše stranice

Ključna prednost implementacije je brže učitavanje, ali pre svega iskustvo koje doživljava korisnik. Sledeće prednosti su:

  • Bolja vidljivost članaka sa vaše blog platforme u pretragama. AMP stranice kreiraju karusel (Carousel) koji potiskuje rezultate organske pretrage bez obzira na mobile friendly optimizaciju
  • Manji stepen otkaza (Bounce Rate) jer se stranica učitava trenutno bez neophodnog iščekivanja i frustracije korisnika
  • Bolji rezultat na pretragama. Google već duže vreme favorizuje mobile friendly stranice, a sve veći značaj daje sadržajima koji su optimizovali i AMP arhitekturu. To je signal koji Guglu jasno govori da ulažete u tehničko poboljšanje svoje prezentacije

Kako implementirati WordPress AMP

Najkraći i najbrži način implementacije AMP stranica u WordPress je putam dodataka (plugins). Iz svoje konzole u sekciji dodataka pronađite sa zvaničnog repozitorijuma plugin Amp by Automattic pokrenite instalaciju i aktivirajte ovaj dodatak.

wordpress amp sajtovi

 

WordPress AMP dodatak koji ste aktivirali generiše ispravne AMP stranice članaka. Za svaki članak koji imate na svom blogu AMP verzija je dostupna na permalinku vašeg posta sa ektenzijom /amp. U slučaju da ne koristite pretty permalink strukturu ekstenzija je /?amp=1.

Ako želite da testirate ispravnost AMP stranica možete instalirati Google Chrome ekstenziju AMP Validator da testirate instalirani dodatak. Takođe je moguće delimično modifikovati AMP stranice podešavanjem boje zaglavlje i linkova korišćenjem kastomajzera u podešavanjima vaše teme.

Da li ste probali da implementirate WordPress AMP i kakva su vaša iskustva?

 

Infogate agencija se bavi izradom sajtova, optimizacijom za pretraživače kao i osmišljavanjem sadržaja za vaš sajt. Na našem blogu obrađujemo teme iz ove oblasti koje su korisne za naše klijente.