Conhece a sensação: o seu site WordPress está pronto, com o design definido e todos os plugins instalados. Executa o PageSpeed Insights e lá está ele, laranja. Ou vermelho. O culpado é quase sempre o mesmo: o CSS. Dezenas de ficheiros de estilo de plugins e do tema fazem fila e bloqueiam a renderização. A página é lenta não por ser pesada, mas porque o navegador está à espera.

O problema é mais profundo do que parece. Um plugin carrega o seu style.css em todas as páginas do site, mesmo onde a sua funcionalidade não é usada. Um formulário de contacto só aparece na página de contactos, mas os seus estilos são carregados em todo o lado. Um slider está na página inicial, mas os seus quatro ficheiros CSS pendem em cada URL, sem exceção. São dezenas de kilobytes e pedidos desnecessários em cada visualização de página.

Pode desativar estilos desnecessários sem instalar plugins adicionais, através do functions.php. Isto não é um truque; é um mecanismo nativo do WordPress que funciona desde a versão 2.6. Abaixo encontra o guia completo: desde encontrar o identificador até carregar um ficheiro combinado de forma assíncrona.

💡 Resumo rápido:

• Como encontrar o identificador (handle) de qualquer ficheiro CSS de um plugin através do atributo id no código fonte da página
• Como desativar estilos usando a combinação wp_dequeue_style + wp_deregister_style com a prioridade correta
• Como combinar estilos desativados num único ficheiro e carregá-lo de forma assíncrona via media print, sem perder a estilização e sem bloquear a renderização

Como encontrar o identificador do ficheiro CSS de um plugin

O WordPress atribui um identificador único, um handle, a cada ficheiro de estilo enfileirado. Este handle é o que as funções wp_dequeue_style (documentação) e wp_deregister_style (codex) exigem. Sem o handle correto, nada é desativado.

O método mais fiável é consultar o código fonte HTML da página. Adivinhar com base no nome do plugin não funciona; o programador do plugin dá ao handle o nome que quiser, e a lógica pode não ser óbvia.

Abra o código fonte da página (Ctrl+U ou view-source: antes do URL) e encontre a tag <link> que carrega o CSS do plugin que precisa. Por exemplo, para o Elementor, tem este aspeto:

1
<link href="/wp-content/plugins/elementor/assets/lib/animations/animations.min.css"
2
      id="elementor-animations-css" media="all" rel="stylesheet" type="text/css">

Repare no atributo id. O WordPress constrói-o usando o padrão: **handle do plugin + o sufixo **-css. No exemplo acima, id="elementor-animations-css", o que significa que o handle é elementor-animations. Retire -css do final do valor do id e obtém o handle exato para desativar. Isto funciona para qualquer plugin ou tema.

Há casos em que o programador não inclui de todo um id no <link>. Nesse caso, encontre elementos vizinhos com um id ou verifique as tags <script> do mesmo plugin: os scripts usam o sufixo -js, e o handle coincide frequentemente com o do estilo. Se ainda assim não o encontrar, abra o código fonte do plugin em /wp-content/plugins/... e localize a chamada wp_enqueue_style(): o primeiro argumento é o handle.

Desativar estilos: wp_dequeue_style e wp_deregister_style

O WordPress disponibiliza duas funções para gerir estilos. A diferença é fundamental:

Na prática, ambas as funções são usadas em conjunto: o wp_dequeue_style remove-o da fila e, em seguida, o wp_deregister_style no codex garante que nenhum outro código volta a enfileirar esse handle através da cadeia de dependências.

Código básico para o functions.php

O código abaixo desativa os estilos de dois plugins: full-screen-search e prettyPhoto. A prioridade elevada 9999 garante que a desativação é executada DEPOIS de o plugin ter registado e enfileirado os seus estilos. Sem a prioridade elevada, a função pode ser executada antes do plugin, não havendo nada para desativar.

1
/**
2
 * Disable CSS files of specific plugins.
3
 * Priority 9999 — runs last in the wp_enqueue_scripts chain.
4
 */
5
function sdstudio_dequeue_plugin_styles() {
6
    // Dequeue
7
    wp_dequeue_style( 'full-screen-search' );
8
    wp_dequeue_style( 'prettyPhoto' );
9
 
10
    // Deregister — so no one can re-enqueue
11
    wp_deregister_style( 'full-screen-search' );
12
    wp_deregister_style( 'prettyPhoto' );
13
}
14
add_action( 'wp_enqueue_scripts', 'sdstudio_dequeue_plugin_styles', 9999 );

O que importa aqui: o hook wp_enqueue_scripts é o local correto para esta operação. Não é o wp_head, nem o init, nem o wp_loaded. É no wp_enqueue_scripts que o WordPress monta a fila de estilos, e é aqui que os deve desativar, apenas mais tarde do que os plugins o fazem.

