AMP: n toiminta AMP-puitteissa

Kirjoittaja: Konstantin Sokhan, suunnittelujohtaja ja David Tapp, asiakaspartneri, MetaLab

TL; DR - Matkusimme AMP: n maailmaan ja opimme juttuja

Yhteistyössä Googlen kanssa keskityttiin The AMP -projektiin ja saimme unelmakappaleen: luo mitä sydämesi haluaa, kunhan se auttaa työntämään AMP: n koodikirjassa ja komponenttikirjastossa mahdollisen rajat. Kun jaamme sen, mitä rakensimme ja opimme matkan varrella, annamme myös omaksumme AMP: n merkityksen, kenelle se on tarkoitettu ja minne se menee.

Mikä on AMP?

AMP on avoimen lähdekoodin kehys tehokkaiden, korkean suorituskyvyn verkkosivujen rakentamiseksi. Sitä käytetään tällä hetkellä pääasiassa toimitukselliseen sisältöön mobiililaitteissa, mutta kasvaa tämän lisäksi laajempaan käyttöön eri markkinoilla (ja näyttökoot).

Nähdään molemmat puolet

Ennen kuin siirrymme eteenpäin omasta kokemuksestamme, haluamme tunnustaa, että olemme hyvin tietoisia kritiikistä ja emme aio teeskennellä, että AMP: llä ei ole mitään; se tekee. Käytimme tätä hanketta vain tilaisuutena kartoittaa omaa polkuamme ja tehdä omia vaikutelmia. Kokemuksemme mukaan on joitain väärinkäsityksiä, jotka haluaisimme auttaa selvittämään.

AMP antaa sivuston kirjoittajille mahdollisuuden isännöidä staattista mobiililaitteille optimoitua versiota kaikista sivuston sivuista, jotka jakeluympäristöt kuten Google-välimuisti ja palvelevat käyttäjiä. Suuri osa AMP-kritiikistä kohdistuu Googlen lähestymistapaan palvelevien AMP-sivujen välimuistiin tallentamiseen google.com-verkkotunnuksesta. On syytä selventää, että AMP-sivun välimuisti ja AMP HTML -mobiiliversio ovat erillisiä tuotteita. AMP HTML: llä rakennettu sivu voidaan yksityisesti ylläpitää missä tahansa palvelimessa. Voit hyödyntää kaikkia kehyksen ominaisuuksia ilman, että Google isännöi sisältöäsi.

Älä anna nimen huijata sinua

AMP tarkoittaa ”nopeutettuja mobiilisivuja”. Yksinkertaisimmin sanottuna se estää suurimman osan elementeistä, jotka saavat verkon latautumaan hitaammin mobiililaitteisiin, kuten suuret määrät JavaScriptiä, kolmannen osapuolen seurantakoodit ja paisunut CSS. Sen avulla sisältö voidaan ladata melkein heti. AMP on suunniteltu välimuistilla varustetuille sivuille, mutta siitä on nyt tulossa laajempi työkalupaketti mobiiliverkon korjaamiseksi (koska suurin osa käyttäjistä on nykyään mobiililaitteita, jotkin sivuston lataukset voivat silti viedä minuutteja). Vaikka M tarkoittaa matkapuhelinta, AMP voi ehdottomasti auttaa parantamaan latausnopeutta millä tahansa laitteella tai selaintyypillä.

Lyhyt

Heinäkuussa AMP Project -tiimi tuli luokseni työntämään kehyksen mahdollisuuksia, esittelemään sen kykyjä ja auttamaan sisällöntuottajia ymmärtämään, kuinka he voisivat paremmin käyttää sitä Webin herättämiseen. Meille annettiin käytännössä vapaa hallinto käyttää kaikkia AMP: n tarjoamia työkaluja yhdistääkseen ja toteuttaaksemme ne sopivaksi katsomme tavoitteena luoda aivan uusi kokemus, joka oli vielä rakennettava kehyksen kanssa.

Mitä rakensimme ja miksi

Vaikka meidän piti vielä työskennellä tiukkojen ohjeiden mukaisesti varmistaaksemme, että koodi oli kelvollinen AMP, pyrimme keksimään raikkaimmat mahdolliset käsitteet näiden määriteltyjen rajojen sisällä.

Jonkin verran aivoriihiä ajattelimme ajatukseen, että online-taidegalleriat ja museot ovat tyypillisesti hauskoja, abstrakteja ja eivät pela sääntöjen mukaisia, kun kyseessä on tavanomaisten ruudukkoitettujen web-asettelujen seuraaminen. Tätä ajatusta ajatellen loimme keinotekoisen taidegallerian todistamaan perusteet AMP: n mahdollista uudelleenmäärittelylle. Rakensimme sivuston, joka käytti parhaiten aloitetta ja rakensi sen perustalle. Tiimimme luottivat AMP: n voimaan varmistaakseen, että sivusto on uskomattoman suorituskykyinen, kun taas esitellään puitteissa uusia ominaisuuksia ja komponentteja, mukaan lukien mukautetut parallaksikokemukset, hover-tilat ja paljon muuta. Meillä oli jopa hauskaa mahdollisuudesta saada syvällinen VR-versio, joka tehdään AMP: ssä harkitsemista varten. Kokeile puhelimesi konseptitodistusta täällä.

Suunnittelu taidegalleria AMP-sivustoon

Seuraavaksi pohdimme verkossa yleisemmin käytettyjä kokemuksia, jotka voisivat hyötyä AMP: n ominaisuuksista. Päädyimme tutkimaan mitä matkanvaraussovelluksessa oli mahdollista, antaen käyttäjille mahdollisuuden etsiä kohteita, suodattaa toiminnan perusteella ja löytää asioita dynaamisesti; kaikki samalla kun ylläpidetään nopeutta ja suorituskykyä, AMP tunnetaan yleisesti. Hikoilemme tämän yksityiskohtia iloksi - työntämällä AMP-kehystä niin pitkälle kuin pystyimme mikro-animaatioilla ja persoonallisuuden osumilla.

Suunnittelu matkavarauksen AMP-sivustoon

Kuka on AMP?

Nykyään AMP on suunnattu liikkeellä oleville ihmisille, jotka ovat raskaita toimittelutyylisisällön (uutiset ja blogit puhelimissaan) ja sähköisen kaupan suhteen. Mielestämme vahva omaksuminen tapahtuu sellaisten sivustojen kanssa, jotka pyrkivät olemaan esittäjien ulkopuolella tai joilla on laaja kansainvälinen yleisö. Tällä hetkellä 3G-yhteyden keskimääräisen mobiilisivun lataaminen kestää noin 19 sekuntia ja melkein puolet maailmasta käyttää sitä edelleen - tätä on tietenkin parannettava ja AMP voi auttaa. Koska verkko nousee edelleen pääasiassa liikkuvana, tehokkuuden luominen täällä on sekä loogista että välttämätöntä. AMP voi tarjota suunnitelman tiedon saatavuuden parantamiseksi kehitysmaissa.

Elämmekö tulevaisuudessa?

Ei aivan, mutta edistymme päivittäin! Tänään verkosta löydetyt AMP-sivustot ovat edelleen pääasiassa mediaa, uutisia ja toimitussisältöä (toistaiseksi). Edut ovat ilmeisiä, koska AMP: lle rakennettu tarjoaa vakavan suorituskyvyn ja löydettävyyden parannuksen. Onko AMP ja sen toiveet kaiken verkon tulevaisuus? Ehkä. Ehkä ei. Yksi asia on varma, että oppiminen ja parhaat käytännöt, joita kehys auttaa luomaan, ovat ehdottomasti täällä. AMP rakentaa myös reaaliajassa uusimman ja parhaan mahdollisen verkon huipulle ottamalla käyttöön sen ominaisuudet. Sen kehitysyhteisö pyrkii jatkuvasti pysymään ajan tasalla uusista suuntauksista; vetämällä ennakoivasti verkon tulevat toiminnot käyttöön ja antamalla ne sinulle tänään.

Kehittämistunteja, jotka perustuvat AMP: n opiskeluun

Koska se liittyy kehittämiseen AMP: n sisällä, opimme joitain asioita matkan varrella, joiden mielestämme olisi arvokasta jakaa. Alla merkittäviä oivalluksia:

  1. AMP kieltää mukautetun JavaScriptin iframe-kehyksen ulkopuolella, pakottaen sinut luottamaan sen optimoidun koodikirjastoon. Tämä tehdään sen varmistamiseksi, että millään huonosti optimoidulla tai huonoilla koodeilla ei ole mahdollisuutta haitata käyttökokemusta. Huomaa, että monet, muuten hyvin rakennetut sivustot, voivat muuttua hitaiksi sisällyttämällä megatavuja mainonta- ja seurantakomentosarjoja. Sivustoosi sisältyvän JavaScript-koodin optimoinnin ja huolellisen tarkistuksen tärkeys on erittäin tärkeä takea AMP: ltä.
  2. AMP priorisoi käyttäjän näkyvän sisällön. Se tietää, mikä sisältö on sivun alapuolella, ja lykkää sen lataamista tai tekemistä tarpeen mukaan. AMP-sivujen kävijöiden ei tarvitse koskaan odottaa, koska kaikki ladattavat kuvat ja mainokset estävät pääsyä sivulle. Lisäksi, jos kävijä ei koskaan päätä vierittää alaspäin, mikään hänen mobiilitiedoistaan ​​ei mene hukkaan lataamalla sisältöä, jota ei koskaan nähdä.
  3. AMP on ratkaissut "jankin lataamisen". AMP-sivulla jokaisella elementillä on oltava deterministinen tunnettu korkeus, olipa kyse sitten mainoksesta, kuvasta tai videosta tai tekstin kappaleesta. Et koskaan koe sisällönsiirtoa näytöllä, kun elementit ovat latautuneet.
  4. Mainoksen tehokkuus: AMP asettaa uuden palkin mainosten integroimiseksi sivustoihin. Mainosten on toimittava oikein sivulla ja niiden on oltava optimaalisen käyttökokemuksen mukaisia. Hyvästi koko näytön ostot ja muu haitallista sisältöä, jota et halua sivulta. AMP varmistaa, että mainokset käyttäytyvät kuin hyvät kansalaiset.

Sulje

Tämä tilaisuus oli haastava, hauska ja antoi uutta näkökulmaa. Meille annettiin paljon joustavuutta, samalla kun meidän oli löydettävä epätavallisia tapoja noudattaa asetettuja ehtoja AMP: n puitteissa. Opimme paljon muutakin kuin mitä luulimme tietävän menossa AMP: stä ja paljastimme joitain aiempia väärinkäsityksiä. Työssä puitteissa saimme entistä vahvemman käsityksen siitä, mihin verkko menee ja kuinka se voi oppia AMP: ltä. Jos olet kiinnostunut seuraavan sivustosi rakentamisesta siihen, tarkista ehdottomasti avoimen lähdekoodin mallit, vapaasti käytettävät ja ladattavissa osoitteesta ampstart.com.