Você quer acelerar seu site WordPress? Quer saber os truques de otimização do WordPress que podem ajudar a reduzir o tempo de carregamento do seu site? Neste artigo, mostraremos como acelerar o WordPress compartilhando como otimizamos nosso site List25 para melhorar o desempenho.
Você provavelmente já ouviu falar que a velocidade do WordPress é importante para SEO. Um site mais rápido tem melhor engajamento do usuário, mais visualizações de página e melhores vendas. Em um estudo de caso da strangeloop, eles descobriram que um atraso de um segundo pode custar 7% das vendas, 11% menos visualizações de página e uma diminuição de 16% na satisfação do cliente.
Então, como você realmente acelera o WordPress?
Bem, em vez de apenas compartilhar uma lista de dicas de velocidade, decidimos fazer um estudo de caso completo para mostrar os resultados do nosso site List25, juntamente com como conseguimos tudo isso.
Visão Geral
List25 é um blog de entretenimento iniciado pelo nosso fundador Syed Balkhi. O site tem mais de 1,5 milhão de inscritos, e o canal do YouTube tem mais de um quarto de BILHÃO de visualizações.
O conteúdo do site é principalmente imagens e vídeos, que consomem terabytes de largura de banda, então a otimização geral de velocidade foi crucial para nós mantermos os custos baixos, reduzirmos o abandono de página e melhorarmos o tempo no site.
Antes de começarmos a otimização, nossa página inicial levava 2,21 segundos para carregar de acordo com o Pingdom. Depois que terminamos, nosso tempo de carregamento da página caiu para 1,21 segundos (~45% mais rápido).
Durante esta otimização, conseguimos acelerar nosso tempo de resposta do servidor, melhorar nossa pontuação de desempenho de velocidade de página, reduzir o número total de requisições e melhorar o tempo geral de carregamento.
Vamos dar uma olhada nas técnicas de otimização que nos ajudaram a acelerar nosso site WordPress.
Hospedagem WordPress
Ter uma boa hospedagem web é crucial para a velocidade do seu site. À medida que nosso site se tornou mais popular, simplesmente superamos nossa empresa de hospedagem anterior (HostGator).
Os servidores deles simplesmente não conseguiam lidar com um site desse tamanho porque o List25 recebe dezenas de milhões de visualizações de página. O HostGator é ótimo para sites menores, mas não para algo dessa magnitude.
Analisamos várias opções de hospedagem WordPress gerenciada e, eventualmente, acabamos usando o SiteGround para hospedar o List25 porque eles ofereceram o melhor valor geral para este site.
Você pode ver a melhoria em nosso tempo de resposta do servidor imediatamente. Passamos de um tempo máximo de resposta de 442ms para 172ms. Isso é uma melhoria de 256%.
O Siteground construiu otimizadores de desempenho para plataformas específicas como WordPress, Joomla e Magento. Com base na plataforma do seu site, eles otimizam especialmente seus servidores, o que resulta em um melhor desempenho geral.
Escrevemos um artigo sobre quando você deve mudar sua hospedagem web, que fala sobre os 7 indicadores principais.
Se você está procurando trocar de hospedagem, então definitivamente experimente o SiteGround. Usuários do WPBeginner ganham um desconto exclusivo de 60% em hospedagem + domínio grátis.
Plugin de Cache
Quando se trata de acelerar o WordPress, o cache é o segundo fator mais importante depois da sua hospedagem web.
Normalmente, quando um visitante acessa seu site WordPress, seu servidor passa a solicitação PHP para o Banco de Dados MySQL, que encontra a página solicitada, a gera dinamicamente e a exibe ao visitante. Isso consome muitos recursos. Quando você tem cache, ele economiza tempo e recursos.
O diagrama abaixo destaca o processo. Em termos simples, pense no cache como a criação de um atalho na área de trabalho que ajuda você a acessar o arquivo mais rapidamente.
Para o site List25, estamos usando o SiteGround SuperCacher, um plugin que eles criaram especialmente para seus clientes. Além disso, eles adicionaram opções avançadas de cache dinâmico usando Varnish (parte do seu otimizador de desempenho).
Se você não estiver no Siteground, não se preocupe. Você pode configurar o cache em seu site WordPress usando uma das muitas soluções disponíveis, como W3 Total Cache ou WP Super Cache.
No WPBeginner, usamos o W3 Total Cache, que oferece várias opções de cache de página, cache de banco de dados e cache de objetos.
À medida que mais empresas de hospedagem se especializam em WordPress, veremos mais soluções de cache personalizadas sendo criadas. Pagely e WPEngine também oferecem seus próprios sistemas de cache integrados.
CDN
Redes de Distribuição de Conteúdo (CDN) podem ajudar a aumentar a velocidade do seu site. Temos usado MaxCDN desde o início do List25, então esta parte não mudou.
Escrevemos um artigo completo sobre o que é uma CDN e por que você precisa dela, juntamente com um infográfico.
A CDN nos permite servir todo o CSS, Javascript e imagens de uma Rede de Distribuição de Conteúdo. Isso funciona determinando a localização do visitante do site e servindo o conteúdo de um servidor mais próximo do visitante.
Se você não está no mercado para uma solução CDN premium, então você pode usar o Cloudflare.
Combinando Arquivos para Reduzir Requisições HTTP
À medida que você adiciona mais plugins, eles geralmente adicionam seus próprios arquivos JavaScript e CSS. Cada arquivo adicional é uma nova requisição HTTP.
Combinamos esses arquivos JavaScript e CSS em um único arquivo para cada um, a fim de reduzir as requisições e acelerar o tempo de carregamento. Você pode ver mais detalhes sobre isso em como os plugins do WordPress afetam o tempo de carregamento.
Embora agora estejamos carregando algumas funcionalidades pequenas que podemos não precisar em uma seção específica do site, esse código é armazenado em cache na CDN, e os resultados mostram que menos requisições de arquivos proporcionam um desempenho melhor do que carregar vários arquivos JS menores.
Isso é algo que você tem que fazer regularmente, pois os plugins que você usa mudam com o tempo.
Sprites de Imagem
Fizemos uso de um sprite de imagem que combinou vários ícones sociais e do site em uma única imagem:
Sempre que precisávamos exibir um ícone específico, usávamos CSS para:
- Carregar a imagem como imagem de fundo
- Definir a largura e a altura do elemento para o qual precisamos do ícone
- Definir a posição do fundo da nossa imagem para carregar o ícone necessário
Por exemplo, para carregar os ícones de mídia social da barra lateral, usamos:
li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 0 10px 10px 0; padding: 0; background: url(../images/sprite.png) no-repeat; }
li.widget_social_icons ul li.twitter { background-position: 0 -50px; }
li.widget_social_icons ul li.facebook { background-position: -36px -50px; }
li.widget_social_icons ul li.pinterest { background-position: -72px -50px; }
li.widget_social_icons ul li.google { background-position: -108px -50px; }
li.widget_social_icons ul li.rss { background-position: -144px -50px; }
li.widget_social_icons ul li.youtube { background-position: -180px -50px; }
As propriedades CSS background-position, width e height nos ajudam a segmentar a seção específica da imagem que queremos exibir:
Como resultado, apenas a primeira requisição para este arquivo de imagem está usando largura de banda. Requisições subsequentes à CDN para a imagem resultarão no carregamento da versão em cache (geralmente local), além de precisar solicitar apenas uma imagem em vez de 6 ícones sociais diferentes.
Ao combinar JavaScript, CSS e imagens, reduzimos significativamente o número de requisições.
Minificação de Código
A minificação de código envolve a remoção de espaços em branco e quebras de linha para reduzir o tamanho do arquivo, tornando o carregamento mais rápido quando solicitado.
Para o List25, usamos SCSS, uma folha de estilo baseada em sintaxe (Intro to Sass). Isso nos permite estruturar nossos arquivos CSS em várias áreas de desenvolvimento em um layout fácil de ler:
Usamos o CodeKit para compilar os arquivos SCSS em um único arquivo CSS. O CodeKit também remove espaços em branco e quebras de linha para garantir que o arquivo seja o menor possível:
Como resultado, conseguimos reduzir o tamanho do nosso arquivo CSS em 28%.
Otimização de Imagem
Otimizamos nossas imagens em duas áreas: nosso tema WordPress e o conteúdo carregado.
Para o nosso tema WordPress, usamos o CodeKit para garantir que todas as imagens fossem comprimidas sem perdas. Isso garante que os tamanhos dos arquivos sejam os menores possíveis, sem perda de qualidade.
Também educamos todos os nossos redatores sobre a importância de salvar imagens otimizadas para a web. Veja nosso guia sobre como salvar imagens otimizadas para a web.
Compartilhamento Social sem Javascript
O compartilhamento social para o List25 é realmente importante, assim como para qualquer outro site. No entanto, plugins de compartilhamento social podem deixar seu site significativamente lento.
Embora a integração dos scripts dessas quatro redes sociais não tenha impactado o tempo de carregamento da página em nossos testes, ela visivelmente desacelerou o site ao ser visualizado em um dispositivo móvel. Os botões de compartilhamento social levavam alguns segundos para aparecer, apesar dos scripts serem carregados de forma assíncrona, resultando no conteúdo da postagem se movendo enquanto os botões carregavam na tela.
Para resolver esse problema, migramos para uma solução (quase) sem Javascript. Cada um dos botões de compartilhamento das redes sociais é renderizado pelo nosso Plugin WordPress personalizado, e o Javascript do tema é usado apenas para abrir a janela do navegador quando o usuário clica em um botão.
No entanto, ainda queríamos exibir o número total de compartilhamentos que uma postagem tinha em todas as redes sociais. Para fazer isso, produzimos um pequeno Plugin WordPress personalizado para recuperar e armazenar em cache as contagens de compartilhamento social de cada rede social na tabela de metadados da postagem. Essas contagens são atualizadas a cada 24 horas, garantindo que consultas demoradas não estejam sendo executadas constantemente.
Você pode usar uma API como Sharre ou dissecar o Floating Social Bar para personalização.
Usando o RUM (Real User Monitoring) do Pingdom, este novo plugin de compartilhamento diminuiu o tempo de carregamento 'real' da página de 6 segundos para pouco mais de 2 segundos. Ele também garantiu que reduzíssemos o número de requisições feitas para scripts de terceiros.
Resultado
Melhoramos significativamente a velocidade do nosso site. O tempo de carregamento passou de 2,2 segundos para 1,22 segundos.
Conseguimos reduzir significativamente nosso tempo de resposta do servidor.
Isso ajudou a reduzir o tempo gasto para baixar uma página pelo Google bot, o que melhorou nossa taxa de rastreamento.
Nossa taxa de rejeição geral caiu 7% porque o site estava carregando mais rápido e, ao trocar de hospedagem, conseguimos reduzir os erros do servidor.
Como você pode imaginar, com a taxa de rejeição menor, o tempo gasto no site também aumentou em mais de 30 segundos.
Conclusão
Como você pode ver, um site mais rápido pode melhorar o engajamento do visitante. As técnicas que discutimos cobriram uma variedade de melhorias básicas e intermediárias que você pode implementar para otimizar seu site WordPress.
Esperamos que este artigo tenha ajudado você a acelerar seu site WordPress. Você também pode querer conferir nosso artigo sobre 20 plugins essenciais para WordPress em 2015.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e Facebook.
Jiří Vaněk
Lutei muito com a velocidade do WordPress quando meu blog cresceu para cerca de 1000+ artigos. O Google Search Console começou a mostrar números vermelhos e indicando uma velocidade insatisfatória na web. Tentei tudo o que foi possível, desde várias minificações até ajustes na web. Várias vezes, cheguei a quebrar o site enquanto o ajustava e tive que restaurar a partir de backups. No final, a melhor solução, que ainda uso hoje, foi o plugin WP Rocket. Não conheço nada melhor para cache (especialmente graças ao recurso de pré-carregamento). E como tenho uma CDN da CloudFlare, conectei-a diretamente através do plugin à CDN. É uma ótima combinação que acelerou incrivelmente o site. Para mim, é a melhor dupla para a velocidade do WordPress.
Peter
I love Performance Guides so much
Thanks for Sharing with us. In Germany there not so many Wordpress Blogs. But we have Great Guides too.
But don’t forget HTTP/2 this will change a lot. I mean combine fiels no longer good for optimize and priority are comes in the game
Gabe Livan
Para reduzir ainda mais o número de requisições HTTP, recomendo o plugin “WP Asset Clean Up”, pois ele remove todos os estilos e scripts desnecessários que não são necessários na página inicial e em outras postagens/páginas.
Patrick Evans
Estou usando a Rosehosting para hospedar meus sites WordPress e estou muito satisfeito com a velocidade e a confiabilidade do meu VPS.
Com seus tutoriais, aprendi a usar sprites de imagem e como salvar imagens otimizadas para a web, e meus sites estão mais rápidos agora.
Obrigado!
Miro
Mudei para o SiteGround recentemente e estou muito feliz com eles. Também segui os passos deste artigo e obtive resultados muito bons, exceto por uma coisa. Falhei em Combinar Arquivos para Reduzir Requisições HTTP. Plugins que existem para fazer isso não funcionam bem, além disso, eles quebram meu site ou o tornam extremamente lento. Você tem um artigo / um tutorial sobre como Combinar Arquivos manualmente para Reduzir Requisições HTTP? Você indicaria alguém que oferece tal serviço (combinando arquivos js e css para reduzir requisições http). Obrigado
Jane
Obrigado pelo artigo, pessoal.
Nós definitivamente precisávamos de algo para otimizar nossa velocidade devido ao grande número de imagens de alta resolução
Usamos Wp Cache em nosso site de fotos gratuitas, mas também notamos que, embora isso ajude, ainda precisamos comprimir (redimensionar) imagens, pois leva muito tempo para carregar 20 imagens (na página inicial).
Então, basicamente, redimensionar tudo e manter imagens de alta resolução em segundo plano (para downloads)
Tenha um ótimo fim de semana
Jane
Piet
Para as imagens você usa um sprite, você diz, mas as imagens que você está usando podem ser facilmente substituídas por um ícone de fonte como FontAwesome. Dependendo de como você instala isso (eu usaria Bower), nem mesmo é uma requisição http de saída, então você poderia economizar o carregamento desse arquivo de imagem (e todo o cálculo para acertar, é claro).
Jay Castillo
Uau! Seus números para List25 com Siteground são incríveis! Você usou o plano GoGeek ou há um plano maior não listado no site deles?
Mais uma coisa, que ferramenta você usou para obter os tempos de resposta do servidor (o gráfico logo acima da taxa de rastreamento do Google bot)?
Equipe Editorial
Estamos usando o plano de servidor dedicado deles com o pacote WordPress Booster. Usamos o Pingdom para o gráfico de tempo de resposta do servidor.
Admin
Jay Castillo
Entendi, obrigado!
Alberto Serrano
Olá, eu hospedei meu site no SiteGround, mas não sabia que eles já tinham um plugin de cache instalado, então instalei o WP Super Cache. Devo desativar um e qual seria melhor?
Obrigado
Equipe Editorial
Yup you probably don’t need SuperCache. I would confirm with SiteGround support just to make sure though
Admin
Lawrence
Obrigado por este guia muito útil!
Por favor, você configurou o Maxcdn junto com o SuperCacher do Siteground?
Eu me mudei recentemente para o Siteground e adoraria saber como configurar o Maxcdn, dado que o plugin Supercacher já está ativo na minha conta
WPBeginner Support
Olá Lawrence,
Quando você armazena conteúdo em cache em seu site, ele ainda é servido pelo mesmo servidor. O MaxCDN, por outro lado, serve seu conteúdo usando sua rede de entrega de conteúdo, o que melhora o desempenho do seu site. Quanto a preocupações com compatibilidade, você pode querer entrar em contato com seu provedor de hospedagem.
Ian Douglas
Por favor, considere liberar seu plugin personalizado de compartilhamento social para o público (ou seja, download gratuito para o público). O compartilhamento social sempre foi um dreno nas páginas, então seria ótimo ter uma opção elegante e rápida.