Pradedančiųjų spartesnių mobiliųjų puslapių (AMP) vadovas

Pagreitinti mobilieji puslapiai yra „Google“ iniciatyva, kuria siekiama išspręsti didžiausią mobiliojo interneto problemą - greitis. Nuostabus naudotojo patirtis, kurią mes projektuojame labai atsargiai, mobiliai veikia skausmingai.

Lėtumas yra ne tik UX problema, bet ir sumažina konversijų rodiklius, ir kenkia prieinamumui neįtraukiant vartotojų, turinčių lėtesnį interneto ryšį. AMP yra komandinis darbas, kurio tikslas - leisti leidėjams sukurti vieną kartą optimizuotą mobiliojo turinio turinį ir pakelkite jį visur.

Nuo pradžios daugelis leidėjų, tokių kaip BBC, The Economist, Guardian News ir „Financial Times“, įgyvendino šią iniciatyvą, todėl iki šiol mes galime saugiai įsivaizduoti, kad AMP yra naujovė, kurią verta apsvarstyti visiems, kurie nori likti konkurencingi mobiliajame telefone žiniatinklyje.

AMP veiksme

Prieš nardydami į detales, čia yra AMP demo, taip galite pamatyti jį veikiant. Demo galima pasiekti šioje nuorodoje.

Jei norite matyti AMP veiksmą, turite atlikti du dalykus:

Peržiūrėkite demonstraciją mobiliajame įrenginyje arba mobiliajame simuliatoriuje, pvz. „Chrome DevTools“ mobiliojo įrenginio simuliatorius.
Paleiskite paieškos užklausą paieškos juostoje. Kadangi „Google AMP“ šiuo metu veikia daugiausia su naujienų svetaine, geriausias pasirinkimas yra nauja žinia.

Žemiau esančioje ekrano kopijoje galite pamatyti, ką aš naudoju, kai naudoju paieškos terminą rio olimpinės žaidynės.

Spartesnis mobiliųjų puslapių demonstravimas IPad

Kaip matote, AMP puslapiai rodomi kaip „Google Rich Cards“, a mobiliojo optimizuoto vaizdo karuselė, „Google“ paskelbė 2016 m. gegužės mėn.

Atkreipkite dėmesį, kaip „Google“ skiria AMP puslapius iš kitų mobiliai optimizuotų puslapių naudodami 2 skirtingas etiketes: AMP ir Mobile-friendly. Taip pat verta spustelėti kai kuriuos rezultatus, kad pamatytumėte, kaip atrodo AMP internetinis puslapis, ir kaip greitai jis veikia mobiliajame telefone.

Techninis pagrindas

AMP yra a žiniatinklio standartas pastatytas remiantis esamomis žiniatinklio technologijomis ir daugiausia dėmesio skiriant \ t Tai turi 3 skirtingos dalys:

AMP HTML: modifikuotas HTML su (1) tam tikrų įprastų HTML / CSS funkcijų ir. \ t (2) naujų priskirtų žymų (komponentų) įvedimas
AMP JS: įgyvendina geriausią praktiką, kad sumažėtų puslapio įkėlimo laikas
AMP CDN: talpyklą su integruota patvirtinimo sistema, kuri toliau optimizuoja jūsų svetainę

Jei norite sužinoti daugiau apie AMP puslapių techninį pagrindą, peržiūrėkite toliau pateiktą vaizdo įrašą, kuriame „Google“ Paulas Bakausas suteikia įvadinis pokalbis dėl AMP.

Jei norite giliau nardyti, verta suprasti, kokie optimizavimo būdai AMP naudoja, kad spartintų mobilumą. Toliau pateiktame vaizdo įraše „AMP Engineering“ vadovaujamas „Malte Ubl“ paaiškina AMP anatomija detaliai.

AMP HTML

Pagreitinti mobilieji puslapiai yra reguliarūs HTML puslapiai tai reikia laikytis taisyklių rinkinio siekiant, kad puslapiai būtų įkeliami greičiau ir būtų patikimi.

Pažvelkime į svarbiausius dalykus, kuriuos jums reikia žinoti. Taip pat galite peržiūrėti visą AMP HTML specifikaciją.

Nuspręskite, ar norite atskiro AMP puslapio

Tą patį statinį turinio puslapį galite turėti 2 atskiros versijos - viena - AMP ir viena - ne AMP versijai. Taip pat galite pasirinkti tik viena versija - AMP puslapyje ir naudokite jį visur. Dėl naršyklės palaikymas, „AMP“ „Github“ puslapio teiginiai:

Jei vis dar nerimaujate dėl naršyklės palaikymo, patikrinkite „Google“ Paul Airijos postą „Stackoverflow“.

Jei norite turėti du puslapius (AMP ir ne AMP), jums reikia nuoroda į kiekvieną iš jų siekiant informuoti paieškos sistemas apie. \ t du versijos.

Pridėti šį kodą į ne AMP puslapio dalis:

Taip pat pridėkite šią eilutę į AMP puslapio skiltyje:

Jei turite tik vieną AMP puslapį, jums vis tiek reikia susieti jį su savimi tokiu būdu:

Pradedant katilinę

AMP projektas siūlo skirtingus pradedant katilines galite naudoti norėdami pradėti. Pažvelkite į paprasčiausią žemiau pateiktą AMP HTML katilą:

          Labas pasauli!

Galite matyti, kad katilinė susieja įprastą HTML puslapį naudodama žyma. The > žyma prideda AMP JS biblioteka.

 The   
