Como Usar amp-img e amp-video para Acelerar Seu Site

() translation by (you can also view the original English article)

AMP, em resumo, é um método para otimizar sites para serem mais rápidos e performáticos.

AMP vem de "Páginas Mobile Aceleradas" e, embora o foco seja performance em dispositivos móveis, o ganho em velocidade é bom também para dispositivos não móveis. AMP contém um conjunto de métodos de otimização que oferecem várias regalias, mas o poder de tornar o site mais rápido é mais evidente em sites que tem muita imagem e vídeo.

Uma vez que sites mais rápidos tem visitantes mais engajados, ranks em buscas potencialmente maiores (e, assim, mais exposto), definitivamente, vale a pena pensar sobre AMP ao criar o próximo mostruário do seu trabalho.

AMP é um projeto de código aberto com suporte do Google e está em desenvolvimento desde Setembro de 2015, com versões AMPs de sites aparecendo nos resultados da busca desde 24 de Fereiro desse ano. Cobrimos o AMP desde seu lançamento, logo, é uma boa ideia ler "Projeto AMP: Seu Site Ficará Mais Rápido?" se quiser ter uma ideia melhor antes de seguir.

Nesse artigo, veremos muitas informações sobre o valor geal de usar AMP, mas detalharemos os aspectos mais relevantes ao se trabalhos com imagem e vídeo: os elementos customizados do AMP, <amp-img> e <amp-video>.

Lighthouse at sunset — Lighthouse, por ssuaphoto/PhotoDune. AMP pode ajudar seus sites a saírem melhor nas pesquisas.

O Que São <amp-img> e <amp-video>?

Ao criarmos páginas de acordo com os requerimentos do AMP, usaremos uma série de elementos customizados ao invés de alguns elementos padrões que estamos acostumados.

Ao invés de usar <img>, usaremos <amp-img>
Ao invés de usar <video>, usaremos <amp-video>

Ao usarmos esses elementos customizados, estaremos usufruindo, automaticamente, dos benefícios do AMP. Vejamos quais são e porque vale levar em consideração.

Por Que Usar <amp-img> e <amp-video>?

Sabemos que AMP deve ajudar-nos a acelerar sites, mas o que <amp-img> e <amp-video> oferecem especificamente? Os benefícios mais pertinentes são os seguintes.

Carregamento Sob Demanda

Por padrão, se tivermos uma página com várias imagens, todas imagens são carregadas de uma só vez. Isso pode aumentar bastante o tempo de carga do seu site. Quanto maior o tempo de carga inicial, mais provável que ivistantes abandonem seu site e pior se sairá nos mecanismos de busca.

Contudo, com uma técnica chamad "Carregamento Sob Demanda", podemos ter apenas as primeiras imagens carregadas e o resto depois. Conteúdo suficiente é carregado para o visitante visualizar a página, e o resto das imagens são "carregads sob demanda" quando o usuário rolar para baixo. Isso pode melhorar muito a velocidade de carga.

Por exemplo, nos testes que executamos como parte do artigo "Projeto AMP: Seu Site Ficará Mais Rápido?", precebemos que, em uma conexão móvel simulada, levou 26 para carregar uma página com 5 imagens de 500kb. Com uma versão AMP do mesmo site, a carga caiu para 16 segundos.

Sem Refluxo de Layout

Uma das maiores vantagens do uso do AMP é que ele evita o problema do múltiplo "refluxo" da página.

Enquanto uma página é servida, os elementos com mídia não carregada não possuem altura ou largura. Assim, o navegador estrutura as coisas como se mídias não fizessem parte da página. Quando a página terminar o carregamento, o layout é recalculado, outros elementos são movidos e redimensionados para caberem ao redor das imagens—isso é o refluxo. Se outras mídias precisarem ser carregadas, haverá refluxo para todas.

Particularmente em aparelhos móveis, visitores podem se sentir frustados se o que estão vendo sair da área de visão por conta do refluxo. Isso pode levar a redução da atenção do visitante ou abandono, especilamente se acontecer muito.

Com AMP, reflow nunca acontece. Isso se dá por cada mídia já possui um espaço reservado com o tamanho exato desde o começo. Assim que a mídia é carregada, ela substitui o espaço reservado e não ocorre refluxo.

Acesso Gratuito a CDN

Armazenamento e banda para grande quantidade de mídia pode ficar caro rápido, e escolher um servidor que as entregue rápido ao reddor do mundo, não é tão fácil.

Ao usar AMP, contudo, temos acesso a CDN fornecido pelo Google, de graça. Enquanto criarmos páginas que passem na validação do AMP, Google irá, automaticamente, guardar cópias do documentos HTML, arquivos JS e imagens na CDN do AMP.

