Carregamento assíncrono de plugins do WordPress: O guia definitivo para melhorar a velocidade e o desempenho do seu site

O que é o carregamento assíncrono e qual a sua importância?

No desenvolvimento de websites modernos, a velocidade de carregamento das páginas é um indicador chave para avaliar a experiência do usuário e a classificação nos mecanismos de busca (SEO). O método tradicional de carregamento de scripts é conhecido como “bloqueio da renderização” (render-blocking), o que significa que o navegador precisa pausar a análise do HTML até que um determinado arquivo de script seja totalmente baixado e executado antes de continuar a renderizar a página. Quando o seu site WordPress integra vários plugins, cada um deles pode trazer seus próprios arquivos JavaScript (JS) e CSS, que são carregados simultaneamente no cabeçalho ou no corpo da página, atrasando significativamente os tempos de “Primeiro Conteúdo Desenhado” (First Content Paint – FCP) e “Último Conteúdo Desenhado” (Last Content Paint – LCP).

O carregamento assíncrono (Asynchronous Loading) é uma técnica de carregamento de scripts que não bloqueia a execução do resto do código do navegador. Quando o navegador encontra uma página da web que contém scripts, esses scripts são carregados em segundo plano, sem interromper a exibição da página. Isso permite que a página seja renderizada mais rapidamente e melhora a experiência do usuário, pois o carregamento dos scripts não impede a navegação pelo site.asyncoudeferQuando um atributo contém um tag de script, o processamento do documento HTML continua, e o arquivo de script é baixado em paralelo. A principal diferença entre os dois reside no momento em que o script é executado.
* asyncAssim que o script for baixado, ele será executado imediatamente, o que pode interromper a análise (parse) do HTML.
* deferO script aguardará até que todo o documento HTML seja completamente analisado (o DOM esteja pronto) e, em seguida, será executado na ordem em que eles aparecem no documento.

Para o CSS, também é possível reduzir a prioridade de carregamento de tabelas de estilos não essenciais (como as usadas para o conteúdo abaixo da primeira tela) através de técnicas de “carregamento assíncrono” ou da “remoção de recursos que bloqueiam a renderização”.

Leitura recomendada Guia Definitivo para Otimização da Velocidade de Sites WordPress: Desde a Configuração Básica até Estratégias Avançadas de Cache。

Ao adotar uma estratégia de carregamento assíncrono, é possível remover recursos de plugins não essenciais (como botões de compartilhamento em redes sociais, caixas de comentários, códigos de análise estatística, etc.) do caminho de renderização principal do site. Isso traz dois benefícios principais: melhora o desempenho do site, permitindo que os usuários vejam e interajam com o conteúdo da página mais rapidamente; e otimiza o desempenho no SEO, uma vez que a velocidade da página é um dos fatores-chave para o ranking nos mecanismos de busca como o Google.

Hospedagem para sites WordPress da UltraHost

Garantia de reembolso em 30 dias, largura de banda ilimitada e banco de dados, proteção contra DDoS gratuita; desconto de 50% na compra de 3 anos (planos de 4 TB a 10 TB).

página de acesso

Como identificar recursos de plugins que precisam ser carregados assincronicamente?

Antes de começar a otimização, você precisa identificar com precisão quais recursos dos plugins são responsáveis pelo “bloqueio da renderização” e determinar quais deles podem ser carregados de forma assíncrona ou com atraso.

Utilizar ferramentas de análise de desempenho

Primeiramente, utilize ferramentas profissionais de teste de desempenho para gerar relatórios. O Google PageSpeed Insights, o GTmetrix e o WebPageTest são excelentes opções. Essas ferramentas listam explicitamente os recursos que causam bloqueios no processo de renderização, indicando o URL, o tamanho de cada arquivo JS e CSS, bem como o tempo estimado de economia no carregamento da página. Geralmente, esses recursos provêm do diretório de plugins (como…)./wp-content/plugins/Os recursos de maior tamanho e que não são essenciais para a primeira tela do aplicativo são os principais alvos de otimização.

Avaliar a importância de um recurso

Nem todos os recursos são adequados para processamento assíncrono. Você precisa avaliar isso com base na função de cada recurso.
Recursos essenciais: recursos que afetam diretamente a aparência e a funcionalidade da primeira tela. Por exemplo, JavaScript usado para a interação do menu de navegação e as folhas de estilo do conteúdo da primeira tela. Estes devem, normalmente, ser carregados de forma síncrona ou ser incorporados.
Recursos não essenciais: Funcionalidades que só são necessárias no final da página ou após a interação do utilizador. Exemplos típicos incluem:
Plugins de partilha nas redes sociais (como AddToAny, ShareThis)
JS da secção de comentários (por exemplo, Disqus, Comentários Melhorados por Predefinição)
Código de análise estatística de websites (como o Google Analytics), apesar de a empresa recomendar, oficialmente, scripts assíncronos.
Formulários que não estão na primeira tela no plug-in de formulário de contato.
Diapositivas não apresentadas na primeira tela no plug-in de carrossel.

Uma regra prática simples é: se a funcionalidade de um plugin não precisa estar completamente pronta no primeiro segundo em que o usuário abre a página, então seus recursos são candidatos a serem carregados de forma assíncrona.

Leitura recomendada Análise detalhada da tecnologia CDN: do iniciante ao mestre, crie um escudo duplo de segurança e desempenho do site。

Métodos práticos para implementar carregamento assíncrono

Existem várias maneiras de converter os recursos dos plugins do WordPress para carregamento assíncrono. Você pode escolher o método mais adequado de acordo com suas habilidades técnicas.

Utilize plugins de otimização (soluções sem código).

Para a maioria dos usuários, o uso de plugins de otimização especializados é a maneira mais segura e conveniente. Esses plugins oferecem uma interface gráfica que permite gerenciar facilmente o carregamento dos recursos.

Plugins recomendados: WP Rocket e Async JavaScript.

hospedagem compartilhada da hosting.com

Alto desempenho com CPUs AMD EPYC, armazenamento SSD NVMe e LiteSpeed, suporte interno especializado 24 horas por dia, 7 dias por semana, medidas de segurança avançadas, incluindo SSL, força bruta, malware e proteção contra DDoS, economia de até 73%

página de acesso

O WP Rocket é um poderoso plugin de cache que oferece, na aba “Otimização de Arquivos”, a opção de carregar JavaScript de forma retardada, além da possibilidade de excluir determinados scripts. Já o plugin Async JavaScript se dedica exclusivamente a esse objetivo, permitindo que você adicione esse tipo de funcionalidade para praticamente qualquer script.asyncoudeferAtributos, e também fornece uma lista detalhada de exclusões.

Os passos gerais para usar esse tipo de plugin são os seguintes: após instalar e ativar o plugin, localize as opções relacionadas à otimização de JS/CSS nas configurações, ative funcionalidades como o “carregamento diferido de JavaScript” ou similares. Em seguida, com base nos relatórios anteriores do plugin, adicione os scripts essenciais (como a biblioteca principal do jQuery ou scripts fortemente relacionados ao eventoDOMContentLoaded) à lista de exclusões, a fim de evitar problemas de funcionamento.

Edição manual do arquivo de tema (solução de código)

Se você deseja ter um controle mais detalhado, pode fazer isso editando o tema.functions.phpO arquivo é usado para implementar essa funcionalidade. O WordPress fornece os recursos necessários para isso. script_loader_tag e style_loader_tag Filtros são utilizados para modificar a saída em HTML dos scripts e dos arquivos de estilo (style sheets).

Leitura recomendada Guia completo para otimizar a velocidade do site do WordPress: estratégias essenciais para melhorar os Core Web Vitals.。

A seguir, está um exemplo de código que adiciona funcionalidades ao script alvo.deferAtributos. Você precisa modificar o código para incluir esses atributos.plugin-script-handleSubstitua por o identificador (Handle) do script que realmente precisa ser processado.

function add_async_defer_attribute($tag, $handle) {
    // 将要延迟加载的脚本句柄添加到这个数组
    $scripts_to_defer = array('plugin-script-handle', 'another-plugin-script');

foreach($scripts_to_defer as $defer_script) {
        if ($defer_script === $handle) {
            // 使用 defer， 如需 async 则替换为 async='async'
            return str_replace(' src', ' defer="defer" src', $tag);
        }
    }
    return $tag;
}
add_filter('script_loader_tag', 'add_async_defer_attribute', 10, 2);

Para encontrar os manipuladores de scripts dos plugins, você pode verificar o código-fonte HTML gerado pelo plugin ou o próprio código-fonte do plugin.wp_enqueue_script()O primeiro parâmetro de uma chamada de função.

Hospedagem Compartilhada InterServer

Hospedagem compartilhada $2.50 USD por mês, primeiro mês $0.1 USD código promocional tryinterserver, 461 scripts de aplicativos em nuvem, instalação com um clique.

página de acesso

Tratamento do carregamento assíncrono de CSS

Para o CSS, é possível utilizar o “carregamento prévio” (preloading) em conjunto com outras técnicas.onloadO evento converte o recurso em um recurso não bloqueador. Aqui está um exemplo de código que carrega um estilo específico de forma assíncrona:

function async_load_stylesheets() {
    ?>
    <link rel="preload" href="<?php echo get_stylesheet_directory_uri(); ?>/path/to/plugin-style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/path/to/plugin-style.css"></noscript>
    <?php
}
// 根据需求，将其挂载到 wp_head 或其它钩子上
add_action('wp_head', 'async_load_stylesheets', 1);

Este método funciona através de…rel=”preload”Diga ao navegador para obter os recursos o mais cedo possível, mas não os aplicar imediatamente. Assim que o carregamento dos recursos for concluído, eles serão aplicados através do JavaScript.relAltere o atributo para…stylesheetAssim, os estilos podem ser aplicados.Para usuários cuja configuração indica a desativação do JavaScript, foi fornecido um plano de recuperação.

Testes e solução de problemas após o carregamento assíncrono

Após a implementação do carregamento assíncrono, é essencial realizar testes abrangentes para garantir que o site mantenha todas as suas funcionalidades intactas, além de ter sua velocidade aprimorada.

Teste de funcionalidade e compatibilidade

Você precisa realizar testes manuais em diferentes páginas do site (página inicial, página de artigos, página individual, etc.), com foco especial nas funcionalidades dos plugins que são carregadas de forma assíncrona. Por exemplo:
Testar se os botões de mídia social carregados de forma assíncrona conseguem abrir correctamente a janela de partilha.
Verifique se a secção de comentários, que é carregada de forma assíncrona, é apresentada corretamente quando a página é deslocada para a posição correspondente.
Verifique se todos os elementos interativos (como o envio de formulários, cliques em botões e menus suspensos) estão a funcionar correctamente.

É especialmente importante prestar atenção àqueles que dependem de…DOMContentLoadedScripts que dependem do jQuery estar pronto no início da página (no cabeçalho). Se esses scripts forem executados mais tarde, podem gerar erros devido à incapacidade de encontrar elementos do DOM. É por isso que é tão importante definir uma “lista de exclusões” ao otimizar plugins; talvez seja necessário especificar que o jQuery não deve ser carregado em determinadas circunstâncias.jquery-coreOs arquivos mencionados e seus dependentes diretos são excluídos do processo de carregamento assíncrono.

Comparação de desempenho antes e depois

Re teste seu site utilizando as ferramentas de análise de desempenho mencionadas anteriormente (PageSpeed Insights, GTmetrix). Compare os relatórios antes e depois das otimizações, prestando atenção às seguintes mudanças nos indicadores principais:
Primeira composição de conteúdo (FCP): é visivelmente antecipada?
Layout de Conteúdo Máximo (LCP): Os elementos de conteúdo máximo são apresentados mais rapidamente?
Índice de velocidade: A velocidade de carregamento visual do conteúdo da página é mais rápida?
Tempo total de bloqueio (TBT): O tempo em que o thread principal fica bloqueado diminuiu?
Sugestão para “Remover recursos que bloqueiam a renderização”: Os problemas listados no relatório diminuíram ou desapareceram?

Uma otimização bem-sucedida deve resultar em melhorias significativas nestes indicadores, além de uma redução nas advertências relacionadas a bloqueios de renderização na seção de “Oportunidades” ou “Diagnóstico”.

Se alguma função estiver danificada, volte às configurações do plugin de otimização ou ao seu código e exclua a instrução de script específica que está causando o problema da lista de carregamento assíncrono/delayed. A resolução de problemas é um processo iterativo e pode ser necessário fazer várias ajustes para encontrar o melhor equilíbrio entre a funcionalidade e o desempenho.

resumos

O carregamento assíncrono de recursos de plugins do WordPress é uma técnica de otimização de desempenho front-end comprovada e de grande eficácia. Ele funciona removendo arquivos JavaScript e CSS não essenciais do caminho de renderização principal, permitindo que o navegador priorize o processamento e a exibição do conteúdo principal da página, o que melhora significativamente a velocidade de carregamento do site e a experiência do usuário. A implementação é simples e pode ser feita rapidamente com plugins como o WP Rocket ou, de forma mais personalizada, através da programação. O segredo está em identificar com precisão os recursos não essenciais, executar o carregamento de forma adequada e realizar testes abrangentes de funcionalidade e desempenho após a implementação. Incluir essa estratégia no seu processo de manutenção do WordPress é uma maneira eficaz de enfrentar os desafios atuais de desempenho na internet e melhorar a classificação no SEO.

Perguntas frequentes Perguntas frequentes

Qual deve ser escolhido: carregamento assíncrono (async) ou carregamento deferido (defer)?

Para os scripts de plugins, geralmente é mais recomendado usar…deferPorquedeferÉ essencial garantir que os scripts sejam executados na ordem em que aparecem no HTML, especialmente no caso de scripts que dependem de outros (por exemplo, um plugin que depende do jQuery). Isso evita erros causados por uma ordem de execução incorreta.asyncMais adequado para fragmentos de código que são completamente independentes, não dependem de nenhum outro script e também não são dependentes de nenhum script, como certos módulos de análise estatística independentes.

O carregamento assíncrono de recursos de plugins pode causar a falha de funcionamento dos mesmos?

É possível. Se a execução do script do plugin depender for significativamente do estado disponível do DOM em um determinado momento (por exemplo, durante a renderização da página), então...DOMContentLoadedQuando um evento é acionado, operações no DOM devem ser realizadas imediatamente; caso contrário, se o script dependa de outros scripts sincrônicos, o carregamento assíncrônico pode causar sua execução de forma prematura ou tardia, levando a erros. É por isso que é essencial realizar testes abrangentes após a otimização e estar preparado para incluir os scripts problemáticos em uma lista de exclusão.

Todos os plugins são adequados para carregamento assíncrono?

Não. Os recursos dos plugins que afetam diretamente a renderização da primeira página e as interações principais não devem ser carregados de forma assíncrona. Por exemplo, uma biblioteca de animações usada para criar efeitos visuais na primeira página, um script responsável pelo funcionamento do menu de navegação ou um código CSS essencial para otimizar a exibição dos fontes da página devem ser carregados de forma síncrona ou incorporados no código da página, a fim de garantir a consistência e a imediatidade da experiência do usuário. A otimização deve sempre ser feita de forma a não afetar as funções principais do aplicativo.

Além do carregamento assíncrono, quais outros métodos podem ser usados para otimizar o desempenho de plugins?

O carregamento assíncrono é um elemento importante, mas você também pode adotar outras estratégias combinadas: 1. Consolidação e minimização de arquivos: Use plugins para consolidar vários arquivos pequenos de JS/CSS e remover comentários em branco. 2. Carregamento sob demanda: Para plugins complexos (como construtores de páginas), certifique-se de que os seus recursos apenas são carregados nas páginas em que são necessários. 3. Escolha plugins leves: Quando selecionar novos plugins, dê prioridade a alternativas com boa reputação em termos de desempenho e código simplificado. 4. Utilize a cache: Certifique-se de que todos os recursos estáticos têm um tempo de expiração da cache longo e são distribuídos através de uma CDN. Estas abordagens, combinadas com o carregamento assíncrono, podem produzir a melhor melhoria de desempenho composto possível.