Galite turėti tik vienas įterptųjų stilių, taip pat yra daug neleistinos stiliaus taisyklės, pavyzdžiui, negalite naudoti !svarbu kvalifikatorius, @import taisyklė ir pseudo klasės.
 Nepamirškite patikrinti stiliaus apribojimų prieš pradėdami rašyti CSS savo AMP puslapiams.
 Yra dar vienas dalykas, kurį svarbu žinoti apie AMP stiliaus taisykles: jūs negali naudoti jokio pageidaujamo išdėstymo - kadangi tai yra vienas iš AMP principų, leidžiančių naršyklei apskaičiuoti kiekvieno elemento erdvę puslapyje iš anksto.
 Pažvelkite į palaikomus ir nepalaikomus išdėstymus.
 AMP JS
 Į AMP dokumentus gali būti įtraukti nei jokio autoriaus parašyto, nei jokio trečiosios šalies „JavaScripts“, tačiau tai nereiškia, kad pagreitinti mobilieji puslapiai visai nenaudoja „JavaScript“. AMP „JavaScript“ biblioteka (AMP vykdymo trukmė) yra atsakinga už AMP puslapių įkėlimą ir pateikimą greitai geriausios veiklos praktikos įgyvendinimas.
 AMP komponentai
 AMP komponentai yra apibrėžta pagal AMP vykdymo laiką. Jie yra pirmiau minėti AMP-specifinės HTML žymos turite naudoti vietoj jų įprastų partnerių, pvz.,  vietoj  žyma.
 Kiekviename AMP komponente yra a išorės išteklių (vaizdas, vaizdo įrašas, įdėjimas ir tt). Išoriniai ištekliai yra linkę sulėtinti svetaines. Pagrindinis šio sprendimo tikslas yra valdyti išorinių išteklių pakrovimą tinkamu būdu juos vykdant viduje smėlio dėžės.
 AMP suteikia jums 2 rūšių komponentai:
 Integruoti komponentai: jie visada prieinami kiekviename AMP dokumente pastatytas tiesiai į AMP vykdymo laiką. Šiuo metu yra penki iš jų:  rodyti skelbimus
  vaizdams, jis naudojamas vietoj  žyma
  stebėjimo taškų (naudojamų puslapių peržiūrai skaičiuoti)
  tiesioginiam HTML5 vaizdo failui įterpti, pakeičia  žyma
  įterptųjų elementų (galima naudoti vietoj. \ t  tam tikrais atvejais)
 
 Išplėstiniai komponentai: Papildomi komponentai, turite aiškiai įtraukti juos į savo AMP dokumentą. Yra daug naudingų, pavyzdžiui,  ir , žr. visą sąrašą. Daugelis iš jų gali būti naudojami įterpti turinį iš trečiųjų šalių paslaugų, pvz., „Twitter“ arba „Instagram“.
 
Atkreipkite dėmesį, kad visi išoriškai pakrauti ištekliai, pvz.,  ir  turi būti žinomas  ir  atributas norint įgalinti naršyklę apskaičiuoti išdėstymą iš anksto.
 AMP CDN
 The AMP CDN iš esmės yra talpykla, vadinama „Google“ AMP talpykla. Jis atsiunčia galiojančius AMP dokumentus, talpina ir įkelia juos. AMP CDN taip pat turi a integruota patvirtinimo sistema.
 Verta išbandyti savo AMP puslapius prieš leisdami jiems prisijungti prie interneto, kad būtų saugiai perduoti patvirtinimo priemonę. Tai galite padaryti įvairiais būdais.
  IMAGE: AMP projektas
Gerai žinoti, kad AMP CDN naudoja HTTP / 2 protokolą, kad pasiektų geriausią įmanomą našumą.
 AMP įrankiai
 Yra keletas puikių įrankių, galinčių padėti įgyvendinti pagreitintus mobiliuosius puslapius, pažvelkime į kai kuriuos iš jų.
 „Google“ teikia naudingus žiniatinklio valdytojus AMP būsenos ataskaitos įrankis kuris rodo sėkmingai indeksuotų AMP puslapių ir su AMP susijusių klaidų skaičių.
 „Lullabot“ AMP PHP biblioteka leidžia konvertuoti HTML puslapius į AMP HTML ir taip pat praneša apie bet kurio HTML dokumento atitiktį AMP standartams.
 Jei norite naudoti „AMP“ savo „WordPress“ svetainėje, perskaitykite „Yoast“ vadovėlį, kaip įdiegti „WordPress“, skirtą „AMP“, ir kaip AMP veikia su „Yoast SEO“ papildiniu.
 Taip pat galite patikrinti „Automattic“ AMP įskiepis tai leidžia įgalinti „Accelerated Mobile Pages“ savo „WordPress“ svetainėje.
  IMAGE: WordPress.org
Kiti svarstymai
 Jei vis dar nesate įsitikinę, žiūrėkite vaizdo įrašą apie a greito greičio bandymas žemiau.
 
 „Nuzzel“ įkūrėjas Jonathan Abrams teigia, kad netgi mobiliojo ryšio optimizuotos svetainės, pvz., „New York Times“ įkeliamos žymiai greičiau - vietoj trijų sekundžių įkelti vidutinį puslapį, puslapis įkeliamas mažiau nei pusė sekundės kai „Google“ pagreitinti mobilieji puslapiai yra įjungti.
 Taip pat galite perskaityti įdomų straipsnį „Verge“ apie „Google AMP“ ir „Facebook“ tiesioginių straipsnių konkursą. Jei vis dar ieškote atsakymo į „kas yra laimikis?“, Patikrinkite „Yoast“ postą, kuriame paminėta, kad AMP iš esmės mus sugrąžins į interneto laiką iki 2000 metų, ir abejoja, ar tai tikrai atviras standartas.
 .