AMP’s Up the AMP Framework

Autor: Konstantin Sokhan, disainidirektor ja David Tapp, MetaLabi kliendipartner

TL; DR - rändasime AMP maailma ja õppisime asju

Võtsime Google'iga kokku, et keskenduda projektile AMP, ja saime unistuste lühiülevaate: looge kõike, mida teie süda soovib, niikaua kui see aitab AMP koodbaasis ja komponentide raamatukogus piiritleda. Jagades seda, mida me tee ajal ehitasime ja õppisime, võtame endale ka AMP-i tähtsuse, kes see on ja kuhu see läheb.

Mis on AMP?

AMP on avatud lähtekoodiga raamistik tõhusate ja suure jõudlusega veebilehtede loomiseks. Praegu kasutatakse seda peamiselt mobiilitoimetuse sisuks, kuid laieneb laialdasemaks kasutamiseks erinevatel turgudel (ja ekraanisuurustes).

Mõlema poole nägemine

Enne kui oma kogemuste põhjal kaugemale jõuame, tahaksime tunnistada, et oleme kriitikast hästi teadlikud ega kavatse teeselda, et AMP-d pole sellega kaasas; see teeb. Võtsime seda projekti lihtsalt kui võimalust oma tee üles joonistada ja oma muljeid teha. Meie kogemuse põhjal on mõned väärarusaamad, mida me tahaksime aidata selgeks teha.

AMP võimaldab saidi autoritel hostida oma saidi kõigi lehtede staatilist mobiilile optimeeritud versiooni, mille levitamisplatvormid on nagu Google'i vahemälu ja mida kasutajatele teenindatakse. Suur osa AMP kriitikast on suunatud Google'i lähenemisviisile teenindavate AMP lehtede vahemällu salvestamiseks google.com domeenist. Täpsustamist väärib see, et AMP lehe vahemälu ja AMP HTML-i mobiili optimeerimise raamistik on eraldi tooted. AMP HTML-iga loodud lehte saab privaatselt hostida mis tahes serveris. Võite kasutada kõiki raamistiku funktsioone ilma, et Google teie sisu hostiks.

Ärge laske nime lollitada

AMP tähistab kiirendatud mobiililehti. Kõige lihtsamalt öeldes blokeerib see enamiku elementidest, mis põhjustab veebi aeglasemat laadimist mobiiltelefonides, näiteks suures koguses JavaScripti, muude tootjate jälgimisskripte ja ülespuhutud CSS-i. See võimaldab sisu peaaegu kohe laadida. AMP oli mõeldud vahemällu salvestatud lehtede jaoks, kuid nüüd on see laienemas mobiilse veebi parandamiseks mõeldud laiemaks tööriistakomplektiks (kuna tänapäeval on enamik kasutajaid mobiilsed, võib mõne saidi laadimine võtta veel minuteid). Ehkki M tähistab mobiili, võib AMP aidata mis tahes seadme või brauseritüübi laadimiskiiruse parandamist.

Lühike

Juulis tuli AMP projekti meeskond meie juurde, et suruda raamistiku võimaluste piire, tutvustada selle võimalusi ja aidata sisuloojatel mõista, kuidas nad saaksid seda paremini veebi ellu äratamiseks. Põhimõtteliselt anti meile vaba vabadus kasutada kõiki AMP pakutavaid tööriistu nende ühendamiseks ja rakendamiseks vastavalt vajadusele eesmärgiga luua täiesti uus kogemus, mis oli veel raamistikuga üles ehitatud.

Mida me ehitasime ja miks

Kuigi me pidime endiselt töötama rangete juhiste kohaselt, et tagada koodide kehtiv AMP, üritasime nendes määratletud piirides välja pakkuda kõige hullumeelsemad kontseptsioonid.

Pärast mõningast ajurünnakut jõudsime mõttele, et veebipõhised kunstigaleriid ja muuseumid on tavaliselt lõbusad, abstraktsed ega mängi tavapäraste võrgustatud veebipaigutuste järgimisel reegleid. Seda ideed silmas pidades lõime kunstkunstigalerii, mis tõestaks alust AMP-is võimaliku uuesti määratlemiseks. Ehitasime saidi, mis kasutas kõige paremini algatust ja ehitas selle alustele. Meie meeskonnad tuginesid AMP võimsusele, et tagada saidi uskumatult toimivus, tutvustades samal ajal raamistikku uusi funktsioone ja komponente, sealhulgas kohandatud parallaksi kogemusi, hover-olekuid ja palju muud. Meil oli isegi natuke nalja võimalusega, et AMP-s tehakse kaaluv VR-versioon. Proovige meie telefoni kontseptsiooni tõestust siin.

Kujundus kunstigalerii AMP saidile

Järgmisena mõtlesime veebis sagedamini kasutatavatele kogemustele, mis võiksid AMP võimalustest kasu saada. Lõpuks uurisime reisi broneerimise rakenduses, mis oli võimalik, võimaldades kasutajatel otsida sihtkohti, filtreerida tegevusi ja otsida asju dünaamiliselt; säilitades samal ajal kiiruse ja jõudluse, mida AMP üldiselt tuntakse. Me higistame selle üksikasjad rõõmuga - surudes AMP raamistikku mikroanimatsioonide ja isiksuse hittide abil nii kaugele kui võimalik.

Reiside broneerimise AMP saidi kujundus

Kes on AMP?

Tänapäeval on AMP suunatud liikvel olevatele inimestele, kes tegelevad suuresti toimetuse stiilisisu (uudised ja ajaveebid oma telefonides) ning e-kaubandusega. Kujutame ette tugevat omaksvõtmist nende saitidega, mis püüavad esineda väljaspool esinemisvõimalusi või millel on lai rahvusvaheline vaatajaskond. Praegu võtab 3G-ühenduse keskmise mobiilse veebisaidi laadimine umbes 19 sekundit ja peaaegu pool kogu maailmast töötab sellel endiselt - seda tuleb ilmselt täiustada ja AMP võib aidata. Kuna veeb on jätkuvalt valdavalt mobiilne, on siin tõhususe loomine nii loogiline kui ka hädavajalik. AMP võib olla potentsiaalne plaan arengumaade teabele juurdepääsu parandamiseks.

Kas me elame tulevikus?

Mitte päris, kuid teeme edusamme iga päev! Täna veebist leitavad AMP-saidid on endiselt peamiselt meediumid, uudised ja toimetuse sisu (praegu). Kasu on ilmne, kuna AMP-le ülesehitamine annab tõsise jõudluse ja avastatavuse tõuke. Kas AMP ja selle püüdlused on kogu veebi tulevik? Võib olla. Võibolla mitte. Üks on kindel, et õppetunnid ja parimad tavad, mida raamistik aitab luua, on siin kindlasti selleks, et jääda. AMP ehitab reaalajas ka veebis kõige uuemat ja paremat, kasutades selle funktsioone. Selle arenduskogukond püüab pidevalt olla kursis uute trendidega; tõmmates ennetavalt sisse veebi eelseisvat funktsionaalsust ja andke see teile täna.

Arengutunnid põhinevad meie õppetunnil AMP

Kuna see on seotud arendamisega AMP-s, õppisime selle käigus mõned asjad, mida arvasime väärtuslikuks jagada. Allpool tähelepanuväärsed teadmised:

  1. AMP keelab kohandatud JavaScripti väljaspool iframe'i, sundides teid lootma selle optimeeritud koodi raamatukogule. Selle eesmärk on tagada, et ühelgi halvasti optimeeritud või halva koodil pole võimalust kasutajakogemust takistada. Märkame, et paljud hästi ehitatud saidid võivad megabaidiste reklaami- ja jälgimisskriptide kaasamisel aeglaseks muutuda. Teie saidil oleva JavaScripti koodi optimeerimise ja hoolika kontrollimise olulisus on AMP-st väga oluline eemaldus.
  2. AMP seab prioriteediks kasutajale nähtava sisu. Ta teab, mis sisu on voldist allapoole, ja lükkab selle laadimise või renderdamise edasi kuni vajadusel. AMP-lehtede külastajad ei pea kunagi ootama, kuna kõik laaditavad pildid ja reklaamid blokeerivad nende juurdepääsu lehele. Lisaks, kui külastaja ei otsusta kunagi allapoole kerida, ei raisa ükski tema mobiilsetest andmetest sisu, mida kunagi ei näe.
  3. AMP on lahendanud "jank'i laadimise". AMP lehel peab igal elemendil olema deterministlik teadaolev kõrgus, olgu see siis reklaam, pilt või video või tekstiosa. Te ei koge kunagi sisu ekraanil nihutamist, kuna elemendid on üle laaditud.
  4. Reklaami toimivus: AMP seab uue riba reklaamide integreerimiseks saitidele. Reklaamid peavad lehel käituma õigesti ja vastama optimaalsele kasutajakogemusele. Hüvasti täisekraanilt ülevõtmised ja muu ebameeldiv sisu, mida te lehelt ei soovi. AMP tagab, et reklaamid käituvad nagu head kodanikud.

Lõpus

See võimalus oli väljakutsuv, lõbus ja pakkus värsket vaatenurka. Meile anti palju paindlikkust, kuid samal ajal pidid nad leidma ebatraditsioonilisi viise AMP raamistiku tingimuste järgimiseks. Õppisime AMP-st palju rohkem kui see, mida arvasime teadvat, ja avastasime mõned varasemad väärarusaamad. Selle raames töötades jõudsime veelgi tugevama arusaamiseni, kuhu veeb läheb ja kuidas seda saab AMP-st õppida. Kui soovite oma järgmise saidi sinna üles ehitada, kontrollige kindlasti meie malle, mis on täiesti avatud lähtekoodiga, tasuta kasutamiseks ja allalaaditavad saidilt ampstart.com.