Como os membros do WPMU DEV otimizam seus sites de clientes para velocidade máxima

Publicados: 2022-11-09

Quando se trata de sites WordPress, todos nós temos a necessidade de velocidade. Mas nossos membros desenvolvedores da Web realmente têm os métodos testados e comprovados para melhor realizar isso, e estamos passando isso para você.

Mergulhamos na riqueza coletiva de experiência que nossos membros desenvolvedores da Web têm e compilamos os resultados de suas principais opções para obter uma velocidade de site incrivelmente rápida.

Neste artigo, compartilharemos suas recomendações, juntamente com os detalhes do que torna esses esforços tão eficazes no uso do mundo real (online).

Aqui está o que veremos:

  • Os benefícios de aumentar sua velocidade
    • Criando e aumentando seu engajamento
    • Obtendo e lidando com mais tráfego
    • Subindo sua classificação de SEO
  • Ferramentas e serviços recomendados que farão você ir mais rápido
    • Cache e CDNs
    • Otimizadores de imagem e arquivo
    • Plug-ins e temas
    • Hospedagem de qualidade
    • Ferramentas e dicas de sacola (diversos)
  • Todos os aspectos importantes do teste
  • Melhore o desempenho do seu site WordPress

Já que isso é tudo sobre velocidade, vamos começar a correr!

Os benefícios de aumentar sua velocidade

A maioria de nós acredita no lema “quanto mais rápido, melhor”, mas pode não entender completamente por que isso acontece ou como chegar lá.

Os benefícios da otimização de desempenho do WordPress são numerosos, e vamos examinar cada um com cuidado.

Criando e aumentando seu engajamento

Inúmeros estudos mostraram que sites lentos são a principal razão pela qual as pessoas saem sem interagir.

As pessoas simplesmente não estão dispostas a esperar enquanto o cursor gira. Estamos falando de uma questão de segundos – como em dois ou menos. De acordo com o Google, essa é a velocidade que seu site deve carregar.

Todo mundo sabe que existem infinitas opções de atividades online, então eles não hesitarão em desistir sem pensar duas vezes.

Obtendo e lidando com mais tráfego

Maior velocidade está diretamente relacionada a mais tráfego, o que significa que o potencial de interações e conversões para aumentar exponencialmente é maior.

Se você tiver a sorte de atrair visitantes para o seu site – os já estabelecidos voltando ou os novos dando uma olhada pela primeira vez – você precisa configurar as coisas para que o inevitável aumento de seus recursos não afete negativamente a experiência de ninguém.

Subindo sua classificação de SEO

Há muita coisa envolvida em SEO, mas a velocidade do site é definitivamente um fator importante.

Os algoritmos de classificação de pesquisa do Google consideram a velocidade do site um sinal, e o desempenho da página também é um fator de classificação do mecanismo de pesquisa.

Portanto, quanto mais rápido seu site, maior a probabilidade de você subir nas SERPs – uma meta ideal a ser alcançada.

Ferramentas e serviços recomendados que farão você ir mais rápido

Como mencionado acima, conversamos com os especialistas em desenvolvimento da Web em nosso coletivo de membros para saber sua opinião sobre a velocidade do site.

Eles compartilharam seus conhecimentos combinados sobre o assunto, bem como ferramentas e serviços específicos que usam para obter (e manter!) seus sites operando com desempenho máximo.

Vamos ver o que eles tinham a dizer.

Cache e CDNs

O cache superou os envios, e com razão.

O armazenamento em cache minimiza o número de consultas enviadas ao seu servidor, o que significa que o desempenho da página, o tempo de carregamento e a experiência do usuário melhoram.

Além disso, quando os dados do seu site são armazenados em cache mais próximos dos locais dos usuários, eles consomem menos recursos, diminuindo assim a carga no servidor.

As redes de entrega de conteúdo (CDNs) fornecem conteúdo em cache de um local de rede mais próximo de um usuário para acelerar sua entrega, com arquitetura projetada para reduzir a latência de rede causada pelo transporte de tráfego por longas distâncias e por várias redes.

Tudo isso equivale a melhorar a velocidade e o desempenho do seu site.

“Eu uso o Smush e todos os CDNs que vêm pré-empacotados com sua hospedagem [wpmudev]!” – JD

“A hospedagem com CDN faz muita diferença na velocidade de sites WordPress.” – Matheus Forse

“A diferença entre imagens otimizadas em CDN (vs não) é ENORME” – JD

Principais recomendações:

CDN

banner cloudflare

Cloudflare

Com a confiança de milhões, a Cloudflare é uma rede global projetada para tornar tudo o que você conecta à Internet seguro, privado, rápido e confiável.

QUIC.nuvem

O QUIC.cloud CDN é um dos poucos que pode armazenar em cache o conteúdo estático e dinâmico do WordPress. Maximize as pontuações de velocidade da página com serviços online, otimização de imagem, CSS crítico, CSS exclusivo e marcadores de posição de imagem de baixa qualidade.

Cache de plug-ins

bandeira de beija-flor

beija Flor

O Hummingbird dá voo ao seu site com cache e compactação especializados. Além de ser um conjunto completo de armazenamento em cache (Página, Navegador, Objeto, Gravatar e RSS), o Hummingbird também oferece otimização de ativos em todos os níveis.

“Eu uso o Hummingbird em todos os meus sites, é a razão pela qual me tornei um membro do WPMU DEV.” – kahnfusion

“Uso a função Speedy [no Hummingbird], mas otimizo os arquivos manualmente nos projetos maiores. Tenho conseguido resultados muito bons, mesmo em sites “pesados”. – Isidoros Rigas

Cache LiteSpeed

O LiteSpeed ​​Cache para WordPress é um plug-in de aceleração de site tudo-em-um, com um cache exclusivo no nível do servidor e uma coleção de recursos de otimização.

Banner do plugin de cache Litespeed
LiteSpeed ​​vs concorrentes selecionados. [Crédito da imagem.]
WPRocket

O WP Rocket oferece um conjunto de opções avançadas para aumentar seu desempenho, incluindo atraso na execução do JavaScript, remoção de CSS não utilizado, minificação e LazyLoad.

NitroPackName

O NitroPack possui cache, otimização de imagem e uma CDN pronta para uso. Não são necessários plugins de terceiros ou configurações complexas.

Otimizadores de imagem e arquivo

Outro elemento que afeta significativamente a velocidade do site é a otimização de ativos.

Existem duas categorias quando se trata desses ativos – arquivos e imagens – embora os métodos para otimizá-los se sobreponham um pouco.

Veremos várias maneiras de obter desempenho máximo para cada um.

Otimização de arquivo:

  • Ativar Gzip (compactação de texto)
  • Comentários de carregamento lento e postagens menores
  • Elementos do site de cache (por exemplo, página, navegador, gravatar, RSS)
  • Minimize arquivos (retire o código CSS e JS desnecessário)
  • Combine arquivos menores (menos arquivos = menos solicitações)
  • Adiar CSS (adiar o carregamento de conteúdo acima da dobra)
  • Pré-carregar e adiar Javascript (corrigir o tempo de execução JS e entregar cargas menores)

Otimização de imagem:

  • Reduza o tamanho da imagem com compressão (com ou sem perdas)
  • Escolha o melhor tipo de arquivo (PNG, JPEG, etc)
  • Use carregamento progressivo para JPEGs
  • Use tipos de arquivo de última geração (Webp)
  • Carregamento lento de imagens fora da tela
  • Otimize a entrega de imagens (veicule por meio de uma CDN)

O que parecem pequenos ajustes podem resultar em melhorias de velocidade notáveis.

Principais recomendações:

beija Flor

Além de ser um assistente geral de cache, o Hummingbird lida com um grande grau de recursos de otimização, como melhor organização de ativos, visualização de reduções de tamanho de arquivo, compactação Gzip, compactação de páginas da Web e folhas de estilo e redução do tempo de transferência de arquivos.

Com automações e configurações de clique único, a configuração é muito fácil.

Ah, e o Beija-flor é grátis.

esmague a bandeira

Smush

Smush nos colocou no mapa. Com mais de 1 milhão de instalações ativas e 5 de 5 estrelas, este artista poderoso está vestido para impressionar.

Otimize imagens ilimitadas (Bulk Smush, Super Smush = compressão 2x), carregamento lento, redimensionamento automático, compactação, backup ou restauração em massa de imagens originais e resolva as recomendações do Google PageSpeed ​​- tudo em um painel simples e intuitivo.

O Smush também é gratuito.

“Se eu quiser um desempenho próximo ao perfeito, codifico meus modelos, substituo a maioria dos plugins por plugins wpmudev e o resultado é ótimo (principalmente A com GTmetrix e perto de 100% com velocidade da página do Google).” – António

“Smush e Hummingbird entram em todos os sites. Não tenho nenhum pedido para Smush – é um campeão.” – Tony G

“Eu uso ambos (Hbird & Smush) em todos os sites e não tenho nada para mudar: desde que os modelos de configuração de plugins foram lançados, eu apenas defino e esqueço!” – Phil

“Smush eu sempre achei excelente. Eu realmente gosto. É muito impressionante o que ele pode fazer com apenas alguns cliques.” – Mate

"Smush já parece perfeito... não vejo como você poderia torná-lo melhor." – Isidoros Rigas

EWWW

Otimize imagens usando ferramentas em seu próprio servidor e descarregue o processo de otimização com uso intensivo de CPU para seus servidores especializados para obter mais compactação.

As imagens são compactadas automaticamente, dimensionadas para caber na página e no tamanho do dispositivo, carregadas lentamente e convertidas para o formato WebP de última geração.

ShortPixel

Usa recursos mínimos e funciona bem com qualquer hospedagem compartilhada, em nuvem, VPS ou dedicada. Otimize qualquer imagem em seu site, mesmo imagens que não estão listadas na Biblioteca de mídia.

A compactação de imagem com e sem perdas está disponível para os tipos de imagem mais comuns, além de arquivos PDF.

Plug-ins e temas

A maioria dos nossos desenvolvedores da web concordou: embora o número de plugins usados ​​possa afetar definitivamente a velocidade, é a qualidade desses plugins que mais importa.

Dicas:

  • Limite os plug-ins aos mais essenciais e exclua os que não estiver usando.
  • Use um tema o mais leve possível.
  • Limpe seus bancos de dados WP, para se livrar de arquivos desnecessários deixados por plugins não utilizados.

“Tudo se resume a minimizar plugins, repetidamente. Um ano atrás eu costumava usar uma média de 20. Agora (exceto os padrões WPMUDEV) eu mal uso 5. Meus sites são tão funcionais, mas 10x mais rápidos!” – JD

“Sempre tente minimizar o número de plugins usados.” - James

Principais recomendações:

banner elementor

Elementor + Olá Elementor

Elementor é a plataforma de sites nº 1 para WordPress. De páginas de destino e lojas de comércio eletrônico a sites completos - crie tudo com o editor de arrastar e soltar ao vivo da Elementor.

Conta WPMU DEV GRÁTIS

Gerencie sites WP ilimitados gratuitamente

Sites ilimitados
Não é necessário cartão de crédito

Hello Elementor é o tema baunilha mínimo projetado especificamente para emparelhar com o construtor de páginas Elementor. No topo das paradas logo após seu lançamento, tem mais de um milhão de instalações ativas, com 4,5/5 estrelas.

Divi

Divi leva o WordPress a um nível totalmente novo com sua tecnologia de construção visual incrivelmente avançada.

Uma plataforma de criação de sites que substitui o editor de postagem padrão do WordPress por um editor visual muito superior, oferece o poder de criar designs espetaculares com facilidade e eficiência surpreendentes.

Tijolos

Uma ferramenta mais rápida, personalizável e de alto desempenho para projetar visualmente todo o seu site, do cabeçalho ao rodapé e qualquer coisa entre eles. Insira dados dinâmicos e edite e visualize vários pontos de interrupção para um site totalmente responsivo otimizado para dispositivos móveis.

bandeira de breakdance

Breakdance

Com 120 elementos integrados, uma interface de usuário e fluxo de trabalho modernos e integração profunda com WooCommerce, o Breakdance é o melhor plugin de criação de sites para WordPress.

10Web

O primeiro construtor WordPress com inteligência artificial. Obtenha a estrutura e o design iniciais do seu site com IA, edite-o com o 10Web builder baseado no Elementor e, em seguida, envie para o ar com um clique.

“Encontrei este site que faz algumas coisas interessantes na versão gratuita, é como uma mudança de jogo para pontuação de velocidade de página móvel. Muitos recursos inteligentes para ajudá-lo a criar sites melhores em menos tempo.” – Eduardo

bandeira de construtor de oxigênio

Oxigênio

Edição visual poderosa para todo o seu site. Construa com elementos HTML fundamentais. Escreva PHP, CSS e JS ao vivo.

