Categorias
AMP Accelerated mobile pages

Como trabalhar com imagens no AMP

Quando trabalhamos com AMP temos restrição na utilização de algumas tag HTML e ia tag img se encontra nessa lista. A principal razão é que imagens são responsáveis pela maior parcela no tamanho total de uma aplicação. Por isso o framework tem um cuidado especial no carregamento de images para isso utilizamos o componente amp-img, responsável por série de melhorias em nossa aplicação, por exemplo, lazy-loading e compressão.

Os componentes AMP utilizam web components um conjunto de 4 apis web nativas que permitem a criação de blocos reutilizáveis. A plataforma possui uma série de componentes que agilizam o processo de criação de nossa aplicação. Os componentes priorizam accessibilidade e performance, caso queira conferir a lista completa só acessar a página de catálogo de components, mas para esse tutorial vamos especificamente iremos utilizar <amp-img>.

amp-img

Parece um componente simples mas tem uma série de melhorias de performance com lazy-load, resize e compressão de images. Mas para a redimensionamento de image acontecer precisamos sempre especificar a altura e a largura das imagens. O componente espera os seguintes parâmetros:

  • alt – texto alternativo assim como tag img precisa para produzir um conteúdo mais acessível.
  • width e height – necessário para definir as dimensões de nossa imagem
  • src – assim uma uma tag img define o endereço de nossa imagem
  • layout – estilo de layout que a image terá, AMP possui os seguintes formatos: fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive

Assim que sabemos como utilizar amp-img nosso componente ficará da seguinte forma:

<amp-img src="./assets/images/caipirinha.webp" 
    alt="About Caipirinha"
    width="700" 
    height="526" 
    layout="responsive">
</amp-img>

Fallback

WebP formato 25% a 30% menor que os formatos tradicionais, mas surgiu recentemente e atualmente é suportado por 80% dos broswers(Ago 2019), como podemos ver na imagem abaixo:

Caso queiramos utilizar Webp sem penalizar os usuários dos browsers antigos podemos adicionar um fallback em nosso amp-img sinalizado pela propriedade fallback. e a utilização ficará da seguinte forma:

<amp-img src="./assets/images/caipirinha.webp" alt="Sobre Caipirinha"
          width="700" height="526" layout="responsive">
            <amp-img alt="Sobre Caipirinha"
            fallback
            width="700"
            height="526"
            layout="responsive"
            src="./assets/images/caipirinha.jpeg"></amp-img>
        </amp-img>

Como podemos ver acima isso mesmo o componente de fallback fica dentro do nosso componente principal assim o AMP ficará responsável de verificar se o browser do usuário possui suporte ou não para o formato webp e carregar apenas uma imagem.

Esse post faz parte do conteúdo auxiliar do curso de AMP. Mais posts sobre AMP você confere aqui. Exercícios e exemplos você irá encontrar no meu github. Próximo post iremos falar mais sobre AMP components, caso tenha alguma dúvida deixe um comentário.

Categorias
AMP Accelerated mobile pages

Criando primeira página AMP

Novo curso em meu canal do YouTube sobre AMP já está no ar:

Nos primeiros vídeos e posts eu fiz a apresentação do nosso projeto. Agora vamos aprender a criar nossa primeira página e ver quais os requisitos básicos para publicar nossa primeira página válida.

Requisitos básicos

  1. Primeiro precisamos sinalizar que temos conteúdo AMP através de um emoji de raio ou adicionando a palavra AMP em nossa tag HTML
  2. Carregar o script da biblioteca
  3. Utilizar ferramentas como validador para deixar nossa página 100% compatível

AMP validator

O validator é importante por duas razões:

  1. Manter a qualidade do seu código como acessibilidade e performance
  2. Somente conteúdo válido será entregue pelo AMP cache
  3. Não fique desmotivado caso tenho uma série de erros de validação isso é um sinal que você terá uma série de melhorias em seu código

Para utilizar o Validator você pode utilizar 4 versões:

Vamos utilizar um simples código HTML para fazer nossa primeira conversão, para ativar o validator precisamos adicionar o atributo amp na tag Para validator reconhecer o conteúdo adicionamos em nossa tag HTML o parâmetro amp:

<!DOCTYPE html>
<html amp>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <meta name="description" content="nossa primeira página amp">
  <head>
    <title>Como validar uma página AMP</title>
  </head>
  <body>
    Olá AMP
  </body>
</html>

Quando testamos o código acima no validator web temos o seguinte retorno:

web validator

No caso esteja utilizando a extensão Chrome o retorno será através de um ícone no topo superior direito.

AMP Cache

AMP cache é utilizado por mecanismos de busca como Bing e Google eles realizam o preload da primeira página de sua aplicação assim realizando o carregamento quase que instantâneo de sua aplicação.

O cache realiza optimização automática de sua aplicação com:

  • Cache images e fonts
  • Comprime images
  • Converte images em formatos como Webp caso o browser suporte
  • Limpeza do HTML para prevenir ataques XSS

Anatomia de uma página AMP

