Como acelerar e otimizar os sites do WordPress

Sep 13, 2025
Como
Speed up and optimise WordPress
(Crédito da imagem: Web Designer)

O WordPress começou como uma simples plataforma de blogs, mas evoluiu para o sistema de gerenciamento de conteúdo que agora alimenta uma grande porcentagem de sites. Como o CMS mais popular, seu rápido sucesso é provável que seja uma fantástica ferramenta de uso geral no mundo do desenvolvimento da web.

Uma barreira baixa para entrada e grande ecossistema de plugins e Temas de WordPress grátis Permitir que usuários menos tecnicamente proficientes criem sistemas complexos. Mas isso pode ser uma espada de dois gumes se um site do WordPress ganha tração, escalonando além do visitante ocasional e levando a problemas.

Não tenho certeza sobre o WordPress? Explorar outras opções com a lista de topo hospedagem na web. provedores. E se você quiser projetar um site facilmente, experimente estes brilhantes construtores de site .

Os primeiros sinais de problemas aparecem quando um novo usuário aterrissa no site: os tempos de carga podem ser excruciantes e elementos saltarem pela página como estilos separados carregam, um por um. Não é muito tempo antes do servidor ficar sem memória, fazendo com que o banco de dados falha, exigindo que um reinício de servidor traga o site de volta.

Por padrão, quando um usuário pousa em uma página fornecida por um site do WordPress, a extremidade traseira é executada através do tema e qualquer plugins antes de renderizar a página. Se muitos plugins são usados ​​ou o tema é mal escrito, isso pode resultar em longas consultas de banco de dados e inclusão de JavaScript e CSS onde não é necessário.

Felizmente, muitas das principais questões que causam velocidade lenta podem ser endereçadas, e neste tutorial veremos como você pode otimizar até mesmo o clunkiest de Websites WordPress. . Para aumentar ainda mais suas habilidades, dê uma olhada no nosso Roundup de Tutoriais do WordPress. tentar.

01. Teste a velocidade atual

O primeiro passo para acelerar um site é descobrir o quão bem está se apresentando para começar. Existe uma matriz de ferramentas para ajudar com isso, incluindo insights de páginas do Google e verificador de carregamento de página do Pingdom. Nós estaremos usando Gtmetrix. Como combina vários cheques; Vá para o site e insira o URL para o site.

02. Examine os resultados

Speed up and optimise WordPress: Examine the results

Gtmetrix fornece uma análise rápida do desempenho do seu site (Crédito da imagem: gtmetrix)

Depois de um breve atraso, o GTmetrix exibirá os resultados da verificação e fornecer várias pontuações de A - F. Ele também fornecerá um tempo totalmente carregado e o tamanho total da página. Abaixo disso, uma repartição de vários elementos é dada.

03. Identifique os maiores arquivos

Uma das métricas mais importantes é o tamanho total da página. Este é o tamanho de arquivos de todos os elementos carregados em uma página, como imagens, vídeo, css e quaisquer scripts incluídos na página. Usando o gtmetrix, abra a guia Cachoeira e classifique a tabela por tamanho para encontrar os maiores elementos da página.

04. Compactar mídia para reduzir o tamanho

Speed up and optimise WordPress: Compress media to reduce size

A maioria otimiza sua mídia para obter um impulso de velocidade (Crédito da imagem: ewww)

Imagens e vídeo são geralmente os maiores itens em uma página. Elimine vídeos de fundo desnecessários e certifique-se de codificar vídeo a uma taxa baixa, se ela reproduzir automaticamente. Instale o plugin Ewww Image Optimizer. . Na biblioteca de mídia, uma nova opção Otimizar em massa está disponível. Rode isto.

Se você tem muita mídia para armazenar, esconda-a com segurança nestes excelentes armazenamento na núvem opções.

05. Redimensionar imagens.

Speed up and optimise WordPress: Resize images

Encolher essas imagens massivas que estão sendo dimensionadas no navegador (Crédito da imagem: WordPress)

