Cele mai recente 9 actualizări AMP care îmbunătățesc experiența utilizatorului dincolo de viteze mai mari de încărcare a paginii

De când Google a anunțat AMP în 2015 pentru a crește viteza de încărcare a paginilor și pentru a spori experiența generală a utilizatorului mobil - cadrul open-source a continuat să crească în popularitate.

Nu numai că, cadrul s-a actualizat semnificativ pentru a suporta o gamă largă de elemente de pe pagină, caracteristici și opțiuni mai bune și interfețe îmbunătățite - toate pentru a îmbunătăți în continuare experiența utilizatorului.

Iată câteva dintre cele mai noi actualizări AMP.

9 actualizări AMP pe care este posibil să nu le cunoașteți încă

1. Schimburi semnate

Când a apărut AMP, Google a făcut compromisuri pentru a furniza conținut web de încărcare instantanee care păstrează confidențialitatea. Unul a fost că adresele URL afișate în barele de adrese au început cu „google.com/amp” mai degrabă decât cu domeniul editorului:

Aceasta a fost una dintre cele mai proeminente critici AMP. Companiile nu doreau ca Google să afișeze adresa URL AMP în locul domeniului din care provine de fapt conținutul, deoarece numele de domenii sunt esențiale pentru branding și publicarea conținutului.

În aprilie 2019, Google a anunțat o soluție - o modalitate de a afișa adresa URL originală a conținutului, păstrând în același timp capacitățile de încărcare instantanee. Această soluție este schimburi semnate.

Google afirmă:

Un schimb semnat este un format de fișier, definit în specificațiile de ambalare web, care permite browserului să aibă încredere într-un document ca și cum ar aparține originii dvs. Acest lucru vă permite să utilizați cookie-uri de primă parte și stocare pentru a personaliza conținutul și a simplifica integrarea analitică.

Cel mai important, însă, schimburile semnate afișează adresa URL reală a editorului atunci când oamenii folosesc Căutarea Google și fac clic pe un link AMP, în loc de un link „http // google.com / amp”:

Aceasta este o mare problemă din două motive:

1. Numele de domeniu este o parte esențială a identității mărcii
2. Este mai ușor să obțineți analize AMP cu propria adresă URL

(Notă: Google face legături numai către schimburi semnate atunci când editorul, browserul și contextul de căutare îl acceptă. Asta înseamnă că va trebui să publicați atât versiunea de schimb semnată, cât și versiunea de schimb non-semnată a conținutului dvs.)

2. Redare pe partea de server (SSR)

Redarea pe partea de server (SSR) este o tehnică pe care o puteți aplica paginilor AMP pentru a le face să se încarce și mai rapid - cu până la 50% mai rapid, de fapt.

SSR funcționează prin îmbunătățirea timpilor de vopsire pentru prima dată (FCP) pentru cadrele care redau pagina partea client. Dezavantajul randării pe partea de client este că tot JavaScript necesar pentru redarea paginii trebuie descărcat mai întâi, ceea ce întârzie timpul de încărcare a conținutului paginii și ar putea crește rata de respingere.

Ca soluție, AMP SSR elimină codul AMP boilerplate și redă aspectul paginii pe server.

(Notă: Codul AMP boilerplate există pentru a preveni salturile de conținut în timpul încărcării paginii, ascunzând conținutul până când cadrul AMP a fost descărcat și aspectul paginii este stabilit. blocat până când JavaScript este descărcat.)

Prin eliminarea codului plăcii centrale, AMP SSR are ca rezultat FCP cu 50% mai rapid.

Optimizările AMP SSR încalcă regulile specificațiilor AMP, ceea ce face ca documentul să fie invalid. Cu toate acestea, atâta timp cât este indicat cu un semnal în timpul configurării, validatorul AMP va trata în continuare AMR SSR ca AMP valid.

În prezent, există două instrumente disponibile pentru AMP SSR:

1. AMP Optimizer - O bibliotecă NodeJs pentru producerea AMP optimizat
2. AMP Packager - Instrument de linie de comandă Ago, utilizabil cu servirea schimburilor semnate

3. Mascare de intrare

Completarea formularelor online poate fi atât de greoaie încât îi împiedică pe utilizatori să facă acest lucru. Acest lucru este mai adevărat pe dispozitivele mobile, unde ecranul este mai mic și navigarea este mai dificilă. Dar, după cum știți, formularele sunt vitale pentru colectarea clienților potențiali și finalizarea vânzărilor.

