Compartilhar facebook
Compartilhar linkedin
Compartilhar twitter
Compartilhar pinterest
Compartilhar google

Conteúdo

Otimizar o WordPress pode parecer uma tarefa assustadora. A colocação de plugins quebra tudo. Pode se tornar uma bagunça muito rapidamente. Alguns plugins de qualidade de imagem tornam as imagens feias, pequenas e inutilizáveis. Você acaba perdendo a qualidade do site por desempenho. Não se preocupe, ensinaremos passo a passo sobre como otimizar o wordpress e onde ter cuidado.

Exigências

  1. Otimizar automaticamente. Obtenha o plugin aqui
  2. Cache LiteSpeed instalado no seu servidor (opcional)
  3. PerfMatters. Obter plugin aqui
  4. ShortPixel (Você pode usar o Litespeed para substituir este plugin)

Eu sugiro fortemente que você use esses plugins para otimizar seu site WordPress. Eles podem ser extremamente úteis e otimizar as páginas do seu site por um custo barato.

AVISO: Isso pode danificar seu site WordPress. Crie uma sandbox para experimentar essas configurações antes de aplicar em um site em execução.

Otimizar automaticamente

A otimização automática é o melhor plug-in para gerar CSS crítico, ou seja, removerá a maioria das partes inúteis nos códigos css. Também otimiza códigos JS e os minimiza.

Opções de JavaScript

Algumas opções podem danificar seu site. Coloquei com cores as configurações que você provavelmente desejará aplicar ao seu site. Os verdes são menos propensos a quebrar seu site e os vermelhos são mais propensos a quebrar. Se você souber que o seu site está quebrado, procure o .js que está quebrado e tente adicioná-lo para "excluir da otimização automática". Isso corrigirá a maioria dos problemas.

Também agrega JS embutido?
Arquivos JS agregados? Agregar todos os arquivos JS vinculados para que eles sejam carregados sem bloqueio de renderização? Se essa opção estiver desativada, os arquivos JS individuais permanecerão no local, mas serão minificados.
Também agrega JS embutido? Deixe a otimização automática também extrair JS do HTML. Aviso: isso pode fazer com que o tamanho do cache da otimização automática cresça rapidamente, somente ative isso se você souber o que está fazendo.
Forçar JavaScript em ? Carregue o JavaScript cedo, isso pode potencialmente corrigir alguns erros de JS, mas faz com que o JS seja bloqueado.
Excluir scripts da otimização automática:
Uma lista de scripts separados por vírgula que você deseja excluir da otimização, por exemplo, 'Whatever.js, another.js' (sem as aspas) para impedir que esses scripts sejam agregados pela otimização automática. Importante: os arquivos não minificados excluídos ainda são minificados pela otimização automática, a menos que a opção em "misc" esteja desativada.
Adicionar embalagem try-catch? Se seus scripts quebrarem devido a um erro JS, você pode tentar isso.

Opções de CSS

Opções de CSS

Inline e adiar CSS?
Agregar arquivos CSS? Agregar todos os arquivos CSS vinculados? Se esta opção estiver desativada, os arquivos CSS individuais permanecerão no local, mas serão minificados.
Também agrega CSS embutido? Marque esta opção para Otimização automática para também agregar CSS no HTML.
Gerar dados: URIs para imagens? Habilite isso para incluir pequenas imagens de plano de fundo no próprio CSS, em vez de downloads separados.
Inline e adiar CSS? Coloque o CSS alinhado "acima da dobra" enquanto carrega o CSS principal otimizado automaticamente somente após o carregamento da página. Verifique o FAQ para mais informações. Isso pode ser totalmente automatizado para diferentes tipos de páginas no CriticalCSS aba.
Inline todo CSS? A inclusão de todo o CSS é uma maneira fácil de impedir que o CSS seja bloqueado pela renderização, mas geralmente não é recomendado porque o tamanho do HTML aumenta significativamente. Além disso, pode empurrar as meta-tags para uma posição em que, por exemplo, o Facebook e o Whatsapp não as encontrem mais, quebrando as miniaturas ao compartilhar.

O "inline all css" não é recomendado porque aumenta o tempo de carregamento. Embora possa ser carregado “assíncrono”, ele carrega na página e pode atrasar o tempo da primeira pintura.

Otimização de HTML

Otimizar código HTML?
Manter comentários em HTML? Habilite isso se desejar que os comentários em HTML permaneçam na página.

Eu não sugiro que você não mantenha comentários html, porque eles tendem a não ter nenhuma funcionalidade.

Otimização de imagem

Torne seu site significativamente mais rápido, basta marcar algumas caixas de seleção para otimizar e carregar suas imagens com preguiça, incluindo o suporte à WebP!

