Algajatele mõeldud kiirendatud mobiililehekülgede (AMP) juhend

Kiirendatud mobiililehed on Google'i algatus, mille eesmärk on lahendada mobiilse veebi suurim probleem - kiirus. Meeldiv kasutajate kogemused, mida me väga hoolikalt kavandame, on mobiilil valusalt aeglased.

Aeglus ei ole ainult UX probleem, vaid ka vähendab konversioonimäärasid, ja kahjustab ligipääsetavust välistades aeglasema internetiühendusega kasutajad. AMP on meeskonnatöö, mille eesmärk on võimaldada kirjastajatel luua mobiilile optimeeritud sisu üks kord ja laadige see koheselt kõikjal.

Algusest peale on paljud algatatud ettevõtjad, nagu BBC, The Economist, Guardian News ja Financial Times, algatuse ellu viinud, nii et nüüdseks saame kindlalt eeldada, et AMP on innovatsioon, mida tasub kaaluda igaühele, kes soovib mobiilsides püsida võrk.

AMP tegevuses

Enne detailide sukeldumist siin on AMP demo, nii et saate vaata seda tegevuses. Demot saab kasutada sellel lingil.

AMP toimimise vaatamiseks peate tegema kaks asja:

Vaadake demot mobiilseadmes või mobiilsimulaatoris, nt. Chrome DevToolsi mobiilseadme simulaator.
Käivita otsingupäring otsinguribal. Kuna Google AMP töötab praegu peamiselt uudiste saidil, on parim valik värske uudis.

Alloleval pildil saate näha, mida ma sain, kui kasutasin otsingusõna rio olümpiamängud.

Nagu näete, kuvatakse AMP leheküljed Google Rich kaardid, a mobiilse optimeeritud kujutise karussell, et Google avaldas 2016. aasta mais.

Pange tähele, kuidas Google diferentseerib AMP lehekülgi teistest mobiilse optimeeritud lehtedest kasutades kahte erinevat silt: AMP ja Mobile-sõbralikud. Samuti tasub klõpsata mõnele tulemusele, et näha, kuidas AMP veebileht näeb välja ja kui kiiresti see mobiilil töötab.

Tehniline taust

AMP on a veebistandard olemasolevatele veebitehnoloogiatele ja keskendudes staatilisele sisule. Sellel on 3 erinevat osa:

AMP HTML: muudetud HTML-i (1) teatud tavaliste HTML / CSS-funktsioonide ja (2) uute kohandatud siltide (komponendid) kasutuselevõtmine
AMP JS: rakendab parimaid tavasid, et vähendada lehekülje laadimise aega
AMP CDN: sisseehitatud valideerimissüsteemiga vahemälu, mis optimeerib teie saiti veelgi

Kui soovite rohkem teada AMP lehekülgede tehnilisest taustast, vaadake allolevat videot, milles Google'i Paul Bakaus annab sissejuhatav kõne AMP kohta.

Kui soovite sügavamale sukelduda, tasub mõista ka seda, mida optimeerimismeetodid AMP kasutab mobiilside jõudluse kiirendamiseks. Allpool toodud videol selgitab AMP Engineeringi juht Malte Ubl AMP anatoomia üksikasjalikult.

AMP HTML

Kiirendatud mobiililehed on tavalised HTML-leheküljed see peab olema järgige reegleid selleks, et muuta lehed kiiremaks ja usaldusväärseks.

Vaatame kõige olulisemaid asju, mida peate sellest teadma. Võite vaadata ka täielikku AMP HTML-i spetsifikatsiooni.

Otsustage, kas soovite eraldi AMP-lehekülge

Sama staatilise sisu lehel võib olla 2 erinevat versiooni - üks AMP-le ja teine mitte-AMP-versioonile. Samuti saate valida ainult üks versioon - AMP-leheküljel ja kasutage seda kõikjal. Mis puutub brauseri tugi, AMP Githubi lehel on väited:

Kui olete ikka veel brauseritoe pärast mures, vaadake Google'i iiri Paul Stackoverflow postitust.

Kui soovite, et teil oleks kaks lehte (AMP ja mitte-AMP), peate seda tegema link neile selleks, et teavitama otsingumootoreid selle olemasolust kaks versioonid.

Lisage järgmine kood AMP-lehekülje osa:

Lisage ka järgmine rida AMP-lehekülje osa:

Kui teil on ainult üks AMP-leht, peate siiski seda tegema seostage see järgnevalt:

Katla käivitamine

AMP projekt pakub erinevaid võimalusi katlakivide käivitamine saate alustada. Vaadake allpool olevat kõige lihtsamat AMP HTML-i katlakivi:

          Tere, Maailm!

Näete, et boilerplate seostab tavalise HTML-lehekülje abil silt. The > silt lisab AMP JS raamatukogu.

 The   
