Você deseja acelerar o seu site WordPress? Deseja conhecer os truques de otimização do WordPress que podem ajudá-lo a reduzir o tempo de carregamento do seu site? Neste artigo, mostraremos como acelerar o WordPress ao compartilhar como otimizamos nosso site List25 para aumentar o desempenho.
Você provavelmente já ouviu a velocidade do WordPress é importante para o SEO. Um site mais rápido tem melhor envolvimento de usuários, mais visualizações de página e melhores vendas. Em um estudo de caso de strangeloop, eles descobriram que um atraso de um segundo pode custar-lhe 7% das vendas, 11% menos visões de página e 16% de redução na satisfação do cliente.
Então, como você realmente acelerou 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 a forma como conseguimos tudo.
Visão geral
List25 é um blog de entretenimento iniciado por nosso fundador, Syed Balkhi. O site tem mais de 1,5 milhão de assinantes e o canal do YouTube tem mais de um quarto BILHÃO pontos de vista.
O conteúdo do site é principalmente imagens e vídeos que ocupam terabytes de largura de banda, de modo que a otimização geral da velocidade foi crucial para manter os custos baixos, reduzir o abandono das páginas e melhorar o tempo no site.
Antes de começar a otimização, nossa página inicial levou 2,21 segundos para carregar de acordo com Pingdom. Depois que terminamos, o tempo de carregamento da página caiu para 1,21 segundos (~ 45% mais rápido) .
Durante esta otimização, conseguimos acelerar o tempo de resposta do nosso servidor, melhorar a pontuação de desempenho da velocidade da página, reduzir o número de pedidos totais e melhorar o tempo de carregamento geral.
Vamos dar uma olhada nas técnicas de otimização que nos ajudaram a acelerar o nosso site WordPress.
Hospedagem do WordPress
Ter um bom host da web é crucial para a velocidade do seu site. À medida que nosso site se tornou mais popular, simplesmente superamos nossa empresa de hospedagem anterior (HostGator).
Seus servidores simplesmente não conseguiam lidar com um site desse tamanho porque List25 recebe dezenas de milhões de visualizações de página. HostGator é ótimo para sites menores, mas não por algo desta magnitude.
Examinamos várias opções de hospedagem gerenciadas do WordPress e, eventualmente, acabamos usando SiteGround para hospedar List25 porque eles ofereceram o melhor valor geral para este site.
Você pode ver a melhoria no nosso tempo de resposta do servidor imediatamente. Passamos do tempo de resposta máximo de 442ms para 172ms. Essa é uma melhoria de 256%.
O Siteground criou impulsionadores 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.
Nós escrevemos um artigo sobre quando você deve mudar sua hospedagem na web, que fala sobre os 7 indicadores-chave.
local
Plugin de cache
Quando se trata de acelerar o WordPress, o armazenamento em cache é o segundo fator mais importante após a sua hospedagem na web.
Normalmente, quando um visitante chega ao seu site WordPress, seu servidor passa a solicitação PHP para o banco de dados MySQL, que encontra a página que está sendo solicitada, gera-a sobre a marcha e mostra-a para o visitante. Isso ocupa muitos recursos. Quando você armazena em cache, ele economiza tempo e recursos.
O diagrama abaixo destaca o processo. Em termos leigos, pense em colocar em cache como criando um atalho no desktop que o ajuda a chegar ao arquivo mais rápido.
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 Verniz (parte do seu reforço de desempenho).
Se você não está no Siteground, então não se preocupe. Você pode configurar o cache no seu site WordPress usando uma das muitas soluções disponíveis, como W3 Total Cache ou WP Super Cache.
estamos usando W3 Total Cache, que fornece uma série de opções de cache de página, armazenamento em cache de banco de dados e armazenamento de objetos em cache.
À medida que mais empresas de hospedagem se especializam para o WordPress, veremos mais soluções de cache personalizadas. Pagely e WPEngine também oferecem seu próprio sistema de cache embutido.
CDN
As redes de entrega de conteúdo (CDN) podem ajudá-lo a aumentar a velocidade do seu site. Nós usamos o MaxCDN desde o início da Lista25, então essa parte não mudou.
Nós escrevemos um artigo completo sobre o que é um CDN e por que você o precisa, juntamente com uma infografia.
O CDN nos permite atender todos os 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 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 solicitações HTTP
À medida que você adiciona mais plugins, muitas vezes eles adicionam seus próprios arquivos JavaScript e CSS. Cada arquivo adicional é uma nova solicitação HTTP.
Combinamos esses arquivos JavaScript e CSS em um único arquivo para cada um para reduzir solicitações e acelerar o tempo de carregamento. Você pode ver mais detalhes sobre como os plugins do WordPress afetam o tempo de carregamento.
Enquanto estamos carregando algumas pequenas funcionalidades que talvez não precisemos em uma seção específica do site, esse código é armazenado em cache no CDN, e os resultados mostram que menos pedidos de arquivos oferecem melhor desempenho do que carregar vários arquivos JS menores.
Isso é algo que você tem que fazer regularmente porque os plugins que você usa alteram as horas extras.
Sprites de imagem
Utilizamos um sprite de imagem que combinou vários ícones sociais e de sites em uma única imagem:
Sempre que precisávamos exibir um ícone específico, usaríamos o CSS para:
- Carregue a imagem como uma imagem de plano de fundo
- Defina a largura e altura do elemento que precisamos do ícone para
- Defina a posição de fundo para a nossa imagem para carregar o ícone necessário
Por exemplo, para carregar os ícones das redes sociais da barra lateral, usamos:
li.widget_social_icons ul li {float: left; largura: 36px; altura: 36px; margem: 0 10px 10px 0; preenchimento: 0; background: url (... / images / sprite.png) não repete; }
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; }
o posição de fundo , largura e altura As propriedades CSS nos ajudam a segmentar a seção específica da imagem que queremos exibir:
Como resultado, apenas o primeiro pedido para este arquivo de imagem está usando largura de banda. Os pedidos subseqüentes ao CDN para a imagem resultarão na versão em cache (geralmente local) sendo carregada, bem como apenas precisando solicitar uma única imagem versus 6 ícones sociais diferentes.
Ao combinar JavaScript, CSS e imagens juntas, reduzimos significativamente o número de pedidos.
Mineração de código
A minificação do código envolve a remoção de espaços em branco e quebras de linha para reduzir o tamanho do arquivo, tornando-o mais rápido para carregar quando solicitado.
Para 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. CodeKit também remove espaços em branco e quebras de linha para garantir que o arquivo seja o mais pequeno possível:
Como resultado, conseguimos reduzir o tamanho do arquivo CSS em 28%.
Otimização de imagens
Otimizamos nossas imagens em duas áreas: o nosso tema WordPress e o conteúdo carregado.
Para o nosso tema WordPress, utilizamos o CodeKit para garantir que todas as imagens foram comprimidas sem perdas. Isso garante que os tamanhos dos arquivos sejam tão pequenos quanto possível, sem perda de qualidade.
Nós também educamos todos os nossos escritores sobre a importância de salvar imagens otimizadas para a web.
Compartilhamento social sem JavaScript
O compartilhamento social para List25 é realmente importante como qualquer outro site. No entanto, os plug-ins de compartilhamento social podem reduzir significativamente o seu site.
Embora a integração desses scripts de quatro redes sociais não tenha impactado o tempo de carregamento da página em nossos testes, ele desacelerou visivelmente o site quando visualiza em um dispositivo móvel. Os botões de compartilhamento social levariam alguns segundos para aparecer, apesar dos scripts serem carregados de forma assíncrona, resultando no conteúdo do post se movendo como os botões carregados na vista.
Para enfrentar esse problema, nós nos mudamos para uma solução (quase) sem JavaScript. Cada um dos botões de compartilhamento da rede social é processado pelo nosso plugin WordPress personalizado e o Javascript do tema é usado apenas para abrir a janela do navegador da Web quando o usuário clica em um botão.
No entanto, ainda queríamos exibir o número total de ações compartilhadas 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 meta meta do Post. Essas contas são atualizadas a cada 24 horas, garantindo que as consultas demoradas não estejam constantemente em execução.
Você pode usar uma API como Sharre ou dissecar a Barra Social Flutuante para personalização.
Usando RUM do Pingdom (Real User Monitoring), este novo plugin de compartilhamento diminuiu o tempo de carregamento da página “verdadeira” de 6 segundos para pouco mais de 2 segundos. Também garantiu que reduzimos o número de pedidos feitos para scripts de terceiros.
Resultado
Melhoramos significativamente a velocidade do nosso site. O tempo de carga foi de 2,2 segundos para 1,22 segundos.
Conseguimos reduzir significativamente o tempo de resposta do nosso servidor.
Isso ajudou a reduzir o tempo gasto para baixar uma página pelo Google Bot que ajudou a nossa taxa de rastreamento.
Nossa taxa de rejeição geral caiu 7%, porque o site estava carregando mais rápido e, ao alternar os hosts, conseguimos reduzir os erros do servidor.
Como você pode imaginar com a menor taxa de rejeição, o tempo gasto no site aumentou também em mais de 30 segundos.
Conclusão
Como você pode ver, um site de carregamento mais rápido pode melhorar o engajamento dos visitantes. As técnicas que discutimos abordaram uma série de melhorias básicas e intermediárias que você pode implementar para otimizar o seu site WordPress.
Esperamos que este artigo o ajude a acelerar o seu site WordPress. Você também pode querer verificar o nosso artigo sobre 20 devem ter plugins do WordPress para 2015.