Utilizzo di Google AMP per caricare più velocemente le pagine mobili del tuo sito WordPress

Perché la velocità della pagina è importante

Se, come miliardi di noi, hai recentemente utilizzato contenuti web su un dispositivo mobile, hai notato che l'esperienza potrebbe essere migliorata. La lettura degli articoli di notizie è spesso dolorosamente lenta e le pagine richiedono molto tempo per essere caricate. Anche dopo il caricamento del testo sulla pagina, le pagine continuano a caricarsi per molti secondi, poiché gli annunci, il monitoraggio di javascript e le immagini vengono scaricati.
Le app mobili ci hanno abituato al caricamento rapido dei contenuti , alla visualizzazione offline e alle interfacce veloci. Ma i siti per dispositivi mobili spesso restano indietro, letteralmente. Ciò è particolarmente vero per i siti di notizie e blog, che utilizzano molti widget per annunci, analisi, condivisione e commenti. Puoi testarlo facilmente installando un blocco dei contenuti su un dispositivo iOS e notando l'aumento della velocità.
Certo, puoi utilizzare un tema reattivo per alleviare alcuni dei problemi, ma il design reattivo non si occupa delle prestazioni di caricamento della pagina. La maggior parte delle volte, il responsive è alla radice del problema : progettiamo siti Web in grado di adattarsi a display con molte risoluzioni diverse e non riusciamo a creare un'esperienza ottimizzata per i display più piccoli, prestazioni della CPU inferiori e connessioni più lente. Con il design reattivo, tutte le risorse e le funzionalità desktop verranno comunque caricate quando la pagina viene visualizzata su dispositivi mobili, causando spesso prestazioni scadenti. Secondo Facebook, il tempo medio di caricamento di un articolo di notizie su dispositivo mobile è di 8 secondi.
Mentre alcuni di noi hanno la fortuna di avere connessioni di rete 3G o 4G sui nostri smartphone, devi solo uscire dai centri urbani per far diminuire drasticamente la velocità della rete. E naturalmente c'è il "prossimo miliardo" di persone e dispositivi che si connettono dai paesi in via di sviluppo dove le connessioni di rete veloci non sono ancora disponibili.
Fortunatamente, le cose si stanno muovendo nella giusta direzione, con tutti i grandi attori che stanno lavorando per velocizzare il caricamento dei contenuti sui dispositivi mobili. Facebook ha lanciato Instant Articles, una soluzione per il caricamento rapido di contenuti web, anche se limitata al loro giardino recintato. Apple ha lanciato la propria app News. Google ha lanciato AMP (Accelerated Mobile Pages), un'iniziativa con uno scopo simile a quello di Facebook ma con un approccio standard aperto.
WordPress ha recentemente annunciato di aver aggiunto il supporto per le Accelerated Mobile Pages (AMP) di Google a WordPress.com e ai siti WordPress.org sotto forma di plug-in gratuito.
Vediamo quindi come puoi aggiungere AMP al tuo blog o sito di notizie WordPress.org e beneficiare della tecnologia più recente per velocizzare il tuo sito Web sui dispositivi mobili.

Che cos'è Google AMP?

La promessa AMP di Google è di caricare istantaneamente le tue pagine sui dispositivi mobili. Risolve uno degli ultimi problemi rimasti con Internet mobile. Nonostante tutti lo utilizzino, Internet mobile è sorprendentemente lento. AMP aggira questo problema limitando il numero di funzionalità su una pagina, eliminando le funzionalità di progettazione per la velocità. Google ha affermato che la velocità di caricamento di AMP è dell'85% più veloce delle normali pagine web.
AMP crea una visualizzazione mobile speciale per il tuo sito web. Questo nuovo sito mobile migliora i tuoi contenuti per i client supportati come Google Mobile Search e Chrome. Questa nuova visualizzazione si aggiunge ai siti Web normali e mobili che già possiedi. In questa visualizzazione, le tue pagine sembrano normali pagine Web ma con tutto tranne il contenuto rimosso. Per questo motivo, devi assicurarti che il tuo sito WordPress sia pronto per questo

Come funziona AMP?

AMP HTML è essenzialmente un sottoinsieme di HTML con consentiti solo elementi JavaScript specifici. L'obiettivo è accelerare il caricamento di siti con contenuti pesanti come siti di notizie e blog. Sebbene limiti pesantemente Javascript, consente specifici elementi di analisi e pubblicità sulle tue pagine, rendendolo una buona opzione per gli editori di notizie.
Per creare la sua nuova visualizzazione mobile, AMP utilizza tre elementi principali:

• HTML AMP : questo sottoinsieme di HTML aggiunge alcuni tag e proprietà personalizzati con molte restrizioni che consentono ai client AMP di visualizzare i tuoi contenuti nel modo desiderato senza preoccuparsi delle prestazioni. Il plug-in aggiunge automaticamente questi nuovi tag alle tue pagine, ma puoi utilizzarli nei tuoi modelli specifici per AMP se ne hai bisogno.
• AMP JS – Questo framework JavaScript è stato realizzato per le pagine mobili che gestisce la gestione delle risorse e il caricamento asincrono che fanno funzionare il processo AMP. Tieni presente che non puoi utilizzare JavaScript di terze parti sulle tue pagine AMP.
• AMP CDN – AMP fornisce una rete di distribuzione dei contenuti opzionale in grado di memorizzare nella cache e ottimizzare ulteriormente le pagine AMP.

Installazione di AMP

dovrai installare il plug-in prima di poter utilizzare AMP sul tuo sito WordPress. Se stai usando WordPress.com, questo è già disponibile per te.

Il plugin ufficiale

Mentre puoi trovare il plug-in AMP ufficiale nel negozio di plug-in di WordPress, troverai solo l'ultima versione sul sito Github del progetto . Quindi, hai una scelta da fare.
L'installazione del plugin tramite WordPress è la più rapida. Devi solo cercare amp-wp nella sezione "Aggiungi nuovo" del tuo pannello di amministrazione di Plugin WordPress. Quindi fai semplicemente clic su Installa e quindi attiva per iniziare a utilizzare AMP sul tuo sito web.
Se hai bisogno dell'ultima versione per qualsiasi motivo, dovrai installare il plug-in manualmente. Dopo aver scaricato il pacchetto Github, devi solo fare clic su "Carica plug-in" mentre sei nel pannello "Aggiungi nuovo" Plugin. Trova il file zip contenente il pacchetto e lascia che WordPress prenda le cose da lì. Una volta terminato il caricamento, puoi semplicemente attivare il plug-in per iniziare a usarlo.

PageFrog e altri plugin AMP

Il plug-in ufficiale proviene direttamente dal team di progetto AMP di Google, rendendolo la versione più aggiornata di AMP. Crea una versione /amp/ di ogni pagina e post che hai. Devi solo aggiungere /amp/ alla fine degli URL per vederli tu stesso.
Tuttavia, non puoi modificare queste pagine AMP. Se hai bisogno di qualcosa in più rispetto a quello che ti offre il plugin di base, avrai bisogno di uno degli altri plugin AMP là fuori, come PageFrog.
PageFrog si basa sul plug-in AMP di base consentendoti di modificare alcune delle modifiche apportate. Ti consentirà anche di aggiungere alcune funzionalità di stile e temi, nonché altri protocolli come gli articoli istantanei di Facebook. Puoi trovare PageFrog e alcuni altri plug-in AMP sul negozio di plug-in di WordPress.

Configurazione del tuo sito WordPress per AMP

Una volta attivato il plugin, hai finito. Per la maggior parte delle installazioni, devi solo creare il contenuto come faresti normalmente e il plug-in si occuperà del resto. Tieni presente, tuttavia, che elementi come il codice di Google Analytics non funzioneranno immediatamente sulle tue pagine AMP. Continua a leggere per vedere come aggiungere funzionalità di analisi e SEO alle tue nuove pagine AMP. .

