Share
AMP, in poche parole, è un metodo per ottimizzare i siti Web per essere più veloce e più performante.
AMP è l'acronimo di "Accelerated Mobile Pages", e mentre l'attenzione dichiarata è la performance sui dispositivi mobili, i guadagni di velocità che può portare sono altrettanto utili su dispositivi non mobili. AMP contiene una suite di metodi di ottimizzazione che offrono vari tipi di vantaggi, ma il potere di rendere i siti più veloci è probabilmente più significativo su siti con immagini e video pesanti.
Dato che i siti più veloci sono destinati a visitatori più coinvolti, a posizioni di motore di ricerca potenzialmente più elevate (e quindi a una maggiore esposizione), vale sicuramente la pena di pensare a AMP quando crei la prossima vetrina del tuo lavoro basata sul web.
AMP è un progetto open source con Google dietro, ed è ora in sviluppo da circa settembre 2015, con versioni AMP di siti che appaiono nei risultati di ricerca di Google dal 24 febbraio di quest'anno. Abbiamo coperto AMP dal suo lancio pubblico all'inizio di quest'anno, quindi è una buona idea avere una lettura di "Progetto AMP: renderà i tuoi siti più veloci" se desideri un po 'di background prima di passare a.
In questo articolo troverai molte informazioni sul valore complessivo del lavoro con AMP, ma guarderemo un po 'più direttamente ai due aspetti più rilevanti per lavorare con immagini e video: l'abitudine di AMP
Faro di ssuaphoto / PhotoDune. L'AMP può aiutare i tuoi siti a ottenere risultati migliori nella ricerca.Quando crei una pagina in base ai requisiti AMP, utilizzerai una serie di elementi personalizzati anziché alcuni degli elementi HTML predefiniti che potresti utilizzare per.
Accentsconagua
![]()
Quando utilizzi questi elementi personalizzati, accederai automaticamente ad alcuni dei vantaggi inerenti ad AMP. Diamo un'occhiata a ciò che sono e perché sono degni della tua considerazione.
Sai già che l'AMP dovrebbe contribuire a rendere i tuoi siti più veloci, ma ciò che specificamente fa
Di default, se hai una pagina con più immagini, ogni singola immagine deve essere caricata in un colpo. Questo può facilmente trascinare il tempo di caricamento complessivo del tuo sito a una certa durata. Maggiore è il tempo di caricamento iniziale, maggiore è la probabilità che i visitatori abbandonino il tuo sito e il peggio si può fare nei motori di ricerca.
Tuttavia con una tecnica chiamata "Lazy Loading", puoi avere solo le prime poche immagini caricate con il resto in arrivo. Basta caricare il contenuto per consentire al visitatore di iniziare a visualizzare la pagina e le immagini rimanenti vengono caricate "pigre" quando il visitatore scorre verso il basso. Questo può migliorare considerevolmente la velocità di caricamento.
Per esempio, nei test che ho eseguito come parte del mio articolo "Progetto AMP: renderà i tuoi siti più veloci", ho scoperto che su una connessione mobile simulata ci sono voluti 26 secondi per caricare una pagina con cinque immagini da 500Kb. Con una versione AMP dello stesso sito, il tempo di caricamento è stato ridotto a 16 secondi.
Uno dei vantaggi principali dell'utilizzo di AMP è che evita il problema di avere il layout della pagina "reflow" più volte.
Mentre viene pubblicata una pagina, gli elementi del supporto scaricato inizialmente non hanno altezza o larghezza. Quindi il browser espone le cose come se i media non facessero parte della pagina. Poi, quando un'immagine finisce di caricare, il layout deve essere ricalcolato, con altri elementi spostati e ridimensionati per adattarsi all'immagine, qualcosa chiamato "reflowing". Se anche gli altri media devono ancora caricarsi, la pagina deve ridisegnare ancora e ancora per ogni oggetto.
In particolare sui dispositivi mobili, i visitatori possono essere frustrati se sono già fidanzati e ciò su cui si concentrano improvvisamente salta fuori dalla vista a causa del riflusso. Questo può facilmente portare ad una minore attenzione dei visitatori o all'abbandono del sito, specialmente se accade più volte.
Con AMP, il reflow non si verifica mai. Questo perché ogni pezzo di media ha un segnaposto di dimensioni corrette aggiunto nel layout da word go. Una volta caricato il supporto, sostituisce il segnaposto, senza necessità di reflow.
Lo spazio di archiviazione e la larghezza di banda per grandi quantità di media possono diventare costosi abbastanza rapidamente e scegliere un host in grado di offrire rapidamente agli spettatori di tutto il mondo non è sempre facile.
Tuttavia, quando utilizzi AMP, ottieni l'accesso a un CDN fornito da Google gratuitamente. Finché crei una pagina che supera la convalida AMP, Google memorizzerà automaticamente nella cache i documenti HTML, i file JS e le immagini nel CDN AMP.
La verità è che la maggior parte delle cose che AMP fa per te può anche essere fatta in altri modi tramite vari script e metodologie. Tuttavia, uno degli enormi vantaggi dell'utilizzo di AMP è che non è necessario familiarizzarsi intimamente con gli aspetti tecnici necessari per impostare ottimizzazioni equivalenti.
Usando AMP puoi evitare di scegliere, configurare e mantenere manualmente più script e processi. Invece si usa solo AMP come prescritto e tutto accade in background senza la necessità di un coinvolgimento diretto.
Prima di entrare nello specifico dell'uso
Non c'è bisogno di fare il tutorial completo, quindi se lavori fino alla fine della sezione intitolata "Gestire i CSS in linea" sarai pronto per tornare e riprendere qui.
Su una pagina AMP che utilizzerai
(Puoi trovare la documentazione completa per
Quando si aggiunge un src attributo per specificare la posizione dell'immagine e un alt attributo per impostare un fallback di testo.
È anche un Requisiti in AMP specificato altezza e larghezza ogni volta. Questo perché AMP utilizza gli attributi altezza e larghezza per impostare la dimensione dei segnaposto prima che l'immagine venga caricata.
Se sei preoccupato di come le immagini si comportano in modo reattivo, dato che stai impostando le dimensioni fisse, non preoccuparti perché AMP ha funzionalità incluse per gestire le regolazioni reattive, che toccheremo più tardi.
Un esempio di base del
Il srcset attributo che può essere utilizzato per specificare immagini alternative da visualizzare a diverse larghezze o densità di pixel.
È usato allo stesso modo di un normale
Ad esempio, per fornire immagini diverse con densità di pixel diverse, è possibile utilizzare:
Oppure per caricare immagini diverse a seconda della larghezza del viewport che potresti utilizzare:
Nota, se stai usando valori contenenti w il src l'attributo verrà ignorato nei browser che supportano srcset.
Se devi dare credito a un'immagine che puoi usare attribuzione, per esempio:
Se desideri controllare l'aspetto dei segnaposto visualizzati nella pagina mentre le immagini vengono caricate, puoi farlo con i CSS indirizzati al amp-img elemento, ad esempio:
amp-img background-color: gray;
In una pagina AMP che userai
(Di nuovo, puoi trovare la documentazione completa per
Come con src è necessario specificare la posizione del video e entrambi altezza e larghezza sono richiesti in modo che AMP possa visualizzare correttamente la pagina durante il caricamento.
Un esempio di base con gli attributi richiesti potrebbe essere:
Nel caso in cui il video non venga caricato o visualizzato per un motivo o per un altro, è possibile impostare un fallback annidando a Per esempio: Il video non può essere caricato. Si prega di verificare che il browser supporti il video HTML5. Il Funziona allo stesso modo in un normale HTML5 Come esempio: Il video non può essere caricato. Si prega di verificare che il browser supporti il video HTML5. Prima che la riproduzione su un video sia iniziata, per impostazione predefinita verrà visualizzato il primo fotogramma del video. Tuttavia, se si desidera personalizzare ciò che viene mostrato, è possibile specificare un'immagine utilizzando l'attributo Per esempio: Oltre a ciò che abbiamo discusso sopra, ci sono alcuni attributi extra che puoi usare con Di default i video non verranno riprodotti automaticamente. Per sovrascrivere questo include l'attributo I controlli su un video non appariranno se non aggiungi l'attributo Per fare in modo che un video ripeti all'infinito includi l'attributo Per disattivare l'audio di un video, aggiungi l'attributo AMP di Diamo una rapida occhiata a ciò che ognuno fa. (Trova i documenti di layout completi qui: https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md) L'impostazione del layout "vai a" dovrebbe essere La possibilità di aggiungere questo attributo è il motivo per cui non devi preoccuparti di garantire la reattività nonostante l'impostazione esplicita Il Usare un Con il Se hai applicato il CSS Il Ciò copre tutti gli elementi essenziali per lavorare con l'abitudine di AMP AMP offre un modo consolidato e senza mani per ottimizzare i siti multimediali che rendono l'esperienza mobile molto migliore, migliorando allo stesso tempo l'esperienza desktop. Per maggiori informazioni controlla i link qui sotto.ricaderci.Aggiunta di più fonti
elemento così per i dettagli completi controlla: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sourceImpostazione di un "Poster"
manifesto.Attributi aggiuntivi
Riproduzione automatica
riproduzione automatica:controlli
controlli:Ciclo continuo
ciclo continuo:smorzato
smorzato:L'attributo "layout"
disposizione impostato su uno dei sei valori, ognuno dei quali rende l'elemento si comporta in modo diverso:
di risposta
di risposta nella maggior parte dei casi - usa questo se non sei sicuro di cosa scegliere. Questo farà sì che l'elemento si espanda alla larghezza massima del suo elemento genitore mantenendo le sue proporzioni.altezza e larghezza valori sugli elementi.riempire
riempire l'impostazione è quasi la stessa di di risposta, tuttavia, l'elemento si espanderà alla larghezza massima e altezza del genitore, indipendentemente dalle proporzioni.fisso
fisso il layout manterrà l'elemento all'altezza e alla larghezza specificate senza possibilità di ridimensionamento.-Altezza fissa
-Altezza fissa l'impostazione di un elemento allungherà la sua larghezza per adattarsi all'elemento genitore, ma manterrà la sua altezza uguale. flex-item
display: flex; al genitore di un elemento, puoi usare il flex-item valore di layout per riempire tutto lo spazio disponibile all'interno dell'elemento genitore. Se più bambini dello stesso genitore usano il flex-item layout condivideranno lo spazio allo stesso modo.nodisplay
nodisplay l'impostazione è usata per nascondere un elemento. Lo scopo è quello di consentire la visualizzazione del contenuto in base all'azione dell'utente, ad esempio in concomitanza con Avvolgendo
Link correlati:
