Categorias
AMP Accelerated mobile pages WordPress

A minha audiência caiu com o plugin de AMP, e agora?

Uma pergunta no meu canal chamou-me atenção para fazer este post:

Cara, fiz o amp aqui no meu site, mas as visitas caíram 70%, sabe-me dizer se tem algum motivo principal para isso?

Isso é uma pergunta que as causas podem ser diversas, mas nesse posts vamos listar alguns possíveis problemas, vou focar no plugin oficial do Google, mas algumas regras podem ser aplicadas a outros plugins. Primeiramente você precisa entender como funciona o plugin de AMP, as suas limitações e o modos que ele trabalha, eu tenho o vídeo no meu canal do Youtube onde eu explico mais sobre eles, mas em resumo nos temos:

  • Modo leitor, com uma experiência mais simples onde você não precisa se preocupar como os problemas de javascript.
  • Modo de transição, onde você tem parte do seu conteúdo em AMP e não AMP
  • Modo padrão, onde seu conteúdo por padrão será AMP, mas para isso você precisa utilizar plugins e temas compatíveis.

Uma vez que o seu site já está em produção, o ideal é verificar o desempenho do seu site na versão AMP e não AMP na busca. Os dois primeiros modos disponibilizar duas versões para o seu site se analytics estiver habilitado acompanhe a audiência em ambos e veja se vale a pena ou não ir full AMP.

Falando em Analytics vamos falar o que interessa, a lista de items que pode afetar a sua audiência:

1. Esquecer de ativar o Google Analytics

Parece algo banal, mas é algo bastante comum. Você instala o plugin e não configura o Google analytics e vê a sua audiência despencar, neste caso você não está perdendo audiência, mas está deixando de monitora-la. Quando você trabalha com AMP a forma de adicionar o script de monitoramento do Google Analytics muda, é preciso de uma tag específica para realizar a contagem de visitas do usuário. Você pode realizar a inclusão de diversas maneiras:

  • Adicionando a configuração: para isso você irá precisa do ID do seu Google Analytics, e ir nas configurações do plugin AMP, selecionar analytics e adicionar o código JSON para monitoramento.
  • Segunda forma é através do plugin Site Kit
exemplo da tela de adição do código do analytics

2. Deixar as páginas AMP com erros

O primeiro requisito para a sua página ser indexada nos resultados de busca do Google como uma página AMP, é ser uma página Válida em outras palavras: não deve conter erros AMP.

Se você publicar uma seu projeto cheio de erros AMP, dependendo do formato que você escolher(Leitor, padrão e transição). Você irá tirar todas as suas páginas da busca. O ideal é se você não tem um tema compatível, você deve escolher ou o modo leitor, ou o modo de transição e monitorar os erros da sua página.

3. Mudança de tema junto com a instalação do plugin

Muitas vezes a solução é mudar para um tema compatível, mas antes de fazer a migração você deve prestar atenção em alguns fatores:

  1. Mapa de navegação, preste atenção se o tema tem esquema de navegação similar ao tema que você utiliza. Caso queira realizar a mudança na navegação lembre de submeter o novo sitemap.
  2. O esquema de títulos de páginas permanecem os mesmos.
  3. Desempenho do tema, o tema na versão AMP tem um desempenho melhor ou pior ao seu tema anterior
  4. Monitore os erros 404 da sua aplicação

4. Falta de acompanhamento na transição

Tudo ocorreu bem durante a migração, páginas estão válidas, esquema de navegação não foi alterado, e agora?

Monitore… Monitore… Monitore…

O trabalho de melhoria de um aplicação web é contínuo, muitas vezes as pessoas instalam um plugin e depois largam a aplicação como se tudo já estivesse ocorrendo bem. Sempre é bom acompanhar o seu site e a melhor ferramenta para ver o desempenho de sua aplicação na busca do Google é o Search Console.

Nele você pode acompanhar como o seu site se comporta na busca e quais páginas AMP estão sendo indexadas na busca do Google. Caso escolha o modo leitor e de transição, é muito importante comparar o desempenho entre as duas versões, a versão AMP e a versão AMP. Com isso ver se faz sentido migrar ou não e onde você deve melhorar em sua versão AMP.

Página de monitoramento do Search Console

5. Mudanças nos requisitos da busca

