Tre secondi.
È il tempo hai per dare una buona impressione e catturare l’attenzione di un utente a cui è piaciuto l’annuncio e ha fatto clic su di esso. E se la tua pagina web non viene caricata nei tempi sopra indicati, hai creato l’annuncio, invano. La cattiva notizia è il fatto che, secondo i dati , la maggior parte dei siti di telefonia mobile al dettaglio impiega circa 6,9 secondi per caricarsi, vale a dire più del doppio del tempo che il 40% degli utenti attende prima di abbandonare la pagina.
In che modo la velocità della pagina Web influisce sulla frequenza di rimbalzo
La velocità è un fattore importante quando si misura la frequenza di rimbalzo per le pagine Web mobili . Per garantire che la tua pagina web abbia un tempo di caricamento più veloce, devi ottimizzare immagini, caratteri ed evitare file di terze parti che potrebbero rallentare il tempo di caricamento.
Considera queste rivelazioni sorprendenti sulla velocità di caricamento della pagina:
- Il caricamento medio del sito mobile richiede 19 secondi tramite una connessione 3G e il caricamento del 77% dei siti mobili richiede oltre 10 secondi.
- Google ha scoperto che le conversioni diminuiscono del 20% per ogni secondo aggiuntivo che una pagina web impiega per caricare.
- È improbabile che il 61% degli utenti ritorni su un sito mobile a cui hanno avuto problemi di accesso.
Cosa significa questo?
Se il caricamento della pagina mobile non è istantaneo, non abbastanza veloce per l’utente, rimbalzeranno e probabilmente non torneranno.
Per garantire che ciò non accada alla tua pagina Web mobile, è importante creare delle pagine che utilizzano il formato AMP
Cos’è il formato l’AMP?
Google ha lanciato il progetto open source Accelerated Mobile Pages per garantire che le pagine Web mobili funzionino alla velocità ottimale.
Il progetto AMP mira a “costruire insieme il futuro web” consentendoti di creare pagine Web e annunci che siano costantemente veloci, belli e ad alte prestazioni su tutti i dispositivi e piattaforme di distribuzione.
AMP è stato realizzato in collaborazione con migliaia di sviluppatori, editori, siti Web, società di distribuzione e società tecnologiche.
Quando crei pagine mobili nel formato AMP ottieni:
1. Prestazioni e coinvolgimento più elevati: le pagine create nel progetto open source AMP si caricano quasi all’istante, offrendo agli utenti un’esperienza fluida e coinvolgente sia su dispositivi mobili che desktop.
2. Flessibilità e risultati: le aziende hanno l’opportunità di decidere come presentare i propri contenuti e quali fornitori di tecnologia utilizzare, mantenendo e migliorando gli indicatori chiave di prestazione.
Probabilmente hai già fatto clic su una pagina AMP prima, ma non te ne sei reso conto. L’unica cosa che potresti aver notato è stata istantaneamente la pagina dopo aver fatto clic. Le pagine Web create da AMP hanno un indicatore di fulmini nei risultati della ricerca.
Ecco come è possibile riconoscere il formato AMP nei risultati di ricerca:
Il motivo per cui le pagine AMP si caricano all’istante è perché AMP limita HTML / CSS e JavaScript, consentendo un rendering più veloce delle pagine Web mobili. A differenza delle normali pagine mobili, le pagine AMP vengono automaticamente memorizzate nella cache di Google AMP per tempi di caricamento più rapidi nella ricerca di Google.
Gli utenti hanno determinate aspettative quando sono sui loro dispositivi mobili, desiderano esperienze significative, pertinenti e più veloci – per garantire che le aspettative del pubblico di destinazione siano soddisfatte il formato AMP è la soluzione migliore.
Questa guida ti illustrerà tutto ciò che devi sapere sul progetto open source AMP. Esamineremo la procedura esatta del funzionamento del formato AMP e di ciò che rende le pagine così veloci.
Come funziona il formato AMP?
Ora che sappiamo perché dovresti utilizzare le pagine con il formato AMP, diamo un’occhiata a come funziona AMP, come si confronta con il web design reattivo, gli articoli istantanei di Facebook e le app Web progressive.
I 3 componenti principali:
Le pagine AMP sono costruite con i seguenti tre componenti principali :
AMP HTML
AMP HTML è essenzialmente HTML con alcune restrizioni per prestazioni affidabili. Il file HTML AMP più semplice è simile al seguente:
La maggior parte dei tag in HTML AMP sono normali tag HTML, tuttavia alcuni tag HTML vengono sostituiti con tag specifici di AMP. Questi tag personalizzati sono chiamati componenti AMP HTML e facilitano l’implementazione di modelli di tag comuni in modo performante. Le pagine AMP vengono scoperte dai motori di ricerca e altre piattaforme dal tag HTML.
AMP JavaScript (JS)
La libreria AMP JS garantisce il rendering veloce delle pagine HTML AMP. La libreria JS implementa tutte le migliori pratiche di performance di AMP come CSS inline e trigger di font, questo gestisce il caricamento delle risorse e ti dà i tag HTML personalizzati per garantire un rendering veloce della pagina.
AMP JS rende tutto asincrono dalle risorse esterne, in modo che nulla sulla pagina possa bloccare il rendering. JS utilizza anche altre tecniche di performance come il sandboxing di tutti gli iframe, il pre-calcolo del layout di ogni elemento della pagina prima del caricamento delle risorse e la disabilitazione dei selettori CSS lenti.
Cache AMP
La cache AMP di Google viene utilizzata per pubblicare pagine HTML AMP memorizzate nella cache. AMP Cache è una rete di distribuzione di contenuti basata su proxy utilizzata per consegnare tutti i documenti AMP validi. Questo formato recupera le pagine HTML AMP, le memorizza nella cache e migliora automaticamente le prestazioni della pagina.
Per mantenere la massima efficienza, AMP Cache carica il documento, i file JS e tutte le immagini della stessa origine che utilizza HTTP 2.0.
AMP Cache viene fornito con un sistema di convalida integrato che conferma il funzionamento di una pagina e che non dipende da forze esterne che potrebbero rallentare la pagina. Il sistema di convalida opera su una serie di asserzioni che confermano che il mark-up della pagina soddisfa le specifiche HTML di AMP.
Una versione aggiuntiva del sistema di validazione è disponibile accanto a ogni pagina AMP. Questa versione è in grado di registrare gli errori di convalida direttamente nella console del browser quando viene visualizzata la pagina, consentendo di vedere le complesse modifiche nel codice che possono avere un impatto sulle prestazioni e l’esperienza dell’utente.
I tre componenti principali di AMP lavorano all’unisono per consentire il caricamento rapido delle pagine. La prossima sezione evidenzierà le sette tecniche di ottimizzazione che si combinano per rendere le pagine AMP così veloci.
Il formato AMP JavaScript viene eseguito in modo asincrono
Le pagine AMP non includono JavaScript scritto dall’autore, ma tutte le funzionalità di pagine interattive sono gestite da elementi AMP personalizzati. Questi elementi AMP personalizzati possono includere JavaScript, ma sono attentamente progettati per garantire che non inizino il degrado delle prestazioni.
AMP esegue JavaScript di terze parti negli iframe, ma non può bloccare il rendering delle pagine.
Tutte le risorse sono dimensionate staticamente
Tutte le risorse esterne come immagini, iframe e annunci devono dichiarare la loro dimensione HTML in modo che AMP possa determinare la dimensione e la posizione di ciascun elemento prima che le risorse della pagina vengano scaricate. AMP carica il layout della pagina senza attendere il download di risorse.
AMP ha la capacità di separare il layout del documento dal layout delle dimensioni, solo una singola richiesta HTTP è richiesta per il layout dell’intero documento. Poiché, AMP è ottimizzato per evitare layout di stile costosi e ricalcoli nel browser, non vi è alcun re-layout quando vengono caricate le risorse della pagina.
I CSS devono essere in linea e limitati dalle dimensioni
CSS blocca il rendering, blocca anche tutto il caricamento della pagina e ha la tendenza a causare gonfiore. AMP HTML consente solo stili incorporati, questo rimuove 1 o principalmente più richieste HTTP dal percorso di rendering critico alla maggior parte delle pagine Web.
Il foglio di stile in linea dovrebbe avere una dimensione massima di 75kb, sebbene sia abbastanza grande per pagine molto sofisticate, richiede comunque che l’autore della pagina pratichi una buona igiene CSS.
L’attivazione dei caratteri è efficiente
L’ottimizzazione dei caratteri Web è fondamentale per il caricamento rapido poiché i caratteri Web sono in genere di grandi dimensioni. In una pagina tipica che include alcuni script di sincronizzazione e un paio di fogli di stile esterni, il browser attende di scaricare i caratteri fino a quando non vengono caricati tutti gli script.
Il framework AMP dichiara zero richieste HTTP fino all’avvio del download di tutti i caratteri. Ciò è reso possibile solo perché tutto JavaScript in AMP ha l’attributo asincrono e sono consentiti solo fogli in linea, non ci sono richieste HTTP che impediscono al browser di scaricare i caratteri.
I ricalcoli di stile sono ridotti al minimo
Nelle pagine AMP, tutte le letture DOM avvengono prima di tutte le scritture, questo assicura che vi sia un solo ricalcolo degli stili per frame, quindi non c’è alcun effetto negativo sulle prestazioni di rendering della pagina.
Il caricamento delle risorse ha la priorità
AMP controlla tutto il caricamento delle risorse, dà la priorità al caricamento delle risorse e carica solo ciò che è necessario e preleva tutte le risorse caricate in modo pigro.
Quando AMP scarica le risorse, ottimizza i download in modo che le risorse più importanti vengano scaricate per prime. Tutte le immagini e gli annunci vengono scaricati solo se è probabile che vengano visualizzati dall’utente, se sono above the fold o se è probabile che il visitatore li scorra.
AMP ha anche la capacità di pre-recuperare risorse caricate in modo pigro, queste risorse vengono caricate il più tardi possibile, ma vengono pre-recuperate il più presto possibile. In questo modo le cose si caricano molto velocemente, ma la CPU viene utilizzata solo quando le risorse vengono mostrate agli utenti.
Quali sono i Vantaggi del formato AMP
AMP offre i seguenti vantaggi alle tue pagine mobili .
Coinvolge il pubblico
Il tempo di caricamento mediano per le pagine AMP è inferiore a un secondo, ciò significa che quando un utente arriva su una pagina AMP, ottiene immediatamente ciò che stava cercando. Poiché la pagina si carica all’istante, interagiscono con la pagina più a lungo e sono più disponibili a conoscere la tua offerta, il che rende più probabile l’esecuzione dell’azione che volevi che intraprendessero.
Massimizza le entrate
Ogni secondo in più che la tua pagina impiega per caricare le tue conversioni diminuisce del 12%. Ciò significa che se vuoi coinvolgere il pubblico e aumentare il ROI devi assicurarti che la tua pagina mobile soddisfi le aspettative di velocità dei tuoi visitatori.
Il framework AMP ti consente di offrire agli utenti un’esperienza più veloce ovunque, inclusi annunci, pagine di destinazione post clic e siti Web.
Mantenere flessibilità e controllo
Quando adotti il formato AMP hai la possibilità di conservare il tuo marchio sfruttando i componenti web ottimizzati di AMP. Puoi utilizzare i CSS per personalizzare lo stile della tua pagina Web e utilizzare il contenuto dinamico per recuperare i dati dove necessario.
Puoi anche utilizzare i test A / B per testare e creare la migliore esperienza utente mobile possibile per i tuoi clienti.
Riduci la complessità delle tue operazioni
Il processo di creazione delle pagine AMP è piuttosto semplice e diretto. Hai la possibilità di convertire l’intero archivio soprattutto se usi CMS, inclusi Drupal e WordPress.
Non è necessario disporre di competenze speciali per ottimizzare il codice per ogni pagina AMP, il formato AMP è completamente portatile e le pagine AMP sono costantemente veloci, indipendentemente da come l’utente le accede.
Massimizza il ROI
Una volta create, le pagine AMP possono essere distribuite contemporaneamente su un’ampia varietà di piattaforme di distribuzione. Ciò ti consente di pubblicare i tuoi annunci su entrambe le pagine AMP e non AMP, il che significa che puoi creare i tuoi annunci una volta e offrire un’esperienza di marchio memorabile ovunque.
Crea un futuro sostenibile
Il progetto AMP è un’iniziativa open source che protegge il futuro del Web aiutando tutti a offrire un’esperienza utente mobile migliore e più veloce. Puoi aderire al progetto AMP e costruire un futuro sostenibile per la tua azienda su un Web aperto e più veloce aderendo al progetto AMP.
Fornire una migliore esperienza utente
Ovviamente, il vantaggio più ovvio dell’utilizzo di pagine di destinazione che utilizza il formato amp è che fornirà una soddisfazione agli utenti molto più elevata. Quando una persona su due non può preoccuparsi di attendere solo 10 secondi per caricare un sito Web, accelerare il processo del 15-85% può avere un impatto enorme sulla felicità dei visitatori.
Ottieni una spinta SEO
L’algoritmo di Google tiene conto della velocità della pagina e della reattività mobile. Più velocemente la tua pagina viene caricata sui dispositivi mobili, più alta sarà classificata nelle pagine dei risultati dei motori di ricerca.
Tutte le pagine abilitate per AMP appariranno in un formato a carosello anche sopra gli annunci a pagamento nei risultati di ricerca hanno un fulmine verde sotto il titolo.
Sebbene l’utilizzo delle pagine AMP offra molti vantaggi, ci sono anche alcuni svantaggi di AMP.
Nessun JavaScript di terze parti
Poiché non hai la possibilità di utilizzare JavaScript di terze parti, devi dire addio alle funzionalità di analisi e monitoraggio che ti consentono di offrire esperienze pubblicitarie altamente mirate.
Non solo, ma con la versione più leggera di Google di JavaScript, gli elementi di pagina che richiedono il trasferimento di dati non possono essere utilizzati nelle pagine AMP.
Questa è la velocità con cui un ALP viene caricato dopo aver fatto clic sull’annuncio, non solo, ma l’utente può facilmente tornare al contenuto che stava leggendo prima di fare clic sull’annuncio:
Come creare pagine con la funzione AMP con Instapage
Passaggio 1: crea una nuova pagina
Seleziona AMP Page dal modale:
La schermata successiva richiede di assegnare un nome alla pagina. Questo è diverso dal builder standard in cui chiede quale modello desideri utilizzare (o compilare da zero). Le pagine AMP sono costruite da zero, quindi non sono disponibili opzioni per i modelli.
Passaggio 2: aggiungere elementi alla pagina
La seconda differenza che vedrai è che i widget Timer e HTML sono assenti dalla barra degli strumenti, ma hai ancora i widget rimanenti:
AMP non supporta HTML / CSS o JavaScript, quindi non troverai queste impostazioni nel builder Instapage AMP. Vedrai comunque queste opzioni:
Le pagine di destinazione AMP hanno un limite di 75 KB e ogni widget nel builder Instapage AMP è ponderato. Durante la creazione di una pagina, un validatore opera in background in modo che la tua pagina non superi il limite di 75 KB. Se raggiungi l’80% del limite, questo indicatore di avviso appare nella parte inferiore dello schermo:
Passaggio 3: creare una variante al test A / B
Fai clic su “Crea un test A / B” e aggiungi una nuova variante o importane una tua:
Con la nuova variante, puoi duplicare, mettere in pausa, rinominare, trasferire o eliminare in qualsiasi momento:
Passaggio 4: convalidare la pagina
Mentre continui a costruire e ti avvicini al limite di 75 KB, viene visualizzato un altro indicatore che richiede di convalidare la pagina per confermare che rientri nei limiti accettabili:
Se la pagina supera la convalida, vedrai questo messaggio sullo schermo:
Dopo aver finito e fatto clic su Pubblica, verrai avvisato se superi il limite di 75 KB:
Una volta convalidata, la tua pagina è pronta per essere pubblicata.
Passaggio 5: pubblica
Puoi selezionare uno dei due metodi dopo aver fatto clic sul pulsante di pubblicazione blu:
Per WordPress, installa e accedi al plug-in Instapage sul tuo sito Web e pubblica la nuova pagina di destinazione post-clic AMP su WordPress :
Altrimenti, inserisci il tuo dominio e sottodominio:
Non appena la pagina è online, vedrai il logo AMP accanto alla pagina nella dashboard:
Se le tue pagine mobili presentano alte frequenze di rimbalzo e basso coinvolgimento dei visitatori a causa della bassa velocità di caricamento delle pagine, la creazione di pagine AMP è un’ottima soluzione.
Il framework AMP implementa tecniche di ottimizzazione che aiutano non solo la velocità della pagina, ma offrono agli utenti un’esperienza mobile piacevole. La creazione di pagine di destinazione post-clic sull’annuncio AMP ti consente di offrire ai tuoi visitatori esperienze post-clic ottimizzate, rapide e pertinenti.
Instapage è attualmente l’unica piattaforma di pagine di destinazione post clic che ti consente di creare pagine di destinazione ottimizzate per dispositivi mobili utilizzando il framework AMP di Google. le pagine di destinazione post clic create con AMP hanno un caricamento quasi istantaneo e uno scorrimento regolare.
Inizia subito a creare pagine AMP con Instapage per creare una migliore esperienza di navigazione mobile, migliorare i tuoi punteggi di qualità e generare più conversioni.
Google AMP su WordPress: come si attiva e configura
Per poter utilizzare le pagine AMP nel tuo sito, puoi utilizzare il plugin AMP di AMP Project Contributors.
Una volta installato, tutti gli URL dei tuoi post avranno una versione /amp/. Puoi aprirne uno e aggiungere “/amp/” alla fine per visualizzarli, come ho fatto con il post nell’esempio qui sotto.
C’è anche un editor che ti permette di personalizzare alcune opzioni della versione AMP dei tuoi post. Lo trovi nella tua Bacheca alla voce Aspetto > AMP. Ti permetterà di modificare le impostazioni principali della pagina AMP attraverso la funzione Personalizza di WordPress.
Se dovessi riscontrare dei problemi, esistono dei plugin che ti possono aiutare a risolvere gli errori CSS e JavaScript su AMP.
Probabilmente il metodo più semplice per risolvere errori Render-Blocking JavaScript and CSS è quello di installare ed attivare il plugin Autoptimize.
Con più di 400,000 installazioni attive e valutato con 4.7 stelle su 5 è senza dubbio uno dei plugin più popolari plugin per la messa a punto della velocità di caricamento su WordPress.
Il plugin AMP ti consente anche di aggiungere il codice Google Analytics specifico per le pagine AMP, all’interno del menu AMP > Analytics. Copia il codice di esempio che ti viene fornito, inseriscilo all’interno del campo Configurazione JSON e sostituisci “UA-XXXXX-Y” con il tuo ID di monitoraggio di Analytics.
Guarda la Guida amp fatta da google per ulteriori informazioni