Às vezes, as imagens adicionadas a uma página estão em alta resolução e depois reduzidas com CSS. Isso desperdiça a largura de banda, já que o tamanho maior nunca é usado. Vá para o painel & gt; Configurações e GT; Ewww Image Optimiser e selecione Redimension. Tick ​​"Resize Detection". Agora, as páginas visualizadas por um administrador destacarão as imagens que precisam ser redimensionadas. Redimensionar essas imagens em um editor de imagens ou usando um CDN com dimensionamento automático corrigirá esse problema.

06. MINIFICAÇÃO DE CSS, JS & AMP; Html.

Este é o processo de remoção dos caracteres no código que o tornam legível por humanos reduzir o tamanho da página. Ao usar um tema de terceiros, um plugin tal como Autoptimizar é perfeito para isso. Instale-o, vá para Configurações & GT; Autoptimizar e GT; Role para baixo para as opções CSS e marque "Otimizar o código CSS". Ao trabalhar com um tema que foi feito sob medida, a minificação é feita com ferramentas de construção, como o Gulp. 

 CSS:
uma {
    -webkit-box-shadow: nenhum;
    Decoração de texto: nenhuma;
}

Minified:
A {-Webkit-Box-Shadow: Nenhum; Decoração de Texto: Nenhum;}

07. Combine CSS & Amp; Arquivos JS.

Ao usar um tema de terceiros, o plug-in do AutoPtimise pode cobrir a maioria dos cenários, permitindo a opção "Agregado CSS Files". Isso combina todos os CSS para cada página em um único arquivo em vez de muitos menores.

08. adiando Javascript externo

Bate-papo ao vivo, Analytics e Ferramentas de Rastreamento podem agrupar grandes arquivos JavaScript que adicionam segundos inteiros no momento em que a página é necessária para se tornar interativa. Adicione o atributo aderente a esses scripts para que eles não sejam executados até que o DOM tenha terminado de carregamento.

& Lt; Script SRC = "Path-to-file.js" aderir & gt; & lt; / script & gt;

09. Examine os plugins

Speed up and optimise WordPress: Examine the plugins

Trate seu site para uma auditoria de plugin grave (Crédito da imagem: WordPress)

Muitos plugins podem incluir o WordPress. Com tantos plugins sendo livres, os desenvolvedores estão sob pressão para empurrar versões premium de seu software e incluir recursos desnecessários e inchaçados, como pressionar notificações para o painel de administração. Desativar e remover todos os plugins que não estão sendo usados ​​- eles podem ser instalados novamente mais tarde, se necessário novamente.

10. Verifique o poder do servidor da Web

Speed up and optimise WordPress: Check web server power

Seu servidor pode estar diminuindo as coisas; Veja como identificar se esse é o caso (Crédito da imagem: Google)

O motor de um site é o servidor que é executado. Se o seu barato, malvado e mal mantido, será executado mal. Vamos para Google PageSpeed ​​insights. e insira o URL do site. Nos resultados, procure "Reduzir o tempo de resposta do servidor". Se isso aparecer no relatório, é provável que um servidor lento seja culpado pelo desempenho.

11. Ativar compressão Gzip

O GZIP pode diminuir o tamanho do seu site antes de ser enviado para um usuário. O navegador da Web do usuário então descomprime os dados automaticamente e o exibe. Sem desvantagens, é importante garantir que o GZIP esteja ativado. Existem várias ferramentas para verificar se Gzip está ativada; tentar GiftOfspeed. .

12. Atualize para o PHP 7

Dentro do painel WordPress abrir ferramentas abertas & gt; Site Health e clique na guia Informações. Abra o "servidor" acordeão e verifique o valor da versão PHP. Se isso for menos que 7.x.x, é altamente recomendável atualizar para pelo menos PHP 7.1. Testes mostram mudando este manuseio permitido do dobro dos visitantes simulados.

13. Configurar cache de página

Speed up and optimise WordPress: Set up page caching

Use o Enabler de Cache para renderizar páginas populares para um arquivo HTML estático mais rápido (Crédito da imagem: WordPress)

