Aloittelijan opas nopeutetuille mobiilisivuille (AMP)

Nopeutetut mobiilisivut on Googlen aloite, jonka tarkoituksena on ratkaista mobiiliverkon suurin ongelma - nopeus. Mahtavaa käyttäjäkokemusta, jota suunnittelemme erittäin huolellisesti, ovat tuskallisesti hitaita mobiililaitteissa.

Hitaus ei ole pelkästään UX-ongelma, vaan myös vähentää muuntokursseja, ja vahingoittaa esteettömyyttä poistamalla käyttäjät, joilla on hitaampi internetyhteys. AMP on tiimiponnistus, jonka tavoitteena on antaa julkaisijoille luo mobiiliin optimoitu sisältö kerran ja lataa se välittömästi kaikkialla.

Monien julkaisijoiden, kuten BBC: n, The Economist, Guardian Newsin ja Financial Timesin, lanseerauksen jälkeen aloite on toteutettu, joten nyt voimme varmasti olettaa, että AMP on innovaatio, joka kannattaa harkita kaikille, jotka haluavat pysyä kilpailukykyisinä mobiililaitteissa verkko.

AMP toiminnassa

Ennen sukellusta yksityiskohtiin tässä on AMP-demo, niin sinä voit nähdä sen toiminnassa. Demo on käytettävissä tällä linkillä.

Jos haluat nähdä AMP: n toiminnassa, sinun täytyy tehdä kaksi asiaa:

Tarkastele demoa joko mobiililaitteessa tai mobiililaitteessa, esim. Chrome DevToolsin mobiililaitteiden simulaattori.
Suorita hakupyyntö hakupalkissa. Koska Google AMP toimii tällä hetkellä pääasiassa uutissivustolla, paras vaihtoehto on tuore uutinen.

Alla olevassa kuvassa näet, mitä sain, kun käytin hakutermiä rio-olympialaiset.

Nopeutettu mobiilisivujen esittely IPadilla

Kuten näette, AMP-sivut näkyvät Google Rich -kortit, mobiilioptimoidun kuvan karuselli, että Google julkaisi toukokuussa 2016.

Huomaa, miten Google erottaa AMP-sivut muista mobiilikäyttöisistä sivuista käyttämällä 2 eri tarraa: AMP ja Mobile-ystävällinen. On myös syytä napsauttaa joitakin tuloksia, jotta näet, miten AMP-verkkosivu näyttää ja kuinka nopeasti se toimii mobiililaitteissa.

Tekninen tausta

AMP on a web-standardi olemassa oleviin verkkoteknologioihin ja keskittyy staattiseen sisältöön. Sillä on 3 eri osaa:

AMP HTML: muokattu HTML-koodi (1) tiettyjen säännöllisten HTML / CSS-ominaisuuksien ja (2) uusien mukautettujen tunnisteiden (komponentit) käyttöönotto
AMP JS: valvoo parhaita käytäntöjä sivun latausajan lyhentämiseksi
AMP CDN: välimuisti, jossa on sisäänrakennettu validointijärjestelmä, joka optimoi sivustosi

Jos haluat tietää lisää AMP-sivujen teknisestä taustasta, tutustu alla olevaan videoon, jossa Googlen Paul Bakaus antaa johdantokeskustelu AMP: ssä.

Jos haluat sukeltaa syvemmälle, kannattaa myös ymmärtää, mitä optimointitekniikoita AMP käyttää nopeuttamaan suorituskykyä mobiililaitteissa. Alla olevassa videossa AMP Engineeringin johtaja Malte Ubl kertoo AMP: n anatomia yksityiskohtaisesti.

AMP HTML

Nopeutetut mobiilisivut ovat säännölliset HTML-sivut se on tarpeen noudata sääntöjä jotta sivut latautuvat nopeammin ja niiden suorituskyky olisi luotettava.

Katsotaanpa tärkeimpiä asioita, joista sinun on tiedettävä. Voit myös tarkastella koko AMP HTML -määritystä.

Päätä, haluatko erillisen AMP-sivun

Sama staattinen sisältö -sivu voi olla 2 erillistä versiota - yksi AMP: lle ja toinen AMP-versiolle. Voit myös valita vain yksi versio - AMP-sivulla ja käytä sitä kaikkialla. koskevat selaimen tuki, AMP: n Github-sivut väittävät:

Jos olet edelleen huolissasi selaimen tuesta, tutustu Googlen Paul Irishin Stackoverflow-virkaan.

Jos haluat olla kaksi sivua (AMP ja ei-AMP), sinun täytyy linkki jokaiselle jotta ilmoittaa hakukoneille sen olemassaolosta kaksi versiot.

Lisää seuraava koodi osa AMP-sivulta:

Lisää myös seuraava rivi AMP-sivun osio:

Jos sinulla on vain yksi AMP-sivu, sinun täytyy silti linkittää se itsestään seuraavalla tavalla:

Ohjauspaneelin käynnistäminen

AMP-projekti tarjoaa erilaisia käynnistää kattilan levyt voit käyttää aloitusta varten. Tutustu alla olevaan yksinkertaisimpaan AMP-HTML-kattilaan:

          Hei maailma!

