AMP’s Up the AMP Framework

Di Konstantin Sokhan, Design Director e David Tapp, Partner Partner, MetaLab

TL; DR - Abbiamo viaggiato nel mondo di AMP e abbiamo imparato qualcosa

Abbiamo collaborato con Google per concentrarci su The AMP Project e abbiamo ricevuto un brief da sogno: crea tutto ciò che il tuo cuore desidera, purché aiuti a spingere i confini di ciò che è possibile nella base di codice e nella libreria dei componenti di AMP. Mentre condividiamo ciò che abbiamo costruito e imparato lungo la strada, daremo anche la nostra opinione sull'importanza di AMP, per chi è e dove sta andando.

Cos'è l'AMP?

AMP è un framework open source per la creazione di pagine Web efficienti e ad alte prestazioni. Attualmente è utilizzato principalmente per i contenuti editoriali sui dispositivi mobili, ma sta crescendo oltre questo per un utilizzo più ampio in diversi mercati (e dimensioni dello schermo).

Vedendo entrambi i lati

Prima di andare oltre la nostra esperienza, vorremmo riconoscere che siamo ben consapevoli delle critiche e non pretendiamo che AMP non ne venga fuori; lo fa. Abbiamo semplicemente preso questo progetto come un'opportunità per tracciare il nostro percorso e creare le nostre impressioni. Dalla nostra esperienza, ci sono alcune idee sbagliate che vorremmo aiutare a chiarire.

AMP consente agli autori del sito di ospitare una versione statica ottimizzata per dispositivi mobili di qualsiasi pagina del sito che piattaforme di distribuzione come Google cache e servono agli utenti. Gran parte delle critiche AMP è rivolta all'approccio di Google alla memorizzazione nella cache delle pagine AMP di pubblicazione dal dominio google.com. Ciò che vale la pena chiarire è che la cache della pagina AMP e il framework di ottimizzazione mobile AMP HTML sono prodotti separati. Una pagina creata utilizzando HTML AMP può essere ospitata privatamente su qualsiasi server, puoi sfruttare tutte le funzionalità del framework senza che Google possa ospitare i tuoi contenuti.

Non lasciarti ingannare dal nome

AMP sta per "Pagine mobili accelerate". In parole povere, blocca la maggior parte degli elementi che causano un caricamento più lento del Web sui dispositivi mobili, come grandi quantità di JavaScript, script di tracciamento di terze parti e CSS gonfiati. Permette di caricare i contenuti quasi istantaneamente. AMP è stato progettato per le pagine memorizzate nella cache, ma ora sta diventando un set di strumenti più ampio per riparare il Web mobile (poiché la maggior parte degli utenti è mobile oggi, alcuni carichi del sito possono ancora richiedere minuti). Sebbene M sia l'acronimo di Mobile, AMP può assolutamente aiutare a migliorare la velocità di caricamento su qualsiasi dispositivo o tipo di browser.

Il breve

A luglio, il team del progetto AMP è venuto da noi per spingere i limiti di ciò che è possibile nel framework, mostrare le sue capacità e aiutare i creatori di contenuti a capire come poterlo utilizzare meglio per dare vita al web. In sostanza, ci è stato dato il regno libero di utilizzare tutti gli strumenti forniti da AMP per combinarli e implementarli come ritenevamo opportuno con l'obiettivo di creare un'esperienza completamente nuova che non era ancora stata costruita con il framework.

Cosa abbiamo costruito e perché

Mentre dovevamo ancora lavorare secondo rigide linee guida per garantire che il codice fosse AMP valido, miravamo a trovare i concetti più folli possibili all'interno di quei confini definiti.

Dopo un po 'di brainstorming, siamo arrivati ​​all'idea che le gallerie d'arte e i musei online sono in genere divertenti, astratti e non rispettano le regole quando si tratta di seguire layout web convenzionali con griglia. Con questa idea in mente, abbiamo creato una galleria d'arte finta come prova per ridefinire ciò che era possibile in AMP. Abbiamo creato un sito che ha sfruttato al meglio l'iniziativa e costruito sulle sue basi. I nostri team si sono affidati alla potenza di AMP per garantire che il sito fosse incredibilmente performante, introducendo nel quadro nuove funzionalità e componenti tra cui esperienze di parallasse personalizzate, stati di passaggio del mouse e altro. Ci siamo persino divertiti un po 'con la possibilità di una versione VR immersiva fatta in AMP a titolo oneroso. Prova qui la nostra prova di concetto nel tuo telefono.

Design per il sito AMP della galleria d'arte

Successivamente, abbiamo pensato alle esperienze più comunemente utilizzate sul Web che potrebbero trarre vantaggio dalle capacità di AMP. Abbiamo finito per esplorare ciò che era possibile in un'app di prenotazione viaggi, consentendo agli utenti di cercare destinazioni, filtrare per attività e trovare le cose in modo dinamico; il tutto mantenendo la velocità e le prestazioni per cui AMP è comunemente noto. Sudiamo i dettagli su questo con gioia - spingendo il quadro AMP per quanto possibile con micro-animazioni e successi di personalità.