Otimizar imagensOtimize imagens em tempo real e atenda-as a partir da CDN global da Shortpixel. Obtenha mais amor do Google e melhore a velocidade de carregamento do seu site, otimizando as imagens publicamente disponíveis em tempo real (também no formato de imagem WebP de "nova geração"), ShortPixel e, em seguida, armazenados em cache e servidos rapidamente a partir da CDN global da Shortpixel. Inscreva-se agora para receber um bônus de 1 000 + mais 50% de créditos de otimização de imagem, independentemente do tráfego usado. Mais otimizações de imagem podem ser adquiridas a partir de $4.99.Questões? Dê uma olhada no Perguntas frequentes sobre ShortPixel! Funciona apenas para sites / imagens disponíveis publicamente. O uso desse recurso está sujeito às instruções do Shortpixel. Termos de uso e Política de Privacidade.
Carregar imagens preguiçosas?O carregamento lento de imagens atrasará o carregamento de imagens não visíveis para permitir que o navegador carregue de maneira ideal todos os recursos para a página "acima da dobra" primeiro.

Isso deve configurar o seu site. Fácil e sem muitos problemas. Este plugin também é gratuito.

Como eu disse, não deixe de testar completamente. Isso pode quebrar algumas funcionalidades.

Otimizações extras

Fontes do GoogleDeixe como está
Remover fontes do Google
Combine e vincule na cabeça (as fontes carregam rápido, mas bloqueiam a renderização), inclui display: swap.
Combinar e pré-carregar na cabeça (as fontes são carregadas com atraso, mas não são de bloqueio de renderização), inclui display: swap.
Combine e carregue fontes de forma assíncrona com webfont.js
Remover emojisRemove o CSS embutido dos emojis principais do WordPress, o JavaScript embutido e um arquivo JavaScript não otimizado de outra forma.
Remover cadeias de consulta de recursos estáticosRemovendo cadeias de consulta (ou mais especificamente o ver parâmetro) não melhorará o tempo de carregamento, mas poderá melhorar as pontuações de desempenho.

Agora vem a parte complicada. Esta parte só deve ser feita se você tiver certeza do que está fazendo.

Vá para tools.pingdom.com e teste seu site.

Guia fácil para otimizar o Wordpress em menos de 1 hora. 1

Você verá algo assim. Agora, isso informará quais links, se houver, você deve reconectar ou pré-buscar DNS. Este é um bom exemplo, porque nosso site se reconecta apenas às fontes do Google. Isso significa que menos tempo será usado para fazer pesquisas de DNS em outros sites. Nesse caso, não é muito relevante, mas neste exemplo eu poderia colocar:

fonts.gstatic.com, fonts.googleapis.com

Além disso, escute os insights de velocidade do Google, pois ele informa se é necessário pré-carregar alguma solicitação. Se eles sugerirem que você pré-carregue qualquer arquivo .js ou .css, coloque-o em "Pré-carregamento de solicitações específicas" e digite-o. No meu caso, colocarei a fonte conforme sugerem que ela seja carregada primeiro para melhorar o tempo de renderização.

Uma das vantagens adicionais do uso da otimização automática é a possibilidade de gerar arquivos de cache. Isso pode criar muitos arquivos, portanto, verifique se ele está sendo útil para o seu site. Além disso, sempre que você excluir o cache, será preciso mais para carregar seu site. Se você tiver muitas visitas em seu site, isso pode causar falhas e usar quantidades anormais de CPU.

Perfmatters

Este plugin custa. Mas é absolutamente vale a pena.

Opções

Selecione quais opções de desempenho você gostaria de ativar.

Desativar EmojisHabilitar
Desativar incorporaçõesHabilitar
Remover cadeias de consultaHabilitar
Desativar XML-RPCHabilitar
Remover jQuery MigrateHabilitar
Ocultar versão do WPHabilitar
Remover link wlwmanifestHabilitar
Remover link RSDHabilitar
Remover link curtoHabilitar
Desativar feeds RSSHabilitar
Remover links de feeds RSSHabilitar
Desativar auto-pingbacksHabilitar
Desativar API RESTHabilitar
Remover links da API RESTHabilitar
Desativar DashiconsHabilitar
Desativar Google MapsHabilitar
Desativar fontes do GoogleHabilitar
Desativar medidor de força da senhaHabilitar
Desativar comentáriosHabilitar
Remover URLs de comentárioHabilitar
Lazy LoadingBETAHabilitar
Usar nativoHabilitar
Desativar pulsaçãoDefaultDisable EverywhereOnly Allow ao editar postagens / páginas
Frequência de pulsação15 segundos (padrão) 30 segundos45 segundos60 segundos
Revisões pós-limiteO que você precisa saber para começar o dia bem-informado
Intervalo de gravação automática1 minuto (padrão) 2 minutos3 minutos4 minutos5 minutos
Alterar URL de loginPode ser útil para fins de segurança.

