As 36 maneiras de acelerar o seu site WordPress

√Č uma loucura l√° fora.

Não quero ser cínico, mas aqui está a verdade:

A maioria das postagens sobre a aceleração do WordPress é uma bagunça.

No topo da lista, eles incluem dicas que só irão acelerar o seu menu de administrador em 0.01s ou literalmente não melhorarão o desempenho.

Depois, na parte inferior, incluem algumas das técnicas de desempenho mais impactantes disponíveis.

Isso √© uma loucura. √Č assim que meu guia de desempenho √© organizado …

Comece com etapas de alto impacto.

Primeiro, listei o 9 maneiras mais chocantes de acelerar seu site. Essas são, de longe, as etapas mais importantes que você pode executar para acelerar o carregamento do site.

De fato, se você não usar nenhuma tática além da primeira 9, estará bem.

Depois disso, você encontrará 27 maneiras adicionais de acelerar o WordPress. Cada uma dessas táticas tornará seu site um pouco mais rápido e se baseará nos resultados que você já alcançou.

E há mais uma coisa que você deve saber.

Estas s√£o as t√°ticas exatas que eu uso

N√£o estou listando nenhuma t√°tica aqui que n√£o esteja usando no momento.

De fato, antes de escrever este post, criei uma ótima lista de técnicas de desempenho que incluíam algumas coisas que eu nunca havia experimentado antes e todas elas.

O Competethemes.com já estava carregando rapidamente, mas depois de usar todas as táticas de desempenho listadas abaixo, é incrivelmente rápido.

Aqui est√£o os resultados do GTMetrix:

Temas de competição GtmetrixA primeira vez que recebo uma pontuação de 100% no PageSpeed

E se eu usar um local próximo em Pingdom, eles relatam que meu site é carregado apenas 00,571 segundos.

Teste de velocidade Pingdom