Os recursos incluem: Arraste as bordas do elemento para definir o espaçamento ou arraste e solte para reordenar; controle visual de todas as partes da sua loja WooCommerce; criar cabeçalhos de site personalizados visualmente, incluindo cabeçalhos fixos e de sobreposição; editar cores em um só lugar.

“O construtor de sites de velocidade como o Oxygen é um divisor de águas para a velocidade dos sites.” – Greg

Impreza

Site WordPress com melhor classificação e tema WooCommerce Builder.

“Eu uso IMPREZA porque é de alto desempenho.” – Phil

Sublinhados

Um tema inicial destinado a se transformar no próximo e mais incrível tema WordPress. CSS ultra-mínimo significa menos coisas para atrapalhar quando você está projetando.

banner de limpeza de banco de dados avançado

Limpador de banco de dados avançado

Com o tempo (ou uso pesado de plugins), os bancos de dados do WordPress acumulam revisões antigas, meta de postagem órfã, comentários de spam, etc., tornando os sites lentos e inchados.

Este plugin elimina facilmente dados desnecessários para reduzir o tamanho do seu banco de dados, melhorar a velocidade e o desempenho do site e ter backup do banco de dados mais rápido (já que o arquivo será menor).

Hospedagem de qualidade

É claro que a hospedagem subiu ao topo das nossas listas de gurus de desenvolvimento da web, suas vozes ansiosas para expressar o quão importante é a hospedagem de qualidade.

Se você colocar todos os elementos de economia de velocidade nesta lista no lugar e optar por uma plataforma de hospedagem que tenha servidores compartilhados, recursos mínimos ou suporte abaixo da média, todos os seus esforços serão em vão.

Um host oferece mais do que apenas um local para armazenar conteúdo online. Eles são a base de seus sites. Escolha um host seguro, confiável e respeitável para construir sua residência online; a paz de espírito e o sucesso que vêm com isso valem cada centavo.

Principais recomendações:

banner de hospedagem wpmu dev

Hospedagem WPMU DEV

Rápido, dedicado e totalmente otimizado para WordPress, sem nada compartilhado e sem interrupções.

Aqui estão apenas alguns dos recursos: 10 data centers + CDN de 45 pontos; FastCGI; as melhores ferramentas de segurança e gerenciamento de sites; Garantia de uptime de 99,9%; WooCommerce otimizado; suporte premium (24/7/365).

Não acredite em nossa palavra; veja o que outras pessoas que pensam como nós têm a dizer sobre nós.

“Escolher uma boa hospedagem é o principal . A hospedagem do WPMU DEV é ótima.” – Greg

“Meus sites mais rápidos estão na hospedagem WPMU Dev” – Brad

“Hospedagem: WPMU DEV 100%” – Phil

Hospedagem A2

Proteja com recursos de proteção aprimorados. Benefícios do servidor gerenciado e ferramentas para gerenciamento de temas e plugins. Estabilidade com compromisso de tempo de atividade de 99,9% e suporte interno 24 horas por dia, 7 dias por semana.

“A2 é minha hospedagem de DEV não-WPMU; Turbo (em servidores LiteSpeed) é muito rápido.” – Greg

Ferramentas e dicas de sacola (diversos)

Houve também algumas ferramentas e dicas que ficaram fora de nossas outras categorias, mas queríamos incluí-las porque definitivamente agregam valor à conversa.

Use snippets personalizados para controle de ajuste fino

“Eu constantemente me pego escrevendo snippets personalizados para fazer coisas como desenfileirar scripts em páginas que não são necessárias ou desabilitar recursos no Jetpack, WooCommerce, Core etc. que não preciso perder tempo carregando.” - Super Adorável

“Eu tento evitar adicionar plugins se for algo que eu possa fazer com algumas linhas extras no meu arquivo functions.php.” – Mate

banner de trechos de código

Partes de codigo

Uma maneira fácil, limpa e simples de executar trechos de código em seu site, ele fornece uma interface GUI para adicionar trechos e realmente executá-los em seu site como se estivessem no arquivo functions.php do seu tema.

Snippets podem ser ativados e desativados (assim como plugins), e exportados para transferência para outro site, seja em JSON para posterior importação pelo plugin Code Snippets, ou em PHP para criação de seu próprio plugin ou tema.

Estatísticas: instalações ativas: mais de 700.000, ~400 comentários, 5/5 estrelas

