AMP Up Up Framework AMP

De Konstantin Sokhan, Director de proiectare și David Tapp, Partener client, MetaLab

TL; DR - Am călătorit în lumea AMP și am învățat câteva lucruri

Am făcut echipă cu Google pentru a ne concentra pe Proiectul AMP și am primit un scurt vis: creați orice doriți inima dvs., atât timp cât ajută la împingerea limitelor a ceea ce este posibil în codul de bază și biblioteca de componente AMP. Pe măsură ce împărtășim ceea ce am construit și am învățat pe parcurs, vom lua în considerare și importanța AMP, pentru cine se adresează și unde se întâmplă.

Ce este AMP?

AMP este un cadru open-source pentru construirea de pagini web performante și performante. În prezent, este utilizat în principal pentru conținut editorial pe mobil, dar este din ce în ce mai mare pentru utilizarea mai largă pe diferite piețe (și dimensiuni de ecran).

Văzând ambele părți

Înainte de a merge mai departe asupra propriei noastre experiențe, am dori să recunoaștem că suntem bine conștienți de critici și nu vom pretinde că AMP nu vine cu nimic; o face. Pur și simplu am luat acest proiect ca o ocazie de a ne diagrama propriul drum și de a ne face propriile impresii. Din experiența noastră, există unele concepții greșite pe care am dori să le ajutăm să clarificăm.

AMP permite autorilor site-ului să găzduiască o versiune statică optimizată pentru mobil a oricăreia dintre paginile site-urilor lor, care oferă platforme de distribuție precum Google cache și care le servesc utilizatorilor. O mare parte din criticile AMP vizează abordarea Google de a cacheaza paginile AMP care se difuzează din domeniul google.com. Ceea ce merită clarificat este faptul că memoria cache a paginii AMP și cadrul de optimizare mobilă AMP HTML sunt produse separate. O pagină construită folosind AMP HTML poate fi găzduită în mod privat pe orice server, puteți profita de toate caracteristicile cadrului fără a avea ca gazdă conținutul dvs. Google.

Nu lăsați numele să vă înnebunească

AMP reprezintă „Pagini accelerate pentru mobil”. În termeni simpli, blochează majoritatea elementelor care determină încărcarea web mai lent pe mobil, cum ar fi cantități mari de JavaScript, scripturi de urmărire ale terților și CSS balonate. Permite încărcarea conținutului aproape instantaneu. AMP a fost conceput pentru paginile din cache, dar acum se dezvoltă într-un set de instrumente mai larg pentru a repara web-ul mobil (deoarece majoritatea utilizatorilor sunt mobili în prezent, unele încărcări ale site-ului încă pot dura minute). Deși M reprezintă pentru Mobile, AMP poate ajuta la îmbunătățirea vitezei de încărcare pe orice dispozitiv sau tip de browser.

Scurta

În iulie, echipa AMP Project a venit la noi pentru a impinge limitele a ceea ce este posibil în cadru, pentru a-și arăta capabilitățile și pentru a ajuta creatorii de conținut să realizeze cum ar putea să-l folosească mai bine pentru a aduce viața la viață. În mod esențial, ni s-a oferit o domnie liberă pentru a folosi toate instrumentele furnizate de AMP pentru a le combina și implementa așa cum am considerat că se potrivesc cu scopul de a crea o experiență cu totul nouă, care încă nu trebuia construită cu cadrul.

Ce am construit și de ce

În timp ce tot trebuia să lucrăm în conformitate cu ghiduri stricte pentru a ne asigura că codul era AMP valid, ne-am propus să găsim cele mai nebunești concepte posibile în limitele definite.

După câteva idei de idei, am pornit la ideea că galeriile de artă online și muzeele sunt în mod obișnuit distractive, abstracte și nu respectă regulile atunci când vine vorba de machete web convenționale gridded. Având această idee în minte, am creat o galerie de artă falsă, dovedind motive pentru redefinirea a ceea ce era posibil în AMP. Am construit un site care s-a folosit de cele mai bune inițiative și am construit pe bazele sale. Echipele noastre s-au bazat pe puterea AMP pentru a se asigura că site-ul a fost incredibil de performant, introducând în același timp funcții și componente noi în cadrul cadrelor, inclusiv experiențe personalizate de paralax, stări pasive și multe altele. Ne-am distrat chiar și cu posibilitatea unei versiuni VR immersive realizate în AMP pentru a fi luate în considerare. Încercați aici dovada noastră de concept în telefon.

Proiectare pentru site-ul AMP Gallery Gallery

În continuare, ne-am gândit la experiențe mai des utilizate pe web care ar putea beneficia de capacitățile AMP. Am sfârșit explorând ce era posibil într-o aplicație de rezervare a călătoriilor, permițând utilizatorilor să caute destinații, să filtreze după activități și să găsească lucrurile în mod dinamic; toate menținând AMP de viteză și performanță este cunoscut de obicei. Transpirăm cu plăcere detaliile despre acesta - împingând cadrul AMP pe cât am putut cu micro-animații și hituri de personalitate.

