O Autoptimize é um plugin gratuito de otimização WordPress. Além da otimização HTML, CSS e JavaScript, o Autoptimize também inclui recursos de otimização direcionados a outros aspectos dos modernos sites WordPress.
Neste post, vamos compartilhar as melhores configurações de plugins Autoptimize para melhorar o desempenho e a velocidade da página do seu site WordPress.
Por que Autoptimizar?
Antes de mergulharmos nas melhores configurações do Autoptimize, vamos rapidamente analisar três razões pelas quais o Autoptimize é um ótimo plugin de otimização.
- A versão gratuita do Autoptimize tem um conjunto completo de recursos para otimizar o seu site WordPress.
- O Autoptimize é estritamente um plugin de otimização e não faz nenhum caching de páginas HTML. Isto significa que ele é compatível com todos os hosts web – mesmo aqueles com configurações de cache de páginas personalizadas como a Kinsta.
Autoptimizar as configurações de JS, CSS e HTML
HTML, CSS, e JavaScript é o pão e a manteiga da Autoptimize. Assim como com outros plugins de otimização, escavar no extenso conjunto de recursos e configurações do Autoptimize pode ser uma tarefa assustadora. Para facilitar, nós compilamos as melhores configurações do Autoptimize para melhorar o desempenho do seu site.
Opções de JavaScript
Otimize o código JavaScript
Recomendamos a habilitação desta opção. Quando “otimizar código JavaScript” estiver habilitado, o Autoptimize irá minificar seus arquivos JavaScript.
Arquivos JS Agregados
A opção “agregar arquivos JS” da Autoptimize irá combinar todos os seus arquivos JavaScript em um único arquivo. No passado, a combinação de arquivos JS e CSS era um passo fundamental na otimização do WordPress. Em Kinsta, usamos servidores HTTP/2 modernos que suportam downloads paralelos e multiplexação – isto significa que combinar arquivos não é mais tão importante quanto costumava ser porque o HTTP/2 permite que vários arquivos sejam baixados ao mesmo tempo. Com isso, agregar arquivos CSS e JS ainda resultará em um bump de velocidade para certos tipos de sites WordPress, então recomendamos testar a velocidade da sua página com esta opção habilitada e desabilitada.
Também Aggregate Inline JS
A opção “também agrega o JS inline” extrai o JS inline em seu HTML, e o combina com o arquivo JS otimizado da Autoptimize. Como esta opção pode causar um rápido aumento no tamanho do cache do Autoptimize, recomendamos manter esta opção desabilitada, a menos que você tenha uma razão específica para habilitá-la.
Forçar o JavaScript em
Na maioria dos casos, nós não recomendamos forçar o carregamento de arquivos JavaScript no elemento HTML <head> do seu site. Forçar o JS a carregar antecipadamente pode resultar em elementos de render-bloqueio que podem diminuir a velocidade da sua página. Se você tem arquivos JavaScript que precisam ser carregados no elemento <head>, nós recomendamos excluir esses scripts do Autoptimize.
Excluir Scripts do Autoptimize
Esta opção permite que você exclua diretórios e arquivos JavaScript específicos da agregação. Por padrão, o Autoptimize exclui os seguintes scripts.
- wp-inclui/js/dist/
- wp-inclui/j/tinymce/
- js/jquery/jquery.js
Note que a adição de um script a ser excluído afeta apenas a agregação por padrão. Os arquivos JavaScript excluídos ainda serão minificados a menos que “minify excluded CSS and JS files” esteja desmarcado em “Misc Options”.
Adicionar Embalagem Try-Catch
A ativação da opção “add try-catch wrapping” irá envolver o seu código JavaScript em blocos try-catch. Esta opção é útil para depuração de problemas causados pela minificação e agregação do JS. Se o seu site só funciona com “add try-catch wrapping” ativado, nós recomendamos que você trabalhe com um desenvolvedor para percorrer seus arquivos JavaScript para identificar o problema, pois o uso excessivo de blocos try-catch pode reduzir o desempenho do JS.
Opções CSS
Otimize o Código CSS
Recomendamos a habilitação desta opção. Quando “otimizar código CSS” estiver habilitado, o Autoptimize irá minificar seus arquivos CSS.
Arquivos CSS Agregados
A opção “agregar arquivos CSS” da Autoptimize irá combinar todos os seus arquivos CSS em um único arquivo. Como mencionamos anteriormente, este recurso pode não beneficiar os sites que suportam HTTP/2. Recomendamos que A/B teste esta opção em seu site para determinar se há algum impacto positivo na velocidade da página.
Também CSS Inline Aggregate
Esta opção irá mover o CSS inline para o arquivo CSS da Autoptimize. Enquanto mover CSS inline para um arquivo CSS com cache no navegador pode reduzir o tamanho da página, recomendamos deixar esta opção desabilitada na maioria dos casos.
Gerar Dados: URIs para Imagens
Quando esta opção estiver ativada, o Autoptimize irá basear64-encodificar pequenas imagens de fundo e incorporá-las ao CSS. Recomendamos testar esta opção para medir o impacto na velocidade da sua página. Enquanto codificar imagens no formato base64 reduz o número de solicitações HTTP, os arquivos de representações base64 são normalmente 20-30% maiores do que seus equivalentes binários.
CSS Inline e Deferir
O Inlining CSS crítico pode resultar em um aumento significativo de velocidade para alguns sites. A idéia aqui é de estilos em linha que são necessários para elementos que estão “acima da dobra”. Na prática, o CSS inline normalmente visa elementos como elementos estruturais, famílias e tamanhos de fontes globais, e estilo de navegação.
Ao destacar estes elementos-chave, o arquivo CSS completo maior pode ser carregado posteriormente sem impactar o visual da página. Embora seja possível extrair manualmente estilos críticos, recomendamos o uso de uma ferramenta como esta para gerar os estilos como um ponto de partida.
Após gerar o CSS crítico, copie e cole-o nas configurações do Autoptimize.
O próximo passo é testar a experiência de front-end do seu site. Se você notar alguns lashes estranhos de conteúdo não estampado (FOUC), você provavelmente precisará identificar esses elementos não estampados e adicionar os estilos correspondentes no Autoptimize para o inlining.
O Autoptimize oferece um “power-up” que gera automaticamente CSS críticos para as suas páginas do WordPress. A partir de nossa experiência, este recurso pode ocasionalmente diminuir a velocidade do seu site, pois utiliza chamadas API externas para gerar o CSS crítico. Assim, a geração inicial de CSS críticos depende da capacidade de resposta de um servidor externo. Na maioria dos casos, o método acima mencionado, que não requer nenhuma chamada API externa, é uma solução mais limpa
Inline todos os CSS
Para a maioria dos sites, não é recomendável a inserção de linhas em todos os CSS, pois isso pode aumentar drasticamente o tamanho da página. Além disso, o inlining de todos os CSS torna impossível o cache do CSS no navegador da web.
Excluir CSS do Autoptimize
Por padrão, a Autoptimize exclui os seguintes diretórios e arquivos CSS da agregação. Se você quiser evitar que a Autoptimize agregue qualquer um dos seus arquivos CSS, você pode adicioná-los a esta lista. Similar à exclusão JavaScript, o comportamento padrão deste recurso não impede que os arquivos CSS sejam minerados – apenas agregados.
- wp-content/cache/
- wp-content/uploads/
- admin-bar.min.css
- dashicons.min.css
Opções de HTML
A otimização HTML da Autoptimize pode ajudar a reduzir o tamanho de suas páginas, removendo o espaço em branco.
Otimize o código HTML
Recomendamos ativar o recurso de código “otimizar HTML” porque ele reduz o tamanho da página removendo espaços em branco desnecessários no seu HTML. Embora este recurso seja compatível com a maioria dos sites, remover espaços em branco pode causar falhas em alguns sites. Assim, recomendamos testar minuciosamente a otimização do código HTML antes de utilizá-lo em um ambiente de produção.
Manter Comentários HTML
Ative este recurso se você gostaria de manter comentários HTML para suas páginas otimizadas.
Opções CDN
Se você estiver usando Kinsta CDN ou um serviço proxy com capacidades CDN como o Cloudflare, você não precisa configurar nada nas opções CDN do Autoptimize. Para um impulso ainda mais rápido e fácil para sua otimização geral, você pode considerar a possibilidade de minificar seu código. Isto pode ser feito diretamente no painel MyKinsta usando o recurso de minificação de código.
Se, entretanto, você estiver usando um serviço CDN diferente para acelerar seus ativos, você entraria com a URL CDN neste campo.
Informações do Cache
O “cache info” da Autoptimize exibe informações importantes como a localização e permissões da pasta de cache, bem como o tamanho total dos estilos e scripts em cache. Se você vir “Não” ao lado de “Podemos escrever?”, você precisará trabalhar com seu host para corrigir as permissões da pasta.
Opções Diversas
O Autoptimize tem algumas configurações de otimização diversas. Se você está tendo problemas em obter arquivos CSS e JS otimizados para carregar em seu site, você pode precisar reconfigurar algumas das configurações abaixo.
Salvar Scripts/CSS Agregados como Arquivos Estáticos
Recomendamos habilitar esta opção para salvar arquivos agregados como arquivos estáticos localmente. Você pode precisar desativar esta opção se o seu servidor não estiver configurado para lidar com a compressão e expiração de arquivos.
Minify Excluídos Ficheiros CSS e JS
Recomendamos ativar esta opção para garantir que todos os arquivos CSS e JS sejam minerados. No entanto, se você notar alguns problemas relacionados à mineração com alguns dos seus arquivos CSS e JS excluídos, você pode ir em frente e desabilitar esta opção.
Otimizar também para Editores/Administradores Logados
Recomendamos habilitar isso para garantir que os ativos sejam otimizados para os editores e administradores logados. Isto é importante se você estiver testando as configurações do Autoptimize como um usuário logado.
Otimização de Imagem em Autoptimize
O Autoptimize possui uma integração integrada com ShortPixel para otimização de imagens. Além de uma configuração de qualidade de imagem, a integração com o Autoptimize também permite que você gere e atenda versões WEBP das suas imagens.
Para usuários Kinsta, não recomendamos o uso do recurso de otimização de imagem no Autoptimize. Ao invés disso, recomendamos usar os plugins completos do ShortPixel ou do Imagify diretamente. Com o plugin completo, você terá um controle mais granular sobre as configurações de otimização incluindo a reescrita das imagens para usar a tag <picture>, que é necessária para o suporte a WEBP na Kinsta.
O Autoptimize também inclui a funcionalidade de carregamento preguiçoso de imagens. Recomendamos a ativação deste recurso para melhorar a velocidade da página para páginas pesadas. Quando o carregamento preguiçoso é ativado, o Autoptimize permite que você exclua certas classes de imagens e nomes de arquivos de serem carregados com preguiça.
A configuração de exclusão é útil para imagens como logotipos, ícones sociais e outros elementos importantes da imagem que não devem ser carregados com preguiça. Se você está procurando uma solução que oferece mais controle sobre o carregamento de preguiçosos, confira nosso guia de carregamento de imagens e vídeos preguiçosos no WordPress.
Otimizações extras em Autoptimize
Fontes do Google
O Autoptimize tem algumas opções diferentes para otimizar as fontes do Google. A melhor opção para você vai depender de como o seu site utiliza as fontes do Google.
- Saia como está.
- Remova as fontes do Google.
- Combinar e ligar em cabeça.
- Combinar e pré-carregar na cabeça.
- Combinar e carregar fontes de forma assíncrona com o webfont.js.
Não recomendamos o uso da opção “sair como está”, pois ela não oferece nenhum benefício de velocidade.
Se o Google Fonts não é um requisito de missão crítica no seu site, removê-las e usar uma pilha de fontes do sistema pode ter um enorme impacto positivo na velocidade da sua página.
Se você gostaria de manter o Google Fonts em seu site, recomendamos testar as três últimas opções para descobrir qual funciona melhor para o seu site.
Remover Emojis
Esta opção de Autoptimize remove CSS e JavaScript relacionados ao núcleo emojis do WordPress. Recomendamos ativar esta opção porque ela pode ajudar a diminuir o tamanho da sua página. Além disso, a maioria dos principais sistemas operacionais são enviados com pilhas de fontes que incluem emojis. É claro que existem outras maneiras de desativar emojis no seu site WordPress.
Remover Strings de Consulta dos Recursos Estáticos
Se você quiser remover strings de consulta (ex. ?ver=) dos recursos estáticos, você pode habilitar esta opção. A remoção de strings de consulta não terá impacto no tempo de carga, mas pode ajudar a melhorar a pontuação do seu site em GTmetrix, Google Pagespeed, e outros serviços de teste de desempenho.
Pré-conexão a Domínios de Terceiros
A diretiva de pré-conexão permite que seu navegador se conecte a domínios específicos para processar consultas DNS e negociações de handshake SSL antes que uma requisição HTTP completa seja enviada.
Por exemplo, se o seu site tem uma imagem de logotipo que é servida a partir de https://site.kinsta.cdn.com/logo.png, você pode instruir a Autoptimize a adicionar uma diretiva de pré-conexão para lidar com as conexões DNS e SSL iniciais no elemento <head> antes que a solicitação HTTP seja feita no elemento <body> do seu HTML.
Você pode usar as ferramentas de desenvolvimento ou inspetor do seu navegador para encontrar domínios externos importantes para se conectar previamente. Na página de exemplo abaixo, há solicitações externas para os seguintes domínios.
https://cdn.brianli.comhttps://www.google-analytics.comhttps://www.googletagmanager.com
Estes três domínios podem ser adicionados à lista de pré-conexão da Autoptimize.
Por razões de desempenho, recomendamos adicionar não mais que seis domínios à lista de pré-conexão da Autoptimize, pois especificar diretivas de pré-conexão para muitos domínios pode resultar em um hit de desempenho.
Pedidos Específicos de Pré-carga
As diretrizes de pré-carga instruem seu navegador a fazer o download de um ativo o mais rápido possível. Esta diretiva é útil para o download de ativos que são necessários muito cedo no processo de carregamento da página. Na prática, o pré-carregamento é freqüentemente usado para acelerar o tempo de carregamento de fontes personalizadas, carregando-as antes que sejam solicitadas no CSS da página.
Recomendamos consultar um desenvolvedor para saber quais ativos, se houver, devem ser pré-carregados em seu site WordPress. Como em muitos outros ajustes relacionados ao desempenho, o pré-carregamento de muitos ativos pode fazer com que seu site carregue mais lentamente.
Arquivos Async JavaScript
O recurso “async JavaScript files” da Autoptimize permite que você especifique certos arquivos JavaScript externos para serem carregados assincronamente através do flag HTML async. Enquanto o carregamento assíncrono de arquivos JS pode melhorar a velocidade da página, nós recomendamos fazer testes adequados para garantir que nenhuma funcionalidade do site seja afetada.
Resumo
Se você agora ajustar suas configurações, o plugin Autoptimize é uma opção sólida para usuários do WordPress que procuram melhorar o desempenho do site.
Com recursos básicos como otimização HTML e CSS e mais avançados, como a capacidade de especificar diretivas de pré-conexão e pré-carga, a Autoptimize tem tudo que você precisa para otimizar o desempenho do frontend do seu site WordPress.
Se você está interessado em aprender mais sobre otimização de WordPress e como otimizar o backend do seu site, não deixe de conferir nosso abrangente guia de desempenho WordPress.
Deixe um comentário