Isso vai depender muito do seu site. Se você possui o Google Maps ou não precisa de fontes do Google, faça o que for melhor para o seu site. Teste igualmente e verifique se isso não afeta nenhuma funcionalidade.

Na guia Extras, ative o "gerenciador de scripts".

Esta parte é muito útil, pois no google você recebe um alerta com a mensagem "remover arquivos css que não são usados" ou "remover arquivos js que não são usados"

Guia fácil para otimizar o Wordpress em menos de 1 hora. 2

Neste exemplo, você vê alguns arquivos quase totalmente não utilizados. Eles dizem que é possível economizar 10,3 de 10,6 KB, o que significa que provavelmente é seguro removê-lo. Teste minuciosamente ao fazê-lo. Os perfmatters nos ajudam aqui porque você pode desativá-los diretamente.

Vá para http://seudominio.com.br/seudominiowp/fileyouwanttoedit? perfmatters

ou apenas adicione ? perfmatters para a página que você deseja otimizar.

Aqui você verá os scripts que estão carregando.

Guia fácil para otimizar o Wordpress em menos de 1 hora. 3

Alguns terão as seguintes informações:

Guia fácil para otimizar o Wordpress em menos de 1 hora. 4

Lá você pode combiná-lo com as sugestões do Google de .css não utilizados. Desative todos os css não utilizados que você considerar que não afetarão seu site. Faça isso também com os arquivos .js. Mas, como eu disse antes, você praticamente precisa verificar as configurações, página por página, para ver qual funciona e qual não funciona. Este plug-in removerá todos os arquivos .js e .css não utilizados, o que aumentará drasticamente seu desempenho.

Pixel curto - Otimização de imagem

O Shortpixel é um dos melhores otimizadores de imagem do mercado. Estas são as minhas configurações:

otimização de imagem de pixel curto

No meu caso pessoal, me preocupo muito com a qualidade da imagem. Consequentemente, decido redimensionar minhas imagens para 1025 × 1024. A maioria das configurações apresentadas aqui será extremamente útil para o seu site.

Nas configurações avançadas da página, sugiro que você ative estas opções:

Conversão CMYK para RGB Ajuste as cores das imagens para o computador e para a tela da tela do celular. As imagens para a web precisam apenas do formato RGB e a conversão delas de CMYK para RGB as torna menores.
Imagens da WebP:Entregue as versões WebP das imagens no front-end:
Crie também Versões WebP das imagens, de graça.
 Usando o sintaxe da tag
 Global (processa todo o buffer de saída antes de enviar o HTML para o navegador)
Otimize imagens Retina Otimize também as imagens Retina (@ 2x), se existirem. Se você possui um plug-in Retina que gera imagens específicas da Retina (@ 2x), o ShortPixel também pode otimizá-las, juntamente com as imagens e as miniaturas comuns da Biblioteca de Mídia.  Mais informações 
Otimize outros polegares Otimize também as miniaturas não listadas, se encontradas. Alguns plug-ins criam miniaturas que não são registradas nos metadados, mas apenas as criam ao lado das outras miniaturas. Deixe o ShortPixel otimizá-los também. 
Otimize PDFs Otimize automaticamente documentos PDF.

Você deve ter muito cuidado se desejar ativar "Converter imagens PNG em JPEG", pois às vezes pode alterar as imagens desejadas com um fundo transparente.

Você também deve ativar estes:

Otimizar mídia no upload Otimize automaticamente os itens da Biblioteca de mídia após o upload (recomendado). Por padrão, o ShortPixel otimiza automaticamente todos os arquivos PDF e de imagem recém-carregados. Se você desmarcar isso, precisará executar o Bulk ShortPixel ou ir para a Biblioteca de mídia (na exibição de lista) e clicar no botão "Otimizar agora" do lado direito. 
Processo no front-end Otimize automaticamente as imagens adicionadas pelos usuários no front-end. Verifique se você possui usuários que adicionam imagens ou documentos PDF a partir de formulários personalizados no front-end. Isso pode aumentar a carga no seu servidor se você tiver muitos usuários conectados simultaneamente.

Cache LiteSpeed

Este plugin deve ser usado apenas se você tiver um servidor Litespeed. Reduz drasticamente os tempos de resposta.

Vá para Cache e ative todas as configurações em "configurações de controle de cache". Ative igualmente as configurações de controle de cache. Para mais informações, você deve ir para o Site Litespeed.