Todas as páginas AMP iniciam com o mesmo código base com requisitos obrigatórios:

  • Atributo AMP na tag html
  • viewport tag
  • Chamada para o JavaScript da biblioteca
  • Boilerplate CSS

Esse código é chamado de AMP boilerplate, podemos gerar o nosso código boilerplate através da página amp.dev/boilerplate lá podemos realizar uma série de configurações em nosso código base, chamada de fontes, suporte a service worker, SEO e Google Analytics:

Tela de configuração do amp boilerplate

Como vimos na validação anterior apenas um markup básico não é suficiente para criar uma página válida. Aplicando as regras que vimos anteriormente a nossa estrutura básica ficará da seguinte forma:

<!DOCTYPE html>
<html amp>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <meta name="description" content="Este é um Boilerplate AMP.">
    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Como validar uma página AMP</title>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <link rel="canonical" href=".">
  </head>
  <body>
    Olá AMP
  </body>
</html>

Agora temos uma versão válida, como qualquer arquivo HTML uma página AMP precisa de uma tag head e tag body. Mas com uma atenção a três items. A script tag que carrega o script da biblioteca, canonical tag que iremos entrar em detalhes posteriormente e uma tag stile com o CSS boilerplate. Com isso temos o seguinte resultado:

Canonical tag

Um dos pré requisitos para ter uma página válida é a tag canonical ela é responsável por informar se conteúdo carregado possui uma versão não AMP, para o mecanismos de busca não identificar sua página AMP como conteúdo duplicado. Caso possua apenas a versão AMP aponte para própria página. em nosso caso na linha 11 definimos nossa propriedade com “.”

Viewport meta responsável por definir como sua aplicação vai responder visualmente a múltiplos devices. Na linha 10 temos o CSS responsável por esconder o conteúdo da página enquanto a aplicação é processada pelo JavaScript. Você não precisa editar esse arquivo mantenha do jeito que copiar.

Por fim temos o carregamento do JS da biblioteca, a primeira tag “link” na linha 7 é responsável por realizar o preload do script e na linha seguinte tag “script” realiza o carregamento detalhe para async dentro da tag ele determina que nosso script será carregado de forma assíncrona.

CSS

Ok, temos nosso markup básico mas caso queiramos carregar um arquivo CSS teremos um seguinte erro no validator:

Mensagem não ajuda muito mas isso significa que a tag link com AMP só é válida para fonts e além disso para um set específico de fontes:

  • Fonts.com: https://fast.fonts.net
  • Google Fonts: https://fonts.googleapis.com
  • Font Awesome: https://maxcdn.bootstrapcdn.com
  • Typekithttps://use.typekit.net/

No caso do style customizado teremos que adicionar de forma Inline, isso é um requisito para reduzir o número de requisições e também ajudar no cache de sua aplicação. Além disso ele precisa ser adicionado em uma tag <style amp-custom> e os requisitos são os seguintes

  • 50kb por tag
  • Somente uma tag por página
  • O uso de !important é totalmente proibido
  • Seletores CSS não podem começar com ‘-amp-‘

O projeto usado no curso está no repositório: https://github.com/fellyph/the-best-caipirinha/ as aulas serão separadas por branches, no próximo post vamos ver como trabalhar com imagens.

Categorias
AMP Accelerated mobile pages JavaScript Tutoriais

Introdução ao AMP

AMP ou Accelerated mobile pages surgiu para solucionar um problema antigo das aplicações web relacionado a performance, o fato que muitas das aplicações web são desenvolvidas nos grandes centro onde as empresas e usuários tem facilmente acesso a conexão rápida. Quando as aplicações são testadas nos grandes centros não levam em conta o tempo de carregamento da aplicação em uma conexão lenta, e um dos dos objetivos do AMP foi solucionar este problema e e entregar essa informação priorizando performance.

Sabemos conexões rápidas não se aplica ao resto do planeta muitas regiões ao redor do globo continuam tendo dificuldade de acessar conteúdo online. Como podemos promover a inclusão desses grupos preocupado com esse problema o time do Google criou o projeto open source chamado Accelerated Mobile Pages posteriormente chamado apenas de AMP.

Mas esse problema também afeta os grandes centros usuários mobile com conectividade limitada também tem sua experiência prejudicada, todos esses problemas aumentam o tempo de carregamento e na exibição de elementos na tela. Além do fato que aplicações de alta performance ajudam na taxa de conversão usuários, que tais usuários estão cada vez mais utilizando aplicações web através de dispositivos moveis.

AMP permite a criação de sua aplicação em um curto espaço de tempo, isso através de componentes criando um ambiente de fácil manutenção além promover melhores praticas como:

  • Performance
  • Acessibilidade
  • Confiabilidade
  • Design responsivo

Além disso AMP reduz a complexidade do seu código, mas sem perder o controle de sua aplicação você continua com a capacidade de adicionar código CSS para customizar sua aplicação. O set de componentes já existentes ajudam na agilidade na criação de novas aplicações presando a performance. AMP é um projeto open source a comunidade sem está criando novos componentes e novas versões da aplicação e a base do seu código sempre será atualizada