Proiectare pentru site-ul AMP pentru rezervări de călătorie

Pentru cine este AMP?

Astăzi, AMP este orientat către oameni din mers, care se ocupă cu conținut de stil editorial (știri și bloguri pe telefoanele lor) și comerț electronic. Acolo unde ne imaginăm că va avea loc adoptarea puternică, este vorba de site-uri care se străduiesc să fie dincolo de performanțe sau să aibă o gamă largă de audiențe internaționale. În prezent, pagina web mobilă medie pe o conexiune 3G durează aproximativ 19 secunde și aproape jumătate din lume continuă să funcționeze - aceasta evident trebuie îmbunătățită și AMP poate fi de ajutor. Deoarece web continuă să se aplece preponderent pe mobil, crearea eficienței este atât logică, cât și esențială. AMP poate furniza un model pentru îmbunătățirea accesului la informații în țările în curs de dezvoltare.

Trăim în viitor?

Nu chiar, dar progresând zilnic! Site-urile AMP găsite astăzi online sunt încă în principal conținut media, știri și redacție (deocamdată). Avantajele sunt evidente, întrucât construirea pe AMP oferă o performanță serioasă și o îmbunătățire a descoperirii. AMP și aspirațiile sale sunt viitorul întregului web? Poate. Poate nu. Un lucru este sigur, învățăturile și cele mai bune practici pe care cadrele ajută să le stabilească sunt cu siguranță aici pentru a rămâne. AMP creează, de asemenea, cele mai recente și cele mai importante pagini de pe web, în ​​timp real, cu lansarea funcțiilor sale. Comunitatea sa de dezvoltare se străduiește constant să fie la curent cu noile tendințe; trăgând proactiv în viitoarea funcționalitate a web-ului și oferindu-vă astăzi.

Lecții de dezvoltare bazate pe învățăturile noastre de la AMP

În ceea ce privește dezvoltarea în cadrul AMP, am învățat câteva lucruri pe parcursul în care am considerat că ar fi valoroase de împărtășit. Informații notabile mai jos:

  1. AMP interzice JavaScript personalizat în afara unui iframe, forțându-vă să vă bazați pe biblioteca sa de cod optimizat. Acest lucru se face pentru a se asigura că niciun cod slab optimizat sau nefiresc nu are posibilitatea de a împiedica experiența utilizatorului. Observăm că multe site-uri, altfel bine-construite, pot deveni încetinite de la includerea megabitelor de scripturi de publicitate și de urmărire. Importanța optimizării și verificării minuțioase a oricărui cod JavaScript inclus pe site-ul dvs. este foarte importantă pentru AMP.
  2. AMP prioritizează conținutul care este vizibil pentru utilizator. Știe ce conținut se află sub fald și defilează încărcarea sau redarea acestuia până când este necesar. Vizitatorii paginilor AMP nu vor trebui să aștepte niciodată, deoarece toate imaginile de încărcare și reclame le blochează accesul la pagină. În plus, dacă un vizitator nu decide niciodată să deruleze în jos, niciuna din datele sale mobile nu este irosită încărcând conținut care nu va fi niciodată văzut.
  3. AMP a rezolvat „încărcarea jank-ului”. Pe o pagină AMP, fiecare element trebuie să aibă o înălțime deterministă cunoscută, indiferent dacă este un anunț, o imagine sau un videoclip sau un paragraf de text. Nu veți experimenta niciodată schimbarea conținutului pe ecran, deoarece elementele de mai sus se încărcă.
  4. Performanța anunțurilor: AMP stabilește noua bară pentru integrarea anunțurilor pe site-uri. Anunțurile trebuie să se comporte corect pe pagină și trebuie să respecte experiența optimă a utilizatorului. Adio preluări pe ecran complet și alt conținut neobișnuit pe care nu-l doriți pe pagină. AMP aplică faptul că reclamele se comportă ca niște cetățeni buni.

În încheiere

Această oportunitate a fost provocatoare, distractivă și a oferit o perspectivă nouă. Ni s-a oferit multă flexibilitate, în același timp trebuind să găsim modalități neconvenționale de a respecta condițiile stabilite în cadrul AMP. Am învățat mult mai mult decât ceea ce credeam că știm că vom face despre AMP și am descoperit unele concepții greșite anterioare. Lucrând în cadrul cadrului, ne-am dat cu o înțelegere și mai puternică de unde merge webul și cum poate învăța de la AMP. Dacă sunteți interesat să vă construiți următorul site în cadrul acestuia, asigurați-vă că verificați șabloanele noastre, care sunt complet open-source, libere de utilizat și descărcate la ampstart.com.