Navodila za začetnike za hitrejše mobilne strani (AMP)

Pospešene mobilne strani je Googlova pobuda, ki namerava rešiti največji problem mobilnega spleta - hitrosti. Čudovite uporabniške izkušnje, ki jih načrtujemo z veliko pozornostjo, so boleče počasi na mobilnih napravah.

Počasnost ni le problem UX, ampak tudi zmanjša razmerje preusmeritev, in škoduje dostopnosti z izključitvijo uporabnikov s počasnejšimi internetnimi povezavami. AMP je skupinsko prizadevanje, katerega cilj je omogočiti izdajateljem ustvarite mobilno optimizirano vsebino enkrat in naložite ga takoj povsod.

Od samega začetka so številni založniki, kot so BBC, The Economist, Guardian News in Financial Times, uresničili pobudo, tako da do sedaj lahko varno domnevamo, da je AMP inovacija, ki jo je vredno razmisliti za vse, ki želijo ostati konkurenčni na mobilnih napravah. splet.

AMP v akciji

Pred potopom v podrobnosti, tukaj je AMP demo, torej lahko videl v akciji. Demo si lahko ogledate na tej povezavi.

Če si želite ogledati AMP v akciji, morate narediti dve stvari:

Oglejte si demo na mobilni napravi ali na mobilnem simulatorju, npr. Simulator mobilne naprave Chrome DevTools.
Zaženite iskalno poizvedbo v iskalni vrstici. Ker Google AMP trenutno deluje predvsem s spletnimi mesti z novicami, je najboljša izbira novica.

Na spodnjem posnetku zaslona lahko vidite, kaj sem dobil, ko sem uporabil iskalni izraz olimpijske igre.

Pospešena predstavitev mobilnih strani na IPadu

Kot lahko vidite, se strani AMP prikažejo kot Google bogate kartice, a Vrtiljak za slike, optimiziran za mobilne naprave, ki jo je Google izdal maja 2016.

Opazite, kako Google razlikuje strani AMP od drugih strani, optimiziranih za mobilne naprave z dvema različnima oznakama: AMP in Mobile-friendly. Prav tako je vredno klikniti na nekatere rezultate, da vidite, kako izgleda spletna stran AMP in kako hitro teče na mobilnem telefonu.

Tehnično ozadje

AMP je spletni standard temeljijo na obstoječih spletnih tehnologijah in se osredotočajo na statično vsebino. Ima 3 različni deli:

HTML za AMP: spremenjeni HTML z (1) omejitev nekaterih rednih funkcij HTML / CSS in (2) uvedba novih oznak po meri (komponente)
AMP JS: uveljavlja najboljše prakse, da zmanjša čas nalaganja strani
AMP CDN: predpomnilnik z vgrajenim sistemom za preverjanje, ki še bolj optimizira vaše spletno mesto

Če želite izvedeti več o tehničnem ozadju strani AMP, si oglejte spodnji videoposnetek, v katerem Google Bavaus ponuja uvodni pogovor o AMP.

Če želite potopiti globlje, je vredno tudi razumeti, kaj optimizacijske tehnike AMP uporablja za pospešitev delovanja na mobilnih napravah. V videu spodaj, Malte Ubl, vodja AMP Engineering pojasnjuje anatomija AMP Podrobno.

HTML AMP

Pospešene mobilne strani so redne strani HTML to je potrebno sledite nizu pravil da bi se strani hitreje nalagale in upodabljale z zanesljivo zmogljivostjo.

Oglejmo si najpomembnejše stvari, ki jih morate vedeti o tem. Oglejte si tudi celotno specifikacijo AMP HTML.

Odločite se, če želite ločeno stran AMP

Za isto statično stran vsebine lahko imate 2 ločeni različici - eno za AMP in drugo za različico brez AMP. Lahko se odločite tudi za to samo ena različica - strani AMP in jo uporabite povsod. V zvezi s tem brskalnika, Zahteve AMP za Github stran:

Če ste še vedno zaskrbljeni zaradi podpore brskalniku, si oglejte objavo Googlovega Paul Irish na Stackoverflow.

Če želite imeti dve strani (AMP in ne-AMP), morate to storiti povezavo do vsakega od njih Da bi obveščati iskalnike o obstoju dva različic.

Dodajte naslednjo kodo na strani, ki ni AMP:

Dodajte tudi naslednjo vrstico strani AMP:

Če imate samo eno stran AMP, morate še vedno povezavo od sebe na naslednji način:

Zagon Boilerplate

Projekt AMP ponuja različne zaganjanje kotlov lahko uporabite za začetek. Spodaj si oglejte najpreprostejšo spodnjo oznako AMP HTML:

          Pozdravljen, svet!

Vidite lahko, da predlogo povezuje običajno HTML stran z uporabo oznaka. The > oznaka doda Knjižnica AMP JS.

 The   
