Share
Il progetto AMP è un'iniziativa open source di nuova implementazione supportata da Google, con l'obiettivo di aiutare a rendere i siti più veloci, in particolare quelli che utilizzano pesantemente i media e / o necessitano di monetizzazione. È essenzialmente un modo "senza complicazioni" di mettere a punto quelli che altrimenti potrebbero essere metodi di ottimizzazione un po 'complessi, con la maggior parte dei processi curati dietro le quinte per te.
Nel nostro articolo Progetto AMP: renderà i tuoi siti più veloci ?, entreremo nel dettaglio su ciò che AMP significherà per te dal punto di vista dello sviluppatore e ti fornirà alcuni numeri grezzi su quale tipo di aumento di velocità AMP possa o meno dare tu.
In questo tutorial saremo più pratici, con una guida passo passo per creare effettivamente una pagina AMP da zero, spiegando come eseguire alcune attività comuni nel modo AMP e condividere alcuni suggerimenti mentre andiamo.
Cominciamo!
L'aggiunta di un codice standard standard è dove ogni modello AMP viene avviato. C'è un set di codice che dovere essere presente in ogni modello AMP, altrimenti fallirà la validazione.
Crea un nuovo file HTML chiamato index.html e aggiungere il seguente codice ad esso:
Crea una pagina AMP Crea una pagina AMP
Puoi leggere un'analisi di ogni elemento del codice sopra a:
Puoi (se lo desideri) visualizzare in anteprima il tuo modello AMP appena creato aprendolo direttamente in un browser. Tuttavia, è sempre consigliabile visualizzare l'anteprima su un localhost. Questo approccio simula un host web, quindi l'ambiente in cui viene visualizzata l'anteprima del modello è il più vicino possibile all'ambiente live che verrà distribuito a.
Per questo scopo, consiglio di utilizzare MAMP per Windows o Mac. Se non hai ancora installato MAMP, visita il sito web MAMP e scarica una copia.
Una volta installato MAMP, trovalo htdocs cartella. Su Mac lo troverai in genere / Applicazioni / MAMP / htdocs, e su Windows a C: \ MAMP \ htdocs \.
Al suo interno, crea una nuova cartella per ospitare il tuo progetto, ad es. il mio progetto. Quindi sposta il index.html file creato nel passaggio precedente nella cartella.
Esegui MAMP e dovresti essere in grado di visualizzare l'anteprima del modello AMP andando all'URL http: // localhost: 8888 / myproject / in Chrome. Anche se preferisci un altro browser, utilizza Chrome poiché nel prossimo passaggio utilizzeremo gli Strumenti per sviluppatori di Chrome.
La tua pagina AMP dovrebbe essere attualmente simile a questa:
Se vai a questo URL e non funziona, è possibile che MAMP sia in esecuzione su un numero di porta diverso dall'8888 che vedi nell'URL sopra riportato. Per scoprire se questo è il caso, nell'interfaccia MAMP fare clic sul pulsante che legge Apri la pagina WebStart. Verrai indirizzato a una pagina con informazioni su MAMP e nell'URL vedrai il numero di porta corretto da utilizzare:
Prima di andare avanti, vogliamo attivare la modalità di debug di AMP, quindi se accidentalmente facciamo qualcosa che non supera la convalida, ne sapremo immediatamente.
Per fare questo, aggiungi # Sviluppo = 1 alla fine dell'URL di anteprima, ad es. http: // localhost: 8888 / myproject / # sviluppo = 1.
Quindi apri Strumenti per sviluppatori di Chrome e vai al consolle scheda, dove dovresti vedere quanto segue Alimentato da AMP ⚡ HTML ... messaggio visualizzato:
Man mano che sviluppi la tua pagina, se qualcosa non supera la convalida AMP vedrai un messaggio di errore nella console. Al momento non abbiamo messaggi di errore e vediamo invece "Convalida AMP riuscita", facendoci sapere che tutto funziona come dovrebbe essere.
Insieme al codice boilerplate che hai già aggiunto, hai la possibilità di aggiungere alcuni metadati JSON alla sezione head nel formato Schema.org in questo modo:
Questo non è essenziale per passare la convalida AMP, ma è essenziale per essere rilevato da vari luoghi come Google Search News.
Per saperne di più su questa visita di metadati:
Uno dei requisiti di AMP è che tutti i CSS personalizzati devono essere inseriti in linea nel file capo sezione, tra tag.
Nonostante questo requisito, in realtà scrivere i CSS direttamente nella sezione principale non è un flusso di lavoro ideale. Quello di cui hai veramente bisogno è di poter scrivere il tuo CSS in un foglio di stile esterno, come faresti normalmente, quindi fare in modo che il CSS si trasferisca nel posto appropriato nel capo sezioni di tutti i file modello del tuo sito.
Non tratteremo passo dopo passo come procedere qui, ma se desideri sapere come utilizzare un foglio di stile esterno e passare ancora la convalida AMP, segui i passaggi del nostro tutorial per i suggerimenti rapidi Rendi più semplice il CSS in linea di AMP via Jade o PHP prima di procedere.
Ora che hai il tuo codice essenziale, la modalità di sviluppo attivata e (facoltativamente) la gestione del foglio di stile esterna pronta per andare, possiamo ora passare ad aggiungere alcuni media alla tua pagina. Inizieremo con il tipo più comune di media: le immagini.
In AMP non usi il
Da qui in avanti nel tutorial, lavoreremo con un modello esistente per accelerare le cose. Vai avanti ora e prenditi una copia del modello gratuito di Ceevee di StyleShout. Questo modello include alcune immagini che è possibile utilizzare per esercitarsi nell'incorporazione nel documento AMP.
Nei modelli di Ceevee immagini cartella vedrai una grande immagine di dune di sabbia durante la notte. Iniziamo inserendola nel tuo modello immagini cartella e incollarlo nella cartella del progetto.
Quindi, aggiungi il seguente codice per incorporare l'immagine, sopra il h1 tag che sono già in HTML:
Qualsiasi forma di media inserita in una pagina AMP deve avere una iniziale larghezza e altezza impostato, quindi diversamente dall'uso di un img etichetta, in un amp-img tag non puoi lasciare questi attributi fuori.
Se non sei sicuro esattamente di quale dimensione sarà l'immagine, va bene, a condizione che i valori inseriti rappresentino accuratamente le proporzioni. Il larghezza e altezza i valori possono essere considerati come segnaposti, poiché AMP può impaginare la pagina con i valori forniti e quindi apportare modifiche dopo che l'immagine è stata caricata completamente.
Il disposizione l'attributo è ciò che consente ad AMP di regolare la visualizzazione dell'immagine dopo che è stata caricata. Abbiamo impostato il suo valore a di risposta, il che significa che l'immagine manterrà le proporzioni derivate dai valori di larghezza e altezza, ma si restringerà o si espanderà per riempire il suo contenitore. Questo è il motivo per cui anche se non conosci le dimensioni esatte di un'immagine, finché hai le proporzioni che sei a posto.
Salva e aggiorna la tua anteprima e dovresti vedere l'immagine che riempie la tua vista:
Leggi di più amp-img e il disposizione attributo a:
Un elemento comune nel web design oggi è l'uso di un'immagine di sfondo che riempie l'altezza e la larghezza della finestra, creando qualcosa di una presentazione di una pagina. In genere questo viene fatto utilizzando un'immagine di sfondo con il CSS dimensione di sfondo: copertina; applicato ad esso. Tuttavia, nei siti AMP non vogliamo realmente inserire immagini di sfondo di grandi dimensioni tramite CSS in quanto ciò aggirerebbe l'ottimizzazione del caricamento del sistema.
Ora, puoi certamente sostenere che caricare grandi immagini di sfondo non è l'ideale per aumentare la velocità di caricamento, e per questo motivo potresti essere meglio lasciare fuori grandi immagini tutte insieme.
Tuttavia, se è inevitabilmente necessario creare un disegno con un'immagine viewport completa, è comunque possibile almeno toccare la priorità di caricamento di AMP aggiungendola tramite amp-img tag anziché come sfondo. Ecco come puoi farlo, approssimando la tecnica di "copertura" di sfondo nel processo.
Prenderemo l'immagine appena incorporata e la trasformeremo in un'immagine di copertina. Per prima cosa, avvolgere l'immagine con a div tag usando la classe doc_header così hai:
Quindi, se non lo hai già fatto, aggiungine un po ' tag alla sezione head in modo da poter includere alcuni CSS personalizzati. Tra questi tag aggiungere:
.doc_header height: 100vh; colore di sfondo: # 000; overflow: nascosto; posizione: relativa;
Di solito, invece di ciò che vedi sopra, quando crei un'immagine di copertina, un designer imposterà il altezza del html e corpo elementi a 100% e quindi impostare anche la loro sezione di copertina su a altezza di 100%, facendolo riempire il viewport.
Tuttavia questo approccio non funzionerà con AMP poiché il CSS che carica applica lo stile altezza: auto! importante; sul corpo elemento, impedendo un'impostazione di altezza: 100%; dal lavoro.
Quindi, invece, se hai davvero bisogno di qualcosa per essere all'altezza della finestra che puoi usare altezza: 100 vh;, come abbiamo fatto con il nostro doc_header classe. Il vh unità rappresenta "altezza del viewport" e un valore di 100VH equivale al 100% dell'altezza del viewport.
Se salvi e aggiorni il tuo sito ora dovresti vedere che il div "doc_header" riempie esattamente il viewport.
Al momento però, l'immagine non riempie necessariamente il div "doc_header". Se il viewport è più alto di quanto non sia largo, ci sarà un'area nera vuota sotto di esso.
Per risolvere questo problema aggiungi la classe doc_header_bg alla tua amp-img tag come questo:
Quindi aggiungi al tuo CSS:
.doc_header_bg min-height: 100vh;
Questo codice garantirà che l'altezza dell'immagine non sia mai inferiore a quella del viewport.
Sfortunatamente, sarà ancora schiacciato a larghezze più strette, quindi non ha un aspetto elegante quanto l'uso di un'immagine di sfondo. Tuttavia, è un'approssimazione simile a quella che possiamo ottenere usando ancora il amp-img elemento.
Ora aggiungeremo alcuni caratteri web personalizzati nel nostro modello. Quando lo fai con AMP hai tre metodi di caricamento che passeranno la validazione:
Accentsconagua
@ Font-face Caricamento di un carattere Google dovrebbe essere fatto tramite un elemento di collegamento in testa, utilizzando l'URL fornito per il carattere (s) che si desidera in https://www.google.com/fonts.
Per il nostro modello useremo Open Sans e Libre Baskerville.
Per caricare questi due caratteri, aggiungi questo codice alla tua sezione principale:
Ora aggiungeremo del testo alla nostra area di copertina del sito, a cui applicheremo i nostri nuovi caratteri web. All'interno del div "doc_header" esistente, sotto l'immagine, aggiungi un nuovo div alla classe doc_header_inner:
Dentro quel div aggiungi il seguente codice:
Simula la copertina dell'immagine di sfondo
Questa è una pagina di base creata per mostrarti come lavorare con il progetto AMP. In questa sezione di copertina l'immagine di sfondo utilizza l'ottimizzazione del caricamento AMP. Le icone social di seguito utilizzano il caricamento personalizzato dei caratteri conforme a AMP. Continua a leggere per vedere altri modi di utilizzare AMP.
Ora aggiungi il seguente al tuo CSS personalizzato:
body font-family: 'Open Sans', sans-serif; font-size: 1rem; altezza della linea: 2; colore: # 838C95; .doc_header_inner position: absolute; larghezza: 85vw; larghezza massima: 64rem; superiore: 50%; a sinistra: 50%; transform: translate (-50%, -50%); imbottitura-fondo: 2rem; allineamento del testo: centro; h1.doc_header_title font: bold 5.625rem / 1.1em 'Open Sans', sans-serif; colore: #fff; letter-spacing: -0.125rem; margine: 0 auto 1rem automatico; text-shadow: 0 0.0625rem 0.1875rem rgba (0, 0, 0, .8); @media (larghezza massima: 35rem) h1.doc_header_title dimensione carattere: 12vw; p.doc_header_text font-family: 'Libre Baskerville'; altezza della linea: 1,9; colore: # A8A8A8; margine: 0 auto; larghezza: 70%; text-shadow: 0 0.0625rem 0.125rem rgba (0, 0, 0, .5); .doc_header_text span, .doc_header_text a color: #fff; .doc_header_inner hr width: 60%; margine: 1.125rem auto 1.5rem automatico; border-color: # 2F2D2E; border-color: rgba (150, 150, 150, .1);
Il codice sopra riportato è solo un normale CSS allo scopo di presentare il nostro testo appena aggiunto, tuttavia noterai che il processo di applicazione dei nostri caratteri Google in un modello AMP non è diverso dal solito. Tu usi il famiglia di font proprietà con il valore del carattere scelto, ad es. font-family: 'Libre Baskerville';
Al momento di salvare e aggiornare il tuo sito dovresti vedere entrambi i Google Fonts ora applicati al testo nella sezione di copertina:
In seguito aggiungeremo un carattere personalizzato che non è disponibile né da Google Fonts né da Fonts.com, ed è Font Awesome. Spesso, se usi Font Awesome, puoi caricarlo tramite MaxCDN, tuttavia AMP non lo consentirà poiché il CDN non è una delle due origini di font approvate. Come tale, ci occuperemo del caricamento di noi stessi tramite @ Font-face.
Per caricare autonomamente il font, devi prima scaricare i file dei font, che puoi fare su https://fortawesome.github.io/Font-Awesome/. Nota che hai solo bisogno di "Font Awesome", non di extra "Forte "Strumenti fantastici che vengono offerti durante il download.
Una volta scaricato il file zip Font Awesome, estrailo e copia il file font cartella che contiene nella cartella del progetto.
Al tuo CSS, aggiungi il seguente codice:
/ * Font Awesome * / @ font-face font-family: 'FontAwesome'; src: url ('fonts / fontawesome-webfont.eot? v = 4.0.3'); src: url ('fonts / fontawesome-webfont.eot? # iefix & v = 4.0.3') format ('embedded-opentype'), url ('fonts / fontawesome-webfont.woff? v = 4.0.3') format ( 'woff'), url ('fonts / fontawesome-webfont.ttf? v = 4.0.3') formato ('truetype'), url ('fonts / fontawesome-webfont.svg? v = 4.0.3 # fontawesomeregular') format ( 'SVG'); font-weight: normal; stile font: normale; .fa display: inline-block; font-family: FontAwesome; stile font: normale; font-weight: normal; altezza della linea: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: in scala di grigi; .fa-facebook: before content: "\ f09a"; .fa-twitter: before content: "\ f099"; .fa-google-plus: before content: "\ f0d5"; .fa-linkedin: before content: "\ f0e1"; .fa-instagram: before content: "\ f16d"; .fa-dribbble: before content: "\ f17d"; .fa-skype: before content: "\ f17e"; / * / Font Awesome * /Raccomando di inserire il codice sopra nella parte superiore del tuo CSS personalizzato per mantenere le cose organizzate. Questo codice viene caricato nei nostri file di font personalizzati e crea classi che possono essere utilizzate per aggiungere icone di carattere a un design: è lo standard CSS fornito da Font Awesome.
Quindi aggiungi anche questo CSS:
.doc_header_social margin: 1.5rem 0; padding: 0; font-size: 1.875rem; text-shadow: 0 0.0625rem 0.125rem rgba (0, 0, 0, .8); .doc_header_social li display: inline-block; margine: 0 1rem; padding: 0; .doc_header_social li a color: #fff; .doc_header_social li a: hover color: # 11ABB0;
Questo extra CSS aggiunge uno stile specifico al nostro modello che useremo per impostare una riga di icone sociali collegate.
Aggiungi questo HTML dopo il
Se aggiorni il tuo sito ora dovresti vedere una riga di @ Font-face icone sociali potenziate nella parte inferiore del testo che abbiamo aggiunto in precedenza:
amp-font ElementoPer garantire che i visitatori non finiscano di vedere un sito danneggiato se i font personalizzati non vengono caricati correttamente, AMP fornisce il amp-font elemento per consentire di creare fallback.
Per far funzionare questo elemento, la prima cosa che devi fare è caricare lo script AMP che lo abiliti. Nella tua sezione principale, aggiungi questo codice:
Ora con il amp-font elemento pronto per l'uso, possiamo averlo aggiungere una classe al html o corpo tag se il nostro font non riesce a caricare. Aggiungi questo codice alla fine del tuo modello, prima della chiusura
Diamo una rapida occhiata agli attributi impostati in questo elemento. Per prima cosa impostiamo layout = "nodisplay" che garantisce che l'elemento sia invisibile.
Successivamente, l'attributo famiglia di font è impostato per FontAwesome, che dice ad AMP che vogliamo tracciare il caricamento del font chiamato "FontAwesome". Assicurati che questo valore corrisponda esattamente al famiglia di font impostazione nel tuo @ Font-face Codice CSS.
L'attributo tempo scaduto è impostato per 3000, il che significa che consentiremo fino a tre secondi prima che il carattere venga caricato prima di passare a un fallback. Puoi cambiarlo con qualsiasi valore tu preferisca.
Finalmente, abbiamo impostato on-error-add-class a font-awesome-mancante. Se il font non viene caricato dopo tre secondi, questa classe verrà aggiunta al html o corpo elemento. Possiamo scegliere come target questa classe per creare il nostro comportamento di fallback aggiungendo questo codice al nostro CSS personalizzato:
.font-awesome-missing .doc_header_social display: none;
Se il font non riesce a caricare dopo tre secondi, il CSS di cui sopra si attiverà e nasconderà l'intera barra delle icone sociali, in modo da non avere alcun display rotto.
Ora prova a rinominare temporaneamente la cartella dei font del progetto in modo che i caratteri non vengano caricati, quindi aggiorna la pagina e dovresti vedere l'area delle icone social nascosta. Dovresti anche vedere la classe font-awesome-mancante aggiunto al html o corpo etichetta. Ripristina la cartella dei caratteri con il nome corretto e dovresti vedere di nuovo le icone dei caratteri durante l'aggiornamento.
Maggiori informazioni su amp-font elemento a:
Successivamente, impareremo come aggiungere un video di YouTube alla modalità AMP, ma prima dobbiamo aggiungere un piccolo codice di manutenzione per creare una sezione in cui il video si possa sedere.
Dopo il div "doc_header", sostituire quello esistente h1 tag con questo HTML:
Incorpora un video di YouTube
Quindi aggiungi questo al tuo CSS personalizzato:
.standard_width width: 100%; larghezza massima: 75rem; margin-left: auto; margin-right: auto; .standard_padding dimensionamento della casella: border-box; imbottitura: 6rem 3rem; .video_wrap background-color: # 2B2B2B;
Potresti aver notato nel CSS qui sopra impostato dimensionamento della scatola: border-box; nel standard_padding classe.
La ragione di questo è in AMP non è possibile utilizzare la tecnica comune di includere * ridimensionamento della scatola: border-box, perché il * il selezionatore è considerato troppo affamato di risorse. Come tale dovrai impostare dimensionamento della scatola: border-box; per gli elementi specifici su cui hai bisogno, o semplicemente per gestire l'imbottitura e confina alla vecchia maniera - con una calcolatrice o contando sulle dita.
amp-youtube ElementoOra che la sezione è configurata e pronta per i contenuti, aggiungeremo un video di YouTube utilizzando l'abitudine di AMP amp-youtube elemento. Utilizzando questo elemento al posto del codice di incorporamento standard di YouTube, possiamo attingere a tecniche di ottimizzazione del caricamento simili a quelle di amp-img.
Per cominciare, dovrai aggiungere il codice JavaScript AMP necessario per abilitare il nuovo elemento. Nella sezione head, incolla:
Ora aggiungi il seguente codice HTML all'interno delle div che hai appena aggiunto, sotto h2 tags:
Per specificare il video che vuoi caricare, imposta il suo ID YouTube sull'attributo Dati-VideoId. Oltre a questo attributo, il amp-youtube elemento è molto simile al amp-img elemento.
Abbiamo il larghezza e altezza impostato 600 e 270 rispettivamente. Proprio come con le immagini, i video devono avere una larghezza e un'altezza iniziali impostate.
Quindi usiamo layout = "reattivo" in modo che il video si adatti alle dimensioni del suo contenitore, mantenendo le proporzioni tratte dalle sue impostazioni di altezza e larghezza.
Salva e aggiorna il tuo sito e prova a ridimensionare il viewport. Dovresti vedere che il tuo video di YouTube si espande o si restringe per adattarsi, mantenendo le proporzioni corrette.
Maggiori informazioni su amp-youtube elemento a:
AMP ha elementi personalizzati aggiuntivi per il caricamento di contenuti da siti specifici, come amp-twitter, amp-instagram e alcuni altri. Per i contenuti di siti di terze parti che non hanno il proprio elemento AMP dedicato, c'è il amp-iframe elemento invece. Ora utilizzeremo questo elemento per caricare una mappa di Google nella nostra pagina.
Crea un contenitore per la mappa aggiungendo questo codice sotto le tue div "video_wrap":
Utilizza l'incorporamento iframe, ad es. Mappe
Ora, come con il amp-font e amp-youtube elementi, dovremo caricare lo script AMP che guida il amp-iframe elemento. Aggiungi questo alla tua sezione di testa:
Quindi, all'interno del tuo nuovo div e sotto il h2 tag, aggiungi questo codice:
Ricarica il tuo sito e dovresti visualizzare una mappa di Google ora installata.
Oltre a ottimizzare il caricamento, utilizzare il amp-iframe L'elemento aiuta a garantire che il contenuto visualizzato attraverso l'iframe non si comporti in modi indesiderati, come l'esecuzione di JavaScript che potrebbe causare un caricamento lento o forzare gli annunci popup. Il sandbox l'attributo consente di determinare il livello di controllo applicato sul contenuto iframe.
Per i dettagli completi su amp-iframe e i suoi controlli "sandbox", visita:
Una delle cose che può sembrare limitante quando si lavora con AMP è la regola che non è consentito JavaScript personalizzato. Il rovescio della medaglia però, ci sono elementi personalizzati inclusi in AMP che mirano a fornire alcune delle funzionalità che potreste normalmente implementare tramite JavaScript personalizzato.
Ad esempio, invece di caricare uno script lightbox personalizzato puoi usare il amp-image-ID elemento. Creeremo una galleria di immagini che utilizza questo elemento ora.
Inizia creando un contenitore per la tua galleria aggiungendo questo codice proprio sopra il tuo amp-font etichetta:
Crea una galleria con i lightbox
Aggiungilo anche al tuo CSS personalizzato:
.portfolio_wrap background-color: #ebeeee; .portfolio_inner padding: 4rem 6rem; .portfolio_item dimensionamento della scatola: border-box; fluttuare: a sinistra; larghezza: 25%; allineamento del testo: centro; imbottitura: 0.8rem; .clearfix: before, .clearfix: after content: ""; display: tabella; .clearfix: after clear: both;
Come i nostri ultimi elementi personalizzati, sarà necessario caricare uno script AMP per abilitare il amp-image-ID elemento. Aggiungi questo alla tua sezione di testa:
Ora siamo pronti per iniziare la creazione della nostra galleria lightbox. Inizia aggiungendo questo codice all'interno delle tue nuove div, sotto il h2 tags:
Questo amp-image-ID elemento creerà il display effettivo lightbox con le immagini ingrandite al suo interno. Vogliamo nasconderlo fino a quando un utente non ha fatto clic su un'immagine che desidera ingrandire, quindi l'abbiamo impostata su layout = "nodisplay".
Nota: abbiamo impostato l'ID di questo elemento lightbox1.
Per aggiungere un elemento alla galleria, aggiungi questo div al di sotto del amp-image-ID elemento:
Poi dentro aggiungi questo amp-img codice:
Per la maggior parte, questo amp-image l'elemento è uguale a quello che abbiamo aggiunto in precedenza, tuttavia noterete l'aggiunta di on = "tap: lightbox1". Questo dice ad AMP che quando l'immagine viene toccata / cliccata, la versione più grande dovrebbe essere aperta in una lightbox con l'id lightbox1, cioè il amp-image-ID elemento che abbiamo appena creato.
Aggiungi altre sette immagini alla galleria con questo codice:
Quando salvi e aggiorni, dovresti vedere una galleria sulla tua pagina che assomiglia a questa:
E quando fai clic su una qualsiasi delle immagini dovresti vederla aperta in una lightbox come questa:
