Ghidul începătorului pentru paginile mobile accelerate (AMP)

Pagini Mobile accelerată este inițiativa Google care intenționează să rezolve cea mai mare problemă a webului mobil - viteză. Experiențele extraordinare ale utilizatorilor pe care le proiectăm cu mare grijă, sunt dureros de încetinite pe telefonul mobil.

Slăbiciunea nu este doar o problemă UX, ci și o problemă reduce ratele de conversie, și dăunează accesibilității prin excluderea utilizatorilor cu legături mai slabe la internet. AMP este un efort de echipă lansat cu scopul de a permite editorilor creați un conținut optimizat mobil o dată și încărcați-o instantaneu peste tot.

De la lansare, mulți editori precum BBC, The Economist, Guardian News și Financial Times au implementat inițiativa, astfel încât până acum putem presupune că AMP este o inovație care merită luată în considerare pentru oricine dorește să rămână competitiv pe mobil web.

AMP în acțiune

Înainte de a scufunda în detaliu, iată AMP demo, Asa ca poti vezi-l în acțiune. Demo-ul poate fi accesat pe acest link.

Pentru a vedea AMP în acțiune, trebuie să faceți două lucruri:

Vizualizați demonstrația fie pe un dispozitiv mobil, fie pe un simulator mobil, de ex. Chrome DevTools "Mobile Device Simulator.
Rulați interogarea de căutare în bara de căutare. Deoarece Google AMP lucrează în prezent în principal cu site-ul de știri, cea mai bună alegere este o poveste de știri.

În imaginea de mai jos, puteți vedea ce am primit când am folosit termenul de căutare rio olimpici.

După cum puteți vedea, paginile AMP apar ca Carti Google Rich, A carusel de imagine optimizat pe mobil, lansat de Google în mai 2016.

Observați cum Google diferențiază paginile AMP de alte pagini optimizate pentru dispozitive mobile utilizând 2 etichete diferite: AMP și mobile-friendly. De asemenea, merită să faceți clic pe unele dintre rezultate pentru a vedea cum arată o pagină Web AMP și cât de repede se execută pe mobil.

Fundal tehnic

AMP este a standard web bazat pe tehnologiile web existente și concentrându-se asupra conținutului static. Are 3 părți diferite:

AMP HTML: modificat HTML cu (1) restricția anumitor caracteristici obișnuite HTML / CSS și (2) introducerea de etichete personalizate noi (Componente)
AMP JS: impune cele mai bune practici pentru a reduce timpul de încărcare a paginii
AMP CDN: o memorie cache cu un sistem de validare încorporat, care optimizează în continuare site-ul dvs.

Dacă doriți să aflați mai multe despre fundalul tehnic al paginilor AMP, consultați videoclipul de mai jos, în care Paul Bakaus de la Google oferă discuții introductive pe AMP.

Dacă doriți să vă aruncați cu capul în jos, merită, de asemenea, să înțelegeți ce tehnici de optimizare AMP utilizează pentru a accelera performanța pe mobil. În videoclipul de mai jos, Malte Ubl, conducătorul AMP Engineering explică anatomia AMP detaliat.

AMP HTML

Paginile mobile accelerate sunt pagini HTML normale care au nevoie urmați un set de reguli pentru a face paginile să se încarce mai repede și să se facă cu performanțe fiabile.

Să aruncăm o privire la cele mai importante lucruri pe care trebuie să le cunoașteți. De asemenea, puteți să vă uitați la specificația completă AMP HTML.

Decideți dacă doriți o pagină separată AMP

Pentru aceeași pagină cu conținut static, puteți avea 2 versiuni separate - unul pentru AMP și unul pentru versiunea non-AMP. De asemenea, puteți alege să aveți o singură versiune - pagina AMP și folosiți-o peste tot. Cu privire la suport pentru browser, Pagina AMP Github susține:

Dacă sunteți în continuare îngrijorat de asistența browserului, consultați postarea lui Paul Irish pe Google despre Stackoverflow.

În cazul în care doriți să aveți două pagini (AMP și non-AMP), trebuie să faceți legătura la fiecare dintre ele pentru a informează motoarele de căutare cu privire la existența Două versiuni.

Adăugați următorul cod la secțiune a paginii non-AMP:

Adăugați, de asemenea, următoarea linie la secțiune a paginii AMP:

Dacă aveți doar o singură pagină AMP, tot trebuie să faceți o legătura de la sine în felul următor:

Începând cu Boilerplate

Proiectul AMP oferă diferite pornind boilerele puteți utiliza pentru a începe. Aruncați o privire la cea mai simplă boilerplate din AMP HTML de mai jos:

          Salut Lume!

Se poate vedea că boilerplate-ul leagă pagina obișnuită HTML folosind etichetă. > eticheta adaugă AMP JS bibliotecă.

    
Poți avea doar unu foaie de stil încorporată, și există, de asemenea, multe reguli de stil nepermis, de exemplu, nu puteți utiliza !important calificativ, @import regulă și pseudo-clase.
 Nu uitați să verificați restricțiile foilor de stil înainte de a începe să scrieți CSS pentru paginile AMP.
 Există un alt lucru important de știut despre regulile stilului AMP: tu nu puteți utiliza niciun aspect pe care îl doriți - deoarece este unul dintre principiile AMP pentru a permite browserului să calcula spațiul fiecărui element pe pagină în avans.
 Aruncati o privire asupra layout-urilor acceptate si non-suportate.
 AMP JS
 Documentele AMP pot include nici un cod JavaScript scris de autor, nici orice JavaScript de la terți, cu toate acestea, acest lucru nu înseamnă că paginile mobile accelerate nu utilizează JavaScript deloc. AMP biblioteca JavaScript (AMP runtime) este responsabil pentru încărcarea și redarea paginilor AMP rapid de către impunerea celor mai bune practici de performanță.
 Componente AMP
 Componentele AMP sunt definită de durata de execuție a AMP. Acestea sunt cele menționate mai sus Tag-uri HTML specifice AMP trebuie să utilizați în loc de omologul lor obișnuit, cum ar fi  in loc de  etichetă.
 Fiecare componentă AMP conține a resursă externă specială (o imagine, un videoclip, un embed, etc.). Resursele externe sunt susceptibile de a încetini site-urile web. Scopul principal al acestei soluții este de a gestionați încărcarea resurselor externe într-un mod rezonabil, prin rularea lor în interiorul nisipurilor.
 AMP vă oferă 2 tipuri de componente:
 Componente încorporate: ele sunt întotdeauna disponibile în fiecare document AMP, sunt construit chiar în timpul runtimei AMP. În prezent, există cinci dintre ele:  pentru afișarea anunțurilor
  pentru imagini, este folosit în loc de  etichetă
  pentru pixeli de urmărire (utilizați pentru numărarea afișărilor de pagină)
  pentru încorporarea directă a fișierelor video HTML5, înlocuiește  etichetă
  pentru elementele încorporate (poate fi folosit în loc de  in anumite cazuri)
 
 Componente extinsă: Componente suplimentare, trebuie să le includă în mod explicit în documentul AMP. Există multe tipuri utile, cum ar fi  și , consultați lista completă. Mulți dintre ei pot fi obișnuiți încorporați conținut de la serviciile terților, cum ar fi de la Twitter sau Instagram.
 
Rețineți că toate resursele încărcate extern, cum ar fi  și  trebuie să aibă o cunoaștere  și  atribut pentru a permite browserului să calculați aspectul în avans.
 AMP CDN
  AMP CDN este în principiu o memorie cache, numită Google AMP Cache. Realizează documente valide AMP, cache-uri și le încarcă. AMP CDN are, de asemenea, sistem integrat de validare.
 Merita testarea paginilor dvs. AMP înainte de a le permite să meargă online pentru a putea fi în siguranță treceți validatorul. Puteți face acest lucru în multe moduri diferite.
  IMAGE: Proiectul AMP
Este bine de știut că AMN CDN utilizează protocolul HTTP / 2 pentru a obține cea mai bună performanță posibilă.
 Instrumente AMP
 Există câteva instrumente excelente care vă pot ajuta să implementați pagini mobile accelerată, să aruncăm o privire asupra unora dintre ele.
 Google oferă webmasterilor o metodă utilă Instrumentul de raportare a statutului AMP care arată numărul de pagini AMP indexate cu succes și erorile legate de AMP.
 Lullabot lui AMP PHP Library vă permite să vă convertiți paginile HTML în AMP HTML și raportează și conformitatea oricărui document HTML cu standardele AMP.
 Dacă doriți să utilizați AMP pe site-ul dvs. WordPress, citiți tutorialul lui Yoast despre cum să configurați WordPress pentru AMP și cum funcționează AMP cu pluginul Yoast SEO.
 De asemenea, puteți să verificați mașina lui Automattic Plugin AMP care vă permite să activați paginile mobile accelerate pe site-ul dvs. WordPress.
  IMAGE: WordPress.org
Considerații suplimentare
 Dacă nu sunteți încă convins, aruncați o privire la videoclipul despre test de viteză rapidă de mai jos.
 
 Jonathan Abrams, fondatorul site-ului Nuzzel, face chiar mai multe pretenții, deoarece afirmă că chiar și site-urile optimizate pentru mobil, precum New York Times, se încarcă semnificativ mai repede - în loc să dureze trei secunde pentru a încărca pagina medie, se încarcă o pagină mai puțin de o jumătate de secundă când sunt activate paginile mobile accelerate Google.
 Puteți citi, de asemenea, un articol interesant despre Verge despre competiția dintre Google AMP și articolele Instant ale Facebook. Dacă sunteți încă în căutarea unui răspuns pentru "ce este captura?", Verificați postul lui Yoast, care menționează temerile că AMP ne aduce înapoi la o perioadă de internet înainte de anul 2000 și ne întreabă dacă este într-adevăr un standard deschis.
 .