Cum să utilizați amp-img și amp-video pentru a accelera site-ul dvs.

AMP, pe scurt, este o metodă de optimizare a site-urilor web pentru a fi mai rapidă și mai performantă.

AMP reprezintă "pagini mobile accelerată", iar în timp ce accentul pus este performanța pe dispozitive mobile, câștigurile de viteză pe care le poate aduce sunt la fel de utile pentru dispozitivele care nu sunt mobile. AMP conține o serie de metode de optimizare care oferă diferite tipuri de avantaje, dar puterea de a face site-urile mai rapide este, probabil, cea mai semnificativă pe site-urile cu imagini și video-grele.

Având în vedere că site-urile mai rapide fac ca vizitatorii să fie mai implicați, clasamentele potențial mai mari pentru motoarele de căutare (și, prin urmare, o expunere mai mare), merită cu siguranță să te gândești la AMP atunci când creezi următoarea vitrină bazată pe web a muncii tale.

AMP este un proiect open source cu Google în spatele ei și este în curs de dezvoltare de la sfârșitul lunii septembrie 2015, versiunile AMP ale site-urilor care apar în rezultatele căutării Google începând cu data de 24 februarie a acestui an. Am acoperit AMP de la lansarea publică la începutul acestui an, deci este o idee minunată să citiți despre "Proiectul AMP: va face site-urile dvs. mai rapide" dacă doriți să faceți ceva înainte de a merge mai departe.

În acest articol veți găsi o mulțime de informații cu privire la valoarea totală a colaborării cu AMP, dar vom arăta puțin mai direct în cele două aspecte cele mai relevante pentru a lucra cu imagini și video: personalizarea AMP  și element.

Ce sunt  și ?

Când creați o pagină în conformitate cu cerințele AMP, veți utiliza o serie de elemente personalizate în locul anumitor elemente HTML standard pe care s-ar putea să le utilizați.

• În loc de a folosi un regulat element pe care îl veți folosi
• În loc să folosești a  element pe care îl veți folosi

Când utilizați aceste elemente personalizate, veți beneficia automat de unele beneficii inerente AMP. Să ne uităm la ce sunt și de ce merită atenția dumneavoastră.

De ce folosiți și ?

Știți deja că AMP ar trebui să vă ajute să faceți site-urile dvs. mai rapide, dar ce anume face în mod special și elemente trebuie să ofere? Beneficiile cele mai pertinente sunt după cum urmează.

Lazy Loading

În mod implicit, dacă aveți o pagină cu mai multe imagini pe ea, fiecare imagine trebuie încărcată într-un singur clic. Acest lucru poate foarte ușor să trageți timpul de încărcare general al site-ului dvs. pe o perioadă destul de lungă. Cu cât este mai mare timpul de încărcare inițială, cu atât este mai probabil ca vizitatorii să renunțe la site-ul dvs. și cu atât mai rău vă puteți face în motoarele de căutare.

Cu toate acestea, cu o tehnică numită "Lazy Loading", puteți avea doar primele imagini încărcate cu restul pentru a veni mai târziu. Destul de conținut este încărcat pentru ca vizitatorul să înceapă vizualizarea paginii, iar imaginile rămase sunt încărcate "leneș" atunci când vizitatorul se derulează în jos. Acest lucru poate îmbunătăți considerabil viteza de încărcare.

De exemplu, în testele pe care le-am desfășurat ca parte a articolului meu "Proiectul AMP: va face site-ul dvs. mai rapid", am constatat că într-o conexiune mobilă simulată au fost necesare 26 de secunde pentru a încărca o pagină cu cinci imagini de 500Kb. Cu o versiune AMP a aceluiași site, timpul de încărcare a fost redus la 16 secunde.

Fără reflow de aspect

Unul dintre avantajele majore ale utilizării AMP este evitarea problemei de a avea aspectul paginii "reflow" de mai multe ori. 

În timp ce o pagină este difuzată, elementele de suporturi descărcate nu au inițial înălțime sau lățime. Prin urmare, browser-ul pune lucrurile la fel ca și cum mass-media menționată nu era o parte a paginii. Atunci când o imagine termină încărcarea, aspectul trebuie recalculat, cu alte elemente mutate și redimensionate pentru a se potrivi în jurul imaginii - ceva numit reflowing. În cazul în care alte medii încă nu sunt încă încărcate, pagina trebuie să se reîmprosponeze din nou și din nou pentru fiecare element.

În special pe dispozitivele mobile, vizitatorii se pot confrunta cu frustrare dacă sunt deja angajați și ceea ce ei sunt focalizați dintr-o dată sare din vedere din cauza reflow-ului. Acest lucru poate duce cu ușurință la reducerea atenției vizitatorilor sau la abandonarea site-ului, mai ales dacă se întâmplă de mai multe ori.

Cu AMP, reflow nu apare niciodată. Acest lucru se datorează faptului că fiecare bucată de suport media are un loc de mărime corect dimensionat în aspectul de la cuvânt. Odată ce suportul este încărcat, acesta înlocuiește substituentul, nu este necesară o refulare.

Acces gratuit la CDN

Depozitarea și lărgimea de bandă pentru cantități mari de materiale media pot deveni scumpe destul de repede și alegerea unui gazdă care să poată livra rapid spectatorilor din întreaga lume nu este întotdeauna ușor.

Cu toate acestea, când utilizați AMP, obțineți acces gratuit la un CDN furnizat de Google. Atâta timp cât creați o pagină care trece validarea AMP, Google va memora automat documentele HTML, fișierele JS și imaginile în AMP CDN.

Relativ mâinile libere

Adevărul este că majoritatea lucrurilor pe care AMP le poate face pentru dvs. poate fi făcută și în alte moduri prin diverse scenarii și metodologii. Cu toate acestea, unul dintre avantajele uriașe ale utilizării AMP este că nu trebuie să cunoașteți în mod intim tehnicile care se referă la configurarea unor optimizări echivalente.

Prin utilizarea AMP puteți evita alegerea manuală, configurarea și menținerea mai multor scripturi și procese. În schimb, pur și simplu utilizați AMP așa cum este prescris și totul se întâmplă în fundal, fără a fi nevoie de implicarea mâinilor.

Noțiuni de bază cu AMP

Înainte de a intra în specificul utilizării și va trebui să știți cum să creați o pagină AMP cu codul de boilerplate necesar. Am abordat cum să facem acest lucru într-un alt tutorial, astfel încât să obțineți rostogolirea mingii pe care vă puteți îndrepta spre "Cum să faceți o pagină AMP de bază de la zero".

Nu este nevoie să faceți tutorialul complet, așa că, dacă lucrați până la sfârșitul secțiunii intitulată "Lucrul cu CSS inline", veți fi pregătiți să vă întoarceți și să reveniți aici.

Cum să utilizați

Pe o pagină AMP veți folosi pentru a încărca fiecare imagine. Hai să vedem cum să folosim codul corect și ce face fiecare din atributele asociate.

(Puteți găsi documentația completă pentru pe site-ul de referință al proiectului AMP).

Includeri esențiale

Atunci când adăugați un  element, există câteva atribute esențiale pe care va trebui să le includeți. Ca și în cazul unui obișnuit element va trebui să utilizați a src atribut pentru a specifica locația imaginii dvs. și Alt atribut pentru a seta o schimbare de text.

Este, de asemenea, a cerinţă în AMP pe care le specificați înălţime și lăţime de fiecare data. Acest lucru se datorează faptului că AMP utilizează atributele de înălțime și lățime pentru a seta dimensiunea destinațiilor de substituire înainte ca imaginea să fie încărcată.

Dacă sunteți preocupat de modul de a face ca imaginile să se comporte în mod sensibil, având în vedere stabilirea dimensiunilor fixe, nu vă faceți griji pentru că AMP are funcționalități incluse pentru a face față ajustărilor rapide, pe care le vom atinge mai târziu.

Un exemplu de bază al element cu aceste incluziuni esențiale este:

Utilizând srcset

elementul oferă o srcset atribut care poate fi folosit pentru a specifica imagini alternative care vor fi afișate fie la diferite lățimi, fie la densități de pixeli. 

Se folosește în același mod ca într-un obișnuit  element, astfel încât să puteți obține o rulare completă a atributului la: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset

De exemplu, pentru a furniza imagini diferite la diferite densități de pixeli pe care le puteți utiliza:

Sau pentru a încărca diferite imagini în funcție de lățimea ferestrei de vizualizare pe care le-ați putea folosi:

Notă, dacă utilizați valori care conțin w src atributul va fi ignorat în browserele care acceptă srcset.

Adăugarea atribuirii

Dacă trebuie să acordați credit pentru o imagine pe care o puteți utiliza atribuire, de exemplu:

Styling Placeholders

Dacă doriți să controlați aspectul substituenților care apar în pagina dvs. în timpul încărcării imaginilor, puteți face acest lucru cu ajutorul CSS vizat amp-img element, de exemplu:

amp-img fundal-culoare: gri; 

Cum să utilizați

Într-o pagină AMP veți folosi ori de câte ori doriți să încorporați un videoclip din sursa proprie. Dacă doriți să încorporați un videoclip al unui terț, cum ar fi de la YouTube sau prin intermediul unui iFrame, puteți utiliza în schimb alte elemente, cum ar fi sau .

(Din nou, puteți găsi documentația completă pentru pe site-ul de referință al proiectului AMP).

Includeri esențiale

Ca și în cazul , există câteva incluziuni esențiale când se utilizează . Din nou src este necesar să specificați locația videoclipului și ambele înălţime și lăţime sunt necesare, astfel încât AMP poate să stabilească corect pagina în timpul încărcării.

Un exemplu de bază cu atributele necesare ar putea fi:

Adăugarea unui Fallback

În cazul în care videoclipul nu se încarcă sau nu se afișează dintr-un motiv sau altul, este posibil să configurați o rezervă prin asamblarea a

 
 
Videoclipul nu a putut fi încărcat. Verificați dacă browserul dvs. acceptă videoclipul HTML5.
 
 

 
 
Videoclipul nu a putut fi încărcat. Verificați dacă browserul dvs. acceptă videoclipul HTML5.