Como o plugin de AMP WordPress 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.

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

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.