Defer CSS não crítico no wordpress

Faça Defer de CSS não crítico no wordpress utilizando esse script para melhorar a performance do seu site wordpress.

Elimine o CSS que bloqueia o carregamento (render-blocking), melhor a velocidade do site e a pontuação no pagespeed.

A ideia é basicamente implementar as boas práticas do site web.dev para CSS de forma automática e sem usar plugin no wordpress.

Snippet PHP defer CSS não crítico

Esse código PHP modifica as tags de estilo do wordpress para mudar a tag para media=“print” e adicionar onload=“this.media=‘all’.

Com isso o carregamento desse CSS é adiado até que a página seja totalmente carregada.

add_filter('style_loader_tag', function (string $html, string $handle): string {
    if (strpos($html, 'style.min.css') !== false) {
        return $html; // Skip this file
    }
    $dom = new \DOMDocument();
    $dom->loadHTML($html);
    $tag = $dom->getElementById($handle . '-css');
    $tag->setAttribute('media', 'print');
    $tag->setAttribute('onload', "this.media='all'");
    $tag->removeAttribute('type');
    $tag->removeAttribute('id');
    $html = $dom->saveHTML($tag);
    return $html;
}, 999, 2);

Explicação do código:

Linha1: adiciona um filtro à tag style que carrega arquivos CSS na página. O filtro é definido como uma função anônima (closure) que recebe dois argumentos: $html que representa a tag atual, e $handle que é um identificador único para o arquivo CSS que está sendo carregado.

Linha2,3 e 4 (if): verifica se o nome do arquivo CSS contém a string 'style.min.css'. Se sim, o filtro simplesmente retorna a tag original sem fazer nenhuma modificação. Isso é útil para ignorar arquivos CSS que não precisam ser modificados.

Linha5 e 6: cria um novo objeto DOMDocument do PHP e carrega o conteúdo HTML da tag atual para dentro dele. Isso permite que o filtro manipule a tag usando métodos da classe DOMDocument.

Linha7: usa o método getElementById do objeto $dom para recuperar a tag style atual. O identificador da tag é baseado no $handle passado para a função de filtro, concatenado com a string '-css'.

Linha8 e 9: modificam os atributos media e onload da tag style. O atributo media é definido como 'print', o que significa que o estilo será aplicado apenas quando a página for impressa. O atributo onload é definido como um script JavaScript que altera o valor do atributo media para 'all', o que significa que o estilo será aplicado em todas as mídias (telas, impressão, etc.) assim que a tag for carregada.

Linha10 e 11: removem os atributos type e id da tag style. O atributo type não é necessário para arquivos CSS e pode ser omitido. O atributo id foi usado anteriormente para recuperar a tag style, mas agora que já foi manipulada, não é mais necessário mantê-lo.

Linha12 e 13: atualiza o conteúdo HTML da tag style com as modificações realizadas e retorna o novo conteúdo HTML para ser usado na página.

Linha14: define os argumentos adicionais da função add_filter. Esses argumentos são opcionais e controlam a ordem de execução do filtro e o número de argumentos que a função de filtro recebe.

Modificar snippet para seu tema

Nesse exemplo acima, o css principal do tema é chamado com o nome “style.min.css” por isso ele não deve ser modificado.

Para fazer defer do estilo principal é preciso carregar o CSS crítico inline.

Para encontrar o CSS crítico do seu site utilize um dos sites gratuitos abaixo, coloquei em ordem de preferência.

https://www.sitelocity.com/critical-path-css-generator
https://jonassebastianohlsson.com/criticalpathcssgenerator/
https://www.corewebvitals.io/tools/critical-css-generator

Com o código gerado copie tudo para dentro desse script abaixo:

function crit_css() {
    ?>
           [inserir o css crítico aqui com as tags <style> e </style>]
    <?php
}
add_action('wp_head', 'crit_css', -1);

Substitua todo o [inserir o css crítico aqui com as tags ] pelo código gerado, esse snippet vai ser executado com prioridade -1, ou seja, bem no topo do site.

Snippet PHP defer CSS não crítico + noscript

Esse script abaixo adiciona no final a tag

add_filter('style_loader_tag', function (string $html, string $handle): string {
    if (strpos($html, 'style.min.css') !== false) {
        return $html; // Skip this file
    }
    $dom = new \DOMDocument();
    $dom->loadHTML($html);
    $tag = $dom->getElementById($handle . '-css');
    $tag->setAttribute('media', 'print');
    $tag->setAttribute('onload', "this.media='all'");
    $tag->removeAttribute('type');
    $tag->removeAttribute('id');     
    $html = $dom->saveHTML($tag);    
    // Adiciona <noscript>
    $noscript = $dom->createElement('noscript');
    $link = $dom->createElement('link');
    $link->setAttribute('rel', 'stylesheet');    
    $min_css_url = str_replace('.css', '.min.css', $tag->getAttribute('href'));
    $min_css_filename = basename($min_css_url);
    if (file_exists(get_template_directory() . "/$min_css_filename")) {
        $link->setAttribute('href', $min_css_url);  
    } else {
        $link->setAttribute('href', $tag->getAttribute('href'));
    }    
    $noscript->appendChild($link);
    $html .= $dom->saveHTML($noscript);
    return $html;
}, 999, 2);