Relativamente Sem Trabalho

A verdade é que a maioria das coisas que o AMP faz podemos fazer sozinhos, com outros scripts ou metodologias. Contudo, uma enorme vantagem em usar AMP é que não precisamos saber os por menores para alcançar otimizações equivalentes.

Ao usar AMP, evitamos escolher, configurar e manter manualmente vários scripts e processos. Só usamos AMP, como prescrito e tudo acontecem no plano de fundo, sem precisar envolver-se manualmente.

Começando com AMP

Antes de destrincharmos <amp-img> e <amp-video> precisamos saber criar uma página AMP com o código base obrigatório. Cobrimos como fazê-lo em outro tutorial, então, vá lá e leia "Como Criar Páginas AMP Básicas do Zero"

Não é preciso seguir todo o tutorial, baste ler até ao final da seção chamada "Lidando com CSS Em Linha" e é possível voltar para cá.

Como Usar <amp-img>

Em uma página AMP, usaremos <amp-img> para carregar toda e cada imagem. Vejamos como usar o código corretamente e o que cada um dos atributos associados fazem.

(Podemos ver a documentação completa de <amp-img> no site referência do projeto AMP).

Inclusões Essenciais

Ao adicionar o elemento <amp-img> há alguns atributos essenciais que precisamos incluir. Assim como o elemeno <img>, precisamos do atributo src para especificar o local da imagem e do atributo alt para o texto alternativo.

Também é requerido no AMP que especifiquemos height e width, todas as vezes. Isso é porque AMP usa os atributos height e width configurar o tamanhos dos espaços reservados antes da imagem carregar.

Não é preciso se preocupar com imagens responsivas, mesmo com dimensões fixas, porque o AMP tem funcionalidade inclusa que lida com ajustes responsivos, que veremos depois.

Um exemplo básico do <amp-img> com essas inclusões essenciais é:

1	<amp-img src="/img/amp.jpg"
2	width="1080"
3	height="610"
4	alt="an image"></amp-img>

Usando srcset

O elemento <amp-img> provê um atributo srcset que pode ser usado para especificar imagens alternativas para se usar seja em larguras diferenes ou em densidades de pixel diferente.

É usada da mesma forma que no elemento <img> padrão, então podemos saber mais sobre o atributo em: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset

Por exemplo, para prover imagens diferentes em densidades de pixel diferentes, podemos usar:

<amp-img src="/img/amp.jpg"
  srcset="amp@1x.jpg 1x, img/amp@2x.jpg 2x"
  width="1080"
  height="610"
  alt="an image"></amp-img>

Ou para carregar imagens dependendo da largura da área de visualização podemo usar:

<amp-img src="/img/amp.jpg"
  srcset="/img/amp.jpg 1080w, /img/amp-600.jpg 600w, /img/amp-300.jpg 300w"
  width="1080"
  height="610"
  alt="an image"></amp-img>

Nota: se usamos valores contendo w o atributo src será ignorado em navegadores que suportam srcset.

Adicionando Atribuição

Se precisamos dar crédito a alguma imagem, podemo usar o atributo attribution, por exemplo:

<amp-img src="/img/amp.jpg" 
  width="1080"
  height="610"
  attribution="CC courtesy of Cats on Flicker"
  alt="an image"></amp-img>

Estilizando Espaços Reservados

Se queremos controlar a aparência dos espaços reservados na página, podemos fazê-lo usando CSs que mire no elemenot amp-img. Por exemplo:

1	amp-img {
2	background-color: grey;
3	}

Como Usar <amp-video>

Em uma página AMP, uamos <amp-video> sempre que queremos embutir um vídeo que hospedamos. Se busca embutir vídeos de outros lugares, como doYouTube ou por iFrame, podemos usar outros elementos, como <amp-youtube> ou <amp-iframe>.

(Podemos ver a documentação completa de <amp-video> no site referência do projeto AMP).

Inclusões Essenciais

Como com <amp-img>, há atributos essenciais ao usar <amp-video>. Novamente, src é obrigatório para a localização do vídeo e tanto height e width também são requeridos, para AMP poder estruturar corretamente a página durante a carga.

Um exemplo básico com os atributos obrigatórios seria:

1	<amp-video src="/video/tokyo.mp4"
2	width="480"
3	height="270">
4	</amp-video>

Adicionando Uma Alternativa

No caso de vídeo não carregar ou não aparecer por algum motivo, é possível usar uma alternativa ao aninhar uma <div> dentro do elemento <amp-video>. A <div> deve ter o atributo fallback.