Design per il sito AMP di prenotazione viaggi

Per chi è AMP?

Oggi, AMP è orientata verso le persone in movimento che sono molto interessate ai contenuti in stile editoriale (notizie e blog sui loro telefoni) e al commercio elettronico. Dove immaginiamo che ci sarà una forte adozione è con siti che si sforzano di essere al di là delle prestazioni o che hanno una vasta gamma di pubblico internazionale. Attualmente, la pagina Web mobile media su una connessione 3G impiega circa 19 secondi per caricarsi e quasi la metà del mondo è ancora in esecuzione su di essa - questo ovviamente deve essere migliorato e AMP può aiutare. Dato che il Web continua a essere prevalentemente mobile, la creazione di efficienze qui è sia logica che essenziale. AMP può potenzialmente fornire un modello per migliorare l'accesso alle informazioni nei paesi in via di sviluppo.

Viviamo nel futuro?

Non del tutto, ma facendo progressi ogni giorno! I siti AMP trovati online oggi sono ancora principalmente contenuti multimediali, di notizie e editoriali (per ora). I vantaggi sono evidenti, poiché il fatto di essere costruito su AMP offre un notevole incremento di prestazioni e rilevabilità. AMP e le sue aspirazioni sono il futuro di tutto il web? Può essere. Forse no. Una cosa è certa, gli apprendimenti e le migliori pratiche che la struttura sta aiutando a stabilire sono sicuramente qui per rimanere. AMP sta inoltre costruendo in tempo reale le più recenti e le migliori sul web con il lancio delle sue funzionalità. La sua comunità di sviluppo si impegna costantemente per tenersi aggiornati con le nuove tendenze; attivamente attingendo alle funzionalità imminenti del Web e dandole oggi.

Lezioni di sviluppo basate sui nostri apprendimenti da AMP

Per quanto riguarda lo sviluppo all'interno di AMP, abbiamo imparato alcune cose lungo il modo in cui pensavamo sarebbe stato utile condividerle. Informazioni importanti di seguito:

  1. AMP vieta JavaScript personalizzato al di fuori di un iframe, costringendoti a fare affidamento sulla sua libreria di codice ottimizzato. Questo viene fatto per garantire che nessun codice mal ottimizzato o nefasto abbia l'opportunità di ostacolare l'esperienza dell'utente. Notiamo che molti siti, altrimenti ben costruiti, possono rallentare dall'inclusione di megabyte di script pubblicitari e di monitoraggio. L'importanza dell'ottimizzazione e dell'attenta verifica di qualsiasi codice JavaScript incluso nel tuo sito è un aspetto molto importante di AMP.
  2. AMP dà la priorità al contenuto che è visibile all'utente. Sa quale contenuto è sotto la piega e difende il caricamento o il rendering fino a quando non è necessario. I visitatori delle pagine AMP non dovranno mai aspettare poiché tutte le immagini e gli annunci in caricamento bloccano il loro accesso alla pagina. Inoltre, se un visitatore non decide mai di scorrere verso il basso, nessuno dei suoi dati mobili viene sprecato nel caricare contenuti che non verrebbero mai visti.
  3. AMP ha risolto il "caricamento jank". In una pagina AMP, ogni elemento deve avere un'altezza determinata deterministica, sia che si tratti di un annuncio, di un'immagine o di un video o di un paragrafo di testo. Non sperimenterai mai lo spostamento dei contenuti sullo schermo quando gli elementi sopra caricati.
  4. Rendimento dell'annuncio: AMP imposta la nuova barra per l'integrazione degli annunci sui siti. Gli annunci devono comportarsi correttamente nella pagina e devono essere conformi all'esperienza utente ottimale. Addio acquisizioni a schermo intero e altri contenuti odiosi che non vuoi sulla pagina. AMP impone che gli annunci si comportino come buoni cittadini.

In chiusura

Questa opportunità è stata stimolante, divertente e ha fornito alcune nuove prospettive. Ci è stata data molta flessibilità, mentre allo stesso tempo abbiamo dovuto trovare modi non convenzionali per aderire alle condizioni stabilite nel quadro AMP. Abbiamo imparato molto di più di quello che pensavamo di conoscere AMP e abbiamo scoperto alcune idee sbagliate precedenti. Lavorando all'interno del framework, siamo riusciti a capire ancora meglio dove sta andando il web e come può imparare da AMP. Se sei interessato a costruire il tuo prossimo sito al suo interno, assicurati di controllare i nostri modelli, che sono completamente open-source, gratuiti da usare e scaricabili da ampstart.com.