Vale lembrar que você não é o centro do universo, as vezes a mudança na sua audiência pode está relaciona com alguma mudança no rankeamento do Google, por exemplo, Core web vitals são novas regras que alteram os fatores para sua página possuir um bom posicionamento na busca, ele está sendo introduzido gradualmente desde do mês de Julho de 2021.

Dependendo de qual modo você utiliza em sua aplicação para entregar páginas AMP e páginas não AMP sua queda na audiência pode estar ocorrendo na suas páginas não AMP, por exemplo, ou Suas páginas AMP precisam de atenção.

Lembrando que AMP ajuda a melhorar o despenho no front-end de sua aplicação, problemas como entrega de imagens e resposta do servidor pode afetar o tempo de entrega do seu conteúdo.

6. Por fim time que se ganha não se mexe

Se o seu tema não AMP já tem um ótimo desempenho, você possui noções de desenvolvimento e realiza manutenções frequentes na sua aplicação. Você precisa realmente mudar sua aplicação para AMP ?

  • Antes de realizar a migração, teste quão melhor é sua versão AMP comparada a sua versão não AMP?
  • Quanto a versão AMP afeta as funcionalidades da sua aplicação?
  • Quanto tempo você tem para atualizar sua aplicação.
  • Qual é o melhor modo referente a sua aplicação

Alguns casos a instalação de AMP pode não ser necessária, caso você já tenha um tema com um ótimo desempenho, para isso você pode testar sua aplicação na página de relatórios do web.dev

Sempre estude as vantagens de uma tecnologia antes de usar veja os seus pros e contras. Como essa tecnologia se adequa a sua realidade, pois não existe bala de prata e sim existem ferramentas para cada tarefa.

Eu utilizo o plugin do AMP a mais de dois anos, mas claro utilizo o tema padrão do WordPress e não faço uso de nenhum plugin mirabolante, o meu foco principal é o conteúdo e não preciso me preocupar com melhorias de desempenho nas minhas páginas ou melhorias para dispositivos móveis, o plugin toma conta disso tudo pra mim.

Categorias
Tutoriais

Lazy-loading nativo dos browsers

Lazy Loading ou Carregamento tardio para imagens e vídeos é um recurso onde você prioriza o carregamento dos itens visíveis na tela do usuário. O resultado dessa ação melhora o tempo de carregamento para a área visível do usuário e o carregamento de recursos somente quando necessário super relevante para usuários mobile.

Esse Recurso foi introduzido pelo internet Explorer 11 mas nenhum browser implementou o recurso nessa época. Em 2019 o Chrome voltou a colocar o recurso em pauta na versão 76. Atualmente o recurso está disponível para Edge, Firefox, Chrome, Opera e Android Browser. Já no Safari recurso está disponível em formato de teste.

Em Agosto de 2020 o recurso ganhou atenção quando passou a fazer parte do Core do WordPress na versão 5.5. Mas como esse recuso funciona? Nesse posts vamos ver como implementar essa funcionalidade e os requisitos para fazer uso do recurso.

Trabalhando com Lazy-Loading

Para aplicar o lazy-loading em imagens adicionamos o atributo loading na tag img, por exemplo:

<img loading="lazy"src="minha_foto.jpg" />
Code language: HTML, XML (xml)

O atributo loading pode receber os seguintes valores:

  • auto: Executará o comportamento padrão do navegador
  • lazy: A image só será carregada quando o scroll chegar uma distância específica da área visível.
  • eager: Carrega o recurso imediatamente caso esteja localizado na página.

Além da propriedade loading as imagens precisam ter especificadas suas dimensões largura e altura. Isso porque até carregar as imagens o browser não sabe as dimensões da imagem. Além disso a falta de dimensões podem causar mudanças de layout durante o carregamento também um fator que pode comprometer a experiência do usuário.

A definição das dimensões é uma recomendação já antiga antes mesmo da propriedade loading existir. Com o lazy-loading isso se torna mais relevante sem as dimensões o carregamento fica ainda mais dependente dos browsers.

As tags picture, video e iframe também podem fazer o uso do lazy loading como no exemplo abaixo:

<picture> <source media="(min-width: 900px)" srcset="wordcamp.jpg 1x, wordcamp_2x.jpg 2x"> <img src="wordcamp_fallback.jpg" loading="lazy"> </picture>
Code language: HTML, XML (xml)
<video src="./wordcamps/wordcamp_edinburgh_2018.MP4" width="720" height="1280" loop loading="lazy" controls="false" muted></video>
Code language: HTML, XML (xml)
<iframe width="900" height="515" loading="lazy" src="https://www.youtube.com/embed/yT7fCspMrU8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Code language: HTML, XML (xml)

No código anterior temos múltiplas alternativas de carregamento mas o atributo loading só precisa ser definido na tag img.

Carregamento de imagens e sua visualização

A implementação do recurso tenta garantir performance sem afetar a experiência do usuário. Assim o carregamento da imagem irá iniciar quando a imagem atingir uma distância minima da área visível. Mas vale lembrar que o carregamento das imagens ficam dependentes da rede do usuário.

Comparado a algumas bibliotecas de lazy loading a distância implementada pelos browsers que rodam a engine do Chrome são um pouco conservadoras.

Mas no Chrome essa distância não é fixa ele é dependente de alguns fatores:

  • O tipo da imagem que está sendo carregada
  • Se o modo econômico tá habilitado
  • Conexão efetiva do device

Mudanças em 2020

Após a implementação do recurso na versão 76 em Julho de 2020 essa distância foi reduzida baseada nos relatórios recolhidos nos primeiros meses de uso do recurso. Para conexões 4G o primeiro carregamento ficava restrito a uma área de 3000px agora foi reduzido para 1250px. e para conexões lentas de 4000px para 2500px.

Essas medidas reduzem o carregamento médio de imagens em até 40%. O assunto não é muito extenso então vamos ficando por aqui para mais tutoriais acesse a página da categoria tutoriais. Também fiz um vídeo em meu canal onde eu abordo o assunto:

Para mais informações sobre lazy loading acesse o site do web.dev: https://web.dev/native-lazy-loading/.

Categorias
Web

Lighthouse 6.0

Lighthouse para quem não conhece ele é o sistema de auditorias de performance, accessibilidade, SEO e PWA dentro do Chrome Dev tools. Também com a possibilidade de instalação no firefox através de extensão e com NPM.

Nesse mês de maio foi anunciado a versão 6.0 do Lighthouse, que estará disponível na versão 84 do Chrome. Essa nova versão contém as seguintes melhorias:

  • Novas métricas
  • Atualização da pontuação referente a performance
  • Novas auditoria sobre JavaScript não utilizado e Acessibilidade
  • Atualização no Lighthouse CI
  • Agora a aba Audits mudou para Lighthouse
  • Mudanças na emulação mobile
  • Performance Budget

Novas métricas

Largest Contentful Paint(LCP)

Maior pintura com conteúdo é uma medida da experiência de carregamento percebida. Ele marca o ponto durante o carregamento da página quando o conteúdo principal foi carregado e é visível para o usuário. O LCP é um complemento importante para First Contentful Paint(FCP), que captura apenas o início da experiência de carregamento.

Cumulative Layout Shift (CLS)

Deslocamento cumulativo de layout é uma medida da estabilidade visual. Quantifica quanto o conteúdo de uma página muda visualmente. Uma pontuação baixa no CLS é um sinal para os desenvolvedores de que seus usuários não estão passando por mudanças indevidas de conteúdo.

Total Blocking Time(TBT)

Tempo total de bloqueio quantifica a capacidade de resposta de carga, medindo a quantidade total de tempo em que o encadeamento principal foi bloqueado por tempo suficiente para impedir a capacidade de resposta da entrada. O TBT mede a quantidade total de tempo entre a FCP e tempo de interação.

Atualização de pontuação de Performance

A pontuação de performance é baseado nas seguintes métricas:

  • First Contentful Paint – 15%
  • Speed Index – 15%
  • Lagest Contentful Paint – 25%
  • Time to Interactive – 15%
  • Total Blocking – 25%
  • Cumulative Layout Shift – 5%

Lighthouse CI

No último Chrome Dev Summit foi anunciado o Lighthouse CI, um CLI em node de código aberto que realiza auditoria trazendo os resultados do Lighthouse para terminal de linha de comando. Agora Lighthouse tem suporte nativo de vários provedores de integração continua(CI), incluindo Travis, Circle, Gitlab e Github actions.

Para instalar o lighthouse CLI em seu terminal de linha de comando execute o seguinte código:

npm install -g lighthouse

Depois de instalado você pode realizar auditorias rodando o seguinte comado:

lighthouse https://www.example.com --view
Code language: JavaScript (javascript)

O post completo sobre o lançamento você confere aqui: https://web.dev/lighthouse-whats-new-6.0/

Categorias
AMP Accelerated mobile pages WordPress

AMP para WordPress

No post anterior falei sobre plugins de performance para WordPress, agora chegou a hora de falar de outro plugin relacionado a performance o Plugin do AMP para WordPress.

Assistindo conteúdo sobre WP no YouTube, por muitas vezes o plugin é vendido como plugin para deixar o WordPress rápido. Mas como isso é possível?

AMP é uma biblioteca que roda no front-end, ela foca na entrega do conteúdo e na experiência do usuário, ele possui três ferramentas cruciais para melhoria do desempenho:

  • AMP JS – Possui uma série de melhorias relacionadas a performance com tree shaking e lazy loading.
  • AMP HTML – Uma biblioteca de componentes HTML, como, slideshow, light-box, menu slideshow, player de vídeo entre outros.
  • AMP Cache – Esse item é ativado quando sua aplicação possui código AMP válido.

Umas das condições do plugin AMP é liberar a renderização de conteúdo não permitir que scripts terceiros aumentem o tempo de exibição do conteúdo da sua página.

Um bom exemplo de bloqueio da renderização de nossa página é a utilização embed de vídeos do YouTube quando criei o curso de PWA decidi criar uma página com todos os vídeos, inclui 17 embeds em uma mesma página, e o resultado foi o seguinte:

Auditoria de desempenho utilizando chrome devtools

Nos testes realizados na versão semAMP:

  • Primeira impressão de conteúdo é realizada em 3.4 segundos
  • O tempo de interação vai para 29.9 segundos isso significa que um usuário irá levar 30 segundos para interagir com o conteúdo.

O principal problema é causado por conta das várias requisições feita por múltiplos embeds do Youtube, por conta de rodarem um um iframe eles não conversam entre si acabam requisitando os mesmo scripts diversas vezes.

requisições realizadas pela página sem o plugin AMP

Como podemos ver na imagem acima temos varias requisições para o mesmo arquivo JavaScript totalizando 45 requisições, essas requisições aumentam o tamanho total da página, além de todas essas requisições serem disparadas ao mesmo tempo, assim impossibilitando o usuário de interagir com a página.

Quando ativamos o plugin AMP para mesma página temos o seguinte resultado.

Teste performance realizado como o plugin AMP ativo

Como podemos ver temos uma redução no tempo de carregamento e uma melhor na pontuação referente a performance

  • Primeira impressão de conteúdo é realizada em 2,8 segundos
  • O tempo de interação 5 segundo, essa foi a redução mais significativa.

Isso ocorre porque AMP passa a gerenciar esses recursos, como por exemplo conteúdo “embedado”agora o número de requisições JavaScript cai para 15 arquivos:

Requisições JavaScript feitas com o plugin ativo.

Além da redução do tempo de carregamento também temos a redução de transferências de arquivos de 2.2mb para 1.2mb. Essa comparação mostra um dos benefícios de se trabalhar com a biblioteca. Mas antes de sair ativando o plugin precisamos entender como ele funciona.

O plugin

Quando foi lançado em 2016, o AMP teve seu primeiro plugin criado por uma parceria entro Google e Automattic, o plugin era bem experimental. Nessa época outros plugins criados pela comunidade ofereciam muito mais recursos. Por muito tempo utilizei plugins criados pela comunidade.

Em 2019, visitando o stand do Google no WordCamp Europe tive a possibilidade de ver o trabalho feito pelo Google para reativar o plugin do AMP. Era visível nos últimos 2 anos uma movimentação do Google para contribuir com a comunidade WP.

Nessa época decidi baixar o plugin novamente para realizar testes: https://wordpress.org/plugins/amp/

Página principal do plugin do AMP