Pentru a face procesul de completare a formularului mai ușor și mai eficient în timp, mascare de intrare activată AMP. Această caracteristică permite dezvoltatorilor să adauge formatare precum spații și caractere interstițiale, ceea ce este deosebit de convenabil atunci când utilizatorii completează date, detalii de plată, numere de telefon etc.:

Având din ce în ce mai mulți oameni care își transmit informațiile online în lumea digitală de astăzi, un sistem mai ușor și mai rapid poate face diferența.

4. Optimizare video

Au fost introduse mai multe îmbunătățiri video pentru a crește numeroasele beneficii ale AMP.

Andocare
Videoclipurile de pe paginile web mobile deseori împiedică vizualizarea utilizatorului dacă optimizarea nu este implementată corect. Acest lucru ar putea duce cu ușurință la o experiență slabă a utilizatorului și îi va împiedica să vizioneze orice conținut viitor.

Acest nou atribut de andocare minimizează videoclipul care este vizionat în prezent atunci când utilizatorii derulează pagina în jos, permițându-le să vizualizeze conținut și videoclipuri simultan, fără nicio obstacol:

De asemenea, puteți personaliza unde și cum se andocă videoclipul pentru a găsi cel mai bun mod de a vă prezenta videoclipul utilizatorului.

Video player
O altă actualizare nouă este <amp-video-iframe>, care vă permite să instalați un player video personalizat, care include toate caracteristicile interfeței video AMP pe care le-ați putea dori (redare automată, andocare etc.)

Anunțuri video
Reclamele video pot fi, de asemenea, integrate și optimizate în AMP - din orice rețea publicitară video care acceptă IMA SDK, astfel încât să puteți urmări atât reclame, cât și venituri.

5. Liste optimizate

AMP a adăugat recent două componente noi pentru a optimiza listele de pe paginile web:

Redimensionare
<amp-list> vă permite să specificați când doriți ca containerul listei să fie redimensionat la interacțiunea utilizatorului, pentru a se potrivi mai bine diferitelor tipuri de conținut (de exemplu, atunci când <amp-list> conține un <amp-accordion> pe care îl atinge un utilizator ).

Defilare infinită
Defilarea infinită este acum disponibilă, astfel încât atunci când utilizatorii ajung la sfârșitul unei liste de articole (rezultate de căutare, carduri de produs etc.), lista este completată automat cu mai multe articole:

Aceasta oferă utilizatorilor acces fără probleme la mai mult conținut dintr-o singură pagină în loc să fie nevoie să facă clic pe butonul „următor” și să acceseze o altă pagină de listă.

6. Integrarea terților

Cookie-urile și colectarea datelor sunt esențiale pentru ca mărcile să înregistreze informații despre utilizatori. Cu toate acestea, cu GDPR, regulile privind consimțământul și confidențialitatea datelor au devenit mai stricte și reglementate pe toate site-urile. Acest lucru a făcut ca mulți editori să se bazeze pe platforme de gestionare a consimțământului (CMP) de la terți pentru a colecta date pe GDPR.

Având în vedere acest lucru, AMP a lansat <amp-consent>, astfel încât CMP-urile să poată integra cu ușurință AMP. Adică, site-urile web AMP pot continua să utilizeze CMP-uri pentru a colecta și gestiona datele utilizatorilor fără probleme de compatibilitate. De asemenea, pot integra interfața de utilizare a consimțământului datelor și pot solicita utilizatorilor înainte de a-și furniza informațiile.

7. Mod Lightbox

Vizualizarea imaginilor printr-o casetă lightbox - extinderea unui element pentru a umple ecranul până când acesta este închis din nou de către utilizator este din ce în ce mai frecventă. Cu toate acestea, poate fi dificil pentru dezvoltatori să realizeze o tranziție lină în modul lightbox, deoarece implică interpolare între două imagini de poziții și dimensiuni diferite.

Acest lucru a condus la grupul de lucru AMP UI pentru optimizarea tranzițiilor lightbox și îmbunătățirea vizibilității imaginii:

Acum, <amp-lightbox-gallery> oferă agenților de publicitate posibilitatea de a experimenta diferite dimensiuni pentru site-ul lor web și de a optimiza modul în care doresc ca utilizatorii să își vadă imaginile.

8. Disponibilitatea JavaScript personalizat

Una dintre cele mai noi actualizări Google AMP este disponibilitatea <amp-script> - oferind opțiunea de a rula JavaScript într-un fir de lucru separat, astfel încât agenții de publicitate să poată adăuga JavaScript personalizat la pagina AMP, păstrând în același timp viteza de încărcare rapidă.

Noul <amp-script> vă permite să acoperiți cazurile de utilizare care nu erau posibile cu componentele AMP existente anterior. De asemenea, vă permite să partajați codul între paginile dvs. AMP și non-AMP și să utilizați un cadru JavaScript.

Câteva exemple create de echipa AMP pentru <amp-script> includ:

• Todo MVC folosind Vue
• Un verificator de parole
• Vizualizarea datelor într-un articol folosind D3.js
• Formulare cu mai multe pagini în care fiecare secțiune are nevoie de validare înainte de a trece la următoarea secțiune:

Cu toate acestea, pentru a păstra garanția de performanță a AMP, există câteva constrângeri:

• Salt de conținut - Pentru a evita săriturile de conținut neașteptate, <amp-script> necesită interacțiunea utilizatorului pentru a schimba conținutul paginii.
• Încărcarea paginii - Deoarece <amp-script> nu modifică conținutul paginii fără interacțiunea utilizatorului, nu modifică nici conținutul încărcării paginii.
• Mărimea scriptului - Scriptul utilizat într-un singur <amp-script> trebuie să fie mai mic de 150kB.
• Suport API - Nu toate API-urile sunt acceptate într-un Web Worker și unele metode și proprietăți DOM nu sunt încă implementate

(Notă: <amp-script> este compatibil cu cadrele pe care este posibil să le utilizați, cum ar fi React, Preact, Angular, Vue.js, jQuery și D3.js.)

9. Caseta de instrumente AMP

AMP Toolbox este o colecție de instrumente din linia de comandă și API-urile JS pentru a simplifica publicarea paginii AMP. Fiecare instrument din cutia de instrumente poate fi descărcat și utilizat individual:

AMP CLI
O interfață de linie de comandă disponibilă pentru majoritatea caracteristicilor incluse în AMP Toolbox, care poate fi instalată la nivel global prin NPM.

AMP Linter
Noul toolbox-linter vă verifică documentele AMP pentru greșeli obișnuite și cele mai bune practici.

Optimizator AMP
Partea server AMP Optimizer îmbunătățește performanța de redare a paginilor AMP prin implementarea celor mai bune practici de performanță AMP.

Adrese URL cache AMP
Este o idee bună să verificați dacă o pagină AMP funcționează pe toate cache-urile AMP și puteți utiliza componenta casetă de instrumente-cache-url pentru a face acest lucru, deoarece traduce o adresă URL de origine în formatul de adresă URL AMP Cache.

Lista cache AMP
Aceasta oferă o listă cu toate cache-urile AMP oficiale, care pot fi utile la actualizarea sau eliminarea rapidă a documentelor AMP dintr-o cache AMP.

AMP CORS
Multe componente AMP (cum ar fi lista de amperi sau starea de amplificare) profită de punctele finale la distanță prin utilizarea cererilor CORS. AMP CORS este un middleware de conectare / expres care va adăuga automat toate anteturile CORS cerute de paginile dvs. AMP.

Reguli de validare AMP
Aceasta este pur și simplu o bibliotecă JavaScript pentru interogarea regulilor de validare AMP.

Obțineți o demonstrație a paginii de destinație post-clic Instapage AMP

Deoarece AMP a devenit obișnuit în optimizarea mobilă, actualizări consecvente ca acestea sunt vitale și benefice pentru dezvoltatori, editori și agenți de publicitate. Cele mai noi actualizări de mai sus sunt perfecte pentru îmbunătățirea experienței utilizatorului și pentru a oferi mărcilor mai multe opțiuni de experimentare și testare pentru a îmbunătăți caracteristicile site-ului web și implicarea pe pagină.

Pentru experiențele post-clic AMP, obțineți o demonstrație Instapage AMP personalizată pentru a vedea cum puteți crea pagini cu încărcare rapidă în câteva minute, folosind un constructor prietenos cu designerul, un validator încorporat, analize avansate și multe altele.