Postignite ultra brze web stranice pomoću AMP tehnologije

Pregled sadržaja

Brzina web stranica danas je često odlučujući faktor za korisnike. Vrijeme koje je potrebno za učitavanje stranice često određuje hoće li se korisnici služiti našom stranicom ili će otići kod nekog drugog. Sve češća upotreba mobilnih uređaja jak je razlog zbog čega bi trebali ciljati na ultra brze stranice koje nisu zahtjevne po pitanju težine resursa. Teške stranice nose sa sobom puno skripta i kozmetičkih stilova koje korisnik treba preuzeti da bi mogao vidjeti običan sadržaj.

Google je zbog toga u suradnji sa Twitterom pokrenuo inicijativu sustav AMP (Accelerated Mobile Pages) čiji je cilj da na mobilnim ekranima prikazuje ultra brzih stranice kroz statični HTML sadržaj.

Što je AMP i koji mu je cilj

Osnovni cilj AMP tehnologije je smanjiti vrijeme učitavanja web stranica kako bi se izašlo korisnicima koji gledaju stranice na mobilnim uređajima bez pristupa brzoj vezi.

Tehnologija je bila najavljena u listopadu 2015. a prve stranice počele su se javljati u veljači 2016. godine. AMP je izmišljen da bude odgovor na Facebookov modul Instant članci (Instant Articles)koji funkcionira slično ali njihovi članci djeluju samo u sklopu Facebook platforme.

Dizajnirano je tako da je tehnologija otvorenog koda (open source).

Prema nekim studijama oko 40% posjetitelja napusti web stranicu ako se ona ne učita u roku od 3 sekunde. Bolja brzina web stranica stoga želi eliminirati frustracije korisnika i omogućiti bolje korisničko iskustvo. Stranice se često rade s ciljem da imaju svu moguću interaktivnost, all the bells and whistles. Odstranjivanjem svih suvišnih stvari zapravo pomažemo našim korisnicima te skidamo sav teret koji ih koči radi postizanja bolje brzine.

Pomoću AMP-a web stranice postaju dostupne u roku od nekoliko milisekundi što će pogotovo cijeniti oni na sporim mrežama.

Kako AMP funkcionira

AMP je krajnje ogoljena forma obične web stranice. HTML kôd je pojednostavljen, odbačeno je sve suvišno kako bi stranica bila čim lakša i time brža. Neki elementi se ne mogu koristiti primjerice forme za slanje poruka. CSS stilovi koji su odgovorni za kozmetički dio web stranica također moraju biti ogoljeli i neki dijelovi se ne mogu koristiti. Ne mogu biti inline CSS stilovi ili postavljeni ID atributi na elementima. JavaScript većinom nije dopušten, dopuštene su samo službene JavaScript datoteke koje je lako implementirati i nude sve potrebno za rad, primjerice omogućuju lijeno učitavanje slika. AMP dopušta jedino asinkroni JavaScript koji neće spriječiti prikazivanje stranice dok sok potpuno skripta ne učita te time ne odgodi sadržaj kojeg bi blokirali takvi resursi.

AMP žrtvuje interaktivnost i dizajn radi postizanja super-ultra-mega-hiper brzine. Cijeli sustav mora biti apsolutno lagan kao pero. Mobilni uređaji osim što povlače manje podataka s interneta (korisno za one ograničenog budžeta) troše i manje procerske snage čime štede bateriju.

Sve što ne čini sadržaj i nebitno je svede se na minimum a stranice Google privremeno pohranjuje na svoj server odakle se učitavaju, tako da ne koriste ni resurse vlastitog pružatelja hosting (koji često znaju kočiti i uobičajene stranice zbog razine kvalitete u odnosu na pristupačne cijene). Ako netko želi posjetiti vašu stranicu, treba samo kliknuti na logo.

S obzirom na to da je AMP najkorisniji za portale koji stvaraju sadržaj u obliku vijesti a takvi portali koriste sustave oglašavanja, dobro je znati da AMP podržava prikazivanje oglasa.

Koje su prednosti i nedostaci AMP-a

Prednosti AMP

Prednost AMP tehnologije je povećanje rangiranja na organskom prometu pretraživanja te povećanje konverzije zbog boljeg korisničkog iskustva. Kako se stranice nalaze na Google serveru, nije nam potreban jak (skup) vlastiti hosting. Iako danas možemo raznim tehnikama povećati brzinu web stranica, u svakom slučaju će AMP stranice ipak imati blagu prednost.

Negativne strane AMP

Mana AMP-a je da se dizajn mora do kraja ogoliti, kao i sva interaktivnost. Ne mogu biti kontakt obrasci na stranicama. Ovisno koliko vam je postojeća stranica nakrcana i detaljna, kad je jednom ogolite možda vam se neće dopasti. AMP je prije svega pogodan za dnevne vijesti i regionalne portale, tamo gdje je sadržaj (tekst i glavne slike) bitan a sve ostalo se može maknuti.

Web stranica se može podesiti tako da podržava klasične stranice i zasebno AMP. Time korisnici mogu odabrati što im više odgovara. Jedino ne mogu postojati dvije verzije na tražilicama, morate se odlučiti za jednu. Stoga kad korisnik jednom klikne i otvori stranicu, da se prebaci na drugu verziju trebao bi kliknuti što je realno malo vjerojatno a i tada mu se već sadašnja stranica ionako i učitala.

Kako postaviti AMP

HTML elementi moraju proći validaciju jer je strože nego kod uobičajenog načina izrade stranica. Moguće je i web trgovinu učiniti prilagođenim za AMP, no nužno je maknuti uobičajenu interaktivnost kao što je dodavanje proizvoda u košaicu, filtriranje i sortiranje artikala na popisu svih proizvoda.

Unutar head dijela potrebno je navesti link na originalnu stranicu putem atributa rel=”canonical” koji kaže tražilicama da je sadržaj na obje stranice identičan te da ne indeksira oboje kao duplikat, već samo da uzme jednu verziju stranice.

Nekoliko je elemenata koje podržava AMP.

Svaki resurs se prilagodi pomoću perfiksa, amp-img (slike), amp-video (videozapisi), amp-audio (audio datoteke), amp-iframe (iframe). Tako element za sliku postaje

<amp-img src="slika.jpg" alt="Alternativni opis"></amp-img>

Za detaljnije informacije obratite se na službenu AMP dokumentaciju.

Postavljanje AMP na WordPress

Ako je web stranica rađena na WordPressu dobra vijest za vas je da za njega postoji službeni AMP dodatak. Dodatak se aktivno održava, popularan je i korisnička podrška je vrlo dobra što mu govori u prilog. Ako koristite Yoast dodatak, pozitivna je stvar da je Google odlučio izaći developerima u susret i prilagoditi način rada tako da podržava Yoast postavke.

Dodatak može automatski sadašnju temu pretvoriti u AMP i prilagoditi sadržaj. Kada se instalira, svaka objava na stranici nalazi se na adresi na kojoj je nadodan /amp/. Ako imate objavu https://web-stranica.hr/vremenska-prognoza tada će se amp verzija moći vidjeti na adresi https://web-stranica.hr/vremenska-prognoza/amp.

Plugin dodaje uobičajeni meta tag unutar <head> dijela stranice.

Sažetak

Trenutne web stranice su vam spore i koče vam poslovanje? Zanimaju vas implementacije koje se tiče poboljšanja brzine, bez obzira je li to AMP tehnologija ili druge moguće korekcije? Samo nam javite i stisnut ćemo gas do daske.