Guida per principianti alle pagine mobili accelerate (AMP)

Pagine mobili accelerate è l'iniziativa di Google che intende risolvere il più grande problema del web mobile - velocità. Le impressionanti esperienze dell'utente che stiamo progettando con grande cura, sono dolorosamente lente sui dispositivi mobili.

La lentezza non è solo un problema UX, ma anche riduce i tassi di conversione, e danneggia l'accessibilità escludendo utenti con connessioni Internet lente. AMP è uno sforzo di squadra lanciato con l'obiettivo di consentire agli editori di creare contenuti ottimizzati per dispositivi mobili una volta e caricarlo istantaneamente ovunque.

Dal lancio, molti editori come BBC, The Economist, Guardian News e Financial Times hanno implementato l'iniziativa, quindi ormai possiamo tranquillamente pensare che AMP sia un'innovazione che vale la pena considerare per tutti coloro che vogliono rimanere competitivi sul cellulare web.

AMP in azione

Prima di immergerti nei dettagli, ecco il Demo AMP, così puoi vederlo in azione. È possibile accedere alla demo su questo link.

Per vedere AMP in azione, devi fare due cose:

Visualizza la demo su un dispositivo mobile o su un simulatore mobile, ad es. Mobile Device Simulator di Chrome DevTools.
Esegui una query di ricerca sulla barra di ricerca. Poiché Google AMP attualmente funziona principalmente con il sito di notizie, la scelta migliore è una nuova notizia.

Nello screenshot qui sotto, puoi vedere cosa ho ottenuto quando ho usato il termine di ricerca rio olimpiadi.

Demo di pagine mobili accelerate su IPad

Come puoi vedere, le pagine AMP appaiono come Google Rich Cards, un carosello di immagini ottimizzato per dispositivi mobili, che Google ha rilasciato a maggio 2016.

Osserva in che modo Google differenzia le pagine AMP da altre pagine ottimizzate per dispositivi mobili utilizzando 2 diverse etichette: AMP e Mobile-friendly. Vale anche la pena fare clic su alcuni risultati per vedere come appare una pagina Web AMP e quanto velocemente funziona su dispositivo mobile.

Background tecnico

AMP è un standard web costruito su tecnologie web esistenti e focalizzato sul contenuto statico. Esso ha 3 parti differenti:

AMP HTML: HTML modificato con (1) la restrizione di alcune normali caratteristiche HTML / CSS e (2) l'introduzione di nuovi tag personalizzati (Componenti)
AMP JS: applica le best practice per ridurre il tempo di caricamento della pagina
AMP CDN: una cache con un sistema di convalida integrato, che ottimizza ulteriormente il tuo sito

Se vuoi saperne di più sullo sfondo tecnico delle pagine AMP, guarda il video qui sotto in cui Paul Bakaus di Google dà un discorso introduttivo su AMP.

Se vuoi approfondire, è anche utile capire quali tecniche di ottimizzazione utilizzano AMP per accelerare le prestazioni sui dispositivi mobili. Nel video qui sotto, Malte Ubl, il capo di AMP Engineering, spiega il anatomia di AMP in dettaglio.

HTML AMP

Le pagine mobili accelerate sono pagine HTML normali questo è necessario seguire un insieme di regole per far caricare le pagine più velocemente e renderizzare con prestazioni affidabili.

Diamo un'occhiata alle cose più importanti che devi sapere al riguardo. Puoi anche dare un'occhiata alla specifica HTML AMP completa.

Decidi se desideri una pagina AMP separata

Per la stessa pagina di contenuto statico, puoi avere 2 versioni separate - uno per l'AMP e uno per la versione non AMP. Puoi anche scegliere di avere solo una versione - la pagina AMP e usala ovunque. circa supporto per browser, La pagina Github di AMP afferma:

Se sei ancora preoccupato per il supporto del browser, controlla il post di Google Paul Irish su Stackoverflow.

Nel caso in cui si desideri avere due pagine (AMP e non AMP), è necessario link a ciascuno di essi in modo da informare i motori di ricerca sull'esistenza del Due versioni.

Aggiungi il seguente codice al sezione della pagina non AMP:

Aggiungi anche la seguente riga al sezione della pagina AMP:

Se hai solo una pagina AMP, è ancora necessario collegalo da sé nel modo seguente:

Iniziare Boilerplate

Il progetto AMP offre diversi avviamento di piastre di riscaldamento puoi usare per iniziare. Dai uno sguardo alla semplice piastra metallica AMP HTML qui sotto:

          Ciao mondo!

Puoi vedere che lo standard di connessione collega la normale pagina HTML usando il etichetta. Il > il tag aggiunge il Libreria AMP JS.

 Il   