Depois dos primeiros testes vi que as melhorias eram significativas comparado a última vez que tinha o utilizado o plugin. Os testes foram realizados utilizando o modo Padrão. Para entender mais o Plugin AMP funciona ele possui três modos:

  • Leitor(2016): Onde o usuário tem uma versão mais simples todas as páginas amp serão redirecionadas para uma nova url com /amp no final e o plugin irá gerenciar todos os erros de validação.
  • Transição: O plugin delega ao administrador do conteúdo a escolha de quais as páginas serão exibidas como AMP e não-AMP. O visual segue o mesmo visual do seu tema WordPress.
  • Padrão: Nessa modo sua aplicação irá tornar full AMP. Onde todo o conteúdo da sua aplicação irá utilizar somente em uma versão AMP.

Após ativar o plugin, acessamos no menu lateral do painel de controle da sua aplicação WordPress você irá encontrar a opção AMP.

Acessando o painel do plugin iremos ver as seguinte opções:

tela principal do plugin AMP

Inicialmente temos um banner de boas vindas, em seguida temos duas opções de experiência AMP website e AMP Stories.

  • AMP Website: irá habilitar AMP em sua aplicação, após a seleção dessa opção temos a opção de escolher qual template iremos utilizar
  • AMP Stories: vou dedicar um post para essa sessão mas uma breve introdução stories foi incluído recentemente na plataforma com ele temos a opção de adicionar chamadas aos nossos posts com animações. Caso queira saber mais confira a documentação oficial do AMP Stories.
painel com opções de templates

Como havia mencionado anteriormente, na tela principal do plugin temos a opção de selecionar os templates que iremos utilizar em nossa aplicação. Caso escolha o modo leitor, as páginas e posts que utilizam AMP terão as páginas corrigidas para AMP, automaticamente. É a versão que não requer nenhuma ação por parte do administrador mas sua experiência é bem simple.

Validação de conteúdo AMP

As versões de Transição e Padrão precisam de uma ação do administrador para obter um conteúdo válido AMP. Porque essas versões tentarão ser idêntica a versão não AMP. Para isso o processo de validação precisa ser direcionado pelo administrador da aplicação.

Mas qual a importância de ter um conteúdo válido AMP? Primeiro por uma questão de boas práticas manter a qualidade do código de sua aplicação e Segundo todo conteúdo válido pode fazer uso do AMP Cache.

AMP Cache é recurso disponibilizado por motores de busca como Google e Bing que melhora ainda mais a performance da sua aplicação os resultados vindo dos motores de busca serão servidos pelo AMP cache.

Primeiro item para obter o conteúdo AMP válido é ter um tema compatível, no meu caso que utilizo o Twenty Twenty não precisei realizar nenhuma alteração em meu tema. Segundo passo foi resolver os problemas de compatibilidade com plugins.

Podemos fazer a validação por dois caminhos por índice de erros ou por página. No meu caso não utilizo muitos plugins, apenas um plugin para exibir os códigos dos tutoriais no meu blog, o plugin não era compatível com AMP assim causando problemas de validação, como podemos ver na imagem abaixo:

lista de erros de validação AMP

A solução foi simples navegando na lista de plugins compatíveis achei uma alternativa para esse plugin:

Substitui pelo plugin Syntax-hightlighting Code block e resolvi o problema referentes a plugin. Caso isso não seja possível você pode desabilitar as partes que causam problemas e verificar como o plugin se comporta. Segunda opção é utilizar componentes AMP para substituir plugins posso fazer outro post sobre o assunto, caso tenha interesse.

Analytics

Outro ponto crucial é a para de monitoramento da sua aplicação, caso não utilize nenhum plugin de tracking o plugin disponibiliza uma área para você adicionar o código do analytics com AMP código possui um formato diferente ele trabalha com um formato JSON:

{
    "vars": {
        "account": "UA-doseusite-1"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        }
    }
}

Na sessão do analytics do plugin do AMP você terá mais informações de como adicionar o código analytics mas o formato acima é o esperado no caso da propriedade account deve ser passado o código UA so seu analytics.

Caso não queira se preocupar como código uma alternativa para conectar seu plugin AMP para WordPress com Google Analytics é a utilização do plugin SiteKit, ele sincroniza todos os serviços de tracking:

Plugin site kit by Google

Essa é uma breve intro sobre o plugin do AMP para WordPress em meu canal do Youtube também gravei sobre o assunto:

intro sobre AMP

Caso queira saber mais sobre AMP tenho um curso de desenvolvimento de aplicações AMP em meu canal. E aqui no blog também tenho uma página dedicada sobre o assunto.

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>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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.