Por exemplo:

<amp-video src="/video/tokyo.mp4"
  width="480"
  height="270">
  <div fallback>
    <p>Video could not be loaded. Please check that your browser supports HTML5 video.</p>
  </div>
</amp-video>

Adicionando Várias Fontes

O elemento <source> pode ser aninhado dentro do elemento <amp-video>, provendo vários formatos e maximizar a probabilidade de compatibilidade com vários navegadores.

Isso funciona da mesma forma que no elemento <video> do HTML5, então o link a seguir para maiores detalhes: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source

Como por exemplo:

<amp-video src="/video/tokyo.mp4"
  width="480"
  height="270">
  <div fallback>
    <p>Video could not be loaded. Please check that your browser supports HTML5 video.</p>
  </div>
  <source type="video/webm"
    src="/video/tokyo.webm">
  <source type="video/ogg"
    src="/video/tokyo.ogg">
</amp-video>

Configurando um "Poster"

Antes de um vídeo ser executado, o primeiro frame será mostrado por padrão. Contudo, se quisermos customizar o que é motrado, podemos especificar uma imagem com o atributo poster.

Por exemplo:

<amp-video src="/video/tokyo.mp4"
  poster="/img/tokyo.jpg"
  width="480"
  height="270">
</amp-video>

Atributos Extras

Assim como os apresentado acima, há outros atributos extras que podemos usar com o elemento <amp-video>. Eles são:

Autoplay

Por padrão, vídeos não tocam automaticamente. Para sobrescrever isso, usamos o atributo autoplay:

<amp-video src="/video/tokyo.mp4"
  autoplay
  width="480"
  height="270">
</amp-video>

Controls

Controles no vídeo não aparecerão a menos que adicionemos o atributo controls:

<amp-video src="/video/tokyo.mp4"
  controls
  width="480"
  height="270">
</amp-video>

Loop

Para um vídeo repetir indefinidamente, usamos o atributo loop:

<amp-video src="/video/tokyo.mp4"
  loop
  width="480"
  height="270">
</amp-video>

Muted

Para silenciar o som de um vídeo, adicionamos muted:

<amp-video src="/video/tokyo.mp4"
  muted
  width="480"
  height="270">
</amp-video>

O Atributo "layout"

Os elementos <amp-img> e <amp-video> do AMP podem ter o atributo layout com um entre seis valores, cada um fazendo-os comportarem-se diferentes:

responsive
fill
fixed
fixed-height
flex-item
nodisplay

Vejamos rapidamente o que cada um faz.

(Veja a documentação completa de layout aqui: https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md)

responsive

A configuração "padrão" deveria ser responsive na maioria dos casos - usemo-na se não soubermos o que escolher. Ela fará o elemento expandir à largura máxima do elemento pai e manterá o proporção.

A possibilidade adicionar esse atributo é a razão de não ter de se preocupar com responsividade, mesmo com valores para height e width nos elementos.

fill

A opção fill é quase igual a responsive, contudo, o elemento expandirá tanto à largura quanto à altura do parente, independente da proporção.

fixed

Usando fixed, o layout manterá o elemento com a largura e altura especificadas, sem poder dimensioná-lo.

fixed-height

Com fixed-height, o elemento tomará toda a largura do elemento pai, mas manterá a mesma altura.

flex-item

Se aplicamos display: flex; ao pai de algum dos elementos, podemos usar flex-item para fazê-lo tomar todo o espaço disponível dentro do elemento pai. Se vários filhos do mesmo pai usam flex-item, serão distribuídos igualmente.

nodisplay

nodisplay é usado para esconder um elemento. Seu propósito é permitir que conteúdo seja mostrado após ação do usuário, como em conjunto ao elemento <amp-lightbox>.

Resumindo

Isso cobre o essencial para trabalhar com os elementos customizados <amp-img> e <amp-video>, desde o porque ao como usuá-los.

AMP provê uma forma fácil e consolidade de otimizar sites cheios de mídia que tornar a experiência mobile muito melhor, e também aprimoram a experiência desktop.

Para mais informação, veja os links abaixo.

Links Relacionados:

Projeto AMP: Seu Site Ficará Mais Rápido?
Como Criar uma Página AMP Básica do Zero
AMP em 60 Segundos
Dica Rápida: Facilitando CSS em Linha do AMP com Jade ou PHP
Apresentando o Projeto Accelerated Mobile Pages, blog oficial do Google
www.ampproject.org
Projeto AMP no Github
Plugin do AMP para WordPress
Accelerated Mobile Pages (AMP) para WordPress na Envato Market