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.
Deixe um comentário