Come implementare AMP sul tuo sito Web e ottenere una velocità di caricamento supersonica

Potresti voler implementare AMP per aumentare la velocità della pagina. Ecco perché

Un sito Web a caricamento rapido è assolutamente indispensabile . La capacità di attenzione umana è in una spirale discendente: nessuno vuole aspettare, soprattutto se si trova su un dispositivo mobile.

Quanto dobbiamo essere veloci? Google consiglia un tempo di caricamento della pagina inferiore a due secondi.

Esistono molte misure popolari nei domini on-page e tecnici della SEO che ti aiutano a raggiungere l'obiettivo.

Tuttavia, una di queste misure, l'impostazione di Accelerated Mobile Pages (AMP) per la versione mobile di un sito Web, viene utilizzata con parsimonia.

Come mai? In poche parole, passare ad AMP richiede un bel po' di tempo, impegno e fondi a seconda delle dimensioni di un sito web. Alla fine, potrebbe anche non valerne la pena.

Vale la pena investire in AMP? Se la risposta è sì, questo post ti aiuterà con un processo passo dopo passo per configurare efficacemente AMP per il tuo sito Web WordPress.

Implementa AMP Passaggio 1: scegli il plug-in giusto

Opzioni del plug-in

WordPress offre molti plugin per AMP. Ne ho provati alcuni con successo a vari livelli. Uno di loro ha dato per un po' di risultati meravigliosi in Google Pagespeed Insights. Ma ha rotto tutte le mie pagine AMP sui dispositivi mobili!

La mia raccomandazione

Consiglierei il plugin AMP per WP – Accelerated Mobile Pages – WordPress. Questo plug-in offre molte opzioni per personalizzare le pagine Web mobili. Il resto del post riguarderà la configurazione di AMP per il tuo sito Web utilizzando questo plug-in.

Dopo aver installato e attivato il plugin, la dashboard di WordPress mostrerà la possibilità di aprire la versione AMP del tuo sito web. Vedrai anche il nuovo plug-in (AMP) come evidenziato nell'immagine sottostante.

Come nell'immagine sopra, vedrai una serie di opzioni, le tratteremo una per una.

Passiamo alle impostazioni.

Implementa AMP Passaggio 2: configurazione di base del plug-in

Tipo di sito web

Seleziona l'opzione che rappresenta al meglio la tua attività. Seleziona "altro" se nient'altro corrisponde, dopodiché avrai un'opzione per digitare il tipo di sito web.

Dove è necessario implementare AMP?

Seleziona dove vuoi implementare AMP. Quando scegli AMP, stai decidendo di mantenere le tue pagine Web mobili quasi completamente HTML. Devi lasciar andare i codici CSS/JS che riducono la velocità di caricamento.

Lo svantaggio è che l'esperienza utente (UX) viene influenzata. Ad esempio, non puoi più avere un pulsante di invito all'azione (CTA) che ruota per attirare l'attenzione di un visitatore. AMP elimina quel codice, risparmiando così il tempo di caricamento della pagina. Ciò potrebbe eventualmente comportare un tasso di coinvolgimento ridotto.

Nell'elenco sopra, potresti voler scegliere di avere AMP sulle tue pagine, sui post o su entrambi.

Progettazione e presentazione

Qui puoi impostare il tuo logo , la dimensione consigliata è 120 x 90 pixel. Consiglierei di non utilizzare il logo in quanto aumenta il tempo di caricamento della pagina. Se nessun logo viene aggiornato su questo pannello, la pagina AMP avrà solo il nome del sito Web al posto del logo.

L'opzione Combinazione colori globale ti aiuterà a scegliere un colore per le tue pagine AMP che appare sui link CTA sulla pagina e sul link a piè di pagina.

Ad esempio, ho scelto l'azzurro come il mio Global Color , come si vede nell'immagine qui sotto.

Tracciamento analitico

In questo pannello delle opzioni, puoi abilitare gli strumenti che utilizzi per il monitoraggio. Ad esempio, puoi abilitare Google Analytics aggiungendo il Tracking ID. In questo modo i dati delle pagine AMP verranno aggiornati direttamente nel tuo account Google Analytics.

Allo stesso modo, puoi aggiungere più altri strumenti di tracciamento come elencato nell'immagine sopra.

Impostazioni della privacy