Trabalhe com plataformas LMS

“Eu trabalho com plataformas LMS e não poderíamos fazer ou alcançar mais do que fazer apenas isso. Trabalhar com sites para construir cursos tornou-se coisa do passado.” – Manoel

banner learnpress

LearnPress

Crie e venda cursos online facilmente, com currículos que incluem lições e questionários, todos gerenciados com uma interface amigável.

Crie de forma simples e rápida sites de cursos educacionais ou on-line sem a necessidade de conhecimento de codificação. Há também uma biblioteca de complementos gratuitos e premium que estendem a funcionalidade.

Estatísticas: instalações ativas: mais de 100.000, mais de 500 avaliações, 4,5/5 estrelas

Use uma plataforma de gerenciamento de servidor em nuvem

Nuvem de execução

Painel de gerenciamento de servidor moderno; A plataforma de nível empresarial para gerenciamento de servidores em nuvem; Automatize a configuração do servidor e as atualizações de segurança.

Com o RunCloud, você não precisa ser um especialista em Linux para criar um site desenvolvido pela DigitalOcean, AWS, Google Cloud ou Vultr. Use esta interface gráfica para construir um negócio na nuvem de forma acessível.

“Depois de testar tantas estratégias de hospedagem diferentes, descobrimos que essa é a mais eficiente… muito rápida de criar e muita automação possível porque o Runcloud oferece uma ótima API.” – Ricardo

Todos os aspectos importantes do teste

Como há tantas variáveis ​​que você pode usar para fazer seu site rodar mais rápido, a melhor maneira de realmente saber o que funciona melhor é testar o que você colocou em prática.

Além disso, devido à natureza dinâmica dos sites WordPress, é vital continuar a acompanhar o desempenho de todos os componentes.

Ferramentas de teste de velocidade recomendadas:

banner de insights de velocidade de página

Google PageSpeed ​​– O PageSpeed ​​Insights (PSI) informa sobre o desempenho de uma página em dispositivos móveis e desktop e fornece sugestões sobre como essa página pode ser aprimorada.

GTMetrix – veja o desempenho do seu site, revele por que ele está lento e descubra oportunidades de otimização.

Checkbot.io – cria relatórios muito detalhados sobre as várias coisas que afetam a velocidade e o SEO da sua página; testa centenas de páginas de uma vez para links quebrados, títulos duplicados, HTML inválido, páginas inseguras e mais de 50 outras verificações.

banner de teste de página da web

WebPageTest – teste instantaneamente a velocidade, usabilidade e resiliência do seu site em navegadores, dispositivos e locais reais ao redor do mundo.

Lighthouse – uma extensão do navegador Chrome e uma ferramenta automatizada para melhorar o desempenho, a qualidade e a exatidão de seus aplicativos da web; ele executa uma enxurrada de testes na página e, em seguida, gera um relatório sobre o desempenho dela e o que você pode fazer para melhorar.

Sizzy – um navegador para Desenvolvedores Web; permite testar em várias janelas de visualização, verificar pontuações de desempenho, desenvolver e testar todos os casos de uso sem ter que simulá-los manualmente em um navegador comum.

Testes e ajustes regulares são uma parte importante da manutenção dessas velocidades de próximo nível. Portanto, escolha as ferramentas de sua preferência e certifique-se de fazer isso de forma consistente.

Melhore o desempenho do seu site WordPress

A importância de acelerar um site WordPress não pode ser enfatizada o suficiente.

Você colocou tudo em seu site – agora combine esse ótimo conteúdo com velocidades de carregamento de página competitivas para aumentar seu engajamento e conversões.

Com tantas opções para acelerar um site WordPress prontamente disponíveis, e muitas delas gratuitas, não faz sentido não usá-las a seu favor.

Espero que você empregue prontamente algumas das ferramentas e técnicas deste post e veja por si mesmo o quanto a velocidade do seu site pode aumentar.

Se você não é um membro do WPMU DEV, experimente-nos, sem risco (sem necessidade de cartão de crédito), e veja como podemos complementar seu site. Nosso suporte é incomparável e ajudará com qualquer problema no WordPress – mesmo que não seja nosso produto.

Você tem alguma ferramenta ou técnica especial que melhore seu processo de desenvolvimento web? Há algum neste post que você gosta especialmente? Deixe-nos saber nos comentários abaixo.