Como AMP funciona

AMP possui três pilares:

  • AMP HTML extende HTML básico criando novas tags criando novas features, por trás das cortinas ele trabalha com web components
  • AMP JS controla a execução de javascript também adicionando melhorias de performance como tree shaking.
  • AMP Cache armazena o conteúdo da aplicação.

A performance dentro de projetos AMP é possível por conta de alguns pontos chaves que iremos listar a seguir.

JavaScript assíncrono

com javascript podemos modificar todos os aspectos de uma página, mas também bloquear o seu processamento caso não especificarmos que o seu carregamento não afete a renderização da página. Nesse caso todo o carregamento de JavaScript em AMP é feito de forma assíncrona para não afetar a entrega do conteúdo.

Por isso AMP restringe o carregamento de JavaScript escrita pelo autor nesse caso temos que utilizar tags especiais para incluir interação com o usuário.

Evita que extensões de terceiros bloqueiem a renderização

AMP não permite que extensões como, lightboxes, instagram, embers, tweets bloqueiem a renderização do seu conteúdo. Muitos desses items enquanto fazem requisições para suas respectivas APIs bloqueiam a renderização da sua aplicação, mas isso não significa que que você não poderá utilizar esses recursos AMP tem uma série de componentes para interagir com outras plataformas.

Tamanho de todos os recursos estaticamente

Recursos como imagens, iframes ou anúncios, precisam informar seu tamanho no HTML, de modo que AMP possa determinar o tamanho e a posição de cada elemento antes que os recursos sejam baixados. AMP carrega o layout da página sem esperar o download de nenhum recurso.

AMP separa o layout HTML dos recursos externos, isso para priorizar a entregar com conteúdo mais rápido possível. Apenas uma solicitação HTTP é necessária para o todo o layout do documento (+ fontes). Como AMP é otimizado para evitar recálculos de estilo no seu navegador, não haverá nenhum novo layout após a ultima requisição.

Gerenciamento de Javascript de terceiros

AMP mantém todos os scripts de terceiros fora do caminho crítico da renderização das páginas. JS de terceiros gostam de usar carregamento síncrono para executar suas tarefas para garantir sua execução mas isso acaba aumentando o tempo de carregamento da aplicação.

Páginas AMP permitem o carregamento de scripts de terceiros mas apenas em iframes. Com isso o carregamento fica isolado e não afeta o processamento principal de nossas páginas. Mesmo que eles afetem o estilo da página o impacto será mínimo.

Atualizando o post enquanto estava escrevendo este post

CSS inline e com tamanho limitado

O CSS externo como sabemos bloqueia a renderização de nossa página, nas páginas AMP somente estilos inline são permitidos, com isso temos uma requisição a menos em nossa aplicação e uma renderização crítica de nossa aplicação web.

Além disso a folha de estilo in-line é limitada para um máximo de 50kb. Embora esse tamanho seja grande o suficiente para páginas muito sofisticadas, ele ainda exige que o autor mantenha o CSS limpo.

Carregamento eficiente de fontes

As fontes web são uma parte visual importante das nossas aplicações web, portanto, a otimização de fontes é um ponto crucial de nossa aplicação algumas web fonts são bem pesadas aumentando o tamanho total da nossa aplicação. AMP realiza optimização no carregamento de fontes e realiza o preload nossas fontes.

Animações somente utilizando a GPU

O único modo de ter uma aplicação de alta performance é realizado o uso eficiente dos recursos e utilização da GPU é um recurso importante para isso. Todas as animações com AMP são executadas pela GPU assim liberando a thread principal para processamento crítico de nossa aplicação.

Priorização do carregamento dos recursos

AMP controla o carregamento de todos recursos: com isso os recursos serão carregados quando realmente necessários utilizando técnicas como lazy-load e prefetch.

Além disso AMP possui uma lista de prioridade exemplo, imagens estão no topo da lista enquanto ads estão no final dessa lista. Outro fator importante para priorização é quais os recursos estão sendo exibidos para o usuário.

Utilização de novas API para reduzir o tempo de carregamento

A nova API preconnet API é usada intensamente para garantir as solicitações HTTP sejam feitas o mais rápido possível. Com isso a página pode ser pre carregada em background, por isso algumas vezes quando clicamos nos primeiros resultados de uma busca no Google temos o carregamento instantâneo.

Embora o pré-processamento possa ser aplicado a todo o conteúdo da web, ele também ajuda na largura de banda e o uso de CPU.

Web Components

Com AMP HTML temos a possibilidade de utilizar uma variedade de componentes web, utilizando somente elementos nativos da plataforma o framework disponibiliza uma série de componentes reutilizáveis para entregarmos uma aplicação interativa.

Esse são alguns dos items relevantes na plataforma a lista completa você pode encontrar na documentação em amp.dev. Em meu canal do youtube estarei rodando um curso sobre o framework onde você pode conferir a playlist do curso aqui: https://www.youtube.com/playlist?list=PLmIA3VZysEqQxsVcZ7u2ZHOnh78eIOKON

Também confira mais posts na página da categoria AMP.