Google AMP - Panoramica
Google Accelerated Mobile Pages(Google-AMP) è il nuovo progetto open source di Google appositamente progettato per creare pagine web leggere utilizzando amp html. L'obiettivo principale di questo progetto è assicurarsi che il codice dell'amplificatore funzioni correttamente e si carichi velocemente su tutti i possibili dispositivi come smartphone, tablet ecc.
Cos'è AMP?
Accerated Mobile Pages (AMP) è il progetto open source di Google appositamente progettato per rendere le pagine web ottimizzate per i dispositivi mobili, rendendo i contenuti più veloci, fluidi e reattivi in qualsiasi browser.
Il sito ufficiale di Google amp è: https://www.ampproject.org/
PERCHÉ AMP?
Qualsiasi utente si aspetta che i siti web caricheranno i contenuti molto velocemente. Tuttavia, questo potrebbe non essere il caso quando le pagine sono quasi inondate di immagini, video, animazioni, widget sociali, il che rende la pagina molto pesante e quindi aumenta il tempo di caricamento. Tale scenario può causare la perdita di utenti del sito Web a lungo termine.
Google AMP è progettato per risolvere questo problema. AMP ha un modo speciale per prendersi cura di immagini, iframe, javascript, annunci, video, animazioni, css, caratteri caricati ecc. I contenuti delle pagine AMP vengono memorizzati nella cache su Google, quindi ogni volta che l'utente fa clic sui risultati di ricerca il il contenuto viene servito dalla cache. Anche la versione cache viene aggiornata tempestivamente in modo che l'utente riceva sempre una nuova pagina aggiornata.
Perché scegliere AMP?
Questa sezione ti spiega perché devi optare per AMP per il tuo sito:
Priorità su Ricerca Google
Oggi quando cerchi qualcosa su Google, troverai un carosello di Google visualizzato in alto con le pagine, seguito dall'elenco delle pagine in risposta alla tua ricerca. Il carosello di notizie visualizzato sono tutti siti AMP validi. Significa che Google dà la priorità alle pagine di amp e le visualizza in base alla classifica nel carosello delle notizie.
Un esempio per una ricerca effettuata su Google con la parola chiave "latest indian news"Viene fornito qui -
Tutte le pagine di alto livello che sono pagine AMP vengono visualizzate all'inizio nel carosello di Google come mostrato nell'immagine sopra.
Una pagina AMP di Google appare come mostrato di seguito quando l'utente cerca qualcosa nella Ricerca Google. Tieni presente che nelle pagine AMP è presente un logo AMP di Google.
Tempo di caricamento più veloce
Quando la tua pagina è convertita in AMP, il tempo di caricamento sarà molto migliore rispetto a una pagina non-amp. Anche il tempo di caricamento più veloce è un fattore importante nel posizionamento della pagina nella ricerca di Google.
Nessun pop-up
L'utilizzo di Google AMP offre una piacevole esperienza di navigazione sul Web poiché l'utente non vedrà alcun popup indesiderato per le pagine progettate con Google AMP.
Genera traffico
Quando la velocità di caricamento delle pagine è veloce, aumenta automaticamente il numero di spettatori e quindi il traffico sulla pagina aumenta.
Come funziona AMP?
I componenti più importanti che vengono utilizzati per costruire il sito web sono javascript, immagini, video, caratteri, css ecc. Il design della pagina AMP viene fatto prendendosi cura di tutti questi fattori in un modo unico. In questa sezione, discutiamo brevemente cosa fa esattamente AMP per rendere le pagine più veloci.
JavaScript asincrono
Javascript gioca un ruolo importante nella pagina, poiché aiuta ad aggiungere interattività alla pagina sotto forma di animazioni, modifiche al DOM, ecc. Inoltre aggiunge lentezza alla pagina e può bloccare il rendering di altri contenuti sulla pagina.
In che modo AMP affronta JavaScript?
AMP carica JavaScript in modo asincrono. JavaScript personalizzato è severamente vietato all'interno di una pagina AMP. Tieni presente che AMP ha molti componenti aggiunti, alcuni dei quali sostituiscono i tag html esistenti; ad esempio amp-img, amp-iframe, amp-video, amp-lightbox, amp-animations ecc.
Per ciascuno di questo componente, è presente un file JavaScript da caricare con l'attributo async aggiunto al tag script. Nella pagina sono consentiti solo i file JavaScript relativi ai componenti amp e qualsiasi altro JavaScript all'interno di una pagina AMP o file JavaScript di terze parti non è consentito. Poiché AMP utilizza la cache AMP di Google, i file vengono precaricati dalla cache, velocizzandone il caricamento.
Dimensioni per tag HTML
È obbligatorio fornire le dimensioni per i tag immagine, iframe e video in modo che la pagina amp possa individuare lo spazio sulla pagina senza dover caricare la risorsa. Le risorse da caricare hanno la priorità dalla pagina amp. Al contenuto viene data maggiore priorità rispetto alle risorse da caricare.
Widget sociali / annunci
Amp fornisce componenti speciali, ovvero amp-facebook, amp-twitter, amp-ad, amp-sticky per prendersi cura dei widget sociali da mostrare sulla pagina. Il componente annuncio AMP viene utilizzato per offrire annunci sulla pagina. AMP presta particolare attenzione alla gestione dei componenti e carica i contenuti con una priorità basata sui requisiti.
CSS
Il CSS esterno non è consentito nelle pagine AMP. CSS personalizzato, se presente, può essere aggiunto all'interno del tag di stile utilizzando l'attributo amp-custom. È consentito anche il CSS in linea. AMP riduce le richieste http in tutti i modi possibili.
Caratteri
I caratteri sono consentiti nelle pagine amp e la priorità di caricamento dei caratteri è decisa da AMP.
Animazione
AMP supporta componenti amp-animation e consente la transizione come supportato dai browser moderni.
Considerando tutti i punti sopra elencati, AMP prende una cura molto speciale per la richiesta HTTP fatta per i caratteri, le immagini, i iframe, gli annunci da offrire ecc. Le risorse disponibili above the page vengono visualizzate per prime e successivamente viene data la preferenza per le risorse disponibili below the fold .
Altri punti
La cache AMP di Google è un altro fattore importante che aiuta a rendere i contenuti più velocemente mentre i contenuti vengono recuperati dalla cache.
L'editore deve mantenere due siti amp e non amp page. Ad esempio, considera che il sito ha l'indirizzo -https://www.mypage.com. Quindi, le pagine interne per i non-amp da servire sul desktop sarannohttps://www.mypage/com/news/amp/
In che modo Google identifica le pagine AMP e non AMP?
Ora, vediamo come Google identifica le pagine AMP e non AMP.
Quando la ricerca di Google esegue la scansione della pagina, se capita di ottenere amp in html o <html amp> o <html ⚡>, sa che si tratta di una pagina AMP.
Inoltre, nel caso in cui Google si imbatta in una pagina non amp, prima di conoscere la pagina amp è obbligatorio aggiungere i seguenti tag di collegamento nella sezione principale della pagina html sia per le pagine amp che per quelle non amp.
Page-url per Non amp-page
<link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">Qui rel = "amphtml" è specificato per una pagina non amp in modo che punti alla versione amp, in modo che Google mostri quella giusta in base alla piattaforma.
URL della pagina per amp-page
<link rel = "canonical" href = "https://www.mypage.com/news/myfirstnews.html">Qui rel = "canonical" è specificato in amp page per puntare alla versione standard di html, in modo che Google mostri quella giusta in base alla piattaforma.
Nel caso in cui il tuo sito abbia una sola pagina amp, non dovresti dimenticare di aggiungere rel = "canonical" che punterà a se stesso -
<link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">Il diagramma seguente mostra un riferimento a rel = "amphtml" che punta alla pagina amp e rel = "canonical" a una pagina html standard.
Caratteristiche di Google AMP
In questa sezione, discutiamo delle importanti funzioni disponibili con Google AMP:
Amp Caching
La memorizzazione nella cache di Google Amp è una delle funzionalità principali aggiunte ad amp. Fornisce una rete di distribuzione di contenuti basata su proxy per servire pagine amp pure. La cache di amp è disponibile per impostazione predefinita per tutte le pagine di amp valide. Aiuta a rendere le pagine più veloci rispetto alle pagine non amp. Al momento ci sono 2 provider di cache di amp Google Cache AMP e cache AMP di Cloudflare. Quando l'utente fa clic e viene reindirizzato alla pagina amp, il contenuto viene pubblicato dalla cache di Google.
Componenti dell'amplificatore
Amp ha una lunga lista di componenti progettati per vari scopi. Alcuni di loro sono elencati di seguito:
amp-img - Usato per mostrare le immagini nelle pagine di amp.
amp-iframe- Utilizzato per mostrare iframe con contenuto esterno da mostrare nelle pagine. Tieni presente che l'iframe utilizzato è in modalità sandbox, il che significa che necessita dell'autorizzazione per mostrare i dati nella pagina dell'amplificatore. Quindi i dettagli dell'origine incrociata devono essere specificati per l'attributo sandbox.
amp-video - Per mostrare il video sulla pagina.
amp-audio - Per mostrare l'audio sulla pagina.
amp-datepicker- Utilizzato per mostrare i widget della data sulla pagina. Non devi cercare alcun datepicker di terze parti poiché lo stesso è direttamente disponibile è amp.
amp-story - Un mezzo per visualizzare le tue storie sulla pagina.
amp-selector- È un componente di amplificazione che visualizza il menu delle opzioni e l'utente può scegliere tra le opzioni. Le opzioni visualizzate possono essere testo, immagini o qualsiasi altro componente amp.
amp-list - È un componente amp che chiama un endpoint json CORS ei dati dal file json vengono visualizzati all'interno di un modello.
Pubblicità
La pubblicità è molto importante per gli editori poiché le loro entrate dipendono completamente dagli annunci offerti sulla pagina. Amp non consente l'aggiunta di javascript esterno alla pagina, ma è stato introdotto uno speciale componente amp chiamato amp-ad che si occupa di pubblicare annunci sulla pagina.
La rete pubblicitaria che l'editore desidera pubblicare sulla propria pagina deve essere supportata da amp-ad. Ad esempio, per offrire annunci con doppio clic sulla pagina, è necessario che il doppio clic supporti la pubblicazione degli annunci utilizzando il componente amp-ad. Il codice seguente mostra un tag amp-ad di doubleclick.
<amp-ad width = "300"
height = "200"
type = "doubleclick"
data-slot = "/4119129/ad-layout">
<div placeholder>
<b>Placeholder here!!!</b>
</div>
</amp-ad>Amp supporta anche gli amphtmlad che sono puri ampad sviluppati da componenti AMP e html. Amp supporta anche amp-sticky-ads, un annuncio a piè di pagina visualizzato nella parte inferiore della pagina. I dettagli degli annunci in amp sono discussi nel capitolo sugli annunci di amp.
Widget sociali
I widget sociali come Facebook, Twitter, Instagram sono diventati molto importanti da visualizzare sulla pagina dell'editore, in modo che le pagine siano condivise sui social media. AMP ha esteso i suoi supporti a tutti i widget importanti dei social media da utilizzare nella pagina sviluppando componenti AMP come amp-facebook, amp-twitter, amp-instagram, amp-pinterest ecc.
Amp Media
Un altro componente importante nelle pagine è il supporto per mostrare i video e anche pubblicare annunci tra i video come annunci mid-roll. AMP fornisce un mezzo per farlo utilizzando amp-jwplayer, amp-youtube ecc. Non è necessario caricare alcun file di terze parti aggiuntivo per visualizzare jwplayer, youtube sulla tua pagina.
Amp Analytics
Amp Analytics è un componente AMP utilizzato per tenere traccia dei dati su una determinata pagina. Tutte le interazioni dell'utente sulla pagina possono essere registrate e salvate per analizzare i dati per ulteriori miglioramenti o scopi commerciali.
Animazioni Amp
Amp-animation è un componente di amplificazione che definisce le animazioni da utilizzare su altri componenti di amplificazione. IT supporta l'animazione, transizione che funziona bene con i browser moderni. Non è necessario utilizzare alcuna libreria CSS esterna per eseguire l'animazione e puoi utilizzare il componente amp-animation.
Layout degli amplificatori
Il layout AMP è una delle funzionalità importanti disponibili in google-amp. Amp Layout assicura che i componenti dell'amplificatore siano renderizzati correttamente quando la pagina viene caricata senza causare alcun problema di sfarfallio o scorrimento.
Google AMP si assicura che il rendering del layout venga eseguito sulla pagina prima che vengano eseguite altre risorse remote come la richiesta http di immagini e le chiamate dati. Gli attributi disponibili per il layout sono larghezza / altezza di tutti i componenti dell'amplificatore, attributo di layout con valori come responsive, fill, fixed ecc., Attributo segnaposto da mostrare quando la risorsa impiega tempo per caricarsi o presenta errori, attributo fallback da mostrare quando la risorsa ha qualche errore.
Layout display amplificatore
Amp supporta molti componenti utilizzati per visualizzare i contenuti sulla pagina senza la necessità di alcuna libreria di terze parti o senza dover creare CSS pesanti sulla pagina. L'elenco include
Accordion- Amp-accordion è un componente di amplificazione utilizzato per visualizzare il contenuto nel formato di espansione-compressione. Diventa facile per gli utenti visualizzarlo su dispositivi mobili dove possono selezionare la sezione a loro scelta dalla fisarmonica.
Carousel - Amp-carousel è un componente amp per mostrare un insieme di contenuti simili sullo schermo e utilizzare le frecce per spostarsi tra i contenuti.
Lightbox - Amp-lightbox è un componente di amplificazione che occuperà l'intera visualizzazione e verrà visualizzato come una sovrapposizione.
Slider - Amp-image-slider è un componente amp utilizzato per confrontare 2 immagini aggiungendo un cursore spostandolo verticalmente sull'immagine.
Sidebar - Amp sidebar è un componente di amp utilizzato per visualizzare il contenuto che scorre dai lati della finestra al tocco di un pulsante.
Vantaggi di AMP
Le pagine AMP sono leggere e si caricano più velocemente
Google dà la priorità alle pagine AMP nella ricerca Google. Le pagine AMP sono elencate nel formato carosello nella parte superiore della pagina. Per ottenere un posizionamento più alto, è un buon vantaggio avere le tue pagine in AMP.
Le pagine AMP sono ottimizzate per i dispositivi mobili in quanto il contenuto è reattivo e si adatta bene a tutti i browser senza la necessità di alcuno stile aggiuntivo.
La soddisfazione degli utenti aumenta per le pagine AMP poiché la velocità di caricamento della pagina è più veloce rispetto alle pagine non-amp, risparmiando così larghezza di banda e batteria mobile.
Svantaggi di AMP
Amp possiede i seguenti svantaggi:
L'editore deve mantenere due versioni per le proprie pagine amp e non-amp.
L'utente deve compiere ulteriori sforzi per convertire le pagine non amp in amp. Poiché amp non supporta javascript personalizzato o il caricamento di javascript esterno, lo stesso deve essere ottenuto con tutto ciò che è disponibile con amp.