La Cookie Notice Bar ti consente di chiedere il consenso dei visitatori per i cookie che stai utilizzando sul sito web. Nell'immagine sottostante, la finestra di dialogo in nero è una barra di avviso sui cookie.

Fonte immagine - Approfondimenti sui mostri

Se tu o la tua base di pubblico provenite da un paese GDPR, è necessario attivare le impostazioni per GDPR – Regolamento generale sulla protezione dei dati.

Nota, se devi scegliere, puoi scegliere solo una delle due opzioni, non entrambe.

Annuncio

In questo segmento, scegli dove vuoi posizionare i tuoi annunci. Puoi personalizzare secondo necessità: puoi pubblicare annunci in tutto il sito o su singoli post o intestazioni tra le altre opzioni.

Puoi scegliere il tipo di annuncio, la dimensione dell'annuncio e il client di annunci di dati e lo slot di annunci di dati dal codice dell'annuncio di Adsense.

Compatibilità di terze parti

L'ultima entità acquisisce l'elenco dei plug-in per i quali è necessaria la compatibilità AMP.

Gravity Form ed Elementor per AMP richiedono il pagamento delle estensioni. Structured Data, Ads for WP e PWA for WP sono plugin gratuiti. Gli ultimi tre saranno trattati un po' più in dettaglio più avanti nel post.

Implementa AMP Passaggio 3: più impostazioni AMP

impostazioni generali

La scheda Generale copre le opzioni che abbiamo trattato nella configurazione di base. Inoltre, puoi scegliere se desideri avere AMP nelle pagine di archivi, categorie e tag.

Abilitando l'ultima opzione, AMP Takeover (Beta), la tua versione desktop e mobile sarà la stessa. Ciò significa che la tua versione desktop avrà anche pagine AMP.

Consiglierei di mantenere questa opzione disattivata. Il caricamento della pagina è generalmente migliore su desktop che su dispositivo mobile. Avere AMP su desktop significa scambiare UX per un piccolo incremento nella velocità della pagina. Non è un buon affare.

Annuncio

Questa sezione ha le stesse opzioni della sezione Pubblicità nella configurazione di base.

SEO

Se scegli di attivare la Meta Description , il testo che compilerai nella sezione Head verrà raccolto da Google. Questo sarà diverso dal testo che hai compilato per la versione desktop. Consiglierei di mantenere l'impostazione disattivata e di mantenere la Meta Description coerente tra le due versioni.

I tag di metadati OpenGraph sono frammenti di codice che controllano il modo in cui gli URL vengono visualizzati quando condivisi sui social media. Questa sezione è visibile per la versione desktop quando imposti il ​​titolo e i metadati nel tuo plug-in SEO. Di seguito è riportato un esempio del plugin Yoast SEO.

Puoi trovarlo andando nella sezione Editor di qualsiasi post o pagina, scorri fino in fondo. Una volta visualizzata la sezione per Yoast, fai clic sulla scheda "Social", quindi puoi scegliere la piattaforma di social media preferita.

Il plug-in AMP ti consente di selezionare il plug-in SEO preferito sullo stesso pannello delle opzioni. Nell'esempio sopra, Yoast è il plugin scelto. Tutti i dati inseriti in Yoast per la versione Desktop vengono copiati nella versione AMP.

Vedrai l'opzione per rimuovere l'indicizzazione delle pagine impaginate e la compatibilità con lo strumento di controllo degli URL.

Le pagine impaginate dovrebbero essere indicizzate ma solo come canoniche. Consiglierei di mantenere questa impostazione disattivata.

La compatibilità dello strumento di ispezione degli URL favorisce una ricerca più trasparente per te. Fornisce rapporti dettagliati su scansione, indicizzazione e pubblicazione di informazioni nel tuo account Google Search Console. Consiglierei di tenerlo acceso.

Supporto per Elementor

L'opzione di AMPforWP PageBuilder ti consentirà di creare singole pagine per la versione AMP, diversa dalla versione desktop. È utile quando vuoi avere testo o CTA leggermente diversi per le pagine AMP.

Ad esempio, se hai un CTA "Contattaci" per desktop ma preferisci che i visitatori mobili ti chiamino, puoi attivare questa opzione e creare una pagina separata.

PWA

Come da AMP per la descrizione di WP Plugin - Progressive Web Apps (PWA) trasforma il tuo sito Web in un'applicazione Web e offre ai visitatori un'esperienza simile a un'app mobile nativa.

È un miglioramento del design. L'attivazione del modulo è una questione di scelta.

Prestazione

Il pannello Prestazioni approfondisce l'ottimizzazione della velocità della pagina.

Ti consente di minimizzare CSS/JS per ridurre l'utilizzo della larghezza di banda senza influire su UX o funzionalità. Sfrutta la cache del browser ti consente di accelerare il tempo di caricamento per i visitatori di ritorno. Consiglierei di mantenere entrambe le opzioni attivate.

L'abilitazione di Ottimizza CSS attiverà la funzione di scuotimento dell'albero dell'ottimizzazione CSS. Puoi tenerlo acceso nel caso in cui non disponi di un plug-in diverso che faccia già quel lavoro.

Analytics, Dati strutturati, Barra degli avvisi e GDPR

Queste sezioni hanno le stesse opzioni di quelle trattate nella configurazione di base.

Le notifiche push

Nel caso in cui desideri impostare notifiche push, puoi optare per una tra OneSignal, iZooto e Truepush .

Nell'esempio sopra, ho selezionato OneSignal. Tuttavia, per qualsiasi selezione, vedrai una sezione per inserire l'ID APP, un'opzione per abilitare le notifiche push per le Pagine. Inoltre, devi scegliere dove vuoi posizionare la notifica (ad esempio in fondo alla pagina) e quale testo vuoi visualizzare.

Moduli di contatto

Ciò ti consente di scegliere uno dei 3 plug-in per ottimizzare AMP: Contact Form 7, Gravity Forms e Ninja Forms.

Tutti e tre richiedono il pagamento di un'estensione. Nel caso in cui il tuo CTA si concentri principalmente sui moduli, è prudente investire nell'estensione.

Commenti

Questa schermata ti consente di scegliere dove desideri visualizzare i commenti generati dagli utenti sul tuo sito web. Puoi anche scegliere le fonti da cui visualizzare i commenti.

Scegli le impostazioni che funzionano meglio per te.

Articoli istantanei

Articoli istantanei è una funzionalità dell'app Facebook per utenti mobili che ti consente di ospitare gli articoli del tuo sito web.

Il vantaggio di attivare questa funzione è un tempo di caricamento ancora più rapido rispetto all'avere lo stesso articolo sul tuo sito web. Poiché l'articolo viene caricato all'interno dell'app, ottieni una velocità di caricamento fino a 10 volte più veloce.

Tuttavia, poiché il contenuto rimane su Facebook, potresti perdere parte del traffico del sito web. È un compromesso tra velocità della pagina e traffico del sito web. Consiglierei di tenerlo spento.

Se scegli di mantenerlo attivo, vedrai le impostazioni seguenti.

Dopo aver inserito l'ID della tua Pagina Facebook, puoi personalizzare le impostazioni dell'articolo. Un'impostazione che richiede ulteriori spiegazioni è – Ingestione crawler .

Quando il link del tuo articolo ospitato sul tuo sito web viene condiviso su Facebook, i crawler di Facebook cercano il tag ia:markup_url . Se è presente, Facebook acquisisce il tuo articolo e crea un articolo istantaneo sulla tua pagina Facebook.

Strumenti

L'opzione Pagina AMP individuale ti consente di scegliere se visualizzare le pagine AMP per impostazione predefinita o meno. Quando scegli Mostra per impostazione predefinita , tutte le tue pagine mostreranno la versione AMP. Tuttavia, puoi scegliere di nascondere AMP per singoli post o pagine.

Per farlo, vai su qualsiasi pagina e fai clic su Modifica pagina . Nella scheda Impostazioni verso destra, puoi trovare l'opzione per disattivarlo.

Allo stesso modo, puoi scegliere di nascondere le versioni AMP per categorie e post selezionati.

Query Monitor è il pannello degli strumenti per sviluppatori per WordPress. Se sei uno sviluppatore che ha bisogno di vedere le query sulla pagina, dovresti mantenere l'impostazione attivata.

Impostazioni avanzate

Il pannello delle opzioni Impostazioni avanzate ha una serie di impostazioni, la maggior parte delle quali sono autoesplicative.

Consiglierei di mantenere attivate le impostazioni predefinite a meno che tu non sia uno sviluppatore WP o abbia assunto un esperto per progettare il tuo sito web.

commercio elettronico

Se possiedi un negozio online, puoi personalizzare la tua versione AMP per WooCommerce . Se vendi principalmente risorse digitali, puoi attivare l'opzione Easy Digital Download Support . Entrambe le opzioni richiedono l'abilitazione di un'estensione a pagamento.

Pannello di traduzione

Questo pannello ti consente di selezionare le traduzioni giuste per un insieme di parole di uso comune nella lingua di tua scelta.

Ad esempio, devi digitare la traduzione per Visualizza versione non AMP adatta al tuo pubblico.

Per le traduzioni multilingue, puoi attivare il metodo Usa file POT di Traduzione . Il file POT (Portable Object Template) è un modello per i file PO. Sono file di testo semplice che contengono le traduzioni. Ogni lingua ha la propria estensione di file. Per esempio il francese ha po.fr.

Implementare AMP Passaggio 4: Progettazione

Temi

Proprio come per la versione desktop del tuo sito web, puoi scegliere un tema per la versione AMP.

Ci sono quattro opzioni gratuite tra cui scegliere.

• Veloce
• Disegno Uno
• Disegno due
• E, Design Tre

Inoltre, ogni pagina e post ha una sezione che ti consente di creare il tuo design.

Ecco come puoi trovarlo. Vai alla pagina o al post e fai clic su "Modifica pagina" nella barra degli strumenti in alto. Scorri verso il basso per vedere la schermata qui sotto.

Se selezioni la casella di controllo Usa Builder , verrà mostrato il modello che crei, in caso contrario, verrà mostrato il modello gratuito selezionato.

Nel caso in cui tu stia costruendo il tuo modello, hai i moduli seguenti tra cui scegliere.

Ricorda, AMP è fondamentalmente una pagina HTML. Non puoi ottenere molta personalizzazione o pulsanti fantasiosi.

Nota: devi selezionare un tema. Il plug-in ne ha bisogno per selezionare icone e struttura, anche quando crei il tuo design. Puoi approfondire i dettagli in questo passaggio mentre implementi AMP.

Globale

Questo pannello delle opzioni ti consente di personalizzare la tua versione AMP.

È possibile selezionare i colori di scelta come sopra. Inoltre, puoi selezionare Google Fonts . Tuttavia, consiglierei di tenerlo spento poiché Google Fonts aumenta il tempo di caricamento, vanificando lo scopo di AMP.

Più avanti, puoi scegliere di mantenere attiva la barra laterale e lo scorrimento infinito se è così che vuoi che la tua pagina web assomigli. Tuttavia, dal punto di vista della velocità della pagina, dovresti tenerlo spento.

La libreria delle icone dei caratteri sarà la stessa del tema che avevi scelto all'inizio del pannello Design.

Intestazione

Il pannello delle opzioni dell'intestazione ti consente di decidere il layout dell'intestazione e l'aspetto del menu di navigazione.

Ti consente anche di aggiungere un pulsante Chiama ora. È un pulsante utile per gli utenti mobili.

Puoi scegliere di mostrare il tuo link non AMP nell'intestazione. Tuttavia, se il tuo pubblico non è tecnicamente orientato alla SEO, potrebbe non fare clic sul collegamento.

Puoi anche abilitare la barra di ricerca . È utile se hai un sito Web di blog.

L' opzione di intestazione avanzata ti consente di ottenere informazioni più specifiche con le impostazioni della sezione dell'intestazione. È una questione di scelta. Tuttavia, tieni presente di non aggiungere codice, poiché influirà negativamente sulla velocità di caricamento della pagina.

Homepage, Singolo, Piè di pagina, Pagina, Condivisione social, Data e Varie

Questi pannelli opzionali, proprio come l'intestazione, sono completamente una questione di scelta del design. Puoi scegliere qualsiasi impostazione più adatta a te.

Riassumendo

I passaggi precedenti ti aiuteranno a implementare efficacemente AMP sul tuo sito web. Dopo aver salvato le modifiche, controlla la versione AMP sul tuo telefono o, aggiungendo '/amp' dopo l'URL.

Le immagini seguenti catturano le caratteristiche della tua pagina AMP.

VISUALIZZAZIONE PAGINA AMG

PIEDI'

Ecco qua. Segui questi passaggi per implementare AMP e avere pagine super veloci e prive di errori che si caricano in meno di 2 secondi per i visitatori di telefoni cellulari.