Aggiunta di Google Analytics alle tue pagine AMP

Se hai bisogno di queste funzionalità anche sulle tue pagine mobili, devi aggiungerle manualmente al modello di pagina single.php del plugin.
Per fare ciò, dovrai fare clic sull'opzione di modifica accanto al nome del plug-in AMP nell'elenco dei plug-in. Da lì, fai semplicemente clic sul collegamento single.php per iniziare a modificarlo. Tieni presente che potresti doverlo ripetere ogni volta che aggiorni il plugin.

Plugin SEO e AMP

Poiché le tue pagine AMP non includeranno nessuna delle tue funzionalità SEO, avrai bisogno di un nuovo plug-in SEO compatibile con AMP.
Fortunatamente, la maggior parte degli sviluppatori di plug-in SEO ha o avrà estensioni AMP che puoi utilizzare . Dovrai installarli separatamente, ma ti servono per assicurarti che tutte le tue pagine funzionino per migliorare la SEO del tuo sito.
A partire da questo articolo, solo tre plugin SEO per WordPress hanno rilasciato estensioni o aggiornamenti AMP.

• Colla per Yoast SEO – Aggiunge il supporto AMP al plugin Yoast SEO per WordPress
• Schema App Structured Data – Plugin schema SEO con AMP da schema.org
• Schema di dati strutturati WP SEO – Plugin schema SEO con AMP di Kansas City SEO

Correzione di eventuali errori

Come per qualsiasi aggiunta al tuo sito web, vuoi testare le tue pagine AMP per errori e incoerenze e correggerle.
AMP è ancora in evoluzione e molte delle funzionalità potrebbero ancora presentare bug. Dovrai correggere manualmente questi errori nei file modello prima di rendere pubbliche le tue pagine AMP. Ricorda solo che potresti dover ripetere le modifiche ogni volta che aggiorni il plug-in nel caso qualcosa cambi.

Pubblicità sulle tue pagine AMP

L'HTML AMP non consente JavaScript, quindi gli annunci non possono essere incorporati direttamente, ma vivono in iframe sandbox senza accesso ai contenuti principali dell'articolo.
Google ha progettato AMP per consentire il passaggio di alcuni tipi di pubblicità. Hai solo bisogno della versione compatibile con AMP dei tuoi plug-in pubblicitari. Puoi trovare un elenco completo di questi plugin compatibili nella pagina AMP Github .
I fornitori di annunci attualmente supportati includono quanto segue:

• A9
• AdReactor
• AdSense
• AdTech
• Doppio click

AMP o app per dispositivi mobili?

Sebbene AMP possa aiutare a velocizzare le pagine degli articoli del tuo sito in alcune condizioni, non funzionerà in ogni situazione e su tutti i dispositivi. Non solo, ha anche grandi limitazioni sul tipo di analisi (senza js!) E sulla pubblicità che puoi eseguire sulle tue pagine.
AMP può essere una soluzione efficace per il traffico proveniente dalla ricerca, ma che ne dici dei tuoi lettori più fedeli?
Per quelli, credo che un'app abbia ancora molto senso, a seconda del tipo e delle dimensioni del tuo pubblico. Un'app può comunque fornire molti vantaggi anche AMP o Instant Articles non offrono : consegna e riattivazione dei contenuti con notifiche push, memorizzazione nella cache dei contenuti e utilizzo offline, presenza negli app store e, cosa ancora più importante, nella schermata iniziale dell'utente.
Quindi, se stai cercando una piattaforma che ti aiuti a guidare la crescita nel tempo, mantenendo il controllo dei tuoi contenuti e le opzioni specifiche per dispositivi mobili per la pubblicità e l'analisi, allora prendi in considerazione la pubblicazione della tua app. Se stai utilizzando WordPress sul tuo sito di notizie o blog, allora su MobiLoud potremmo avere la soluzione giusta per te .