Sul võib olla ainult üks varjatud stiililehe ja on ka palju keelatud stiilieeskirjad, näiteks ei saa seda kasutada !oluline kvalifitseerija, @import reegel ja pseudo-klassid.
 Ära unusta vaadata stiililehekülje piiranguid enne, kui hakkate oma AMP-lehekülgedele CSS-i kirjutama.
 On veel üks asi, mis on oluline teada AMP stiili reeglitest: sina ei saa kasutada ühtegi soovitud paigutust - kuna see on üks AMP põhimõtetest, et võimaldada brauseril arvutada iga elemendi ruum lehel eelnevalt.
 Heitke pilk toetatud ja toetamata paigutustele.
 AMP JS
 AMP dokumendid võivad sisaldada ei autori poolt kirjutatud ega ka kolmandate isikute JavaScripte, see aga ei tähenda, et kiirendatud mobiililehed ei kasuta JavaScripti üldse. AMP-i JavaScript-raamatukogu (AMP runtime) vastutab AMP-lehekülgede laadimise ja muutmise eest parimate tulemustavade rakendamine.
 AMP komponendid
 AMP komponendid on määratletakse AMP käitusajaga. Need on eespool nimetatud AMP-spetsiifilised HTML-sildid peate kasutama oma tavalise vaste asemel, näiteks  asemel  silt.
 Iga AMP komponent sisaldab a konkreetset välist ressurssi (pilt, video, embed jne). Välised ressursid kalduvad veebisaite aeglustama. Selle lahenduse peamine eesmärk on hallata väliste ressursside laadimist neid mõistlikul viisil juhtida liivakastide sees.
 AMP pakub teile 2 liiki komponente:
 Sisseehitatud komponendid: nad on alati saadaval igas AMP dokumendis on ehitatud otse AMP käitusajale. Praegu on neist viis:  reklaamide näitamiseks
  piltide puhul kasutatakse seda  silt
  jälgimispikslite jaoks (kasutatakse lehekülje vaadete loendamiseks)
  otsese HTML5-videofaili embeds asemel asendatakse  silt
  sisseehitatud elementide puhul (saab kasutada. \ t  teatud juhtudel)
 
 Laiendatud komponendid: Täiendavad komponendid, peate selgesõnaliselt lisada need AMP-dokumenti. On palju kasulikke, näiteks  ja , vaadake täielikku nimekirja. Paljud neist on harjunud Sisesta sisu kolmandate osapoolte teenustest, näiteks Twitterist või Instagramist.
 
Pange tähele, et kõik väliselt laaditud ressursid, näiteks  ja  peab olema teada  ja  atribuut brauseri lubamiseks arvutada paigutus eelnevalt.
 AMP CDN
 The AMP CDN on põhimõtteliselt vahemälu, mida nimetatakse Google AMP vahemälu. See tõmbab kehtivad AMP dokumendid, salvestab ja laadib need. AMP CDN-il on ka a sisseehitatud valideerimissüsteem.
 See on väärt AMP-lehekülgede testimine enne kui lasete neil internetis turvaliselt liikuda läbima valideerija. Seda saab teha mitmel erineval viisil.
  IMAGE: AMP projekt
On hea teada, et parima võimaliku jõudluse saavutamiseks kasutab AMP CDN HTTP / 2 protokolli.
 AMP tööriistad
 On mõningaid suurepäraseid tööriistu, mis aitavad teil kiirendatud mobiililehekülgi rakendada, vaatame mõned neist.
 Google pakub veebimeistritele käepärast AMP staatuse aruande tööriist mis näitab edukalt indekseeritud AMP-lehekülgede arvu ja AMP-ga seotud vigu.
 Lullabot on AMP PHP raamatukogu võimaldab teil teisendada HTML-leheküljed AMP HTML-ks ja teatab ka mis tahes HTML-dokumendi vastavusest AMP-standarditele.
 Kui soovite kasutada AMP-d oma WordPressi saidil, lugege Yoasti juhendit, kuidas seadistada WordPress AMP-le ja kuidas AMP töötab Yoast SEO pluginaga.
 Samuti saate tutvuda Automatticiga AMP plugin mis võimaldab teil lubada kiirendatud mobiilseid lehti oma WordPressi saidil.
  IMAGE: WordPress.org
Täiendavad kaalutlused
 Kui te pole veel veendunud, vaadake videot a kohta kiire kiiruse test allpool.
 
 Nuzzel'i asutaja Jonathan Abrams väidab veelgi paremaid väiteid, sest ta väidab, et isegi mobiilse optimeeritud saidid, nagu New York Times, laadivad oluliselt kiiremini - selle asemel, et keskmist lehekülge laadida kolm sekundit, laaditakse leheküljele vähem kui pool sekundit kui Google'i kiirendatud mobiililehed on lubatud.
 Samuti saate lugeda huvitavat artiklit Verge'is Google AMP ja Facebook Instant artiklite konkurentsi kohta. Kui otsite ikka vastust "mis on saak?", Vaadake Yoasti postitust, kus mainitakse hirme, et AMP toob meid põhimõtteliselt tagasi internetiajale enne 2000. aastat, ja kahtleb, kas see on tõesti avatud standard.
 .