Come creare una pagina AMP per un sito mobile più veloce

Cos'è AMP e perché è importante

AMP (Accelerated Mobile Pages) è un framework open source sviluppato da Google nel 2015 per velocizzare in modo drastico il caricamento delle pagine web sui dispositivi mobili. In un mondo in cui oltre il 60% del traffico internet proviene dagli smartphone, la velocità di caricamento di un sito incide direttamente sull'esperienza utente, sulla frequenza di rimbalzo e sul posizionamento nei motori di ricerca. Le ricerche dimostrano che il 53% degli utenti mobili abbandona un sito che impiega più di 3 secondi a caricarsi. AMP risolve questo problema limitando HTML, CSS e JavaScript in un modo che garantisce un rendering delle pagine estremamente rapido.

Le pagine AMP si caricano in genere in meno di un secondo, ovvero 4-5 volte più velocemente della pagina mobile media. Google velocizza ulteriormente i contenuti AMP memorizzandoli nella cache sui propri server tramite il sistema AMP Cache, così la pagina viene servita dalla posizione Google più vicina all'utente. Il risultato è un caricamento quasi istantaneo quando un utente clicca su un risultato AMP nella ricerca Google.

Come funziona AMP

I tre componenti di AMP

AMP è composto da tre elementi chiave che insieme garantiscono un caricamento rapido. Il primo è AMP HTML, una versione estesa di HTML con tag personalizzati che sostituiscono gli elementi HTML standard con versioni ottimizzate per immagini, video e componenti carousel. Il secondo componente è la libreria AMP JS, che gestisce le risorse, carica in modo asincrono le risorse esterne e fa in modo che nulla blocchi il rendering della pagina. Il terzo è AMP Cache, una CDN basata su proxy che recupera automaticamente le pagine AMP, le convalida e le memorizza in cache per una distribuzione rapida.

Limitazioni di AMP

Per raggiungere una velocità eccezionale, AMP impone limitazioni rigorose. Non puoi usare il tuo JavaScript: puoi utilizzare solo i componenti AMP e l'elemento amp-script, anch'esso limitato. Il CSS deve essere inline e non può superare i 75KB. Tutte le risorse esterne (immagini, annunci, video) devono dichiarare in anticipo le proprie dimensioni, così il browser può calcolare il layout prima del caricamento delle risorse. I moduli e gli elementi interattivi utilizzano componenti AMP speciali. Queste limitazioni possono sembrare rigide, ma sono proprio ciò che garantisce un'esperienza costantemente veloce.

Struttura di una pagina AMP

Template HTML AMP di base

Ogni pagina AMP inizia con una struttura specifica. Il doctype è lo standard HTML5, ma il tag html deve contenere l'attributo amp oppure l'emoji del fulmine. Nella sezione head, gli elementi obbligatori sono un meta tag charset, un meta tag viewport, un link canonical alla versione non AMP della pagina, il CSS boilerplate AMP che rappresenta gli stili standardizzati per prevenire il Flash of Unstyled Content e un riferimento alla libreria JavaScript AMP. Il body della pagina utilizza tag specifici di AMP al posto degli elementi HTML standard per i contenuti multimediali.

Componenti AMP

AMP offre un ricco ecosistema di componenti per esigenze diverse. Per le immagini si usa amp-img con gli attributi obbligatori width e height. Per i contenuti video ci sono amp-video e amp-youtube. Gli elementi interattivi comprendono amp-carousel per gli slider, amp-accordion per le sezioni espandibili, amp-lightbox per le visualizzazioni modali e amp-form per i moduli. Per l'analitica si usa amp-analytics, che supporta Google Analytics, Facebook Pixel e altre piattaforme. Ogni componente si carica in modo asincrono e non blocca il rendering.

Implementare AMP su un sito WordPress

Plugin AMP ufficiale

Il modo più semplice per aggiungere AMP a un sito WordPress è utilizzare il plugin AMP ufficiale. Questo plugin offre tre modalità operative: la modalità Standard trasforma l'intero sito in AMP, la modalità Transitional crea versioni AMP di tutte le pagine accanto agli originali e la modalità Reader crea versioni AMP solo per gli articoli. Per la maggior parte dei siti consigliamo la modalità Transitional, perché consente una migrazione graduale. Dopo l'installazione, il plugin genera automaticamente le versioni AMP delle tue pagine e aggiunge i meta tag necessari per collegarle alle pagine originali.

Plugin AMP for WP