Näet, että kattolevy linkittää tavallisen HTML-sivun käyttämällä tag. > tunniste lisää AMP JS -kirjasto.

    
Voit olla vain yksi upotettu tyylitaulukko, ja siellä on myös monia hylättyjä tyylisääntöjä, esimerkiksi et voi käyttää !tärkeä karsinnat, @tuonti sääntö ja pseudo-luokat.
 Älä unohda tarkistaa tyylitaulukon rajoitukset ennen kuin alat kirjoittaa CSS: ää AMP-sivuillesi.
 Toinen asia, joka on tärkeää tietää AMP-tyylisäännöistä: sinä ei voi käyttää haluamaasi asettelua - koska se on yksi AMP: n periaatteista sallia selaimen laskea kunkin elementin tila sivulla etukäteen.
 Katsokaa tuettuja ja ei-tuettuja asetteluja.
 AMP JS
 AMP-asiakirjat voivat sisältää ei tekijän kirjoittamia eikä kolmannen osapuolen JavaScriptejä, tämä ei kuitenkaan tarkoita, että nopeutetut mobiilisivut eivät käytä JavaScriptiä ollenkaan. AMP: n JavaScript-kirjasto (AMP-runtime) on vastuussa AMP-sivujen lataamisesta ja esittämisestä parhaiden toimintatapojen noudattaminen.
 AMP-komponentit
 AMP-komponentit ovat AMP: n ajonaikaisesti määritelty. Ne ovat edellä mainittuja AMP-tyyppiset HTML-tunnisteet sinun on käytettävä tavallisen vastineensa sijasta, kuten  sijaan  tag.
 Jokainen AMP-komponentti sisältää erityistä ulkoista resurssia (kuva, video, upotettu jne.). Ulkoiset resurssit ovat alttiita hidastamaan verkkosivustoja. Ratkaisun päätavoitteena on hallita ulkoisten resurssien lataamista kohtuullisella tavalla käyttämällä niitä hiekkalaatikoiden sisällä.
 AMP tarjoaa sinulle 2 erilaista komponenttia:
 Sisäänrakennetut komponentit: ne ovat aina käytettävissä kaikissa AMP-asiakirjoissa rakennettu suoraan AMP: n ajonaikaan. Niistä on tällä hetkellä viisi:  mainosten näyttämiseen
  kuvien kohdalla sitä käytetään  tag
  seuranta-pikseleille (käytetään sivunäkymien laskemiseen)
  suora HTML5-videotiedosto upottaa, korvaa  tag
  upotettujen elementtien osalta (voidaan käyttää  tietyissä tapauksissa)
 
 Laajennetut komponentit: Täydentävät komponentit sisällyttää ne nimenomaisesti AMP-asiakirjaan. On monia hyödyllisiä, kuten  ja , katso täydellinen luettelo. Monia niistä voidaan käyttää upottaa sisältöä kolmannen osapuolen palveluista, kuten Twitteristä tai Instagramista.
 
Huomaa, että kaikki ulkoisesti ladatut resurssit, kuten  ja  on oltava tunnettu  ja  ominaisuus jotta selain voidaan ottaa käyttöön laskea ulkoasu etukäteen.
 AMP CDN
  AMP CDN on pohjimmiltaan välimuisti, jota kutsutaan nimellä Google AMP-välimuisti. Se noutaa voimassa olevat AMP-asiakirjat, tallentaa ne ja tallentaa ne. AMP CDN: ssä on myös sisäänrakennettu validointijärjestelmä.
 Se kannattaa AMP-sivujen testaaminen ennen kuin annat heidän mennä verkkoon turvallisesti läpäisevät validatorin. Voit tehdä sen monella eri tavalla.
  KUVA: AMP-projekti
On hyvä tietää, että AMP CDN käyttää HTTP / 2-protokollaa parhaan mahdollisen suorituskyvyn saavuttamiseksi.
 AMP-työkalut
 On joitakin hienoja työkaluja, joiden avulla voit toteuttaa nopeutettuja mobiileja sivuja, katsokaamme joitakin niistä.
 Google tarjoaa ylläpitäjille kätevän AMP-tilan raporttityökalu joka näyttää onnistuneesti indeksoitujen AMP-sivujen ja AMP-virheiden määrän.
 Lullabot n AMP PHP -kirjasto voit muuntaa HTML-sivusi AMP HTML: ksi ja raportoi myös minkä tahansa HTML-asiakirjan vaatimustenmukaisuuden AMP-standardien kanssa.
 Jos haluat käyttää AMP: tä WordPress-sivustossasi, lue Yoastin opetusohjelma siitä, miten voit asentaa WordPressin AMP: lle ja miten AMP toimii Yoast SEO -lisäohjelman kanssa.
 Voit myös tarkistaa Automatticin AMP-laajennus jonka avulla voit ottaa käyttöön nopeutetut mobiilisivut WordPress-sivustossasi.
  KUVA: WordPress.org
Muita huomioita
 Jos et ole vieläkään vakuuttunut, katso videota a nopea nopeustesti alla.
 
 Nuzzelin perustaja Jonathan Abrams esittää vielä parempia väitteitä, sillä hän väittää, että jopa mobiiliin optimoitu sivustot, kuten New York Times, latautuvat huomattavasti nopeammin - sen sijaan, että olet ottanut kolme sekuntia lataamaan keskimääräisen sivun, sivu latautuu vähemmän kuin puoli sekuntia kun Googlen nopeutetut mobiilisivut on otettu käyttöön.
 Voit myös lukea mielenkiintoisen artikkelin Vergessä Google AMP: n ja Facebookin Instant-artikkeleiden kilpailusta. Jos etsit edelleen vastausta "mikä on saalis?", Tutustu Yoastin virkaan, jossa mainitaan pelko siitä, että AMP tuo pohjimmiltaan takaisin internetiin ennen vuotta 2000, ja kyseenalaistaa, onko se todella avoin standardi.
 .