Como o plugin de AMP WordPress trabalha com CSS

Blog fellyph cintra - como o plugin de amp trabalha com css

Páginas AMP são simplesmente páginas web, a estilização com AMP é muito similar a estilização tradicional, em outras palavras CSS é essencial para páginas AMP, nesse post iremos entender como o plugin de AMP WordPress trabalha com CSS.

O que é o plugin de AMP WordPress?

O plugin de AMP WordPress foi criado para adaptar o seu conteúdo ao AMP framework, uma biblioteca de componentes focados em performance. Além dessa biblioteca o framework possui uma série de regras focadas em performance onde nesse post iremos abordar as regras focadas em CSS.

Como o plugin trabalha com CSS

O framework AMP possui algumas restrições com CSS para priorizar a performance da nossa aplicação, são elas:

  • Somente estilos inline podem ser utilizados por páginas AMP, e eles são adicionados pela tag <style amp-custom>.
  • A única excessão são para estilos inline são para fontes
  • Componentes AMP já vem com um estilo padrão, para se adaptar ao design responsivo.
  • AMP só permite transições que utilizam GPU
  • !important não é permitido com AMP
  • Arquivos CSS tem o limite de 75KB

Essas restrições são exclusivamente para garantir a performance e usabilidade das nossas aplicações:

  • Muito comum temas WordPress e plugins adicionarem folhas de estilo extra, isso ocasiona num excesso de requisições HTTP causando lentidão no carregamento das nossas páginas.
  • Frequentemente é possível encontrar CSS extremamente complicado que causa a degradação da performance front-end.

Essas são mais de algumas razões a quais o plugin AMP tenta otimizar o carregamento do CSS, especialmente na estrutura tradicional do WordPress a folha de estilo carrega o CSS de todos os templates mesmo sem precisar.

Um dos principais desafios do plugin de AMP WordPress é manter o tema estável e atender a necessidades do AMP para ter um tema WordPress compatível com AMP.

CSS geralmente é mais arte do que programação é muito mais fácil adicionar novas regras que melhorar algo existente, com o tempo o CSS vai ficando inchado e se torna um problema. Além disso, conforme os sites mudam os esforços para reformulação acabam sendo maiores. Assim mais uma vez é mais fácil expandir o CSS do que realizar uma refatoração, precisamos ser muitos disciplinados para manter a qualidade do nosso CSS.

Uma das grandes funcionalidades do plugin de AMP é prover uma melhoria no código CSS para cada página realizando um processamento de CSS, assim utilizando somente o código necessário.

Processamento de CSS

Uma das grandes funcionalidades do plugin de AMP WordPress é relacionado a melhoria do código CSS. O plugin do AMP para WordPress adiciona uma série de etapas no processo de melhoria do CSS que são eles:

  • Coleta: O plugin coleta todos os estilos carregados em elementos link, style e atributos de estilo em elementos.
  • Analise: Atualizar seletores, elementos HTML que serão substituídos por components AMP. Transformar !importantes em seletores de alta prioridade.
  • Tree-shake: se o CSS for maior que 75KB, o algoritimo de tree shacking será aplicado.
  • Priorização: para mitigar as possíveis consequências de remover CSS com o tree-shaking, o plugin prioriza a ordem de estilos elegíveis para remoção:
    • Folhas de estilo do tema pai(não impresso)
    • Folhas de estilo de tema filho (não impresso)
    • Folhas de estilo principais usadas por temas (para blocos)
    • Folhas de estilo de plug-in (não impressas)
    • Folhas de estilo do wp-includes
    • CSS adicional do personalizador
    • Estilos adicionados por blocos e widgets
    • Dashicons
    • Imprimir folhas de estilo
    • CSS da barra de administração
  • Armazenamento temporário: estilos analisados são minimizados, serializados e armazenados numa API de transient, qual realiza o cache temporariamente dessas ações no banco de dados.

Todas essas funcionalidades permitem programadores WordPress usar CSS nos padrões esperados pela plataforma AMP.

CSS Tree-shaking

Um dos maiores desafios para desenvolvedores manter o CSS em ordem é descobrir quais regras CSS são realmente utilizadas em qualquer página. Versões recentes do Chrome DevTools fornecem um relatório sobre a cobertura do CSS, muito útil para encontrar regras de CSS não utilizadas.

O plugin fornece suporte para isso por meio da funcionalidade Tree Shaking: um conjunto de verificações para eliminar o máximo possível de regras CSS não utilizadas.

O plugin de AMP WordPress fornece funcionalidades para facilitar as páginas AMP serem renderizadas sem violar a regra de 75KB de CSS por página. Realizando as seguintes ações:

  • Remove seletores de elementos não existentes na página
  • Limita a avaliação dos seletores para nomes de classes específicos de componentes se o componente correspondente estiver presente no documento, exemplo, amp-carousel-slide
  • Remove todos os blocos de declaração para os quais os seletores relacionados foram removidos
  • Remove todos os elementos @ -rule para os quais todos os seus blocos de declaração foram removidos
  • Considera nomes de classes de expressões AMP-bind em atributos [class]
  • Considera nomes de classes adicionados dinamicamente por AMP, (por exemplo, amp-viewer e amp-hidden)

Além das melhorias no CSS o plugin de AMP WordPress também adiciona melhorias nas animações do seu site caso utilize e os CSS relacionados a animações são contabilizados fora do limite dos 75KB, adicionadas numa tag <style amp-keyframe>.

Design Responsivo

O AMP oferece recursos aprimorados de design responsivo ao introduzir recursos como marcadores e substitutos, controle de assets por meio de srcset e além do melhor controle sobre como os elementos da página são exibidos.

Ferramentas

Como parte das ferramentas para desenvolvedores fornecidas pelo plugin, você também pode obter informações detalhadas sobre o estado CSS de qualquer URL de AMP.

tela de validação de CSS

O resumo geral do processamento CSS apresenta as seguintes informações:

  • CSS Total antes do Tree-Shaking e da minificação
  • CSS Total após Tree-Shaking e minificação
  • Porcentagem do total do budget do CSS
  • O markup que foi incluído o CSS e o responsável pela inclusão do CSS

Adicionando CSS a suas páginas AMP

Existem várias formas para inclusão de CSS em páginas AMP, muitas delas irão depender de qual modo estamos trabalhando.

Modo leitor com o tema legado

Se você está usando o plugin no modo leitor, com o tema legado você poderá adicionar CSS via functions.php ou utilizando um plugin para adicionar o filtro necessário. No segundo caso via plugin é boa prática para evitar problemas com atualizações do tema principal.

O código a seguir mostra um exemplo de como incluir CSS num tema no modo leitor:

add_action( 'amp_post_template_css', function() { ?> /* Adicione aqui o CSS */ .amp-wp-title { color:#008000; } .amp-wp-header { background-color: #008000; } <?php } );
Code language: PHP (php)

Modo leitor

Já na versão 2.0 é possível adicionar um tema compatível para o modo leitor, essa opção permite mais personalização e a inclusão de CSS extra.

Assim você irá ter um tema extra e lá tem a possuibilidade de adicionar CSS via customizer.

Modo transicional

Modo transicional você irá compartilhar o mesmo tema para a versão AMP e não AMP. Assim para diferenciar o CSS para suas páginas AMP, você pode utilizar um seletor CSS [amp].

Por Exemplo

html[amp] .post .title { /* Adicione aqui o CSS somente para conteúdo AMP */ }
Code language: CSS (css)

Modo padrão

Com o modo padrão, sua versão AMP é a versão principal, então você terá apenas um CSS para administrar.

Assim é como você pode trabalhar com CSS, no meu canal do YouTube eu adicionei um vídeo de como Trabalhar com CSS e AMP

Aplicando CSS para páginas AMP

Outro vídeo eu falo como você pode melhorar a sua versão AMP clássico:

Se você precisar de ajuda com o plugin de AMP WordPress, o plugin oficial do Google tem suporte em português. E para mais posts sobre AMP confira a página da categoria.

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.