Instruções para usar o plugin Autoptimize
Estou muito interessado na aceleração do WordPress , pois a velocidade do site sempre foi o tópico mais importante dos administradores.
Hoje vou falar sobre o plugin Auto-Stimulation – um dos melhores aceleradores gratuitos.
Mục lục
Como um plugin me acelera?
A autoestimulação melhora os tempos de carregamento da página por meio de três fatores principais:
- Compactar, mesclar e otimizar arquivos CSS
- Compactar, mesclar e otimizar arquivos JavaScript
- Compressão HTML
A compactação reduz o tamanho do arquivo, enquanto o pooling reduz o número de solicitações ao servidor. Ambos os fatores ajudam a aumentar a velocidade do site. Enquanto a operação "ótima" é principalmente sobre a remoção de CSS de bloqueio de exibição e JS de bloqueio de renderização para dar preferência ao conteúdo acima da dobra.
Após instalar e ativar o plugin, acesse suas configurações:
Configuração básica
Sua interface personalizada é a seguinte, você marca todas as 3 opções ideais:
Em seguida, você rola até a parte inferior e clica em Salvar alterações / Salvar alterações.
Se você usa um serviço CDN (como MaxCDN, KeyCDN, CDNSun), nas opções de CDN você insere a URL raiz da CDN, caso contrário, deixe em branco (eu não o uso pessoalmente, então esta parte não preencherá nada):
Personalização avançada
Com a opção básica, você já tem que acelerar seu site, se quiser uma otimização mais profunda, vá para a personalização avançada.
Para entrar na seção de personalização avançada, clique no botão conforme mostrado abaixo:
Sua interface avançada é a seguinte:
Entrarei em detalhes sobre cada opção.
- Manter comentários HTML? Isso é manter os comentários HTML na página. Se você quiser manter o comentário HTML, marque-o.
- Force JavaScript em <head>?: Ou seja, envie JS para o arquivo . Verificar isso provavelmente corrigirá alguns bugs relacionados ao JS, mas pode criar problemas de bloqueio de renderização. Minha escolha pessoal: não marque.
- Também agregar JS inline?: Isso inclui JS inline. Essa verificação ajuda a extrair e agregar JS embutido e pode ajudar a melhorar o desempenho, mas pode aumentar o tamanho do cache rapidamente. Escolha pessoal: sim ou não, dependendo do site, mas geralmente não selecionado.
- Exclua scripts do Autoptimize : Ou seja, não otimize determinados arquivos JS (sem empacotamento e compactação). Por padrão, o Autoptimize não otimizará arquivos jQuery, o motivo é que muitos plugins e temas usam jQuery e, se o Autoptimize fizer otimização, ele interromperá a funcionalidade desses plugins e temas (e afetará a página da web). Para adicionar um arquivo não otimizado, digite seu nome na área correspondente e separe-o com uma vírgula, por exemplo: any.js, another.js
- Adicionar embalagem try-catch? : Se você tiver um erro com JS, marque isso.
- Gerar dados : URIs para imagens? Isso ajuda a pequena imagem de fundo a ser incluída no arquivo CSS para evitar requisitos adicionais de download de imagem. Você deve marcar. (pode usar a codificação base64 da imagem para obter o código embutido diretamente no CSS)
- Também agregar CSS inline? Isso faz a mesclagem de CSS inline, semelhante à mesclagem de JS inline, que pode ser verificada ou não dependendo da página, mas geralmente não, por quê? Como nos temas de prestígio, o CSS inline é usado principalmente para evitar o bloqueio, portanto, não há necessidade de incluir nada.
- CSS embutido e adiado? Ou seja, inline e adie cargas CSS. Normalmente, o Autoptimze otimizaria o CSS e o colocaria no topo da tag head, mas isso bloquearia a renderização da página (a mensagem que você costuma ver nas mensagens do PageSpeed Insight do Google). Ao marcar esta opção, o arquivo CSS será adiado (preferindo que HTML e CSS embutido sejam carregados primeiro). E para que o layout da página não seja muito afetado, você pode adicionar o CSS para Paste Ahead of CSS aqui – estes são CSS importantes relacionados ao layout da página para conteúdo acima da dobra. Para obter este CSS acesse: https://www.sitelocity.com/critical-path-css-generator e cole a URL do post, ele irá extrair o CSS necessário. Escolha pessoal: Depende, alguns sites funcionarão bem, enquanto outros não, mas no geral deve.
- Inline todo CSS? É inline todo CSS. Isso tem o efeito de reduzir as solicitações em comparação com colocar o CSS offline. No entanto, só é eficaz se o arquivo CSS não for grande e o número de visualizações de página por usuário não for muito. Inlining todo CSS irá prevenir completamente o cache do navegador. Escolha pessoal: não marque na maioria dos casos.
- Excluir CSS do Autoptimize : Tem o mesmo significado de excluir JS. Mas aqui está excluindo arquivos CSS. Existem arquivos CSS que, se você otimizar com o Autoptimize, destruirá a funcionalidade ou o layout do site, você precisa excluí-lo aqui. Por padrão, alguns arquivos CSS são excluídos como: wp-content/cache/, wp-content/uploads/, admin-bar.min.css, dashicons.min.css
- Informações de cache : Esta seção mostra informações relacionadas ao cache, incluindo diretório, status de substituição de otimização automática e tamanho do arquivo de cache disponível.
- Opções diversas : Estas são opções avançadas adicionais. Salvar script/css composto como arquivo estático? relacionado ao cache estático de arquivos JS e CSS. Também otimizar para usuários logados? relacionado à otimização automática será habilitado para ambos os usuários logados. Escolha pessoal: marcada.
Otimização extra/incremental personalizada
Essas opções continuam a ajudá-lo a melhorar ainda mais a velocidade do seu site.
- Remover emojis : envolve a remoção de emojis CSS e JS embutidos (exceto para arquivos JS não otimizados). Escolha pessoal: marcada.
- Remover strings de consulta de recursos estáticos : envolve a remoção de strings de consulta (ou parâmetros específicos de versão/versão). Ele não aumenta a velocidade do site, mas pode ajudar a melhorar as pontuações de desempenho. Escolha pessoal: sem carrapato.
- Google Fonts : Se o seu tema usa Google Fonts, esta opção ajuda você a remover Google Fonts (Remover Google Fonts). Combine e vincule na cabeça, o que significa que o Google Fonts será mesclado e forçado a colocar a tag head. Combinar e carregar fontes de forma assíncrona com webfont.js significa mesclar arquivos e carregar de forma assíncrona com webfont.js. Deixe como está, ou seja, se o site tiver o Google Fonts ele será baixado. Escolha pessoal: marcada.
- Pré-conexão a domínios de terceiros (usuários avançados): esta opção envolve a pré-conexão a um domínio de terceiros. Ele realiza pesquisas de DNS e conexões seguras em paralelo entre muitos recursos de terceiros, reduzindo assim a latência. Você pode aprender mais mecanismos semelhantes, como pré-busca e pré-carregamento.
- Arquivos Javascript assíncronos (usuários avançados) : Esta opção trata do carregamento de arquivos JS de forma assíncrona. Se você tiver algum arquivo que precise ser baixado de forma assíncrona, inclua-o aqui, incluindo local e de terceiros.
- Otimizar vídeos do YouTube : Isso requer que você instale plugins adicionais. Ele ajuda os vídeos do YouTube a atrasar o carregamento, aumentando assim a velocidade de carregamento da página. No entanto, apenas adequado se o seu vídeo não estiver no topo da página (recomendado apenas se estiver no meio ou na parte inferior da página). Leia mais sobre outra maneira de atrasar downloads de vídeo aqui. Você pode consultar como usar o plug-in WP YouTube Lyte aqui.
Otimização adicional / sem limite final
Esta é a área onde o autor do Autoptimize "ganha dinheiro" fornecendo produtos "afiliados" que otimizam ainda mais o site, incluindo:
- Suporte Autoptimize Pro: o pacote de suporte premium do Autoptimize para acelerar seu site. Os preços começam em 99 euros.
- WP Rocket Este é um plugin pago para criar cache que ajuda a acelerar o site, o que é muito apreciado por muitas pessoas. Blogs pessoais podem achar caro, eu recomendo se você quiser economizar dinheiro, substitua-o pelo plugin WP Super Cache ou Cache Enabler. Combiná-lo com o Autoptimize funciona bem.
- ShortPixel é um plugin que ajuda a comprimir imagens.
- Criticalcss.com é uma solução premium para CSS acima da dobra (também conhecido como CSS Crítico – para evitar CSS de bloqueio de renderização).
- Siteground é uma solução de hospedagem otimizada para WordPress. Sugiro adicionar Closte, Linode, UpCloud, DigitalOcean, Vultr e KnownHost.
- Astra é uma solução de tema otimizada para desempenho. Eu gosto muito desse tema acelerador, sua versão gratuita também tem muitos usuários. Em geral, no entanto, o GeneratePress tem vantagem sobre o Astra.
- Em última análise, o KeyCDN é uma solução que usa um CDN para melhorar a velocidade de carregamento da página por meio de um servidor distribuído globalmente. No entanto, atualmente o KeyCDN (2020) não possui um servidor no Vietnã, então podemos substituí-lo pelo CDNSun, o preço é semelhante e existem 2 PoPs em Hanói e Saigon (consulte o manual do CDNSun neste). Além disso, você pode usar Cloudflare se quiser acelerar a web com um host localizado fora do Vietnã, esta é uma solução acessível, de boa qualidade e principalmente a configuração é muito mais simples que outros sites. serviços tradicionais de CDN. Na verdade, eu usei a versão paga do CloudFlare (plano de 20USD/mês) e bastante satisfeito (veja o guia do usuário do Cloudflare aqui), mas é justo dizer que se você for habilidoso o suficiente para otimizar o CDN de acordo com o estilo tradicional seria melhor. PS: Embora a Cloudflare tenha PoP no Vietnã, na verdade os usuários ainda não podem baixar recursos daqui, você pode consultar este artigo para mais detalhes.
Conclusão
Autoptimze é uma ferramenta muito boa para ajudá-lo a melhorar a velocidade de carregamento da página. Suas opções são muito detalhadas. E se você for habilidoso na personalização, os resultados serão impressionantes.
O Autoptimize também é um ótimo plugin kBlood para plugins de cache gratuitos, como o Cache Enabler. Você não terá que gastar dinheiro extra para usar plugins pagos de construtor de páginas estáticas.
Agora para o teste final. O acionamento automático resulta na rapidez com que a página é carregada. Vou usar o teste A/B, um lado não está usando o Autoptimize, o outro está usando em condição equivalente (mesmo servidor, mesma interface, mesmo conteúdo etc, mesmo ambiente, ou seja, mesma condição. ambiente)).
Vou usar a ferramenta GTmetrix para testar a velocidade do site. No vídeo abaixo, o painel esquerdo é a web sem o Autoptimize instalado. O painel direito tem o Autoptimize instalado. O teste de velocidade foi realizado 5 vezes seguidas, os resultados mostraram que em todos os casos o site com o Autoptimize instalado ganhou todos os 3 fatores: velocidade de carregamento da página, tamanho da página e número de conexões. Quanto mais baixas essas estatísticas, melhor
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