Lahko samo imaš eno vgrajeni slogovni slog, obstaja pa tudi veliko nedovoljeni slogi, na primer ne morete uporabiti !pomembno kvalifikator, @import pravilo in psevdo-razredi.
 Ne pozabite preveriti omejitev slogov, preden začnete pisati CSS za vaše strani AMP.
 Obstaja še ena stvar, ki je pomembno vedeti o pravilih za AMP stil: ti ne morete uporabljati želene postavitve - ker je to eno od načel AMP, ki omogoča brskalniku izračunajte prostor vsakega elementa na strani vnaprej.
 Oglejte si podprte in nepodprte postavitve.
 AMP JS
 Dokumenti AMP lahko vključujejo nobenega JavaScripta, napisanega s strani avtorja, niti JavaScriptov drugih izdelovalcev, vendar to ne pomeni, da Accelerated Mobile Pages sploh ne uporablja JavaScripta. Knjižnica AMP JavaScript (runtime AMP) je odgovorna za hitro nalaganje in prikazovanje strani AMP uveljavljanje najboljših praks uspešnosti.
 Komponente AMP
 Komponente AMP so definirano s časom izvajanja AMP. To so prej omenjeni HTML oznake, specifične za AMP morate uporabiti namesto običajnega nasprotnika, kot je  namesto  oznaka.
 Vsaka komponenta AMP vsebuje a zunanjega vira (slika, video, embed itd.). Zunanji viri so nagnjeni k upočasnitvi spletnih strani. Glavni cilj te rešitve je, da upravljati nalaganje zunanjih virov na razumen način, tako da jih vodijo znotraj peskovnika.
 AMP vam zagotavlja 2 vrsti komponent:
 Vgrajene komponente: vedno so na voljo v vsakem dokumentu AMP vgrajen v čas izvajanja AMP. Trenutno jih je pet:  za prikazovanje oglasov
  za slike se uporablja namesto  oznaka
  za sledenje slikovnih pik (uporablja se za štetje ogledov strani)
  za neposredno vstavljanje video datoteke HTML5, nadomešča  oznaka
  za vgrajene elemente (lahko uporabite namesto  v nekaterih primerih)
 
 Razširjene komponente: Dodatne komponente morate izrecno vključiti v dokument AMP. Obstaja veliko uporabnih, kot npr  in , glej celoten seznam. Mnogi od njih se lahko uporabljajo vsebine iz storitev tretjih oseb, kot so na primer Twitter ali Instagram.
 
Upoštevajte, da vsi zunaj naloženi viri, kot so  in  mora imeti znano  in  atribut , da omogočite brskalniku vnaprej izračunajte postavitev.
 AMP CDN
 The AMP CDN je v bistvu predpomnilnik, imenovan Predpomnilnik Google AMP. Izbere veljavne dokumente AMP, jih shrani in naloži. AMP CDN ima tudi vgrajen sistem potrjevanja.
 Vredno je testiranje strani AMP preden jih sprostite na spletu, da bi varno opravi validator. To lahko storite na različne načine.
  SLIKA: Projekt AMP
Dobro je vedeti, da AMP CDN uporablja protokol HTTP / 2, da bi dosegel najboljšo možno zmogljivost.
 Orodja AMP
 Obstaja nekaj odličnih orodij, ki vam lahko pomagajo izvajati pospešene mobilne strani, poglejmo jih nekaj.
 Google webmasterjem ponuja priročno Orodje za poročilo o stanju AMP ki prikazuje število uspešno indeksiranih strani AMP, in napake, povezane z AMP.
 Lullabot Knjižnica AMP PHP omogoča pretvorbo HTML strani v HTML AMP in poročanje o skladnosti katerega koli dokumenta HTML s standardi AMP.
 Če želite uporabljati AMP na vaši strani WordPress, preberite Yoastov vadnico o tem, kako nastaviti WordPress za AMP in kako AMP deluje z vtičnikom Yoast SEO.
 Prav tako lahko preverite Automattic's Vtičnik AMP , ki vam omogoča, da na strani WordPress omogočite pospešene mobilne strani.
  SLIKA: WordPress.org
Dodatne ugotovitve
 Če še vedno niste prepričani, si oglejte videoposnetek o hitri test hitrosti spodaj.
 
 Jonathan Abrams, ustanovitelj Nuzzel-a, daje še boljše trditve, saj trdi, da tudi mobilne strani, kot je New York Times, znatno hitreje naložijo hitreje. - namesto tri sekund, da naložite povprečno stran, se stran naloži v manj kot pol sekunde ko je omogočena Google Pospešene mobilne strani.
 Prav tako lahko preberete zanimiv članek v Verge o konkurenci Google AMP in Facebookovih Instant člankov. Če še vedno iščete odgovor za "kaj je ulov?", Si oglejte objavo Yoasta, ki omenja strahove, da nas AMP v bistvu pripelje nazaj na internetni čas pred letom 2000, in se sprašuje, ali je res odprt standard.
 .