Confira o passo a passo para configurar o plugin Autoptimize

Quer descobrir como configurar o plugin Autoptimize? Então você sabe que a performance de um site está diretamente atrelada à velocidade de carregamento das páginas. 

Esse desempenho é crucial para bons resultados em SERPs e a maioria dos proprietários de sites que se atentam a esse requisito conseguem elevar seus resultados de visualização de página e, consequentemente, de conversão de leads.

Existem muitos recursos que podem ser aplicados em sites do WordPress para otimizar a configuração ou o código e impactar positivamente no desempenho das páginas em motores de pesquisa. O plugin Autoptimize é um exemplo de ferramenta gratuita que minimiza os códigos dos elementos em JS, CSS e HTML presentes nas páginas e, com isso, incrementa a velocidade de carregamento.

Se você tem essa preocupação em colocar as melhores estratégias de SEO em prática para otimizar a performance do seu site em motores de pesquisa, confira agora os principais pontos que abordamos neste artigo:

• Como instalar o Autoptimize?
• Como configurar as opções de minimização de CSS, JavaScript e HTML?
• Como configurar o CDN no Autoptimize?
• Quais outras configurações devo realizar?
• Quais outros plugins podem complementar a ação do Autoptimize?

Como instalar o Autoptimize?

O plugin Autoptimize consegue otimizar o desempenho das páginas e a velocidade de carregamento porque combina as melhores práticas de minimização de CSS, JavaScript e HTML com otimização de recursos do CDN, imagens, fontes do Google e remoção de emojis strings de Query Strings e CSS de bloqueio para renderização.

Para instalar o plugin Autoptimize, basta acessar o painel de administração do seu WordPress e executar os passos a seguir:

1. clique na opção “Adicionar novo”;
2. escreva na barra de pesquisa “Autoptimize”;
3. clique em instalar.

Você também pode baixar o pacote do plugin na página do desenvolvedor e adicioná-lo manualmente por meio do FTP para a pasta wp-content > plugins. Você também precisará descompactar os arquivos e conferir se o nome da pasta corresponde ao nome da extensão.

Depois de instalar e ativar o plugin, você deve acessá-lo na seção “plugins” da barra lateral do seu WP e iniciar as configurações.

Como configurar as opções de minimização de CSS, JavaScript e HTML?

Em uma interface simples e intuitiva, você terá acesso às configurações disponíveis para o plugin Autoptimize. São quatro as opções principais: HTML, JavaScript, CSS e CDN. Clique em cada uma delas para acessar a área de configurações avançadas, para que você consiga efetivar as configurações personalizadas.

Configurações de HTML

Nessa seção basta marcar a primeira caixa (Otimizar código HTML). Se você quiser manter os comentários, também precisará marcar a segunda caixa de seleção.

Configurações de JavaScript

Na seção de JavaScript você também precisará marcar a caixa “Otimizar código JavaScript”. Além disso, existem outras opções de configuração:

• agregar arquivos JS: nessa opção você pode incorporar todos os arquivos JS em um mesmo local;
• agregar também o JS em linha: se você escolher essa opção, pode aumentar a quantidade de memória de cache exigida pelo plugin Autoptimize, então essa opção não é muito recomendada;
• forçar o JavaScript no cabeçalho: essa configuração cria um arquivo JS para o cabeçalho e também não é indicada;
• excluir scripts do Autoptimize automaticamente: nessa seção o usuário pode escolher quais arquivos JavaScript podem ser excluídos no processo de otimização. Você precisará dessa opção caso algum elemento não funcione adequadamente no site — controle deslizante, menu móvel, seção de widgets ou imagens, por exemplo. Todos esses problemas podem ser resolvidos se você adicionar os arquivos jquery.js como formato passível de exclusão;
• adicionar empacotamento try-catch: essa função é um solucionador de problemas e deve ser ativado caso um dos arquivos JavaScript não funcione corretamente.

Configurações de CSS

Para garantir uma otimização completa, você pode ativar todas as caixas de seleção nas opções de configuração de CSS. Nessa seção, o plugin agregará ao HTML o processo de otimização dos arquivos individuais de CSS.

O usuário que optar pela seleção da caixa “generate data: URI for images” incluirá pequenas imagens de fundo no próprio CSS em vez de executar downloads separadamente.

Ao selecionar a caixa “inline all CSS” ou alinhar o CSS, o usuário pode melhorar a performance de sites com baixa visibilidade e taxa de visitantes únicos, mas pode diminuir o desempenho de outra forma.