AMP for WP è un plugin alternativo con più opzioni di personalizzazione del design. Offre oltre 10 temi integrati per le pagine AMP, supporto per WooCommerce, integrazione con i plugin SEO più diffusi come Yoast e Rank Math, oltre a opzioni avanzate per gli annunci. La versione gratuita copre le esigenze di base, mentre la versione Pro aggiunge template AMP personalizzati, il supporto per Contact Form 7 e analitica avanzata. Se l'identità visiva delle tue pagine AMP è importante, questo plugin offre maggiore flessibilità rispetto al plugin ufficiale.

Configurazione manuale

Per un controllo completo sull'implementazione di AMP, puoi creare template AMP personalizzati nel tuo tema WordPress. Crea file template separati che generino HTML AMP valido. Utilizza gli hook di WordPress per aggiungere i link canonical tra le versioni AMP e non AMP. Questo approccio richiede maggiori competenze tecniche ma ti offre il pieno controllo sull'aspetto e sul comportamento delle pagine AMP. Lo consigliamo solo agli sviluppatori esperti con requisiti specifici che i plugin non possono soddisfare.

Testare e convalidare le pagine AMP

AMP Validator

Google offre diversi strumenti per convalidare le pagine AMP. L'AMP Validator su validator.ampproject.org è uno strumento online dove inserisci un URL o del codice HTML e ottieni informazioni dettagliate sugli errori. Chrome DevTools dispone di una convalida AMP integrata: aggiungi #development=1 alla fine dell'URL AMP e apri la console per vedere gli errori. L'AMP Test Tool in Google Search Console mostra come Google vede le tue pagine AMP e individua i problemi che potrebbero impedire l'indicizzazione. Convalida sempre ogni pagina AMP prima di pubblicarla, perché le pagine AMP non valide non vengono memorizzate in cache né mostrate con il tag AMP nei risultati di ricerca.

Errori comuni

Tra gli errori più frequenti nell'implementazione di AMP rientrano l'uso di tag HTML non consentiti al posto degli equivalenti AMP, il CSS che supera il limite di 75KB, gli stili inline con la dichiarazione important, vietata in AMP, il JavaScript non consentito nel body della pagina, le immagini senza dimensioni dichiarate e i moduli senza un endpoint di azione AMP. Il validator indica chiaramente ogni errore con una descrizione e la riga di codice, semplificando la correzione.

AMP e SEO

Impatto sul posizionamento

AMP di per sé non è un fattore di ranking diretto nella ricerca Google. Tuttavia, AMP migliora indirettamente la SEO perché riduce drasticamente i tempi di caricamento, che sono un fattore di ranking, migliora le metriche dei Core Web Vitals, riduce la frequenza di rimbalzo perché gli utenti non aspettano il caricamento e aumenta il coinvolgimento degli utenti, inviando segnali positivi a Google. Le pagine AMP venivano un tempo mostrate in un carousel speciale in cima alla ricerca mobile, ma dal 2021 anche le pagine non AMP possono comparire in quella sezione. Ciononostante, le pagine AMP hanno un vantaggio in termini di velocità di distribuzione grazie ad AMP Cache.

Link canonical

Il corretto posizionamento dei link canonical è fondamentale per la SEO di AMP. Ogni pagina AMP deve avere un link rel canonical che punti alla versione originale non AMP della pagina. La pagina originale deve avere un link rel amphtml che punti alla versione AMP. Se utilizzi la modalità Standard, in cui l'intero sito è in AMP, il link canonical punta a se stesso. Questo fa sì che Google indicizzi e colleghi correttamente entrambe le versioni della pagina senza problemi di contenuti duplicati.

Alternative ad AMP

AMP non è l'unico modo per ottenere pagine mobili veloci. Un'ottimizzazione web moderna incentrata sui Core Web Vitals può raggiungere risultati simili senza le limitazioni di AMP. Il lazy loading di immagini e video, una gestione efficiente di CSS e JS, l'uso di una CDN, l'ottimizzazione del server e le immagini moderne nei formati WebP e AVIF possono velocizzare drasticamente un sito. Next.js, Gatsby e framework simili generano pagine estremamente veloci senza AMP. Valuta AMP se la tua priorità è la visibilità su Google News o se hai un sito con contenuti prevalentemente statici. Per applicazioni web complesse con molta interattività, l'ottimizzazione standard è la scelta migliore.

Conclusione

AMP può essere uno strumento potente per velocizzare un sito mobile, soprattutto per siti con contenuti prevalentemente testuali come blog, portali di notizie e siti informativi. L'implementazione tramite plugin WordPress è relativamente semplice e può portare un miglioramento significativo all'esperienza mobile. Tuttavia, AMP non è una soluzione universale: le limitazioni su JavaScript e design possono risultare problematiche per i siti complessi. In BeoHosting i nostri server sono ottimizzati sia per le pagine AMP sia per quelle standard, con storage SSD veloce e un web server LiteSpeed che offre prestazioni eccezionali a prescindere dall'approccio che scegli.