Autoptimize

Descrição

Autoptimize torna otimizar seu site muito fácil. Pode agregar, minificar e guardar em cache os scripts, estilos, colocar CSS na área head da página por padrão, mas também pode colocar CSS crítico em linha e adiar o carregamento do CSS completo, mover e adiar scripts para o rodapé e miniaturizar o HTML. Você pode otimizar e adiar o carregamento de imagens (com suporte para os formatos WebP e AVIF), otimizar Fontes Google, carregar JavaScript assincronamente, remover o excesso de emoji do WordPress. E desta forma pode melhorar o desempenho de seu site mesmo que você já esteja usando HTTP/2! Tem disponível uma API bem abrangente para que você modifique o Autoptimize para as necessidades de cada e todo tipo de site.
Se você considera desempenho importante, você realmente deveria usar um dos muitos plugins de cache de página. Alguns bons candidatos para complementar o Autoptimize são, por exemplo, o Speed Booster pack, o KeyCDN’s Cache Enabler, o WP Super Cache ou se você Cloudflare, o WP Cloudflare Super Page Cache.

Suporte Premium
Nós oferecemos serviços premium de Otimização de Performance Web e Suporte Pro para Autoptimize, veja nossa oferta em (http://autoptimize.com/)!

(Imagem Speed-surfing de LL Twistiti sob licença creative commons)

Instalação

Apenas instale a partir da tela “Plugins > Novo ” e tudo correrá bem. Instalação manual é simples também:

  1. Faça upload do arquivo zip e o descompacte no diretório /wp-content/plugins/
  2. Ative o plugin por meio do menu “Plugins” no WordPress
  3. Vá para Configurações > Autoptimize e ative as opções que desejar. Geralmente isto significa “Otimizar HTML/ CSS/ JavaScript”.

FAQ

Você oferece ou recomenda um curso em como otimizar WordPress ou usar Autoptimize

Existem muitos recursos online excelentes, gratuitos e premium, mas o “Autoptimize Masterclass” da Load Labz destaca-se pela abordagem sistemática e detalhada no curso baseado em vídeo. Dê uma olhada na(s) aula(s) de teste grátis e quando tiver interesse, certifique-se de usar o cupom EarlyBird para obter um desconto!

O que este plugin faz para ajudar a acelerar meu site?

Concatena todos os scripts e folhas de estilo e os minifica e comprime, adiciona cabeçalhos de expiração, faz cache deles, e move os estilos para o <head>, e os scripts (opcionalmente) para o rodapé. Também minifica o próprio código HTML, tornando sua página realmente leve.

Mas eu estou com HTTP/2, então não preciso de Autoptimize?

HTTP/2 certamente é um grande passo à frente, reduzindo o impacto de requisições múltiplas para o mesmo servidor ao usar a mesma conexão para realizar várias requisições ao mesmo tempo. Dito isto, concatenar CSS/ JS ainda pode fazer muito sentido, como descrito neste artigo do css-tricks.com (em inglês) e neste blogpost
de um dos engenheiros do Ebay
(em inglês). Conclusão: configure, teste, reconfigure, teste de novo, ajuste e veja o que funciona melhor no seu contexto. Talvez seja só HTTP/2, talvez seja HTTP/2 + agregação e minificação, talvez seja HTTP/2 + minificação (o que AO também faz).

Isto vai funcionar no meu blog?

Embora Autoptimize venha sem nenhuma garantia, em geral vai funcionar sem falhas se você configurá-lo corretamente. Veja as informações de “Resolução de Problemas” abaixo sobre como configurar em caso de problemas.

Por quê jquery.min.js não é otimizado

Começando com AO 2.1, o jquery.min.js do WordPress core não é otimizada pela simples razão de que um monte de plugins populares adicionam JS em linha que também não são agregados (devido a possíveis problema de tamanho de cache com códigos únicos no JS em linha) que depende do jquery estar disponível, então excluir jquery.min.js garante que a maioria dos sites vão funcionar por padrão. Se você também quer otimizar o jquery.js, pode removê-lo da lista de exclusão de otimização de JS (você talvez tenha que habilitar “também agregar o JS em linha” ou ligar o “forçar JS no cabeçalho).

Por quê o JS Autoptimizado bloqueando renderização?

Se não usar “Forçar JavaScript na seção head?”, o JS Autoptimizado não bloqueia a renderização e tem o parâmetro “defer” adicionado. Entretanto, é possível que outros plugin remova o parâmetro “defer”. Já foi reportado o plugin Speed Booster Pack fazendo isto, mas o comportamento não foi confirmado ainda.

Porquê o CSS autoptimizado ainda é considerado como bloqueador de render.

Na configuração padrão do Autoptimize o CSS é linkado no elemento “head”, que é um padrão seguro mas vai fazer o Google PageSpeed Insights reclamar. Você pode dar uma olhada em “Colocar todo CSS inline?” (fácil) ou “CSS em linha e adiado?”(melhor) que também são explicadas nestas Perguntas Frequentes.

Qual é a função de “CSS em linha e adiado”?

Em geral, CSS deveria ir no <head> do documento. Recentemente, o Google começou a promover o adiamento de CSS não essencial, ao mesmo tempo que coloca em linha os estilos necessários para mostrar a área “acima da borda” da página. Isto é especialmente importante para renderizar as páginas o mais rápido possível em dispositivos móveis. Desde o Autoptimize 1.9.0 isto é fácil; selecion “CSS em linha e adiado”, cole o bloco de “CSS acima da borda” no campo de texto e e está tudo pronto!

Mas como posso saber o que é o “CSS acima da borda”?

Não há solução fácil já que “acima da borda” depende de onde a borda (inferior) é, o que depende do tamanho da tela. Entretanto, existem algumas ferramentas que tentam identificar o que é “acima da dobra”. Esta lista de ferramentas (em inglês) é um bom ponta de partida. http://jonassebastianohlsson.com/criticalpathcssgenerator/ (inglês) é uma solução básica boa e http://criticalcss.com/ (inglês) é uma ferramenta premium do mesmo desenvolvendor. Como alternativa este bookmarklet (inglês e apenas para Chrome) pode ajudar também.

Deveria colocar todo o CSS em linha?

A resposta curta: provavelmente não. Embora colocar todo o CSS em linha pode fazer o CSS não bloquear a renderização, vai resultar num HTML básico muito grande, e portanto requerer mais conexões. Além disso se, em uma sessão de navegação, forem acessadas múltiplas páginas, o CSS será enviado a cada vez, enquanto que se não for colocado em linha, seria servido do cache na segunda página visitada em diante. E finalmente, o CSS em linha vai enviar as meta-tags do HTML para uma posição mais para baixo onde o Facebook ou Whatsapp podem não ver, deixando de mostrar miniaturas nestas plataformas, por exemplo.

Meu cache está ficando enorme, o Autoptimize não esvazia o cache?

Autoptimize não tem um mecanismo próprio para limpar o cache, já que isto poderia remover CSS/JS otimizado que ainda estariam sendo referidos por outros caches, o que poderia quebrar seu site. Além disto, um cache aumentando muito rapidamente é indicação de outros problemas que você deveria evitar.

Você pode manter o tamanho do cache num nível aceitável das seguintes formas:

  • desativando as opções “agregar JS em linha” e/ou “agregar CSS em linha”
  • excluindo variáveis JS (ou seletores CSS em alguns casos) que mudam página à página (ou a cada carregamento. Você pode ler como fazer isto neste post (em inglês).

Apesar das objeções, há algumas soluções de terceiros para expurgar automaticamente o cache do AO, e.g usar este código (em inglês) ou este plugin, mas pelas razões acima isto deve ser considerado apenas se você realmente souber o que está fazendo.

“Limpar cache” aparentemente não funciona?

Quando clicar no link “Apagar CAche” no menu dropwdow Autoptimize na barra da administração, você pode ver a mensagem “Seu cache pode não ter sido limpo com sucesso”. Neste caso vá até a página de configuração do Autoptimize e clique no botão “Salvar mudanças & e limpar o cache”.

Ademais, não se preocupe se seu cache nunca cai para 0 arquivos / 0 KB, já que o Autoptimize (desde a versão 2.2) vai automaticamente pré carregar o cache imediatamente após ter sido limpo para acelerar ainda mais a minificação.

Meu site parece que quebrou quando limpei o cache do Autoptimize!

Ao limpar o cache do AO, nenhum cache de páginas deve conter páginas (HTML) que se refiram ao CSS/JS otimizado removido. Embora para essa finalidade haja integração entre Autoptimize e alguns caches de páginas, essa integração não cobre 100% das configurações, portanto, talvez seja necessário limpar o cache de páginas manualmente.

Eu ainda posso usar o Rocket Loader do Cloudflare?

O Rocket Loader da Cloudflare é uma forma bem avançada, mas invasiva, de fazer o seu JavaScript não bloquear a renderização, que a Cloudflare ainda considera BETA. Algumas vezes o Autoptimize & o Rocket Loader trabalham bem, algumas não. A melhor tática é desativar o Rocket Loader, configurar Autoptimize e re-ativar o Rocket Loader (se você achar que vai ajudar) depois disto e testar se tudo funciona.

No momento (Junho 2017) parece que o RocketLoader pode quebrar o “CSS em linha e adiado” do AO, que é baseado no loadCSS do Filamentgroup, resultando no CSS adiado não sendo carregado.

Eu tentei o Autoptimize mas meu placar Google Pagespeed mal melhorou

Autoptimize não é um plugin do tipo “arrume meus problemas com o Pagespeed”; ele “apenas” agrega & e minifica JS & CSS (local) e permite alguns extras como remover fontes do Google ou adiar o carregamento do CSS. Como tal, Autoptimize vai permitir que você melhore o desempenho (tempo de carregamento em segundos) e também provavelmente vai ajudar a resolver alguns avisos específicos do Pagespeed. Se você quer melhorar ainda mais, você também provavelmente vai querer dar uma olhada em, por exemplo, cache de página, otimização de imagens e a configuração de seu servidor, que vai melhorar desempenho pra valer (novamente, tempo de carregamento como medido por exemplo pelo https://webpagetest.org) e notas de “melhores práticas de desempenho” no Pagespeed.

O que posso fazer com a API?

Um monte; existem filtros que você pode usar para desabilitar o Autoptimize condicionalmente por requisição, mudar as exclusões de CSS e JS, para mudar o limite de imagens de fundo CSS para serem colocadas em linha no CSS, para definir quais arquivos JS são movidos para trás do que está agregado, para mudar o atributo “defer” na tag script do JS agregado… há muitos exemplos de diversos filtros no arquivo autoptimize_helper.php_example e nesta FAQ.

Como funciona uma CDN?

Desde a versão 1.7.0, a CDN é ativada ao digitar o diretório raiz da CDN do blog (e.g. http://cdn.example.net/wordpress/). Se esta URL está presente, será usada para todos os arquivos gerados pelo Autoptimize (i.e. CSS e JS agregado), incluindo imagens de fundo no CSS (quando não estiver usando data-uri’s).

Se você deseja que as imagens que fez upload estejam na CDN também, você pode mudar o upload_url_path na sua configuração do WordPress (/wp-admin/options.php) para coincidir com o diretório de upload da CDN (e.g. http://cdn.example.net/wordpress/wp-content/uploads/). Leve em consideração que isto só funciona para imagens que forem enviadas a partir deste momento, não para as que já foram feitas upload. Obrigado a BeautyPirate pela dica (em inglês)!

Por quê minhas fontes não são colocadas na CDN também?

Autoptimize suporta isto, mas não é habilitado por padrão por quê fontes não locais podem requerer alguma configuração extra (em inglês). Mas se você tem suas políticas de requisição de origem cruzada em ordem (CORS policies), você pode dizer ao Autoptimize para colocar suas fontes na CDN usando um “hook” da API, configurando autoptimize_filter_css_fonts_cdn para true desta forma;

add_filter( 'autoptimize_filter_css_fonts_cdn', '__return_true' );

Eu estou usando Cloudflare, o que devo usar como diretório raíz da CDN

Nada, quando está na Cloudflare, seu CSS/JS autotimizado vai para a CDN do Cloudflare automaticamente.

Como posso forçar os arquivos agregado serem CSS ou JS estáticos ao invés de PHP?

Se o seu servidor estiver configurado adequadamente para lidar com compressão (gzip ou deflate) e expiração de cache (expiração e controle de cache com “cacheabilidade” suficiente), você não deve precisar que o Autoptimize cuide disto por você. Neste caso você deve marcar a opção “Salvar scripts/CSS agregados como arquivos estáticos?”, o que vai forçar o Autoptimize a salvar os arquivos agregados como arquivos .css e .js (o que significa que PHP não é necessário para servir estes arquivos). Esta configuração é a padrão desde o Autoptimize 1.8.

Como funciona o “Excluir scripts do Autoptimize”?

Otimização tanto de CSS e de JS podem deixar de agregar e minimizar códigos ao se adicionar “identificador” para a lista de exclusão, separados por vírgulas. O texto identificador exato pode ser determinado da seguinte forma:

  • se você quer excluir um arquivo específico, e.g. wp-content/plugins/funkyplugin/css/style.css, você pode simplesmente excluir “funkyplugin/css/style.css”
  • se você deseja excluir todos os arquivos de um plugin específicos, e.g. wp-content/plugins/funkyplugin/js/*, você pode, por exemplo, excluir “funkyplugin/js/” ou “plugins/funkyplugin”
  • se você deseja excluir código em linha, você vai ter que achar uma sequência de texto de única e específica no bloco de código e adicionar à lista de exclusão. Por exemplo: para excluir´funky_data=’Won\’t you take me to, Funky Town’`, o identificador é “funky_data”.

Configurando & Resolvendo Problemas com Autoptimize

Depois de instalar e ativar o plugin, você terá acesso à página de administração onde você pode habilitar a otimização de HTML, CSS e JavaScript. De acordo com seu gosto, você pode simplesmente ativar todos, ou se você for mais cauteloso, um de cada vez.

Se o seu blog não funciona normalmente após ligar o Autoptimize, aqui tem algumas indicações para identificar & resolver certos problemas usando “configurações avançadas”:

  • Se está tudo funcionando mas você nota que seu blog está mais lento, certifique-se que você tenha um plugin de cache instalado (WP Super Cache ou similar) e verifique a informação sobre tamanho de cache (a solução para o problema também impacta a performance de páginas sem cache) que estão neste FAQ.
  • Caso o seu blog pareça estranho, ou seja, quando o layout fica confuso, há um problema com a otimização de CSS. Tente excluir um ou mais arquivos CSS de serem otimizados. Você também pode forçar o CSS para não ser agregado envolvendo-o com noptimize-tags em seu tema ou widget ou ainda, adicionando os nomes dos arquivos (para folhas de estilos externos) ou string (para estilos em linha) à lista de exclusão.
  • Caso alguma funcionalidade do seu site pare de funcionar (um carrousel, um menu, a busca, …) provavelmente você está com problema de otimização de JavaScript. Desabilite a opção “Agregar JS em linha” e ative “Forçar Javascript na <head>?” e tente novamente. Excluir ´jquery.js´ da otimização (veja abaixo) e opcionalmente ativar “Adicionar encapsulamento try/catch” (em inglês) também pode ajudar. Alternativamente — para os com experiência técnica — você pode excluir scripts específicos do tratamento (mover e/ou agregar) do Autoptimize adicionando um trecho de texto que vai corresponder com o Javascript dando problema, ou excluí-lo do seu arquivo de template ao encapsular o código entre tags “noptimize”. Identificar o Javascript problemático e escolher o texto correto para a exclusão é algo de tentativa e erro, mas na maioria dos casos os problemas com otimização de JavaScript são resolvidos desta forma. Quando depurando problemas de JavaScript, o console de erros do seu navegador é a ferramenta mais importante para descobrir o que está acontecendo.
  • Se seu tema ou plugin requer JQuery, você pode tentar forçar tudo no elemento head e/ou excluir jquery.min.js (e plugins JQuery, se necessário).
  • Se você não consegue fazer funcionar a otimização de CSS ou de JS, você pode continuar usando as outras duas técnicas de otimização.
  • Se você tentou as dicas para resolver problemas acima e ainda não consegue fazer o CSS ou JS funcionar, você pode pedir suporte no fórum de suporte WordPress do Autoptimize. Veja abaixo a descrição da informação que você deveria prover no seu “pedido de ajuda”.

Eu exclui os sites mas eles continuam sendo autoptimizados?

AO miniaturiza o JS/CSS se o nome do arquivo indica que não foi miniaturizado ainda. Desde o AO 2.5 você pode desativar isto na aba “JS, CSS & HTML” em opções diversas, desmarcando “arquivos excluídos do miniaturizar”

Socorro, apareceu uma página em branca ou “internal server error” depois de habilitar o Autoptimize!!

Certifique-se de não estar usando nenhum outro plugin de minificação de HTML, CSS ou JS (BWP Minify, WP Minify, …) ao mesmo tempo que o Autoptimize ou desabilite esta funcionalidade do seu plugin de cache (W3 Total Cache, WP Fastest Cache, …). Tente habilitar somente a otimização de CSS ou somente a de JS para ver qual delas causa erro no servidor e siga o passos de consertos gerais para encontrar uma solução.

Mas eu ainda tenho arquivos CSS ou JS “autoptimizados” em branco!

Se você está usando Apache, o arquivo .htaccess escrito pelo Autoptimize pode, em alguns casos, entrar em conflito com as configurações AllowOverrides da configuração de seu Apache (como no caso da configuração padrão de alguns Ubuntu), o que resulta em “internal server errors” nos arquivos CSS e JS do Autoptimize. Isto pode ser resolvido configurando AllowOverrides para All (em inglês).

Não consigo logar em multisite com domínios mapeados

Multisite utilizando mapeamento de domínio requerem que o Autoptimize seja inicializado numa ação diferente do WordPress, adicione esta linha de código ao seu wp-config.php para utilizá-lo junto ao setup_theme, por exemplo:

define( 'AUTOPTIMIZE_SETUP_INITHOOK', 'setup_theme' );

Não aparecem erros, mas minhas páginas não são otimizadas?

Autoptimize faz uma série de verificações antes de realmente otimizar. Quando uma das condições abaixas for verdadeira, suas páginas não serão otimizadas:

  • quando no personalizador
  • Se não tiver uma tag <html abrindo
  • se tiver <xsl:stylesheet na resposta (o que indica que a resposta não é HTML, mas XML)
  • se tiver <html amp na respostas (já que páginas AMP já são otimizadas)
  • Se o resultado é um feed RSS (função is_feed())
  • Se o resultado é uma página de administração do WordPress (função is_admin())
  • Se a página for solicitada com ?ao_noptimize=1 na URL
  • se o código se conecta ao Autoptimize para desabilitar otimização (veja o tópico sobre o Visual Composer)
  • Se outros plugins usarem o buffer de saída de forma incompatível (desative outros plugins seletivamente para identificar o causador)

Visual Composer, Beaver Builder e soluções similares para construir páginas estão quebradas!!

Desative a opção de Autoptimizar também para usuários logados e divirta-se arrastando e soltando 😉

Ajuda, o checkout/pagamento de minha loja não funciona!!

Desativa a opção de optimizar páginas carrinhos/checkout (funciona para WooCommerce, Easy Digital Downloads e WP eCommerce).

Revolution Slider está quebrado!

Certifique-se que js/jquery/jquery.min.js está na lista de exclusões de JS separadas por vírgulas (ele é excluído na configuração padrão).

Estou recebendo erros “jQuery não está definido”

Neste caso você tem um JavaScript não agregado que requer que o jQuery seja carregado, então você terá que adicionar js/jquery/jquery.min.js a uma lista de exclusão de JS separada por vírgula.

Eu uso NextGen Galleries e váriso JS não agregados/minificados?

O plugin NextGen Galleries faz algumas coisas estilosas para adicionar JavaScript. Para que o Autoptimize possa agregar isto, você ou desativa o gerenciamento de recursos do Nextgen Gallery com este trecho de código add_filter( 'run_ngg_resource_manager', '__return_false' ); ou você pode configurar o Autoptimize para inicializar mais cedo, adicionando isto a seu arquivo wp-config.php: define("AUTOPTIMIZE_INIT_EARLIER","true");

O que é noptimize?

A partir da versão 1.6.6 o Autoptimize exclui tudo dentro de tags noptimize, e.g.:
<!--noptimize--><script>alert(‘isto não será autoptimizado’);</script><!--/noptimize-->

Você pode fazer isto no conteúdo de sua página ou post, nos widgets e nos arquivos de seu tema (considere criar um tema filho par evitar que seu trabalho seja substituído quando houver atualização do tema).

Posso mudar o diretório & nome de arquivo dos arquivos do autoptimize em cache?

Sim, se você deseja servir arquivos de, por exemplo, /wp-content/resources/aggregated_12345.css ao invés do padrão /wp-content/cache/autoptimize/autoptimize_12345.css, então adicione isto ao seu wp-config.php

define('AUTOPTIMIZE_CACHE_CHILD_DIR','/resources/');
define('AUTOPTIMIZE_CACHEFILE_PREFIX','aggregated_');

Isto funciona com WP_CONTENT_URL que não é padrão?

Não, o Autoptimize não dá suporte a WP_CONTENT_URL que não seja padrão, mas você pode conseguir isto com algumas linhas de código através da API do Autoptimize.

O JS e o CSS gerados podem ser pré-gzippados?

Sim, mas isto é desligado por padrão. Você pode habilitar passando ‘true’ para ‘autoptimize_filter_cache_create_static_gzip’. Obviamente, você vai precisar configurar seu servidor para usar estes arquivos ao invés dos não-gzippados para evitar excesso de carga na compressão durante execução.

O que “remover emoji’s” faz?

Esta nova opção em Autoptimize 2.3 remove o CSS em linha, o JS em linha e o arquivo JS linkado pelo WordPress básico. E desta forma pode ter um impacto positivo no desempenho de seu site.

“Remover parâmetros da URL” é útil?

Embora algumas ferramentas de avaliação de desempenho coloquem “parâmetros de versão na URL” como um problema de performance, em geral este impacto é quase inexistente. Portanto, desde a versão o Autoptimize permite que você remova os parâmetros (ou mais precisamente, o parâmetro “ver”), mas marcar “Remover variáveis da url de recursos estáticos” vai ter pouco ou nenhum impacto no desempenho do seu site ao medir os (mili)segundos

(Como) devo otimizar as Fontes Google?

Tipicamente as Fontes Google são carregadas por um arquivo CSS linkado que bloqueia a renderização. Se você tiver um tema e plugins que usam Fontes Google, você pode acabar com vários destes arquivos. Autoptimize (desde a versão 2.3) agora deixa você diminuir o impacto das Fontes Google seja removendo elas totalmente ou otimizando o jeito que elas são carregadas. Estes são os dois “sabores” de otimização; o primeiro é “combinar e linkar”, que substitui todas as requisições para Fontes Google numa única requisição, o que ainda pode bloquear a renderização mas vai permitir as fontes serem carregadas imediatamente (significando que você não vai ver as fontes mudando enquanto a página está carregando). A alternativa é “combinar e carregar de forma assíncrona”, que usa JavaScript para carregar as fontes de forma a não bloquear a renderização mas que pode causar o texto a “piscar” quando a fonte for carregada.

Devo usar “preconnect”?

Preconnect é uma funcionalidade um tanto avançada que instrui navegadores (se eles suportarem) a fazerem uma conexão a domínios específicos, mesmo que a conexão não seja necessária de imediato. Isto pode ser usado, por exemplo, para diminuir o impacto de recursos de terceiros (já que requisições DNS, conexões TCP e negociação SSL/TLS são executadas mais cedo). Use com cuidado, já que pré conectar a muitos domínio pode ser contraprodutivo.

Quando (não)posso usar JS assíncrono?

Arquivos JavaScript que não são autoptimizados (por quê eles foram excluídos ou estão hospedados em outros lugares) tipicamente bloqueiam a renderização. Ao adicioná-los no campo “async JS”, Autoptimize irá usar o parâmetro async fazendo com o que o navegador carregue estes arquivos de forma assíncronamente (i.e. sem bloquear a renderização). Isto pode potencialmente quebrar o seu site (página), e.g. se você colocar “js/jquery/jquery.js” assíncrono você provavelmente verá erros do tipo “JQuery is not defined”. Use com cuidado.

Como a otimização de imagens funciona?

Quando a otimização de imagens está ligada, o Autoptimize vai procurar por arquivos png, gif, jpeg (.jpg) em tags “de imagens e nos seus arquivos CSS que são carregadas a partir de seu próprio domínio e mudam o atributo src (origem) destas para a CDN da ShortPixel. Importante: isto só funciona em imagens disponíveis publicamente, ou o intermediário de otimização de imagens não vai conseguir obter a imagen para otimizar, então firewalls, proxies, proteção por senha ou mesmo prevenção de hotlinking pode quebrar a otimização de imagens.

Posso usar otimização de imagens para minha intranet ou site protegido?

Não; a otimização de imagens depende de um serviço externo de otimização de imagens conseguir baixar a imagem original do seu site, otimizá-la e salvá-la em uma CDN. Se suas imagens não podem ser baixadas por visitantes anônimos (devido a firewall / proxy / senha / proteção contra hotlink), a otimização de imagens não vai funcionar.

Onde posso conseguir mais informações sobre otimização de imagens?

Dê uma olhada nas Perguntas Frequentes do Shortpixel.

Posso desabilitar que AO fique “ouvindo” a limpeza de cache de páginas?

A partir da versão 2.4, o Autoptimize “ouve” as limpezas de cache no WordPress para limpar o seu próprio cache. Você pode desabilitar usando este filtro.

add_filter('autoptimize_filter_main_hookpagecachepurge','__return_false');

Alguns dos caracteres que não são ASCII se perdem depois da otimização

Por padrão o AO usa métodos que não seguros para multibyte, mas se seu PHP tem a extensão mbstring você pode habilitar funções seguras para multibyte com este filtro;

add_filter('autoptimize_filter_main_use_mbstring', '__return_true');

Não consigo fazer o Critical CSS funcionar

Verifique a FAQ do plugin “melhoria” aqui, que será integrado nesta FAQ no futuro.

Eu ainda preciso da melhoria Critical CSS quando eu tenho Autoptimize 2.7?

Quando taato o Autoptimize 2.7 quando o plugin de melhoria Critical CSS separada estiverem instaladas e ativas, o plugin da melhoria vai cuidar da parte do CSS crítico. Quando você desativar o plugin de melhoria, o código de CSS crítico integrado no Autoptimize 2.7 vai tomar conta.

O que “ativar contigências de 404” fazem? Por quê eu precisaria disto?

O Autoptimize guardaCSSon/JS agregados e otimizados e os links para estes arquivos são guardado no HTML, que será guardado num cache de página (que pode ser um plugin, pode ser no nível do servidor, pode ser um terceiro, cache do Google, ou em um navegador). Se houver HTML em uma cache de páginas que tem link para CSS/JS Autoptimized qu foi removido nom eio tempo (quando o cache foi limpo) então a página do cache não vai funcionarS/JS não foi encontrado (um erro 404).

Esta configuração busca servir um CSS ou JS de contigência para prevenir que coisas quebrem. Os arquivos de contigência são cópias dos primeiros arquivos CSS & JS Autoptimizados criados depois que o cache foi limpo e desta forma, serão baseados na página inicial. Isto significa que o CSS/JS pode não se aplicar 100% a outras páginas, mas ao menos o impact dos CSS/JS não encontrados serão diminuidos (frequentemente de forma significante).

Quando esta opção está ativada, o Autoptimize adiciona ErrorDocument 404 ao .htaccess (como usado pelo Apache) e também vai se conectar ao gancho template_redirect do núcleo do WordPress. Ao usar NGINX, algo como o que está abaixo deve funcionar (Não sou especialista em NGINX, mas funciona para mim);

location ~* /wp-content/cache/autoptimize/.*\.(js|css)$ {
    try_files $uri $uri/ /wp-content/autoptimize_404_handler.php;
}

E esta é uma boa abordagem alternativa (fornecida por fboylovesyou);

location ~* /wp-content/cache/autoptimize/.*\.(css)$ {
    try_files $uri $uri/ /wp-content/cache/autoptimize/css/autoptimize_fallback.css;
}
location ~* /wp-content/cache/autoptimize/.*\.(js)$ {
    try_files $uri $uri/ /wp-content/cache/autoptimize/js/autoptimize_fallback.js;
}

Que projetos ou programas de código aberto são utilizados em Autoptimize?

Os seguintes excelentes projetos de código aberto são usados no Autoptimize de uma forma ou outra:

Onde posso conseguir ajuda?

Você pode obter ajuda no fórum de suporte do wordpress.org (em inglês). Se você tem 100% de certeza que este é um problema que não pode ser resolvido usando a configuração do Autoptimize e que, de fato, descobriu um erro no código, você pode criar um incidente no Github (em inglês). Se você está em busca de suporte premium, consulte nossos Serviços de Suporte Profissional e Serviços de Otimização.

Desisti, como eu deveria remover Autoptimize?

  • Desabilita o plugin (isto vai remover as opções e o cache)
  • Remova o plugin
  • Limpe qualquer cache que talvez possa ter páginas que referenciam CSS/JS “Autoptimizadas” (e.g. de um plugin como o WP Super Cache)

Como posso ajudar/contribuir?

Apenas faça um fork do Autoptimize no Github e programe!

Avaliações

5 de agosto de 2021
I use this plugin on a number of websites that I have built and it works really well, with minimal input required. In addition, the tech support I have had via the forum, when asking an important question, has been wonderful. Thanks!
3 de agosto de 2021
Thanks for this plugin. It effectively reduced the size of my website’s javascript, html and css. Furthermore, together with WP Super Cache it gave us A99% Page Speed in GT Metrix and reduced the number of requests. Keep up the good work always.
28 de julho de 2021
An amazingly elegant and simple way to speed up your website, which nowadays is a must-do both for the user experience and for SEO reasons. Super easy to set up out of the box and a super flexible plugin. If optimizing any individual JS or CSS file gives you an issue you can exclude it, but just about everything works perfectly out of the box!
28 de julho de 2021
FreeBSD 9.1-RELEASE web: Apache PHP: 7.2.24 DB: 5.0.92 (MySQL) WordPress: 4.9.18 language: ja (言語: 日本語) Just need this plugin if you build wordpress like above. Thanks great plugin, and Happy Birthday, Papa!
27 de julho de 2021
It has improved my website's performance quite spectacularly and if there are ever any issues, the support is fast and effective! This is why everyone in the WordPress community knows Autoptimize 🙂
Leia todas as 1.269 avaliações

Colaboradores e desenvolvedores

“Autoptimize” é um software com código aberto. As seguintes pessoas contribuíram para este plugin.

Colaboradores

“Autoptimize” foi traduzido para 29 localizações. Agradecemos aos tradutores por suas contribuições.

Traduzir “Autoptimize” para o seu idioma.

Interessado no desenvolvimento?

Navegue pelo código, dê uma olhada no repositório SVN ou assine o registro de desenvolvimento via RSS.

Registro de alterações

2.9.0

  • Novo: Configurações de otimização automática por página / postagem, para que se possa desabilitar otimizações específicas (precisa ser habilitado na página principal de configurações em “Opções diversas”).
  • Novo: “adiar JS em linha” como subopção de “não agregar, mas adiar”, permitindo adiar (quase) todos os JS.
  • Melhoria: a otimização de imagem agora alterna automaticamente entre AVIF e & WebP & amp; Jpeg mesmo se carregamento tardio (lazyload) não estiver ativo (AVIF deve ser explicitamente ativado).
  • Melhoria: reordenação das configurações de “otimização de JavaScript”
  • Diversas outras pequenas correções, consulte o registro de confirmação do GitHub

Este lançamento coincide com o aniversário de 76 anos do meu pai, que continua a ser uma grande inspiração para mim. Ele é um engenheiro mecânico que, após a aposentadoria, concentrou seus conhecimentos técnicos, experiência e curiosidade sem fim no design e prototipagem de caneta-tinteiro, inventando um novo mecanismo de cartucho (bulkfiller) no processo. Pesquise na web por Fountainbel para saber mais sobre ele (ou leia esta postagem de blog mais antiga que escrevi em holandês). Amo você, papais!

2.8.4

  • correção para uma vulnerabilidade XSS autenticada

2.8.3

  • Corrige o sumiço do arquivo ao-minify-html.php

2.8.2

  • Imagens: mostrar o aviso “você conhecia ShortPixel”apenas nas páginas de configurações do Autoptimize (sem deixar “sujeira” por todo o painel)
  • Imagens: atualiza o lazysizes das bibliotecas
  • Imagens: melhorias diversas como correção para o aviso “undefined index” do PHP, texto atualizado, …
  • HTML: renomeie a classe de miniaturização de HTML de minify_HTML para AO_minify_HTML para evitar conflitos com, por exemplo, e.g. W3TC
  • CSS Crítico: melhorias diversas como detectar is_front_page antes de qualquer outra regra condicinoal, correção de regras condicionais sem uma condição real, registro de depuração (debug log) aprimorado, …
  • JS/ CSS: correção para o AO não estar otimizando sub sites em instalação multisite quando CDN está configurado

2.8.1

  • Imagens: nova opção para não adiar carregamento das primeiras X imagens
  • correção de erros de conversão de “array para string” durante a lógica de otimização de arquivos .ico
  • muda a abreviação .click(no JS da barra de ferramentas & no aviso de dispensar PaND) para atender ao auxiliar do jQuery Migrate (e por quê é melhor assim)

2.8.0

  • JavaScript: nova opção “adiar mas não agregar”
  • JavaScript: garante que o Autoptimize também aja sobre o jQuery no WordPress 5.6, que foi renomeado de jquery.js para jquery.min.js
  • Imagens: adicione campo para impedir que as imagens sejam otimizadas.
  • Imagens: novo filtro (autoptimize_filter_imgopt_lazyload_from_nth) para dizer ao Autoptimize para não carregar as primeiras X imagens (para melhorar o LCP / CLS).
  • CSS Crítico: importantes melhorias no mecanismo de processamento de tarefas, reduzindo o tempo gasto de até 1 minuto para apenas alguns segundos.
  • CSS Crítico: em “opções avançadas”, substitui “limite de solicitação” que “limite de tempo de processamento da fila” (padrão de 30s).
  • Extra | Fontes Google: analise melhor das URLs da versão 2 das fontes Google (/css2/).
  • Diversos outras correções menores, veja registro de commit no GitHub.

2.7.8

  • Otimização de imagens: adiciona suporte para o formato de imagem AVIF para os browsers que o suportam. Ativado na opção existente WebP, e também requer que carregamento tardido (lazy load) esteja ativo
  • CSS Crítico: mais melhorias de segurança na importação de configuração do CSS crítico, basedo no sugerido pelo Marcin Weglowski da afine.com
  • Diversos outras correções menores, veja registro de commit no GitHub.

2.7.7

  • CSS crítico: assegura que páginas tenham uma regra baseada no caminho mesmo que exista um CPT (Custom Post Type) ou modelo correspondente (cuando a opção “regras baseadas em caminhos para as páginas”)
  • CSS crítico: assegura que “descarregar javascript CCSS” é adicionado uma vez só.
  • telas de configurações: muda de jQuery .attr() para .prop()como sugerido pelo jQuery Migrate para preparar para as atualizações grandes que estão vindo para jQuery
  • Miniaturização de HTML: reverte o array de do marcador de espaço para garantir que o último marcador de espaço substituído seja alterado novamente para corrigir problemas raros
  • correção de segurança: agradecimentos a Erin Germ por encontrar e reportar uma vulnerabilidade de XSS autenticada
  • correção de segurança: agradecimentos ao testador de penetração anônimo por ter encontrado e reportado uma vulnerabilidade de envio (upload) autenticado de arquivo malicioso

2.7.6

  • correção para barra de administração no top da interface pública quando “em linha & adiado” está ativo.
  • correção para arquivos CSS de terceiros não sendo adiados quando “em linha & adiado” está ativo.
  • pequenas mudanças no texto na tela configurações Extra.

2.7.5

  • correção urgente para precarregar & agregar Fontes Google que quebraram “di cum força” no 2.7.4

2.7.4

  • Otimização de imagem: também otimização links de ícones
  • Otimização de imagem: corrige detecção de WebP para Safari (contribuição de @pinkasey)
  • Carregamento tardio de imagens: remove o CSS que esconde a imagem temporária, ativa a transição entre as imagens temporárias e as finais.
  • CSS Crítico: nova opção avançada para descarregar o CCSS no onLoad
  • Melhoria no CSS Crítico: armazena modelos em um transiente para evitar a sobrecarga de ter que fazer buscas no sistema de arquivos o tempo todo (contribuição do @pratham2003)
  • melhoria de CSS Crítico: lógica de adiamento de jQuery melhorada, mas ainda experimental
  • correção no CSS Crítico: evita que regras MANUAIS baseadas em modelos sejam sobrescritas
  • CSS em linha & adiado: mudando da abordagem velha baseada em loadCSS para o método novo mais simples do Filamentgroup’s
  • 404 de contigência ativado por padrão nas instalações novas
  • Mudada todas as ocorrenção de blacklist/ whitelist (lista negra / lista branca) para blocklist/ allowlist (lista de bloqueio / lista de permissões). Os filtros autoptimize_filter_js_whitelist e autoptimize_filter_css_whitelist ainda funcionam no 2.7.4 mas estão sendo descontinuados e substituídos por autoptimize_filter_js_allowlist e autoptimize_filter_css_allowlist.
  • arquivo readme atualizado para confirmar que Autoptimize usa licença GPL + louvar projetos de código aberto utilizados pelo plugin, algo que já estava bem atrasado!
  • testado e confirmado que funciona com WordPress 5.5 (beta 2)

2.7.3

  • CSS Crítico: guarda configurações no processo de PHP ao invés de recoletá-los
  • CSS Crítico: intervalos mais curtos entre as chamadas para o criticalcss.com (diminuindo o tempo de processamento da fila de trabalho assíncrona)
  • CSS em linha &: correção para alguns arquivos excluídos não sendo pré carregados
  • 404 de contigência: cria arquivos de contigência somente para CSS/JS, não para imagens de fundo (background-images)
  • mudanças nos texto como sugerido por Cyrille (@css31), un grand merci!
  • Diversos outras correções menores, veja registro de commit no GitHub.

2.7.2

  • CSS Crítico: corrige erros na página de configurações com certos textos de tradução
  • CSS Crítico: corrigindo “em linha & adiado” não aparecer nas configurações de rede multisite
  • CSS Crítico: adiciona links para regras baseadas em caminho
  • CSS crítico: correção para URLs que não sejam ASCII não correspondendo às regras
  • Melhoria: desativa automaticamente em URLs de diversos construtores de página
  • Melhoria: não muda o CSS não agregado se já tem um atributo onload
  • Melhoria no carregamento adiado de imagens: remove &quot; das imagens de fundo

2.7.1

2.7.0

  • Integração da melhoria Critical CSS.
  • Nova opção para garantir que arquivos autoptimizados não encontrados com JS/CSS de contigência.
  • Lote de melhorias e correções menores diversas , mais informação no log de commit do Github.

older