Porquê prioridade 9999 e não 11 ou 99

Os plugins registam estilos com a prioridade padrão de 10. Mas alguns definem 20, 50 ou até 100 quando têm cadeias de dependências complexas. Uma prioridade de 9999 cobre virtualmente qualquer cenário do mundo real. A única desvantagem: se dois dos seus próprios snippets partilharem a mesma prioridade de 9999, a sua ordem de execução fica indefinida. Na prática, isto é raro, enquanto usar 11 falha regularmente com plugins «teimosos».

Além disso, pode registar a desativação no hook wp_head com a mesma prioridade, como rede de segurança para estilos que um plugin ponha na fila contornando o wp_enqueue_scripts e injetando diretamente no <head>:

1
add_action( 'wp_head', 'sdstudio_dequeue_plugin_styles', 9999 );

Mas isto é um plano B. Normalmente, um único wp_enqueue_scripts é suficiente.

Como desativar TODOS os estilos de um plugin específico

Muitos plugins não têm um ficheiro CSS, mas vários. Contact Form 7, WooCommerce, Elementor, cada um arrasta 3 a 5 ficheiros de estilos. Desativá-los um a um é entediante. Analise o código-fonte da página e recolha todos os handles com o mesmo prefixo: geralmente estão agrupados.

Exemplo para o Elementor, um conjunto típico de handles: elementor-frontend, elementor-animations, elementor-icons e elementor-pro. Todos os quatro numa única chamada:

1
function sdstudio_dequeue_elementor_styles() {
2
    $handles = [
3
        'elementor-frontend',
4
        'elementor-animations',
5
        'elementor-icons',
6
        'elementor-pro',
7
    ];
8
    foreach ( $handles as $handle ) {
9
        wp_dequeue_style( $handle );
10
        wp_deregister_style( $handle );
11
    }
12
}
13
add_action( 'wp_enqueue_scripts', 'sdstudio_dequeue_elementor_styles', 9999 );

O que fazer com os estilos desativados

Desativar é apenas metade do trabalho. Se simplesmente remover o CSS de um plugin, tudo na página se parte: formulários ficam desalinhados, sliders desmontam-se, ícones desaparecem. Os estilos são necessários, só não ao custo de bloquearem a renderização.

A abordagem correta: combinar os estilos desativados num ÚNICO ficheiro compacto e carregá-lo sem bloquear. O algoritmo:

• Desativar os estilos do plugin via wp_dequeue_style + wp_deregister_style.
• Copiar o conteúdo de CADA ficheiro CSS desativado. Retire-os da pasta do plugin, não do inspetor do navegador, que mostra uma versão minificada pouco prática para trabalhar.
• Combiná-los num único ficheiro, por exemplo /wp-content/themes/your-theme/css/dequeued-plugins.css.
• Carregá-lo com o atributo media="print" e onload="this.media='all'". O navegador descarrega o ficheiro de forma assíncrona, sem bloquear a renderização, e aplica os estilos após o carregamento.

Código de carregamento do ficheiro combinado

1
/**
2
 * Load the combined CSS file of disabled styles asynchronously.
3
 */
4
function sdstudio_enqueue_dequeued_styles() {
5
    wp_enqueue_style(
6
        'sdstudio-dequeued',
7
        get_stylesheet_directory_uri() . '/css/dequeued-plugins.css',
8
        [],
9
        filemtime( get_stylesheet_directory() . '/css/dequeued-plugins.css' )
10
    );
11
}
12
add_action( 'wp_enqueue_scripts', 'sdstudio_enqueue_dequeued_styles', 1 );

A prioridade de 1 aqui é intencional: o ficheiro combinado deve ser posto na fila ANTES de as funções de desativação com prioridade 9999 serem executadas. Caso contrário, o WordPress pode não reconhecer a dependência e remover completamente os estilos da fila.

Carregamento assíncrono sem um plugin

Para impedir que o navegador espere pelo ficheiro CSS antes de renderizar a página, adicione os atributos media="print" e onload através do filtro style_loader_tag:

1
/**
2
 * Change media="print" to onload-switch for asynchronous CSS loading.
3
 */
4
function sdstudio_async_css( $html, $handle ) {
5
    if ( 'sdstudio-dequeued' !== $handle ) {
6
        return $html;
7
    }
8
    return str_replace(
9
        "media='all'",
10
        "media='print' onload=\"this.media='all'; this.onload=null;\"",
11
        $html
12
    );
13
}
14
add_filter( 'style_loader_tag', 'sdstudio_async_css', 10, 2 );

O mecanismo é simples: o navegador vê media="print" e não bloqueia a renderização, uma vez que o tipo de media print não afeta o ecrã. Após o ficheiro carregar, o onload é acionado, muda media para all e os estilos são aplicados instantaneamente. O utilizador vê uma página totalmente estilizada sem atraso no carregamento inicial.

