style amp-custom acima de 75KB: como cortar o CSS inline do AMP

Instalou mais um plugin, publicou, e o validador cuspiu The author stylesheet specified in tag 'style amp-custom' is too long. O limite é 75.000 bytes e ele é duro: passou um byte, a página inteira sai do cache AMP. Antes de sair apagando CSS no chute, meça.

Quanto pesa hoje o style amp-custom

curl -s 'https://seusite.com.br/meu-post/amp/' 
  | sed -n '/amp-custom/,/</style>/p' | wc -c

Troque pela URL AMP do seu site — /meu-post/amp/ ou ?amp=1, muda conforme o plugin e o modo. O wc -c conta também os bytes da própria tag, uns 30 a mais, então compare com folga. No AMP não existe folha externa, salvo fonte de provedor liberado: todo CSS que estava em arquivo é jogado dentro de um bloco inline só, e cada plugin que enfileira estilo entra ali. O plugin oficial faz tree shaking e descarta seletor que a página não usa, mas ele não prevê seletor montado por JavaScript, e nesse caso mantém o CSS.

Tirar da fila o que a versão AMP não usa

No plugin oficial, em AMP > Validated URLs, abra a URL problemática: a caixa Stylesheets lista cada folha com o tamanho original e o final, da maior pra menor. Pegue as duas ou três primeiras que não fazem sentido no AMP e mate só nesse contexto:

add_action('wp_enqueue_scripts', function () {
    $amp = (function_exists('amp_is_request') && amp_is_request())
        || (function_exists('ampforwp_is_amp_endpoint') && ampforwp_is_amp_endpoint());
    if (!$amp) {
        return;
    }
    wp_dequeue_style('dashicons');
    wp_dequeue_style('elementor-icons');
    wp_dequeue_style('contact-form-7');
}, 100);

As duas funções cobrem o plugin oficial e o AMP for WP; se você checar só uma, no site que roda o outro o hook sai calado e você fica achando que cortou. A prioridade 100 é pra rodar depois de quem enfileirou. Ícone de fonte é o suspeito número um: traz centenas de classes e a página AMP usa três.

Repita o curl depois de cada corte. Se com tudo cortado o tema sozinho já passa dos 75KB, aceite: nenhum ajuste fino segura, o caminho é um tema mais enxuto na rota AMP.

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *