Vodič za početnike za ubrzane mobilne stranice (AMP)

Ubrzane mobilne stranice je Googleova inicijativa koja namjerava riješiti najveći problem mobilnog weba - ubrzati. Nevjerojatna korisnička iskustva koja dizajniramo s velikom pažnjom bolno su spora na mobitelu.

Sporost nije samo problem UX-a, već također smanjuje stope pretvorbi, i šteti pristupačnosti isključivanjem korisnika s sporijim internetskim vezama. AMP je timski rad pokrenut s ciljem omogućavanja izdavačima kreirajte optimizirani sadržaj za mobilne uređaje jednom i učitajte ga odmah posvuda.

Od lansiranja, mnogi izdavači kao što su BBC, The Economist, Guardian News i Financial Times implementirali su inicijativu, tako da do sada možemo sa sigurnošću pretpostaviti da je AMP inovacija koja vrijedi razmisliti za svakoga tko želi ostati konkurentan na mobilnim uređajima mreža.

AMP na djelu

Prije nego što uđete u detalje, evo ga AMP demo, tako da možete vidjeti na djelu. Demo se može pristupiti na ovoj vezi.

Da biste vidjeli AMP u akciji, morate učiniti dvije stvari:

1. Pogledajte demo na mobilnom uređaju ili na mobilnom simulatoru, npr. Simulator mobilnih uređaja Chrome DevTools.
2. Pokrenite upit za pretraživanje na traci za pretraživanje. Budući da Google AMP trenutno uglavnom radi s web-lokacijom s vijestima, najbolji izbor je nova vijest.

Na slici ispod možete vidjeti što sam dobio kada sam koristio pojam za pretraživanje olimpijske igre.

Kao što možete vidjeti, AMP stranice se pojavljuju kao Google bogate kartice, vrtuljak slike optimiziran za mobilne uređaje, koje je Google objavio u svibnju 2016. godine.

Primijetite kako Google diferencira AMP stranice s drugih stranica koje su optimizirane za mobilne uređaje pomoću 2 različite oznake: AMP i Mobile-friendly. Također je vrijedno kliknuti na neke od rezultata kako biste vidjeli kako izgleda AMP web stranica i koliko brzo radi na mobilnim uređajima.

Tehnička pozadina

AMP je a web standard izgrađena na postojećim web-tehnologijama i fokusiranje na statički sadržaj. Ima 3 različita dijela:

1. AMP HTML: izmijenjeni HTML s (1) ograničenje određenih redovnih HTML / CSS značajki i (2) uvođenje novih prilagođenih oznaka (Komponente)
2. AMP JS: primjenjuje najbolje postupke kako bi smanjio vrijeme učitavanja stranice
3. AMP CDN: cache s ugrađenim sustavom za provjeru valjanosti, koji dodatno optimizira Vašu web lokaciju

Ako želite saznati više o tehničkoj pozadini AMP stranica, pogledajte videozapis u nastavku u kojem Googleov Paul Bakaus daje uvodni govor na AMP.

Ako želite zaroniti dublje, vrijedi razumjeti što optimizacijske tehnike AMP koristi za ubrzavanje performansi na mobilnim uređajima. U videu ispod, Malte Ubl, voditelj AMP inženjerstva objašnjava anatomija AMP-a detaljno.

AMP HTML

Ubrzane mobilne stranice su redovne HTML stranice koje trebaju slijedite skup pravila kako bi se stranice brže učitavale i prikazivale uz pouzdane performanse.

Pogledajmo najvažnije stvari koje trebate znati o tome. Također možete pogledati punu AMP HTML specifikaciju.

Odlučite ako želite zasebnu AMP stranicu

Za istu statičku stranicu sadržaja možete imati 2 odvojene verzije - jedan za AMP i jedan za ne-AMP verziju. Također možete odabrati i imati samo jedna verzija - AMP stranicu i koristite je svugdje. O podrška za preglednik, Zahtjevi za AMP Github stranicu:

Ako ste još uvijek zabrinuti za podršku preglednika, pogledajte post Googleovog Irskog Irca na Stackoverflowu.

U slučaju da želite imati dvije stranice (AMP i ne-AMP), trebate na svaku od njih da bi informirati tražilice o postojanju dva verzije.

Dodajte sljedeći kod u na ne-AMP stranici:

Također dodajte sljedeći redak u na stranici AMP:

Ako imate samo jednu AMP stranicu, i dalje trebate povezati ga sa sobom na sljedeći način:

Pokretanje predloška

AMP projekt nudi različite pokretanje kotlovskih ploča možete koristiti za početak. Pogledajte najjednostavniji AMP HTML predložak u nastavku:

          Pozdrav svijete!  

Možete vidjeti da predložak povezuje običnu HTML stranicu pomoću označiti. > oznaka dodaje oznaku AMP JS knjižnica.