Puoi avere solo uno foglio di stile incorporato e ce ne sono anche molti regole di stile non consentite, per esempio non puoi usare il !importante qualificatore, il @importare regola e pseudo-classi.
 Non dimenticare di controllare le restrizioni del foglio di stile prima di iniziare a scrivere CSS per le tue pagine AMP.
 C'è un'altra cosa che è importante sapere sulle regole di stile AMP: tu non è possibile utilizzare qualsiasi layout che si desidera - in quanto è uno dei principi di AMP per consentire al browser di calcola lo spazio di ogni elemento sulla pagina in anticipo.
 Dai un'occhiata ai layout supportati e non supportati.
 AMP JS
 I documenti AMP possono includere nè JavaScript scritto, nè javascript di terze parti, tuttavia ciò non significa che le Pagine mobili accelerate non utilizzino affatto JavaScript. La libreria JavaScript di AMP (il runtime AMP) è responsabile del caricamento e del rendering delle pagine AMP imporre le migliori pratiche di prestazione.
 Componenti AMP
 I componenti AMP sono definito dal runtime AMP. Sono quelli di cui sopra Tag HTML specifici per AMP è necessario utilizzare al posto della loro normale controparte, come ad esempio  invece del  etichetta.
 Ogni componente AMP contiene a particolare risorsa esterna (un'immagine, un video, un embed, ecc.). Le risorse esterne sono soggette a rallentare i siti Web. L'obiettivo principale di questa soluzione è: gestire il caricamento di risorse esterne in un modo ragionevole eseguendoli all'interno di sandbox.
 AMP ti fornisce 2 tipi di componenti:
 Componenti integrati: sono sempre disponibili in tutti i documenti AMP, lo sono costruito direttamente nel runtime AMP. Attualmente ce ne sono cinque:  per mostrare annunci
  per le immagini, è usato al posto di  etichetta
  per pixel di tracciamento (utilizzato per il conteggio delle visualizzazioni di pagina)
  per incorporamenti di file video HTML5 diretti, sostituisce il file  etichetta
  per elementi incorporati (può essere usato al posto di  in certi casi)
 
 Componenti estese: Componenti aggiuntivi, è necessario includerli esplicitamente nel tuo documento AMP. Ce ne sono molti utili, come  e , vedi la lista completa Molti di loro possono essere usati incorporare contenuti da servizi di terze parti, come da Twitter o Instagram.
 
Si noti che tutte le risorse caricate esternamente, come ad esempio  e  deve avere un noto  e  attributo per consentire al browser di calcola il layout in anticipo.
 AMP CDN
 Il AMP CDN è fondamentalmente una cache, chiamata Google AMP Cache. Raccoglie documenti AMP validi, li memorizza nella cache e li carica. AMP CDN ha anche un sistema di convalida integrato.
 Ne vale la pena testare le tue pagine AMP prima di lasciarli andare online per sicurezza passare il validatore. Puoi farlo in molti modi diversi.
  IMMAGINE: Progetto AMP
È bene sapere che AMN CDN utilizza il protocollo HTTP / 2 per ottenere le migliori prestazioni possibili.
 Strumenti AMP
 Esistono alcuni ottimi strumenti che possono aiutarti a implementare le pagine accelerate per dispositivi mobili, diamo un'occhiata ad alcuni di essi.
 Google mette a disposizione i webmaster a portata di mano Strumento di rapporto sullo stato di AMP mostra un conteggio delle pagine AMP indicizzate correttamente e degli errori relativi ad AMP.
 Lullabot di Libreria PHP AMP ti consente di convertire le tue pagine HTML in AMP HTML e segnala anche la conformità di qualsiasi documento HTML con gli standard AMP.
 Se vuoi utilizzare AMP sul tuo sito WordPress, leggi il tutorial di Yoast su come configurare WordPress per AMP e su come AMP funziona con il plug-in Yoast SEO.
 Puoi anche controllare Automattic's Plugin AMP che ti permette di abilitare le pagine mobili accelerate sul tuo sito WordPress.
  IMMAGINE: WordPress.org
Ulteriori considerazioni
 Se non sei ancora convinto, dai un'occhiata al video su a test rapido della velocità sotto.
 
 Jonathan Abrams, il fondatore del Nuzzel, fa affermazioni ancora migliori, affermando che anche i siti ottimizzati per i dispositivi mobili come il New York Times si caricano molto più velocemente - invece di impiegare tre secondi per caricare la pagina media, viene caricata una pagina meno di mezzo secondo quando le Pagine mobili accelerate di Google sono abilitate.
 Puoi anche leggere un interessante articolo su Verge sulla concorrenza di Google AMP e degli articoli istantanei di Facebook. Se stai ancora cercando una risposta per "qual è il trucco?", Controlla il post di Yoast che menziona il timore che AMP ci stia riportando in un momento di internet prima del 2000, e si chiede se sia davvero uno standard aperto.
 .