Quando não deve desativar estilos via functions.php

O método wp_dequeue_style é poderoso, mas não é universal. Eis três casos em que é inútil ou prejudicial:

• Os estilos são incorporados inline via wp_add_inline_style. Estes estilos residem dentro de uma tag <style> e não têm um identificador separado. Terá de os desativar através do wp_deregister_script do script pai ou encontrar o hook que o plugin usa para adicionar estilos inline.

• O plugin insere CSS diretamente no <head> via echo. Esta é uma solução alternativa usada por alguns plugins mais antigos. Aqui, só encontrando o hook específico ou, em último recurso, usando output buffering.

• Está a trabalhar com um tema de terceiros que gere as dependências por conta própria. Alguns temas, especialmente os premium, usam o seu próprio carregador de assets que ignora o WP_Styles. Antes de escrever código, verifique o header.php do tema: se vir um echo '<link...' direto, o sistema de deregister não funcionará.

Nestes casos, é melhor usar plugins especializados como o Asset CleanUp ou o Perfmatters, que funcionam ao nível do URL e desativam assets página a página sem necessidade de vasculhar hooks.

Veja o guia em vídeo sobre como desativar estilos: todo o processo, desde encontrar o identificador até verificar o resultado, em 8 minutos.

⁉️🤔 Perguntas frequentes

Preciso de desativar estilos CSS no painel de administração (*/wp-admin/*)?

Não. Os estilos carregados através do hook admin_enqueue_scripts não afetam o frontend e não precisam de ser desativados. Além disso, tentar fazer o deregister de estilos de administração através do wp_enqueue_scripts não fará nada, pois são registados separadamente. Se o painel de administração estiver lento, o problema costuma estar noutro lado: scripts de analytics pesados no dashboard, Google Fonts externas ou a Heartbeat API.

É seguro* remover -css do atributo id para obter o identificador? Esta regra funciona sempre?*

Sim, o sufixo -css é adicionado pelo núcleo do WordPress no método WP_Dependencies::enqueue() desde a versão 2.6; é um mecanismo imutável. Mas há uma nuance: se o programador do plugin atribuiu manualmente um id personalizado à tag <link>, o sufixo pode não estar presente. Nesse caso, o identificador é o segundo argumento da chamada wp_enqueue_style() no código-fonte do plugin. A regra do -css cobre a grande maioria dos casos.

Posso desativar estilos apenas em páginas específicas?

Sim, e esta é a abordagem correta em produção. Envolva a chamada wp_dequeue_style numa tag condicional do WordPress: is_front_page() para a página inicial, is_single() para artigos, is_page() para páginas, is_archive() para arquivos. Para excluir por ID de artigo, use ! is_single(123). O dequeue condicional em URLs específicos reduz a carga em todo o site, não apenas onde o plugin não é necessário.

O que acontece se eu chamar o wp_dequeue_style para um identificador que não está registado?

Nada. A função termina silenciosamente, sem erros, notices PHP ou avisos. Isto é seguro. Mas não dependa disto como estratégia: recolha identificadores apenas de páginas reais, caso contrário o seu código acumula linhas «mortas» que não fazem nada e apenas poluem o functions.php.

Como verifico se um estilo foi realmente desativado e não apenas deixou de se aplicar por causa da cache?

Abra o código-fonte da página (Ctrl+U), não o painel de programador. Procure uma <link> com o identificador do plugin ou o seu id. Se a tag desapareceu, o estilo está desativado. A cache do navegador não afeta o código-fonte, ao contrário do separador Rede nas DevTools. Adicionalmente, pode limpar a cache do WordPress: qualquer plugin de caching e depois Purge All.

Pontos-chave sobre desativar CSS no WordPress

Três conclusões principais de todo este guia:

• O identificador é a chave para tudo. Sem o identificador correto, nenhuma função funcionará. Encontre sempre o identificador através do atributo id no código-fonte da página. A regra de remover -css funciona quase sempre; para exceções, verifique o código-fonte do plugin.

• Dequeue + Deregister é a combinação padrão. A primeira função remove o estilo da fila, a segunda garante que ele não ressurge através da cadeia de dependências. A prioridade 9999 cobre quaisquer plugins «teimosos» e o hook wp_enqueue_scripts é o único local correto para esta operação.

• Os estilos desativados não devem desaparecer. Combine-os num único ficheiro e carregue-o de forma assíncrona via media="print" + onload. O utilizador recebe uma página totalmente estilizada e o navegador não espera pelo CSS antes de renderizar.

Experimente hoje com um ou dois plugins. Uns minutos no functions.php e o resultado é imediatamente visível no PageSpeed Insights. Comece pelo plugin «mais pesado», aquele com mais ficheiros CSS: desative, combine, meça a velocidade. Muito provavelmente, só isso será suficiente para passar da zona laranja para a verde.