Na seção “Exclude CSS from Autoptimizer” o usuário pode adicionar alguns arquivos CSS que ele não quer incluir no processo de otimização.

Os desenvolvedores do aplicativo criaram uma extensão, chamada “Power-up Autoptimize criticalcss.com”, que manipula automaticamente os arquivos CSS críticos. A extensão é integrável à ferramenta tradicional do Autoptimizer e funciona automaticamente após a instalação e ativação, mas o usuário também pode ajustar as configurações conforme as necessidades do site.

Como configurar o CDN no Autoptimize?

CDN (Content Delivery Network) é uma rede de servidores que atuam baseados em uma região geográfica para agilizar a entrega de conteúdo aos usuários. Dessa forma, a solução ajuda a otimizar o tempo de carregamento das páginas independentemente da localização do site.

O plugin Autoptimizer oferece a opção de carregar o arquivo otimizado automaticamente por meio de um CDN. Tudo o que o usuário precisa fazer é inserir a URL raiz do seu site no campo correspondente na seção de configurações do plugin.

Quais outras configurações devo realizar?

Na opção de configurações adicionais (Misc options) é possível selecionar duas opções. Por padrão, os arquivos são salvos em formato estático e o usuário deve desmarcar a primeira opção se o servidor não puder lidar corretamente com essa compressão. Além disso, desmarque a segunda opção enquanto usar o pagebuilder.

Em uma outra guia é possível visualizar opções de configuração relacionadas a outros elementos que interferem no desempenho de carregamento das páginas, como as fontes do Google, emojis e imagens.

A seção de otimização de imagens pode reduzir o peso da página consideravelmente, embora alguns usuários não recomendem essa opção por interferir na velocidade de download.

Entretanto, a opção lazyload pode ser ativada, pois esse recurso reduz a contagem de solicitações e o peso da página no carregamento inicial.

Na seção sobre Google Fonts, deixe marcada a opção “Combine and Preload in Head“, pois isso reduz a contagem de solicitações e carrega as fontes com exibição automatizada, permitindo que o texto seja renderizado antes que a fonte seja baixada.

Você pode ativar todas as demais opções dessa seção:

• remover emojis (a menos que você fala uso ativo de emojis em seu site);
• remover strings de consulta de recursos estáticos: esse recurso ajuda a reduzir as ferramentas de teste como GTmetrix, Google PageSpeed Insights e Pingdom. Ele também melhora a capacidade de armazenamento de cache.

Quais outros plugins podem complementar a ação do Autoptimize?

Se você deseja melhorar ainda mais a velocidade do seu site, pode considerar a adição de plugins que complementam a ação do Autoptimize. Veja quais são eles a seguir.

Plugin de armazenamento de cache

Plugins como o WP Super Cache, WP Rocket ou W3 Total Cache são opções indispensáveis para aumentar a velocidade de carregamento das páginas. Isso porque eles armazenam todos os elementos mais pesados no dispositivo do usuário para que todos esses elementos sejam carregados instantaneamente em um próximo acesso.

Esse processo agiliza muito o desempenho e, se combinado com a atuação do plugin Autoptimize, pode otimizar ainda mais a performance do seu site. Além disso, essas extensões são desenvolvidas para lidar com todos os aspectos técnicos que interferem na velocidade de sites em WordPress.

Yoast SEO

O pluginYoast SEO auxilia na performance das páginas por meio da busca de elementos que podem ser otimizados para SEO: melhoria de código, criação de sitemaps em XML, customização de páginas específicas, como a de erro 404, entre outras funções.

Optimole

Os elementos visuais costumam ser a maior parte dos recursos de um site. No entanto, você pode aumentar a performance de carregamento sem comprometer os elementos gráficos adicionados, por meio da ferramenta Optimole, que compacta as imagens, tem recursos lazyload e adequados à CDN.

Broken Link Checker

O Broken Link Checker é mais um plugin importante, que busca links quebrados que interferem na experiência de navegação dos usuários e, consequentemente, influencia na penalização dos sites pelos motores de pesquisa.

Plugins como Autoptimizer são imprescindíveis para que você não tenha que reduzir a quantidade de recursos visuais e dinâmicos do seu site para não comprometer a experiência de navegação e a velocidade de carregamento das suas páginas.

Agora que você sabe como configurar o plugin Autoptimizer, que tal aprender mais sobre o CSS com o artigo que selecionamos para você?