Možeš samo imati jedan ugrađeni stilski list, a ima i mnogo nedopuštena pravila stila, na primjer ne možete koristiti !važno kvalifikator, @uvoz pravilo i pseudo-klase.

Ne zaboravite provjeriti ograničenja stilova prije nego što počnete pisati CSS za vaše AMP stranice.

Postoji još jedna stvar koja je važna za AMP pravila pravila: ti ne može koristiti željeni izgled - jer je to jedan od AMP-ovih principa koji omogućuju pregledniku izračunajte prostor svakog elementa na stranici unaprijed.

Pogledajte podržane i nepodržane izglede.

AMP JS

AMP dokumenti mogu sadržavati nijedan autorski pisani, niti bilo koji drugi JavaScript-ovi trećih strana, međutim, to ne znači da Accelerated Mobile Pages uopće ne koristi JavaScript. AMP-ova JavaScript biblioteka (AMP runtime) odgovorna je za učitavanje i prikazivanje AMP stranica provođenje najboljih praksi.

AMP komponente

AMP komponente su definirano AMP runtimeom. Oni su gore spomenuti HTML oznake specifične za AMP trebate upotrijebiti umjesto uobičajenog partnera, kao što je umjesto označiti.

Svaka AMP komponenta sadrži a određeni vanjski resurs (slika, videozapis, ugradnja, itd.). Vanjski izvori su skloni usporavanju web stranica. Glavni cilj ovog rješenja je da upravljanje učitavanjem vanjskih resursa na razuman način provodeći ih unutar sandboxa.

AMP vam pruža 2 vrste komponenti:

1. Ugrađene komponente: oni su uvijek dostupni u svakom AMP dokumentu ugrađena u AMP runtime. Trenutno ih ima pet:
   1. za prikazivanje oglasa
   2. za slike, koristi se umjesto označiti
   3. za praćenje piksela (koristi se za brojanje prikaza stranice)
   4. za izravnu HTML5 video datoteku ugrađuje, zamjenjuje označiti
   5. za ugrađene elemente (može se koristiti umjesto u određenim slučajevima)
2. Proširene komponente: Dodatne komponente, morate izričito ih uključiti u dokument AMP. Ima mnogo korisnih, kao što su i , pogledajte cijeli popis. Mnogi od njih se mogu naviknuti ugraditi sadržaj usluga treće strane, kao što su Twitter ili Instagram.

Imajte na umu da su svi izvana učitani resursi, kao što su i mora imati poznato i atribut kako biste omogućili pregledniku unaprijed izračunajte raspored.

AMP CDN

AMP CDN u osnovi je cache, naziva se Google AMP predmemorija. Ona preuzima valjane AMP dokumente, sprema ih i učitava. AMP CDN također ima a ugrađeni sustav provjere valjanosti.

Vrijedi testiranje AMP stranica prije puštanja na internet kako bi bili sigurni proći provjeru valjanosti. To možete učiniti na mnogo različitih načina.

Dobro je znati da AMP CDN koristi HTTP / 2 protokol kako bi postigao najbolje moguće performanse.

AMP alati

Postoje neki odlični alati koji vam mogu pomoći da implementirate ubrzane mobilne stranice, pogledajmo neke od njih.

Google webmasterima pruža praktičnu pomoć Alat za izvješće o statusu AMP koja prikazuje broj uspješno indeksiranih AMP stranica, kao i pogreške povezane s AMP-om.

Lullabot-a AMP PHP knjižnica vam omogućuje pretvoriti vaše HTML stranice u AMP HTML, a također izvješćuje o sukladnosti bilo kojeg HTML dokumenta s AMP standardima.

Ako želite koristiti AMP na svojoj WordPress stranici, pročitajte Yoastov vodič o tome kako postaviti WordPress za AMP i kako AMP radi s Yoast SEO dodatkom.

Također možete provjeriti Automattic's AMP dodatak koji vam omogućuje da omogućite ubrzane mobilne stranice na svom WordPress mjestu.

Daljnje razmatranje

Ako još niste uvjereni, pogledajte video o a brzo ispitivanje brzine ispod.

Jonathan Abrams, osnivač Nuzzela, daje još bolje tvrdnje, jer tvrdi da čak i web-lokacije optimizirane za mobilne uređaje kao što je New York Times opterećuju znatno brže - umjesto da traje tri sekunde za učitavanje prosječne stranice, učitava se stranica manje od pola sekunde kada su Googleove ubrzane mobilne stranice omogućene.

Također možete pročitati zanimljiv članak u Vergeu o natjecanju Google AMP i Facebookovih Instant članaka. Ako još uvijek tražite odgovor za "ono što je ulov?", Provjerite Yoastov post koji spominje strah da nas AMP u osnovi vraća na internet prije 2000, i postavlja pitanje je li to doista otvoren standard.

.