Alguns pontos de referência rápidos antes de iniciar:

  • > O tempo de carregamento 3s √© lento
  • 2-3s tempo de carregamento √© bom
  • 1-2s o tempo de carregamento √© r√°pido
  • O tempo de carga 0-1s √© muito r√°pido
  • Seu primeiro objetivo deve ser carregar seu site em menos de tr√™s segundos. √Č realmente importante atingir essa refer√™ncia ou voc√™ tem certeza de que os visitantes saem antes que o site termine de carregar.

    Se você implementar o primeiro 9 táticas, então você não deve ter problemas para diminuir o tempo de carregamento 3 segundos.

    Se você deseja que seu site seja carregado em apenas 1s, precisará usar a maioria, se não todas as táticas listadas aqui e é muito trabalho. Eu não culpo você se você se cortar alguns segundos com as táticas 1-9 e você chama um dia

    Você provavelmente está ansioso para começar agora, portanto, este é o passo mais importante que você pode executar para acelerar seu site.

    Este post é escandalosamente longo! Você provavelmente não terminará tudo de uma só vez, então verifique se adicione esta página aos favoritos para que você possa voltar sempre otimizando seu site.

    1. Mude para um host mais r√°pido

    Hospedagem é o poder do seu site.

    Com uma hospedagem mais poderosa, todo o site ser√° carregado mais rapidamente.

    Você pode implementar outras técnicas com grande efeito, mas todas funcionarão melhor com um host de alto desempenho. Além disso, mudar de host atualmente é realmente fácil.

    Eu uso o Kinsta para tópicos de competição e não posso recomendá-los o suficiente.

    Kinsta

    Al√©m dos backups di√°rios automatizados, o belo painel do usu√°rio e o suporte ao chat realmente √ļtil‚Ķ

    Eles far√£o o seu site carregar muito r√°pido.

    O Kinsta funciona muito bem porque é construído na infraestrutura de nuvem do Google.

    Infraestrutura Kinsta

    Normalmente, esse tipo de tecnologia especializada está disponível apenas para empresas devido ao custo e à dificuldade de implementação, mas a Kinsta cuida de tudo isso para você. Você só obtém o desempenho incrível.

    Uso o Kinsta há seis meses e já estava satisfeito com o serviço deles quando o desempenho de todos aumentou aleatoriamente de 30 a 200% algumas semanas atrás.

    Depois de quase uma década executando sites WordPress, nunca tive um host que o possua.

    Dê uma olhada em Kinsta →

    A hospedagem é a base do desempenho do seu site; portanto, se você pular todo o resto, siga esta etapa corretamente.

    A próxima coisa mais importante que você pode fazer para acelerar o site WP é adicionar o cache.

    2. Adicionar cache

    O que é 90,027 dividido por 17?

    Para responder a isso, voc√™ precisa pegar uma calculadora, discar os n√ļmeros e, em seguida, pode dizer com seguran√ßa a resposta que √© 531.

    Agora vou perguntar novamente o que é 90,027 dividido por 17?

    Desta vez, você soube a resposta instantaneamente porque a armazenou em sua memória.

    Isso é cache.

    Quando algu√©m visita seu site, ele executa v√°rios processos para gerar a p√°gina. Sem armazenamento em cache, isso acontece sempre que algu√©m visita seu site. √Č como usar uma calculadora para obter a resposta repetidamente.

    Como voc√™ pode entender, isso √© extremamente in√ļtil.

    Com o cache, seu site gera uma p√°gina uma vez e a salva da mesma maneira que voc√™ salvou o n√ļmero 531 em sua mem√≥ria. Ent√£o, quando algu√©m visita seu site novamente, a c√≥pia em cache √© veiculada imediatamente, sem a necessidade de executar todos os processos usados ‚Äč‚Äčoriginalmente para criar a p√°gina.

    Ter sentido?

    Agora vamos falar sobre como tirar proveito dessa tecnologia em seu site.

    Como adicionar cache ao seu site

    Primeiro de tudo, seu host pode fornecer armazenamento em cache interno. Isso é verdade para o Kinsta e muitos outros hosts de alto desempenho. Portanto, você já pode ter adicionado cache.

    Se o seu host não fornece armazenamento em cache, há muitos plugins para você escolher. Na minha opinião, a melhor opção é o WP Rocket.

    WP Rocket

    O WP Rocket fornece cache ultra-r√°pido e muitas outras otimiza√ß√Ķes de desempenho. Vou me referir a este plugin cem vezes mais ao longo deste post, para que voc√™ veja tudo o que ele pode fazer.

    Embora o Kinsta forneça cache, eu também uso o WP Rocket devido às outras ferramentas de desempenho incluídas.

    Você pode seguir o meu tutorial de configuração do WP Rocket para começar:

    Dê uma olhada no WP Rocket →

    Se voc√™ quiser uma alternativa gratuita, recomendo o WP Super Cache, se voc√™ quiser algo f√°cil de usar, e o W3 Total Cache, se desejar op√ß√Ķes mais avan√ßadas.

    Hospedagem e cache de alto desempenho são definitivamente os recursos de velocidade mais importantes que o seu site precisa. Disse isso …

    H√° apenas uma coisa que pode prejudicar completamente seu desempenho.

    Você DEVE seguir estes três passos abaixo

    Depois de ter as configura√ß√Ķes de cache, volte sua aten√ß√£o para as imagens em seu site.

    Se você não otimizar suas imagens, seu site atingirá tempos de carregamento de 2-3 segundos.

    As imagens podem ser uma carga enorme para os tempos de carregamento. Por isso, incluí as três maneiras de otimizá-las aqui.

    A primeira maneira de otimizar suas imagens é compactá-las.

    3. Comprima suas imagens

    Os algoritmos modernos de compactação de imagem são incríveis.

    Eles podem reduzir o tamanho do arquivo de uma imagem em 70% sem afetar significativamente sua qualidade. O ponto é que você pode fazer com que todas as imagens em seu site sejam carregadas muito mais rapidamente sem diminuir a qualidade. Não tem problema, sério!

    Quando se trata de otimização de imagens, meu plugin favorito é o Optimole.

    Optimole Plugin

    Você aprenderá mais sobre o Optimole nas próximas duas etapas, mas aqui está o que você precisa saber primeiro:

    O Optimole usa um algoritmo de compactação muito eficaz para compactar suas imagens em uma fração do tamanho do arquivo anterior. O que é ainda melhor é que é muito fácil de usar.

    Outros plugins de otimização de imagem editam as imagens no seu site e usam os recursos do seu servidor. O Optimole não toca nos originais Рeles copiam suas imagens para o servidor e as otimizam para lá. Isso mantém sua Biblioteca de mídia organizada e seu site não fica mais lento quando as imagens são compactadas.

    Se você quiser aprender a configurar o Optimole no seu site, siga o meu vídeo completo:

    Uma excelente alternativa √© o plugin ShortPixel. √Č um pouco mais dif√≠cil de configurar, mas ainda √© muito f√°cil de usar.

    Felizmente, usei o ShortPixel neste site por anos e só mudei para o Optimole para esta próxima tática.

    4. Alterar o tamanho das suas imagens

    Preste muita atenção, porque os detalhes são críticos.

    Aqui est√° a grande ideia:

    Quanto maiores as dimens√Ķes de uma imagem, maior o tamanho do arquivo.

    Por exemplo, uma imagem de 3.000 pixels de largura podem ter 900 kb, mas quando redimensionados para 600 pixels de largura, são apenas 60 kb. Isso é uma redução de 15x no tamanho do arquivo!

    Aqui está o porquê de ser tão importante.

    As imagens nesta postagem do blog mostrar√£o apenas 600 pixels de largura na parte mais larga. No meu exemplo, esta imagem foi redimensionada para 600 pixels de largura e tem apenas 60 kb.

    Imagem de exemplo

    Se você não redimensionou a imagem e usou a versão do 3.000 pixels, a imagem seria a mesma para você, mas levaria 15 vezes mais tempo para carregar.

    Em outras palavras, dimensionar corretamente suas imagens antes de inseri-las em suas postagens pode fazer uma grande diferença na velocidade de carregamento do seu site.

    Aqui est√° o problema.

    Você provavelmente não sabe exatamente a largura das imagens exibidas em suas postagens. Além disso, os dispositivos móveis tornam isso mais complicado. No que diz respeito ao tamanho da tela, se considerarmos todos os diferentes monitores e dispositivos móveis, existem literalmente milhares a serem considerados.

    Se você deseja exibir imagens do tamanho perfeito para seus visitantes, eles precisam ser dimensionados dinamicamente, e foi por isso que comecei a usar o Optimole.

    Optimole gera automaticamente vers√Ķes de tamanho perfeito de suas imagens Se algu√©m visitar seu site e a imagem exibir 400 pixels de largura, o Optimole fornecer√° uma vers√£o dessa imagem com 400 pixels de largura.

    Outro visitante pode chegar à página um segundo depois usando um tablet que exibe a imagem com 510 pixels de largura e o Optimole carregará uma cópia diferente da imagem com exatamente 510 pixels de largura.

    Os ganhos de desempenho obtidos com isso s√£o e a melhor parte √© que voc√™ n√£o precisa fazer nada al√©m de instalar o plugin Optimole. Funciona no momento em que voc√™ o ativa, sem sequer tocar em nenhuma configura√ß√£o. √Č assombroso!

    Experimente o Optimole no seu site ‚Üí

    Há mais uma maneira de otimizar imagens no seu site que pode fazer uma grande diferença.

    5. Carregue preguiçosamente suas imagens

    Esta postagem no blog é muito longa e tem muitas imagens.

    Se você leu até aqui, é provável que esteja nesta página há pelo menos um minuto. Sabendo disso, quão tolo seria fazer você carregar todas as imagens em todo o post na primeira vez que carregou esta página? Você ainda não alcançou muitas das imagens e não precisa carregá-las ainda.

    Com carregamento lento, apenas as imagens que aparecem na tela são carregadas. Em seguida, à medida que você rola a página, as imagens restantes são carregadas conforme aparecem na tela.

    Fiz uma visualização neste vídeo que ilustra como isso funciona de forma mais clara do que posso explicar escrevendo:

    Agora que você entende como o carregamento lento funciona, vamos falar sobre a implementação.

    Como adicionar carregamento lento

    Adicionar carregamento lento é realmente fácil, tornando-o uma tática obrigatória na minha opinião.

    Primeiro, se você instalou o Optimole, ele adiciona automaticamente o carregamento lento, para que você termine com essa tática.

    Segundo, se voc√™ n√£o estiver usando o Optimole, mas decidiu usar o WP Rocket, basta marcar esta caixa aqui nas configura√ß√Ķes:

    Configuração de carga lenta do foguete Wp

    Por fim, se você não usar nenhum desses dois plug-ins, instale o a3 Lazy Load.

    Carga preguiçosa A3

    o a3 Lazy Load √© um excelente plugin e inclui muitas op√ß√Ķes de configura√ß√£o.

    Em posts de blog como este, o carregamento lento √©. √Č uma das minhas otimiza√ß√Ķes de desempenho favoritas.

    As duas otimiza√ß√Ķes a seguir andam de m√£os dadas e s√£o especialmente importantes para sites WordPress.

    6. Minimize seus arquivos

    Você acabou de aprender que a compactação de imagens faz com que sejam carregadas mais rapidamente porque as imagens compactadas têm um tamanho de arquivo menor.

    Às vezes, nos referimos ao tamanho do arquivo como, portanto, compactar uma imagem reduz seu peso.

    A grande ideia é que reduzir o peso do seu site torna o carregamento mais rápido. Isso significa que você deseja reduzir o tamanho de cada arquivo carregado pelo site.

    Além de imagens, seu site carrega arquivos CSS, arquivos Javascript e arquivos de fonte, entre outros tipos de arquivo. Mantenha esse pensamento por um momento e vamos falar sobre minificação.

    Minificação é um termo de programação sofisticado que basicamente significa compactação para arquivos baseados em texto. Você imagens e arquivos. Para nossos propósitos, não precisamos obter mais detalhes do que isso.

    Assim como você compactou suas imagens, você pode minimizar seus arquivos CSS e Javascript (e HTML) para torná-los menores e reduzir o peso da sua página.

    Como minificar arquivos

    Novamente, adicionar minificação ao seu site é simples.

    Com o WP Rocket, existem caixas de seleção para ativar a minificação CSS, JS e HTML.

    Wp Rocket MinifyMinimizar seus arquivos CSS com o WP Rocket é simples

    Isso é tudo o que você precisa fazer.

    A minimização é muito importante para sites do WordPress, porque você provavelmente tem pelo menos seis plugins e um tema para fazer upload de arquivos para o seu site. Muitas vezes, os desenvolvedores não minimizam os arquivos, então o WP Rocket cuida disso para você.

    Para uma alternativa gratuita à minificação, consulte o plugin Otimização automática.

    7. Concatene seus arquivos

    é outro termo técnico que significa "combinar".

    Ao concatenar arquivos, você os combina.

    Novamente, como voc√™ possui todos esses plug-ins instalados no upload de arquivos, √© importante usar um plug-in como o WP Rocket para combin√°-los no menor n√ļmero poss√≠vel de arquivos. √Č por isso que …

    Voc√™ aprendeu que reduzir o peso da sua p√°gina faz com que ela seja carregada mais rapidamente, mas h√° outro fator de desempenho para otimizar: solicita√ß√Ķes HTTP.

    Eu sei que este post está ficando bastante técnico, então vou manter isso o mais simples possível.

    Todo arquivo que você envia requer uma solicitação HTTP. Cada imagem, arquivo JS, arquivo CSS etc. exige uma solicitação HTTP.

    Seu site possui um n√ļmero fixo de solicita√ß√Ķes HTTP que ele pode manipular ao mesmo tempo, portanto, h√° um efeito de gargalo ao fazer upload de arquivos. Por esse motivo, quanto menos solicita√ß√Ķes de HTTP o seu site fizer, mais r√°pido ele ser√° carregado.

    Como exemplo, se o seu site tiver 5 Arquivos CSS que são 5 O kb será carregado mais rapidamente se você os mesclar em um arquivo CSS de 25 kb.

    Com a minifica√ß√£o, reduzimos o peso dos arquivos do seu site e, em seguida, com a concatena√ß√£o, os combinamos para reduzir as solicita√ß√Ķes HTTP.

    Como adicionar concatenação

    Também podemos usar o plugin WP Rocket para essa otimização.

    Existem caixas de seleção para concatenar arquivos CSS e arquivos JS.

    Wp Rocket Concatenate

    Voc√™ s√≥ precisa marcar as duas caixas, salvar as altera√ß√Ķes e pronto.

    Essas op√ß√Ķes tamb√©m est√£o dispon√≠veis no plug-in Otimiza√ß√£o autom√°tica.

    Esta próxima dica pode surpreendê-lo, mas, na minha opinião, é outra otimização imprescindível.

    8. Carregar arquivos com uma CDN

    A internet é mágica.

    Direito?

    Mas sério, não, não é.

    √Č uma rede de computadores e as conex√Ķes nessa rede s√£o basicamente f√≠sicas.

    Pode parecer estranho pensar nisso, mas a dist√Ęncia entre o servidor em que o conte√ļdo do seu site est√° armazenado e a localiza√ß√£o do visitante √© muito importante.

    Se o seu servidor estiver em Nova York e alguém de Tóquio visitar seu site, levará mais tempo para os arquivos chegarem a eles do que se alguém visitar em Nova York.

    Eu disse que era estranho pensar em ūüėú

    E se você também armazenasse uma cópia do seu site em um servidor em Tóquio? Não seria mais rápido para os visitantes do Japão?

    Sim

    E é exatamente isso que uma CDN faz.

    CDN significa e é essencialmente uma rede de servidores que armazena em cache cópias do seu site em todo o mundo.

    Dessa forma, n√£o importa onde algu√©m esteja quando o visitarem, h√° um servidor pr√≥ximo para entregar o conte√ļdo do seu site.

    Quando voc√™ ativa uma CDN pela primeira vez, pode n√£o parecer √ļtil se voc√™ mora perto do servidor de origem do host. O mais importante √© a rapidez com que o site √© carregado para o resto do mundo.

    Como adicionar uma CDN ao seu site

    Existem algumas op√ß√Ķes s√≥lidas para adicionar uma CDN ao seu site.

    Primeiro, se você se registrou no Kinsta, pode usar sua CDN incorporada. Tudo o que você precisa fazer é ativá-lo no menu.

    Habilitar Kinsta Cdn

    Embora eu use o Kinsta, eu uso o CDN Cloudflare, que está disponível no seu nível de preço gratuito. Uso o CDN do Cloudflare porque também uso seu firewall para bloquear muito tráfego de bot que este site estava recebendo.

    A configuração do Cloudflare é bastante fácil e traz vários outros benefícios. Você pode seguir as etapas aqui para usar o Cloudflare no seu site.

    Al√©m do Cloudflare, existem outras CDNs populares pagas, mas eu n√£o testei pessoalmente nenhuma delas, portanto n√£o posso fazer recomenda√ß√Ķes adicionais.

    Eu tenho apenas mais um impulsionador de desempenho para você antes de todos os extras.

    9. Escolha um tópico rápido

    Ok, eu tenho que admitir, essa √ļltima dica √© um pouco diferente.

    Muitos blogueiros do WP dizem para você escolher um tema que carrega rapidamente, mas como desenvolvedor de temas, deixe-me explicar como ele realmente funciona.

    Um tema WordPress será o seu site. Em vez disso, você está procurando um que seja o seu site. Dito isto, a menos que o tópico seja realmente mal feito, ele não tornará o site mais lento se você estiver usando as táticas listadas acima. Eu vou explicar

    Com todos os meus temas, cobro o mínimo possível, continuando a criar uma experiência de usuário moderna e elegante. Isso significa que os temas são carregados apenas:

  • Um arquivo CSS
  • Um arquivo Javascript reduzido
  • Uma solicita√ß√£o do Google Fonts
  • Fonte Font Awesome icon (para √≠cones sociais)
  • Sem fazer sacrif√≠cios de design (como usar um sistema), √© o m√≠nimo que voc√™ pode obter um tema.

    Nem todos os tópicos são otimizados, mas não é necessariamente uma preocupação. Isso ocorre porque, mesmo que seu tema não seja bem otimizado e carregue dois arquivos CSS e três arquivos Javascript e nenhum deles seja minimizado, um plug-in como o WP Rocket os concatenará e os reduzirá para você, para que o resultado final seja praticamente o mesmo.

    Basicamente, é improvável que seu tópico torne o site mais lento se você usar as estratégias de desempenho listadas acima.

    Escolha um tema de um desenvolvedor respeit√°vel e o desempenho do tema n√£o ser√° um problema.

    Otimiza√ß√Ķes adicionais

    Ugh!

    Este post já é muito mais longo do que eu esperava, e se você chegou até aqui, espero que esteja empolgado para aprender ainda mais sobre otimização de desempenho.

    No restante deste post, abordarei otimiza√ß√Ķes t√©cnicas e mais espec√≠ficas. Fiz essas dicas o mais amig√°vel poss√≠vel. Alguns deles s√£o f√°ceis de implementar, mas para ser honesto, alguns s√£o muito avan√ßados e √© assim que deve ser ūü§∑‚Äć‚ôāÔłŹ

    Use o máximo que puder no seu site e lembre-se de ter implementado o primeiro 9 táticas, então você já obteve a maioria dos resultados.

    10. Adie o Javascript

    Se você usar apenas uma tática no restante desta lista, use esta.

    Sem se perder demais nos detalhes técnicos, a ordem na qual você carrega os arquivos para o seu site é muito importante. Este conceito é chamado.

    A id√©ia √© que o CSS do seu site seja carregado primeiro, porque o site ser√° uma tela branca em branco at√© que isso aconte√ßa. Quanto aos arquivos Javascript, eles provavelmente s√£o usados ‚Äč‚Äčpara coisas como an√°lise que n√£o precisam ser carregadas imediatamente.

    Em vez de manter uma página em branco enquanto o JS é carregado, ele adia os arquivos JS até que todo o resto tenha sido carregado no seu site. Dessa forma, seu site é carregado na mesma quantidade de tempo, mas faz com que pareça mais rápido.

    O conceito é bastante avançado, mas mais uma vez não é tão difícil de implementar.

    Como adiar Javascript

    Você vai amar isso.

    T√£o avan√ßada quanto a t√°tica, tudo o que voc√™ precisa fazer √© marcar uma caixa nas configura√ß√Ķes do WP Rocket.

    Wp Rocket Defer Js

    A menos que você saiba o que está fazendo, recomendo que você também marque a opção "Modo de segurança".

    Também existe uma maneira de otimizar seu CSS para o caminho de renderização.

    11. Otimize a entrega de CSS

    Assim como o Javascript, o CSS é para que possamos adiá-lo para um melhor desempenho.

    Agora eu sei o que você está pensando: não apenas adiamos JS para carregar CSS, e agora também adiamos CSS?

    √Č isso que est√° acontecendo …

    Para remover o CSS que bloqueia a renderização, você incorporará o CSS crítico usado para criar as partes do seu site que aparecerão imediatamente. Em seguida, o restante do CSS do seu site é carregado posteriormente. Novamente, isso significa que seu site aparece visualmente ainda mais cedo.

    Essa é uma tática muito avançada e eu não me importaria se o WP Rocket não tivesse facilitado as coisas assim.

    Como otimizar a entrega de CSS

    Voc√™ provavelmente est√° se acostumando com isso agora …

    Tudo o que você precisa fazer para otimizar sua entrega de CSS com o WP Rocket é marcar esta caixa:

    Wp Rocket Optimize Css

    O WP Rocket gera o CSS crítico necessário para cada página e o integra ao HTML. O restante do CSS é adiado.

    Eu nunca tentaria fazer isso manualmente, por isso é uma excelente otimização para automatizar dessa maneira.

    Em seguida, tenho mais duas vitórias rápidas para acelerar seu site.

    12. Desative o suporte ao emoji do WordPress

    WordPress adicionou suporte a emoji na vers√£o 4.2.

    Para garantir que os emojis funcionem no seu site, o WordPress carrega um pequeno arquivo Javascript em todas as p√°ginas do site. Aqui est√° a coisa …

    Na verdade, n√£o precisamos desse arquivo para suporte a emojis porque praticamente todos os dispositivos j√° t√™m uma fonte de emojis instalada. Por exemplo, removi o suporte a emoticons deste site, mas voc√™ ainda v√™ emojis porque seu dispositivo os instala ūüĎć

    Ao remover o suporte a emoji, seu site n√£o carregar√° mais o arquivo Javascript adicional, tornando-o um pouco mais r√°pido.

    Você pode marcar esta caixa no WP Rocket para remover o suporte a emoji:

    Wp Rocket Disable Emojis

    O plug-in Disable Emojis é uma alternativa simples e gratuita.

    13. Desativar incorpora√ß√Ķes do WordPress

    Quando você cola um link de Twitter Em uma postagem, o WordPress criará automaticamente uma boa caixa para inserir.

    Isso é ótimo, mas o que me incomoda é que também o faz colando links para sites do WordPress como este. Como nunca uso esse recurso, prefiro desativá-lo.

    Como o WordPress carrega um arquivo Javascript adicional para esta função de inserção, sua remoção reduz o peso da sua página e remove outra solicitação HTTP.

    O WP Rocket possui outra caixa de seleção para adicionar facilmente essa otimização ao seu site.

    Wp Rocket Desativar incorpora√ß√Ķes

    √Č uma pequena otimiza√ß√£o, mas tudo ajuda.

    14. Atualize sua vers√£o do PHP

    As linguagens de codificação modernas são incrivelmente rápidas.

    A maioria das t√°ticas de desempenho n√£o tem nada a ver com a rapidez com que o c√≥digo √© executado em seu site. Em vez disso, estamos otimizando a velocidade do conte√ļdo do seu site entregue ao dispositivo do visitante. Essa √© a parte que leva tempo.

    Essa tática é diferente porque na verdade acelera a rapidez com que o código é executado no seu site.

    As vers√Ķes mais recentes do PHP est√£o ficando mais r√°pidas, mas se voc√™ ainda usa o PHP 5, voc√™ ver√° enormes ganhos ao mudar para 7.

    Desempenho de phpImagem cortesia de Kinsta.

    √Č importante entender que dobrar a velocidade do PHP do seu site n√£o far√° com que o site seja carregado duas vezes mais r√°pido. Ele faz com que o c√≥digo PHP seja executado duas vezes mais r√°pido, o que provavelmente √© uma pequena parte do tempo de carregamento do seu site.

    Dito isto, é potencialmente um ganho de desempenho muito fácil e também é melhor para compatibilidade e segurança de plugins.

    Como atualizar sua vers√£o do PHP

    Aqui est√° algo que aprendi ao longo dos anos.

    As empresas de hospedagem de baixa qualidade usam vers√Ķes desatualizadas do PHP, e as melhores empresas de hospedagem mant√™m-se atualizadas com as vers√Ķes do PHP.

    A atualização para a versão mais recente do PHP acelerará o seu site e, dependendo do seu host, deve ser realmente fácil.

    Por exemplo, o Kinsta possui uma op√ß√£o de painel que voc√™ pode usar para alterar sua vers√£o do PHP com um √ļnico clique.

    Kinsta Php Version

    Seu host controla a versão do PHP executada pelo site e a facilidade de atualização. Verifique seu painel de controle e você deverá encontrar uma opção para atualizar.

    15. Reduzir plugins

    Os plug-ins tornam o site mais lento?

    Algo assim como. √Č complicado. Vou dar alguns exemplos.

    Eu uso o plug-in MonsertInsights para adicionar o Google Analytics ao meu site. O Google Analytics carrega dois arquivos Javascript em cada p√°gina do meu site, diminuindo a velocidade (mais peso e duas solicita√ß√Ķes HTTP).

    Eu uso o plug-in WPForms para todos os meus formulários de contato. O WPForms carrega um arquivo CSS e, dependendo dos recursos que você está usando, também alguns arquivos JS. No entanto, você só carrega esses arquivos em páginas que possuem formulários de contato. Isso significa que ele tem zero impacto no desempenho do meu site.

    Por fim, uso um plug-in chamado Formatar títulos de mídia para adicionar legendas automaticamente às minhas imagens com base no nome do arquivo. Este plugin executa um pouco de PHP no painel de administração quando eu carrego imagens e não afeta o desempenho do meu site.

    Agora voc√™ pode ver por que dizer "plug-ins para abrandar o site" n√£o √© verdade. Eles fazem isso, eles n√£o fazem, eles fazem isso sob certas condi√ß√Ķes, etc. ūü§∑‚Äć‚ôāÔłŹ

    O √ļnico plug-in dos meus exemplos que posso dizer que diminui a velocidade do meu site √© o MonsterInsights, mas preciso das minhas an√°lises; portanto, concordo em trocar uma pequena quantidade de tempo de carregamento adicional por esse recurso.

    Como regra geral, se o plug-in alterar alguma coisa no front-end do seu site, ele afetará o desempenho. Por outro lado, se o plug-in afetar apenas o painel de administração, provavelmente não diminuirá a velocidade do seu site.

    D√™ uma olhada no menu Plugins e selecione os plug-ins que fazem altera√ß√Ķes no front-end do seu site. Se voc√™ encontrar um que est√° ativo, mas n√£o est√° sendo usado, √© prov√°vel que seu site fique mais lento, por isso desative-o.

    16. Use imagens da webP

    Tenho certeza de que você está familiarizado com formatos de imagem como JPG e PNG.

    Bem, o Google lançou um novo formato de imagem chamado webP, desenvolvido para otimizar o desempenho. Quando você usa o formato webP, a imagem parece idêntica, mas carrega mais rapidamente.

    No começo, parece ótimo, mas é aqui que fica complicado.

    Nem todos os navegadores ainda suportam imagens da webP. Isso significa que, se você usou o webP para todas as suas imagens, elas podem não aparecer em navegadores como o Safari. Por enquanto, ele deve veicular imagens da webP e também ter uma versão JPG ou PNG de backup de cada imagem.

    Obviamente, isso parece mais trabalho do que vale a pena, mas mais uma vez, existe uma solução muito simples.

    Como usar imagens da webP

    Se você usar o complemento Optimole, ele será tratado inteiramente por você.

    De fato, não há sequer uma configuração para isso.

    O Optimole cria automaticamente vers√Ķes webP de suas imagens e as exibe aos visitantes se o seu navegador suportar. Um pequeno arquivo Javascript √© carregado com um polyfill para exibir vers√Ķes JPG / PNG das imagens quando o navegador do visitante n√£o suporta webP.

    17. Use a pré-busca DNS

    A pré-busca do DNS é super legal.

    A maioria dos arquivos do seu site será enviada do seu domínio. Por exemplo, o arquivo CSS no seu tema que estiliza seu site está hospedado no seu site.

    Se você usa o Google Analytics, seu site carregará os arquivos Javascript necessários dos servidores em vez dos seus. Isso leva mais tempo do que o upload de arquivos hospedados no seu domínio.

    Basicamente, quando você usa a pré-busca DNS, seu site inicia o processo de carregamento de arquivos externos anteriormente. De fato, quando alguém digita seu domínio em sua barra de endereços, a pré-busca DNS começa a trabalhar para preparar arquivos externos antes mesmo de visitar seu site.

    Os detalhes são bastante técnicos, mas essa é a ideia por trás dessa tática.

    Como usar a pré-busca DNS

    O WP Rocket fornece uma opção simples para pré-busca.

    No menu Pré-carregamento, você pode inserir o URL de todos os arquivos externos carregados pelo seu site.

    Wp Rocket Prefetch Dns

    Seu site provavelmente usa fontes do Google, portanto, adicionar "//fonts.googleapis.com" permitiria a pré-busca para esse nome de domínio.

    18. Limite de publica√ß√Ķes por p√°gina

    Se você administra um blog ativo, sua página principal de postagens é a página mais importante do seu site. Também pode ser um dos mais lentos.

    Vi blogueiros exibindo cada uma de suas postagens em sua p√°gina inicial. Quando voc√™ visita, o indicador de carga gira e gira e a p√°gina nunca carrega completamente. √Č uma experi√™ncia terr√≠vel para o usu√°rio e, pior ainda, est√° custando uma tremenda quantidade de largura de banda.

    Em algum momento, a grande quantidade de HTML necess√°ria para as postagens se torna um problema, mas o principal problema s√£o todas as imagens. √Č por isso que √© t√£o importante que voc√™ adicione carregamento lento ao seu site.

    Al√©m disso, voc√™ deve definir um limite razo√°vel para o n√ļmero de postagens exibidas em cada p√°gina do seu blog.

    Como limitar suas postagens por p√°gina

    WordPress tiene una opci√≥n integrada para controlar sus publicaciones por p√°gina en el men√ļ Configuraci√≥n de lectura.

    Configuración de publicaciones por página

    Siempre que tenga habilitada la carga diferida, puede mostrar 10-30 publicaciones por p√°gina sin problemas. Dicho esto, 10 es probablemente el n√ļmero promedio que usan los bloggers y no ir√≠a m√°s all√° de 10 sin usar la carga diferida.

    19. Combina solicitudes de fuentes de Google

    Estoy aproximadamente 100% seguro de que su tema carga Google Fonts.

    Si es un tema bien codificado, solo debe haber una solicitud de Google Fonts, por lo que no hay problemas.

    Sin embargo, existe la posibilidad de que los complementos en su sitio tambi√©n est√©n cargando fuentes de Google, o usted mismo ha agregado m√°s fuentes. Si este es el caso, su sitio est√° haciendo m√ļltiples solicitudes de Google Fonts, lo que significa m√ļltiples solicitudes HTTP. Recuerde, cuantas menos solicitudes HTTP, mejor.

    Cómo combinar la solicitud de fuentes de Google

    Probablemente ya estés acostumbrado a esto …

    Para combinar las solicitudes de Google Fonts en su sitio con WP Rocket, marque esta casilla:

    Wp Rocket Combine Google Fonts

    Si no est√° seguro de si su sitio est√° haciendo m√ļltiples solicitudes de Google Fonts, no hay ning√ļn da√Īo en usar esta opci√≥n, por lo que recomendar√≠a siempre activarla.

    20. Optimizar las solicitudes de Gravatar

    Cuando las personas dejan comentarios en su sitio, sus avatares se muestran autom√°ticamente. Eso es porque WordPress se integra con Gravatar para obtener los avatares.

    Gravatar es un servicio gratuito y todo lo que hace es asociar un avatar con una dirección de correo electrónico. Si crea una cuenta y agrega un avatar, verá que se muestra en su sitio y en toda la web automáticamente.

    Gravatar

    Aquí está el problema.

    Cada una de esas imágenes realiza otra solicitud externa a los servidores Gravatar. Eso significa que si obtiene 10 comentarios en una publicación, su sitio web realizará hasta 10 solicitudes HTTP externas, ¡eso es mucho!

    Hay tres formas de optimizar Gravatar para que no ralentice su sitio.

    Cómo optimizar los avatares de Gravatar

    La primera opción es muy simple: carga diferida de imágenes Gravatar.

    Desafortunadamente, la carga diferida de Optimole no funciona con im√°genes Gravatar. Para cargar im√°genes Gravatar de forma diferida, puede usar el complemento gratuito a3 Lazy Load.

    Alternativamente, puede desactivar Gravatar por completo. En la configuración de Discusión, apague los avatares con esta opción:

    Wordpress Desactiva Avatares

    Como implica la configuraci√≥n, esto deshabilita los avatares en los comentarios por completo. Si a√ļn desea que aparezcan los avatares predeterminados, puede instalar el complemento Deshabilitar Gravatar de usuario en su lugar.

    Si los comentaristas tienen sus propias cuentas en su sitio, puede usar el complemento WP User Avatar para permitirles cargar sus propios avatares.

    La tercera opción es almacenar en caché las imágenes de Gravatar con un complemento como FV Gravatar Cache, pero este complemento ha recibido críticas mixtas de los usuarios.

    Si bien esas tres opciones son viables, esta próxima optimización del rendimiento es un cuarto enfoque y la solución que uso para este sitio web.

    21. Lazy carga tus comentarios

    Esta es una optimización de rendimiento realmente genial que acabo de comenzar a usar.

    Los comentarios en su sitio no aparecen hasta despu√©s de todo el contenido de la publicaci√≥n, entonces, ¬Ņpor qu√© cargarlos de inmediato?

    Como Optimole no funcionaba para cargar de forma diferida las imágenes de Gravatar, instalé el complemento Lazy Load for Comments para cargar de forma diferida toda la sección de comentarios. Problema resolvido!

    Complemento de comentarios de carga diferida

    Ahora, cuando alguien visita una publicación, ninguno de los comentarios o las imágenes de Gravatar se cargan hasta que se desplazan hasta la sección de comentarios. Esto elimina todas las solicitudes HTTP de Gravatar hasta mucho después de la carga inicial.

    Mientras hablamos, continuemos con una implementación más.

    22. Lazy carga todos los videos

    Do you embed Youtube videos in your posts?

    Loading videos can be a major drag on performance, especially if you have more than one on the page.

    You can lazy load your videos (and iframes) just like images.

    How to lazy load videos

    I use Optimole’s lazy loading feature for images, but WP Rocket has an option specifically for iframes and videos that you can enable like this:

    Wp Rocket Lazy Load Videos

    There’s also an option to load a thumbnail in place of the video, but personally I don’t like this option because it makes visitors click the video twice which I find annoying.

    23. Reduce redirects

    If you visit this website using ‚Äúhttp‚ÄĚ it will redirect you to the ‚Äúhttps‚ÄĚ version instead.

    Additionally, if you visit without the ‚Äúwww,‚ÄĚ you‚Äôll be redirected to the version with the ‚Äúwww.‚ÄĚ

    Both of the redirects are very fast, but they still take time and when it comes to performance, every fraction of a second counts.

    When linking to your own website either internally or from another website, make sure to always use the final URL visitors arrive on. I always use ‚Äúhttps://www.competethemes.com/‚ÄĚ so that there are zero redirects.

    By always linking to the correct version of your URL, you avoid sending visitors through redirects that make your site seem slower.

    24. Host Google Analytics locally

    I’ve mentioned Google Analytics a few times so far because it’s an unavoidable performance drain.

    One reason it slows your site down is that you have to load the files from an external server (Google’s) which takes more steps than loading a file from your server.

    By hosting the Google Analytics files locally, you can load them a bit faster.

    How to load Google Analytics locally

    Once again, the WP Rocket plugin has made this incredibly easy and reliable.

    In the Add-Ons menu, there’s a simple option you can enable to host Google Analytics locally instead of loading it from their servers.

    Wp Rocket Host Google Analytics

    This option works with most plugins used to add Google Analytics including MonsterInsights.

    An excellent free alternative is the CAOS plugin.

    25. Use fewer fonts

    You’ve already optimized your JS and CSS, so let’s get serious about optimizing fonts too.

    When it comes to performance, fonts are expensive.

    If you read my post on how to make your site more beautiful, then you’ll know I advocate for using one or two fonts at most. In addition to being a good design rule, it’s also a good performance rule.

    Every font you load has an impact on your site’s performance, so the fewer you use, the better.

    Now let’s get a little more detailed.

    26. Use fewer font weights

    Each font weight multiplies the performance toll of your font choice.

    For example, if you use the Roboto font, you’ll load the default weight. If you also want it italicized and bold, those are completely different character sets and it means that you’re now loading three font files all roughly the same size.

    If you’re also using the Playfair Display font and loading a bold and italic version, you’re now loading six font files which will have a large impact on your site speed.

    Your site can look great and be versatile with a single font loaded in a default, italicized, and bold style. If you absolutely want another font, use it for headings so it doesn’t need to have multiple weights or italicization.

    27. Only load your language’s character set

    You just learned that loading a font in different weights multiples the number of files your site needs to load.

    Following that same thread, the more characters in the font, the bigger the file is. The point is, you only want to load the characters you need.

    Make sure that you’re only loading Google Fonts in the language that you use. For English users, you only need the Latin character set and not Latin Extended which is often loaded by default.

    Depending on how you add Google Fonts to your site, you may or may not have the ability to change this, so check with the theme or plugin options available.

    28. Turn off OpenType features in Adobe Fonts

    If you use Adobe Fonts (formerly TypeKit) for your fonts, then you probably have access to some OpenType features.

    While OpenType features are awesome for adding beautiful fractions, small caps, and many other typographic features, you most likely don’t need them.

    Since OpenType includes lots of new character glyphs, it makes the font files larger resulting in longer load times.

    When editing your project, disable the OpenType features here:

    Adobe Font Settings

    As you can see in my example, I’m only loading the three font weights I need and the English subset as explained in the prior tactics.

    29. Replace Font Awesome with Fontello

    This tactic is very technical, but since it helped me out I’m including it for anyone else reading whose comfortable writing code.

    If you use Font Awesome or another icon font for your site, you’re likely loading the entire font i.e. you’re loading hundreds of icons. Most likely, you’re only using a handful of the icons on your site.

    With Fontello, you can build your own icon font package using only the Font Awesome icons you’re actually using.

    Using Fontello

    Since I’m only using 26 different icons on this site, I was able to massively reduce the size of the font file and its stylesheet (roughly 100kb).

    If you have full technical control over your site, removing Font Awesome and replacing it with a custom webfont package from Fontello is an excellent way to further improve your site’s performance.

    Other optimizations

    I see other websites recommending the next tips all the time, but here’s the thing…

    These final tactics won’t make your site load faster. They’ll optimize your website’s performance, but not exactly in ways that speed it up.

    You’ll reduce the amount of disk space your site uses, potentially make your site more secure, and even reduce the bandwidth you use. That’s enough to make these tactics worthwhile in my eyes, and that’s why I’ve included them at the end of this post.

    Here are the last 7 tactics.

    30. Turn off pingbacks and trackbacks

    Nobody uses pingbacks or trackbacks for legitimate reasons anymore.

    Back before social media when people ran personal blogs, pingbacks were kind of like @-ing someone. In other words, they’d let you know when another blogger referenced your site.

    Nowadays, they’re used more or less exclusively for spam and exploiting security vulnerabilities (like DDoSing). It’s best to simply disable them with these two options in the Discussion settings.

    Disable Pingbacks Trackbacks

    No plugins needed.

    31. Slow down the Heartbeat API

    The Heartbeat API runs in WordPress to keep certain features running in your browser. For instance, WordPress auto-saves your posts while you’re working on them to keep you from losing any of your content in case of a mistake or error.

    This API normally runs once a minute and you might find it slowing you down a bit while working on a post or using other features in your admin.

    While it’s not a big deal for most people, you may as well slow it down with this setting in the WP Rocket plugin:

    Wp Rocket Heartbeat Api

    Reducing activity simply tells the Heartbeat API to run once every two minutes instead of every minute.

    32. Disable hotlinking

    Hotlinking is when someone displays an image on their website but they use an image URL from your site to serve the image. What happens then is that every time someone visits their site, the image is requested from your server instead of theirs.

    The bottom line is, when someone hotlinks one of your images, you pay for the bandwidth and get none of the benefit. It’s stealing.

    Cloudflare includes their ScrapeShield service in the free tier which has an option to prevent people from hotlinking your images.

    Cloudflare Hotlink ProtectionDon’t you love all these simple click-to-enable options?

    I turned this on recently and it saved me a ton of bandwidth. I guess hotlinking started to add up for my domain over the years, and this option instantly nullified these requests.

    33. Optimize your database

    Cleaning up your database probably won’t make your site faster, but it will reduce the amount of disk space you use.

    If you have a lot of bloat in your database, this is more likely to slow down your admin dashboard than the front-end of your site. For instance, if you have tens of thousands of spam comments then the Comments menu might take longer to load because of the sheer volume of data.

    There are lots of plugins available to optimize your database, but this is something I do with WP Rocket too.

    Database Cleanup

    The Database menu in the WP Rocket settings includes options for auto-deleting spam comments and other useless data from your database as well.

    Even better, you can schedule this automation to run for you every day, week, or month.

    34. Disable or limit post revisions

    You just learned that WordPress uses the Heartbeat API to routinely save drafts of your posts. Well, WordPress also saves revisions that you can restore later if needed.

    The trouble with storing tons of revisions is that they take up space in your database. A post with 19 revisions is like storing 20 posts in your database. While you can disable revisions with a plugin or limit them, you can also simply delete them.

    The Database menu in WP Rocket includes an option to delete post revisions.

    Wp Rocket Delete Post Revisions

    You can run this option manually or schedule it.

    And just a heads up, you should always backup your site before running any database optimizations.

    I have WP Rocket scheduled to run this optimization every day because Kinsta also backs up my site daily.

    35. Remove query strings

    There’s a lot to explain here, but since it won’t speed up your site, I’ll just get straight to the bottom line.

    Query strings on file URLs can potentially prevent them from being cached. With most caching plugins, like WP Rocket, this isn’t the case so the presence of query strings isn’t an issue.

    Furthermore, query strings often times should not be removed because they’re required for plugins to work properly.

    Just activate this option in WP Rocket and be done with it:

    Remove Query Strings

    They’ve optimized this feature so it won’t break things on your site and you won’t see warnings from GTMetrix and other performance auditing tools that you need to remove query strings from static resources.

    36. Delete inactive plugins

    When you deactivate a plugin, you’re simply turning it off. You can reactivate it and your former settings will be restored.

    However, if you delete a plugin, this normally deletes your settings and data created by the plugin. This is because most plugins have a cleanup process they run when deleted so they don’t leave a mess in your database.

    If you have inactive plugins that you haven‚Äôt deleted yet, deleting them can help to optimize your database. Also, it‚Äôs just a good practice in general ūüôā

    Enjoy your faster website

    At over 7,000 words, this is officially the longest blog post I’ve ever written. I wanted to include everything!

    There’s just one more thing I have to tell you…

    When it comes to performance optimization, your work is never really done. After you’ve implemented the tactics you want to try out on your site, make sure to come back here once or twice a year to run through the list again and reoptimize your site.

    I find that I need to re-optimize my site at least once a year to keep it in top shape.

    You might also find that the first time you use this list, some of the tactics were too technical to figure out. As you become more of a WordPress pro, you might return to find these tactics much simpler to apply.

    If you have any questions, I’ll leave the comments section open, so please post below!