Close Menu

Como otimizar tarefas longas no site WordPress?

adminBy 7 Mins Read

Tarefas longas em JavaScript podem impactar negativamente o desempenho do seu site WordPress, especialmente a métrica Largest Contentful Paint (LCP) e o Total Blocking Time (TBT), que estão relacionados à experiência do usuário e à interatividade. Tarefas longas são operações em JavaScript que levam mais de 50 milissegundos para serem executadas, bloqueando a thread principal e causando atrasos na renderização ou resposta a interações. Abaixo, apresento estratégias práticas para otimizar tarefas longas no WordPress, com scripts e configurações específicas, complementando as otimizações anteriores para LCP e segurança contra clickjacking.

Etapas para otimizar tarefas longas no site WordPress

1. Identificar tarefas longas

Antes de otimizar, é crucial identificar quais scripts estão causando tarefas longas:

  • Use o Lighthouse:
  • Abra o Chrome DevTools (F12), vá para a aba Lighthouse, selecione “Performance” e execute uma análise.
  • Verifique a seção Diagnostics para encontrar tarefas longas e os scripts associados.
  • Use o WebPageTest:
  • Acesse webpagetest.org e analise o gráfico de “Main Thread Processing” para identificar tarefas que excedem 50ms.
  • Use o Query Monitor (plugin WordPress):
  • Instale o plugin Query Monitor para verificar scripts carregados, tempo de execução e dependências no WordPress.

2. Reduzir o impacto de scripts pesados

Tarefas longas geralmente vêm de scripts de terceiros (ex.: plugins, temas, ou analytics) ou de JavaScript mal otimizado. Aqui estão as ações:

a) Adiar ou carregar scripts assincronamente

Scripts que não são críticos para o LCP devem ser adiados ou carregados assincronamente para evitar bloqueios.

  • Adicionar defer ou async:
  • Modifique a forma como os scripts são carregados no WordPress.
  • Código para functions.php:
    php add_filter('script_loader_tag', function ($tag, $handle, $src) { if (!is_admin()) { // Use 'defer' para scripts que não precisam executar imediatamente return str_replace('<script', '<script defer', $tag); } return $tag; }, 10, 3);
  • Nota: Use async para scripts independentes (ex.: Google Analytics) e defer para scripts com dependências.
  • Plugins recomendados:
  • Async JavaScript: Permite configurar async ou defer para scripts específicos.
  • WP Rocket: Oferece opções para adiar scripts e excluir scripts críticos.

b) Mover scripts para o rodapé

Conforme mencionado anteriormente, mover scripts para o rodapé reduz o bloqueio de renderização:

function move_scripts_to_footer() {
    wp_scripts()->add_data('jquery', 'group', 1);
    wp_scripts()->add_data('jquery-core', 'group', 1);
    wp_scripts()->add_data('jquery-migrate', 'group', 1);
    add_filter('script_loader_tag', function ($tag, $handle, $src) {
        if (!is_admin() && !in_array($handle, ['jquery', 'jquery-core', 'jquery-migrate'])) {
            wp_scripts()->add_data($handle, 'group', 1);
        }
        return $tag;
    }, 10, 3);
}
add_action('wp_enqueue_scripts', 'move_scripts_to_footer');
  • Teste dependências: Alguns scripts (ex.: sliders) podem quebrar se movidos. Use o Query Monitor para verificar dependências e excluir scripts específicos, se necessário:
  add_filter('script_loader_tag', function ($tag, $handle, $src) {
      if (in_array($handle, ['nome-do-script-critico'])) {
          return $tag; // Não move scripts críticos
      }
      return str_replace('<script', '<script defer', $tag);
  }, 10, 3);

c) Quebrar tarefas longas em pedaços menores

Se você tem controle sobre o JavaScript personalizado, divida tarefas longas usando técnicas como Web Workers ou setTimeout para evitar o bloqueio da thread principal.

  • Exemplo com setTimeout:
  • Para um loop pesado, divida a execução:
    javascript function processHeavyTask(data, chunkSize = 100) { let index = 0; function processChunk() { const chunk = data.slice(index, index + chunkSize); // Processar o chunk chunk.forEach(item => { // Lógica aqui }); index += chunkSize; if (index < data.length) { setTimeout(processChunk, 0); // Agenda o próximo chunk } } processChunk(); }
  • Adicione esse código ao seu arquivo JS personalizado (ex.: custom.js) e enfileire-o corretamente: add_action('wp_enqueue_scripts', function () { wp_enqueue_script('custom-js', get_theme_file_uri('/js/custom.js'), [], false, true); });
  • Web Workers:
  • Use Web Workers para executar tarefas pesadas em uma thread separada.
  • Exemplo básico:
    javascript // main.js if (window.Worker) { const worker = new Worker('/wp-content/themes/seu-tema/worker.js'); worker.postMessage({ data: heavyData }); worker.onmessage = function(e) { console.log('Resultado:', e.data); }; }
    javascript // worker.js self.onmessage = function(e) { const result = e.data.data.map(item => { // Processamento pesado return item * 2; }); self.postMessage(result); };
  • Enfileire o script principal:
    php add_action('wp_enqueue_scripts', function () { wp_enqueue_script('main-js', get_theme_file_uri('/js/main.js'), [], false, true); });

d) Reduzir scripts de terceiros

Scripts de terceiros (ex.: Google Analytics, Facebook Pixel, anúncios) frequentemente causam tarefas longas.

  • Adiar scripts de terceiros:
  • Exemplo para Google Analytics:
    php add_action('wp_footer', function () { ?> <script defer src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-XXXXX-Y'); </script> <?php });
  • Use plugins para gerenciar:
  • WP Rocket: Permite adiar scripts de terceiros Talonários.
  • Perfmatters: Oferece opções para desativar ou otimizar scripts de terceiros.

3. Otimizar plugins do WordPress

Muitos plugins adicionam JavaScript pesado que pode causar tarefas longas.

  • Audite plugins:
  • Use o Query Monitor para identificar scripts carregados por plugins.
  • Desative plugins desnecessários ou substitua por alternativas leves.
  • Exemplos de plugins pesados:
  • Sliders (ex.: Slider Revolution): Substitua por sliders leves ou CSS puro.
  • Page builders (ex.: Elementor, Divi): Otimize configurações ou use temas mais leves.
  • Plugins de otimização:
  • Asset CleanUp: Permite desativar scripts e estilos específicos por página.
  • Perfmatters: Otimiza o carregamento de scripts e remove bloat.

4. Otimizar imagens e CSS (revisão para LCP)

Embora o foco aqui seja tarefas longas, imagens e CSS mal otimizados podem aumentar o TTFB, piorando o impacto de scripts. Reforçando as sugestões anteriores:

  • Imagens:
  • Use WebP ou AVIF com plugins como ShortPixel.
  • Habilite lazy loading:
    php add_filter('wp_get_attachment_image_attributes', function ($attr) { $attr['loading'] = 'lazy'; return $attr; });
  • CSS crítico:
  • Inline CSS crítico para o conteúdo acima da dobra:
    php add_action('wp_head', function () { echo '<style>.hero, .main-content { /* CSS crítico aqui */ }</style>'; }, 1);

5. Configurações de segurança sem impacto no desempenho

Conforme suas perguntas anteriores, as políticas contra clickjacking (como X-Frame-Options e Content-Security-Policy) não afetam diretamente tarefas longas, mas evite configurações CSP excessivamente restritivas que bloqueiem scripts essenciais.

  • X-Frame-Options:
  function add_x_frame_options_header() {
      header('X-Frame-Options: DENY');
  }
  add_action('send_headers', 'add_x_frame_options_header');
  • CSP simples:
  function add_csp_header() {
      header("Content-Security-Policy: frame-ancestors 'self'");
  }
  add_action('send_headers', 'add_csp_header');

6. Monitorar e testar

  • Ferramentas:
  • Lighthouse: Verifique a seção “Performance” para tarefas longas e TBT.
  • WebPageTest: Analise o tempo de execução da thread principal.
  • Google Search Console: Monitore o Core Web Vitals, incluindo TBT e LCP.
  • Teste incremental:
  • Implemente uma otimização por vez e teste com Lighthouse para medir o impacto.
  • Use um ambiente de staging para evitar quebras no site ativo.
  • Meta:
  • Reduza tarefas longas para menos de 50ms.
  • Mantenha o TBT baixo (idealmente <300ms) para boa interatividade.

7. Exemplo de implementação combinada no functions.php

// Otimizações para tarefas longas e LCP
function optimize_performance() {
    // Pré-carregar recursos críticos
    echo '<link rel="preload" href="/caminho/para/imagem-principal.webp" as="image">';
    echo '<link rel="preload" href="/caminho/para/fonte.woff2" as="font" type="font/woff2" crossorigin>';
    echo '<style>.hero, .main-content { /* CSS crítico aqui */ }</style>';
    echo '<style>@font-face { font-family: "SuaFonte"; src: url("/caminho/para/fonte.woff2") format("woff2"); font-display: swap; }</style>';
}
add_action('wp_head', 'optimize_performance', 1);

// Mover scripts para o rodapé
function move_scripts_to_footer() {
    wp_scripts()->add_data('jquery', 'group', 1);
    wp_scripts()->add_data('jquery-core', 'group', 1);
    wp_scripts()->add_data('jquery-migrate', 'group', 1);
    add_filter('script_loader_tag', function ($tag, $handle, $src) {
        if (!is_admin() && !in_array($handle, ['jquery', 'jquery-core', 'jquery-migrate'])) {
            return str_replace('<script', '<script defer', $tag);
        }
        return $tag;
    }, 10, 3);
}
add_action('wp_enqueue_scripts', 'move_scripts_to_footer');

// Adiar CSS não crítico
add_filter('style_loader_tag', function ($html, $handle) {
    if (!is_admin()) {
        return str_replace("media='all'", "media='print' onload=\"this.media='all'\"", $html);
    }
    return $html;
}, 10, 2);

// X-Frame-Options para segurança
function add_x_frame_options_header() {
    header('X-Frame-Options: DENY');
}
add_action('send_headers', 'add_x_frame_options_header');

Considerações finais

  • Priorize scripts críticos: Identifique scripts essenciais para o LCP (ex.: sliders, animações) e mantenha-os no <head> com defer, se necessário.
  • Evite excesso de plugins: Cada plugin pode adicionar scripts que aumentam tarefas longas.
  • Teste em dispositivos reais: Simule dispositivos móveis no Lighthouse para garantir que otimizações funcionem em conexões mais lentas.
  • Monitore continuamente: Use o Google Search Console para acompanhar o desempenho do Core Web Vitals.

Se você tiver um URL específico, um plugin problemático ou precisar de ajuda com um script personalizado, compartilhe mais detalhes para que eu possa personalizar as recomendações!

Share.

Related Posts

Leave A Reply