PWAMP è un nuovo acronimo che rappresenta la congiunzione tra PWA e AMP. Questa unione di tecnologie è molto promettente, dal punto di vista dello sviluppo di un futuro sito web andrebbe considerata, soprattutto con l’arrivo dell’indice mobile-first.
Annunciato nel lontano novembre 2016, l’indice mobile-first rappresenta un cambio di direzione di Google, dettato dal crescere delle ricerche da dispositivi mobili. Con questo nuovo indice Google passa dal classificare i siti Web non più in base al loro contenuto desktop, bensì in base ai contenuti fruibili da mobile.
Cos’è l’indice mobile-first?
Per quelli di voi che potrebbero non sapere cosa sia l’indice mobile-first o cosa significa per i webmaster, ecco un breve riassunto. Dall’inizio del 2018, il modo in cui Google indicizza i contenuti su Internet si basa sulla versione mobile del tuo sito Web e non più sul desktop.
Cosa significa questo per il mio sito web?
Per molti webmaster non ci sarà molto da fare. Se disponi di un sito web mobile con design responsive, il cui contenuto visto da cellulare è esattamente lo stesso che da desktop, allora sei a posto. Se tuttavia, hai:
- un sito mobile dinamico (intestazione VARY)
- un sotto-dominio separato m. per dispositivi mobili
- un sito responsive ma mostri agli utenti meno informazioni su un dispositivo mobile rispetto al desktop
allora è il caso di programmare una ristrutturazione considerando la logica del mobile-first.
Perché Google sta passando ad un indice mobile-first?
Con il numero di ricerche mobili che superano quelle eseguite da desktop, non è un segreto che Google stia lavorando duramente per migliorare il web mobile. Il modo in cui i siti web vengono mostrati ad un utente mobile è stato a lungo un punto focale per Google. Dalla velocità di caricamento al miglioramento dell’usabilità e fruibilità dei contenuti, Google vuole che designer e sviluppatori pensino prima di tutto all’utente mobile.
Spingendoci verso un indice basato sui contenuti mobili, Google sta costringendo (nel bene o nel male) i webmaster, i progettisti e gli sviluppatori a conformarsi per stare al passo con i tempi. Mentre molte persone potrebbero dire che progettano e sviluppano “mobile first”, la realtà è che la maggior parte si concentra ancora sull’esperienza utente da desktop.
Questo sta per cambiare.
Come affrontare l’indice mobile-first
Se hai già un sito mobile responsive che rispecchia il tuo desktop, non c’è molto che devi fare. Garantire il caricamento rapido delle pagine è un’area in cui ci possono essere guadagni marginali. I siti con caricamento rapido sui dispositivi mobili tendono ad essere fruiti meglio e più a lungo. In un articolo del 2016, Think with Google suggeriva che i siti per dispositivi mobili dovessero essere caricati in meno di 3 secondi. Avevano scoperto che il tempo medio di caricamento dei siti eCommerce negli USA era di 6.9 secondi. Tra tutte le varie ottimizzazioni che si possono fare ad un sito web, velocità di caricamento e UX sono due aree in cui è possibile apportare netti miglioramenti.
Ti consiglio di concentrarti sulla velocità del sito dato che è una delle aree principali con cui puoi migliorare l’esperienza mobile, inoltre la velocità è un aspetto importante per l’indice mobile-first.
Ovviamente ci sono altri elementi da considerare per designer e sviluppatori. Per approfondire potresti leggere la guida per caricare più velocemente le pagine del tuo sito web.
3 modi per velocizzare il tuo sito web mobile
Anche se la velocità di caricamento della pagina può essere un fattore di ranking ci sono guadagni molto marginali quando si tratta di siti web veloci o super veloci. Se il punteggio della tua pagina è 85/100 nel test di Google Page Speed Insights oppure 100/100, ci sarà una minima differenza nella tua capacità di ranking. Esistono tuttavia grandi vantaggi in termini di esperienza utente:
- Migliora il tasso di conversione
- Fidelizza i clienti
- Riduce la frequenza di rimbalzo
Sebbene nessuno di questi elementi sia direttamente (e giustamente) un fattore di ranking, potrebbero giocare un ruolo importante nella capacità del sito web di generare profitto. Diamo un’occhiata a 3 modi per velocizzare la tua esperienza mobile.
AMP (Accelerated Mobile Pages)
Il progetto AMP (Accelerated Mobile Pages) è un’iniziativa open source di Google per migliorare l’ecosistema mobile. Grazie al codice HTML ridotto all’osso utilizzato da AMP, le pagine web vengono caricate molto più velocemente rispetto al normale HTML, anche quando la rete dati disponibile è molto lenta.
Google memorizza nella sua cache i tuoi contenuti per velocizzare ulteriormente il tempo di caricamento e di transizione dalla pagina dei risultati alla tua pagina AMP. Tutto ciò si traduce in un’esperienza utente più veloce e più snella e dovrebbe, a sua volta, portare ad una migliore visibilità nei risultati di ricerca (hai presente il carosello AMP?).
Ecco alcuni vantaggi e svantaggi del passaggio ad AMP:
Pro
- Migliora le prestazioni del tuo server: se vedi un volume elevato di traffico proveniente da dispositivi mobili, passare a AMP ridurrà il carico sul tuo server e migliorerà le sue prestazioni.
- UX migliorata: un’esperienza di caricamento mobile più rapida ha l’effetto di migliorare l’esperienza dell’utente. I siti che sono passati a AMP hanno riportato tassi di rimbalzo più bassi, più tempo dedicato alla pagina ed, in certi casi, aumento delle conversioni.
- Visibilità degli annunci – anche se ci sono stati alcuni problemi iniziali di compatibilità con gli annunci pubblicitari (AdWords & Co), questi sono stati risolti. Una revisione del rendimento degli annunci in AMP da Double Click nel 2016 ha mostrato che, rispetto alle pagine non AMP, gli annunci su AMP hanno portato a:
- Maggiore visibilità per gli editori
- Il 90% + degli editori ha registrato maggiore coinvolgimento e tassi di conversione più elevati
- La maggior parte degli editori ha registrato un eCPM più elevato (Entrate/Impressioni)
Contro
- AMP ha un piccolo set di elementi HTML, JavaScript e CSS – ci sono limitazioni alle personalizzazioni che puoi fare e la rimozione dal tuo sito attuale di alcuni elementi chiave HTML, JS e CSS può, a volte, portare a pagine che convertono meno della controparte “classica”.
- Siti tutti uguali – apri 10 pagine AMP di siti differenti, ti sembreranno tutte uguali. Con AMP le possibilità di customizzare l’aspetto del sito sono basse.
- Tempo – per diversi CMS sono disponibili plug-in che rendono rapida la convalida AMP, tuttavia dovrai dedicare del tempo per ottimizzare la versione finale, ottenere l’AMP giusto e ottenere il massimo da questo formato. Se disponi già di un sito con prestazioni elevate su dispositivi mobili, potrebbe essere più conveniente dedicare il proprio tempo ad altri elementi.
- I tuoi contenuti verranno memorizzati nella cache su google.com, questo porta alcune restrizioni ai dati di analisi che puoi estrarre.
Avevo scritto una guida per implementare AMP che ti potrebbe interessare: Implementare ed ottimizzare AMP per la SEO.
PWA (applicazioni Web progressive)
Le PWA sono un’alternativa al passaggio a AMP. In questo blog ho attivato le funzionalità PWA a novembre 2016 ma AMP è un progetto che non ho mai sposato (almeno in questo sito).
Le PWA sono anche una buona alternativa alle tradizionali app native per dispositivi mobili. Sono relativamente facili da gestire e non richiedono permessi particolari e nessuna installazione in quanto sono essenzialmente solo pagine web.
Ecco alcuni dei pro e contro delle PWA:
Pro
- Caricamento rapido: il Service Worker consente alla tue app di caricarsi quasi istantaneamente e in modo affidabile, indipendentemente dal tipo di connessione di rete utilizzata dall’utente. Le pagine PWA possono anche essere rese disponibili offline poiché il contenuto può essere memorizzato nella cache locale del dispositivo.
- Presenza sulla home del telefono – I banner per l’installazione di PWA offrono la possibilità di consentire agli utenti di aggiungere rapidamente e senza problemi la tua app Web alla schermata principale, semplificando l’avvio e il ritorno alla tua PWA.
- Compatibilità con i motori di ricerca – Dal momento che le PWA sono essenzialmente siti Web, sono indicizzabili dai motori di ricerca e riconosciute dal file Manifest.json e dalla registrazione del Service Worker, a differenza delle applicazioni native.
- Linkabile e condivisibile – Dal momento che le PWA sono essenzialmente pagine Web, gli utenti sono in grado di condividere e aggiungere rapidamente e facilmente ai segnalibri l’URL, a differenza delle applicazioni native.
Contro
- Le versioni più recenti di Chrome, Safari, IE, Opera e il browser Android Samsung supportano PWA, alcuni browser predefiniti personalizzati e proprietari non le supportano. Ad ogni modo i browser compatibili rappresentano più del 90% degli utenti.
- Non esiste un archivio centrale di download, come un App Store: se stai pensando di sostituire la tua app nativa con una PWA, tieni presente che non è necessario l’App Store. La PWA è disponibile navigando il sito web.
Puoi trovare ulteriori informazioni sulle PWA sul sito web di Google Developers oppure nella guida presente su questo sito: Come creare una Progressive Web App – PWA.
PWAMP (Web App progressiva con pagine mobili accelerate)
PWAMP è un termine che è stato coniato per la prima volta dal Googler Gary Illyes alla SMX Advanced di Seattle nel giugno 2017. Nella sua nota iniziale, Illyes ha parlato dell’importanza della velocità dei siti mobili e ha suggerito un mix ibrido di un’applicazione web progressiva – PWA e di una pagina mobile accelerata – AMP. Obiettivo finale deve essere offrire un’esperienza migliore e più rapida agli utenti mobili.
Un sito PWAMP utilizza fondamentalmente l’AMP HTML, CSS e Javascript ridotto ed è costruito come una PWA. L’uso del codice AMP spoglio rende le pagine leggere, il che garantisce un’esperienza estremamente veloce. Combina un codice leggero con i vantaggi di caching di una PWA e avrai in mano tutti gli ingredienti per un super sito a caricamento rapido!
Pagine AMP con funzionalità PWA
Le pagine AMP possono utilizzare molte funzionalità delle PWA, a condizione che provengano dal dominio del tuo sito anziché da una AMP Cache sui server di Google. Ciò significa che le funzioni PWA non entreranno in gioco quando si consuma una pagina AMP all’interno di una piattaforma come Google o Bing, ma saranno disponibili sulla pagina successiva, quando l’utente si muove su tuo dominio.
AMP come punto di ingresso nel tuo PWA
Il punto di forza esclusivo di AMP è la consegna quasi istantanea della prima visualizzazione, una caratteristica che rende AMP la soluzione perfetta per la prima interazione dell’utente con il tuo sito.
Le applicazioni web progressive consentono una maggiore interattività, maggiori funzionalità e maggiore coinvolgimento, ma il loro primo caricamento non è ottimale come in AMP. Il Service Worker del sito infatti accelera soltanto i caricamenti successivi al primo.
Una buona strategia consiste nel rendere l’entry point nel tuo sito una pagina AMP, quindi scaldare le funzionalità PWA che si attiverà al proseguimento della navigazione utente.
AMP come origine dati per il tuo PWA
Una delle caratteristiche principali di AMP è che è facile e sicuro da incorporare. Se stai realizzando un’applicazione Web progressiva, puoi ottenere gli stessi vantaggi e ridurre drasticamente la complessità del back-end e del client utilizzando le pagine AMP come origine dati per la tua PWA.
Per implementare una PWA in una pagina AMP è necessario caricare il file Manifest.json con <link rel=”manifest” href=”/manifest.json”> ed il Service Worker con il tag <amp-install-serviceworker>.
Diamo un’occhiata ad alcuni dei potenziali pro e contro della costruzione di un sito web PWAMP:
Pro
- Caricamento ultrarapido: poiché i siti web PWAMP impiegano tutte le caratteristiche migliori di AMP e delle PWA, questo li renderà estremamente veloci sia al primo caricamento che nei successivi. HTML, CSS e JS combinati con l’impiego del Service Worker dovrebbero essere consegnati agli utenti in meno di 1 secondo.
- Accessibile offline – dato che i siti web PWAMP sono configurati come una PWA, gli utenti sarebbero in grado di memorizzare nella cache locale del proprio dispositivo il contenuto di una o più pagine del tuo sito per la lettura successiva, offline.
- Search engine friendly: un sito PWAMP è individuabile da tutti i motori di ricerca, il che significa che il tuo contenuto (iper veloce e di ottima qualità) ha potenziale per posizionarsi molto bene.
Contro
- Convalidare un sito web PWAMP potrebbe essere un pochino più complicato rispetto alla validazione di un sito AMP.
Maggiori info su PWAMP:
Sommario
Ora è il momento di valutare quello che stai offrendo ai tuoi utenti mobile. Hai un’app nativa? Il tuo sito mobile è responsive? Quanto è veloce il tuo sito attuale sui telefoni? Una volta ottenute le risposte a queste domande chiave, sarai in una posizione migliore per decidere se passare ad una PWAMP.
Se le persone non stanno scaricando la tua app nativa, se il tuo attuale sito mobile è diviso da quello desktop o se il tuo sito web è lento da caricare, le PWA potrebbero essere un’ottima soluzione che soddisfi tutte le tue esigenze.
Una cosa chiara è sono tempi entusiasmanti con molte opportunità di sviluppo lato mobile. Ti esorto come webmaster, marketer, designer o sviluppatore a iniziare a pensare seriamente alle migliori opzioni per i tuoi clienti e all’esperienza mobile che vuoi offrire.
Autore