Vá para Plugins & GT; Adicione novo plugin e pesquise "Cache Enabler". Este plugin leve armazena páginas em um cache, de modo que um visitante navegando ao mesmo tempo que outro não faz com que o site torne a página duas vezes. Em vez disso, o plug-in torna a página a um arquivo HTML estático, uma vez que serve este arquivo para usuários subseqüentes.

14. fótons.

Diferentes dispositivos renderam imagens em diferentes tamanhos, tornando difícil de usar imagens exatamente como eles são exibidos. Usando o serviço gratuito "Photon", incluído em Mochila a jato , as imagens são automaticamente servidas no tamanho certo.

15. Configure o cache do navegador

O cache do navegador informa ao navegador de um usuário que determinados elementos não precisam ser novamente baixados toda vez que recarregaram uma página no site ou voltar e visitar novamente. Isso pode ser feito manualmente em .htaccess, ou alternativamente, um plugin, como "cache de navegador de alavancagem", pode ser usado.

16. Carregar testes com usuários virtuais

Speed up and optimise WordPress: Load testing with virtual users

Use um serviço como carregador para verificar seu site pode lidar com alta demanda (Crédito da imagem: gtmetrix)

Para simular usuários reais usando o site e colocar o site sob estresse, o teste de carga deve ser conduzido. Ao monitorar o servidor para o impacto de carga, use um serviço como Carregador para enviar tráfego para o site. A CPU e a memória do servidor devem permanecer dentro de limites seguros.

17. Verifique novamente o desempenho

Uma vez que as otimizações foram realizadas, você deve testar e avaliar a melhoria do site. Execute o gtmetrix novamente e use a guia Histórico para ver a diferença no tempo de carregamento da página. Se o cache tiver sido ativado, certifique-se de visitar o site pelo menos uma vez para "Prime" o cache antes de realizar testes.

Este artigo foi originalmente publicado em questão 292 da revista Creative Web Design Web designer . Compre a edição 292. .

GenerateJS banner

(Crédito de imagem: Futuro / Toa Heftiba, Unsplash)

Junte-se a nós em Abril 2020 para ver nossa programação de JavaScript Superstars no GenerateJS - a conferência ajudando você a construir melhor Javascript. Reserve agora em. GenerateConf.com.

Artigos relacionados:

  • Como transformar o WordPress em um construtor visual
  • 26 Temas de portfólio de WordPress de qualidade superior

Como - Artigos mais populares

Como esticar uma tela e configurar para tintas de óleo

Como Sep 13, 2025

(Crédito da imagem: Getty Images) Bem-vindo ao nosso guia de como esticar uma tela e configurar para tintas a óleo...

Pare os bots com o Google Recaptcha

Como Sep 13, 2025

(Crédito da imagem: futuro) Manter os bots sempre é um jogo de números - infelizmente, a disponibilidade de biblio..

Photoshop Mudança de cor: 2 ferramentas que você precisa saber

Como Sep 13, 2025

PULE PARA: A ferramenta de substituição de cor O comando do intervalo..

Como modelar a arte do conceito no cinema 4D

Como Sep 13, 2025

Há alguns anos, o diretor de arte dos jogos Lucid me pediu para ajudá-los a projetar 10 veículos independentes para um jogo de..

3 dicas para criar material promocional de impressão impressionante

Como Sep 13, 2025

Em um mundo cada vez mais digital, o material promocional de impressão inteligente tem o poder de causar um impacto sério. Talv..

Mantenha o controle de versão perfeito com abstrato

Como Sep 13, 2025

O controle de versão foi originalmente destinado a desenvolvedores que trabalham com código, como uma maneira de vários desenv..

Design Graphics SVG no seu navegador

Como Sep 13, 2025

O Editor VECTEEZY. é uma suíte de edição de vetor livre que é executada no seu navegador. Este tutorial cobre..

Como pintar vidro curvo em um capacete de espaço

Como Sep 13, 2025

Os espaciais são divertidos de pintar, mas a parte do capacete pode ser complicada para obter certa, especialmente o elemento de..

Categorias