Aqui está o meu problema nº 1: Eu sou impaciente.Eu quero tudo o que eu decidi que precisava ontem.Eu não quero esperar, eu não quero falar com ninguém, eu só quero isso agora.Recentemente, comprei um iMac novo e a espera de entrega de 2 semanas foi excruciante.
Aqui está o kicker, eu não estou sozinho.
Parece que pessoas como nós e possivelmente o resto da humanidade têm alguma forma de TDAH, e a menos que consigamos o que queremos agora, vamos passar para a próxima coisa.É por isso que nossos sites DEVEM ser rápidos e bonitos.Porque, caso contrário, seus visitantes entrarão em uma nova guia e irão para o seu concorrente.
Algumas razões pelas quais você gostaria de trabalhar na velocidade do seu site:
- A maior velocidade da página está fortemente correlacionada com o abandono do carrinho e a taxa de rejeição
- A velocidade da página é um fator de classificação do Google.Mais rápido = mais tráfego
- Sites mais rápidos proporcionam uma melhor experiência do usuário.
O problema é que na maioria das vezes quando as pessoas falam sobre a velocidade do site, eu me perco.Eles falam sobre otimização do Apache ou arquivos de configuração do servidor e, para ser honesto, como um não-engenheiro, eu sempre pensei que isso estava além de mim e eu nunca poderia obter um site rápido, a menos que eu perdesse milhares de dólares para outra pessoa fazer isso por mim.
Isso foi irritante porque a velocidade do site é importante tanto para o tráfego do mecanismo de pesquisa quanto para a otimização da taxa de conversão.Mas eu me aprofundei e decidi que isso precisava ser entendido.Para ser honesto, eu também quebrei a ambição de saúde algumas vezes no processo, mexendo com o DNS, mas acabei conseguindo.
Nossa página inicial agora carrega menos de 1 segundo em vez de 4. Esta é uma grande melhoria e nossa análise atesta como você verá abaixo.
Este guia não é o guia perfeito para otimizar a velocidade da página.Este é um guia para otimizar a velocidade da página que você pode realmente fazer sem gastar muito dinheiro e que lhe dá resultados significativos.Otimização de velocidade de página 80/20 para aqueles que têm medo quando solicitados a modificar uma função JavaScript ou PHP.
Antes de começar a comentar, também gostaria de dizer que este site ainda não recebeu este tratamento e pode carregar um pouco mais rápido.Está na minha lista de tarefas, mantenha o ódio nos comentários :).
O que você vai aprender
- Por que a velocidade da página é importante se você é sério sobre como ganhar dinheiro on-line
- Os resultados da vida real das táticas discutidas neste post
- O passo a passo detalhado segue as instruções sobre como eu fiz isso.
- Os extras que você pode fazer para sites ainda mais rápidos
O benchmark e os resultados deste guia
Como este guia é diferente da maioria dos guias que você encontrará on-line?Bem, a questão é que eu realmente fiz todas as coisas sobre as quais vou falar em nosso site Health Ambition .
Para testar a velocidade do site, usei 2 ferramentas gratuitas que você pode usar para verificar a velocidade do site, juntamente com algumas dicas de melhoria: informações de velocidade da página do Google e Pingdom.
Antes
Então, fomos muito descuidados com a velocidade do nosso site, no entanto, os resultados anteriores não são tão ruins.Isso se deve em parte ao Performag, o tema que foi desenvolvido especialmente para nós pelos caras em temas bem desenvolvidos.Antes de passar para o tema, o site estava se apresentando em meados dos anos 50, mas eu não tirei uma captura de tela na época.
Depois
Depois de trabalhar no site por 5 horas, aqui está o resultado que eu consegui alcançar.Não é perfeito e eu não entrei nos anos 90 para a ferramenta do Google, mas de acordo com o Pingdom, o site carrega em menos de 1 segundo e é mais rápido do que 90% de todos os sites testados.
Além disso, esta é a nossa progressão da análise desde que fizemos as alterações.Como você pode ver, tudo está verde, e o crescimento de 8,35% na visualização de página para nós significa 20.000 extras em pouco menos de um mês.Além disso, a taxa de rejeição é um pouco melhor, bem como a frequência e o tempo de saída na página.
Agora deixe-me mostrar-lhe como exatamente eu consegui isso e como você pode fazer o mesmo.
O plano passo a passo
Etapa 1: substituí um tema otimizado para velocidade
O que esse ajuste faz: Ele oferece um tema wordpress que já está otimizado para a velocidade da páginaPor que fazê-lo: Seu tema é essencialmente uma camada do WordPress que faz muito do seu conteúdo.
É também o código enviado para o navegador dos seus visitantes.Se for mal otimizado, suas páginas serão mais pesadas e mais lentas.
Custo: $ 49 de uma só vez.
Alternativa: Escolha qualquer tema disponível e pague um especialista em velocidade de página para otimizar seu tema (várias centenas de dólares)
Nada me excita mais do que vai no Forest Theme e eu navego no tema para obter instantaneamente dezenas de ideias do site.No entanto, há um problema.A maioria dos temas na maioria dos mercados é feita para parecer bonita e ter efeitos extravagantes.
Porque?
Por que isso os faz vender mais: As pessoas raramente pensam em desempenho ao escolher um tema, porque o design e a aparência são muito mais vibrantes e atraentes para o seu lado emocional no momento.
Este é o erro que cometemos quando começamos o Health Ambition, embora o tema não fosse tão elaborado, não foi criado para a velocidade. O site estava carregando um monte de duplicado e biblioteca javascript não utilizada, CSS e HTML não foram compactados ou otimizados e, como resultado, o site foi sloooooow.
No momento em que decidi que o site precisava de um redesign, os caras da Thrive Themes entraram em contato comigo e se ofereceram para construir o tema WordPress para o melhor site de autoridade do mercado (Performag).E um dos principais critérios para isso foi a velocidade da página.
Isto foi conseguido utilizando os seguintes métodos:
- Todo HTML/CSS/javascript é compactado e minimizado por padrão
- Nenhum efeito extravagante desnecessário, apenas simplicidade e velocidade
- Reduza o número de plug-ins necessários inserindo sistemas de publicidade, sistemas de compartilhamento, etc.
- Reduza o número de itens carregados para o seu telemóvel
Eu perdi a captura de tela, mas a velocidade da nossa página foi inicialmente 55 e eles subiram para 67 depois de mudar de assunto.
Uma coisa boa sobre os caras da Thrive Themes é que eles comprimem automaticamente suas novas imagens via kraken.io, o melhor serviço de otimização de imagem, mas mais sobre isso mais tarde.
Como você faz isso para o seu site?
- Vá para Prosperar temas e escolha um tema que corresponda à aparência do seu site.
- Uma vez comprado, vá para o painel do WordPress e clique em Aparência> Temas> Adicionar Novo.
- Clique em Carregar tema e carregue o arquivo de tema que você baixou do Thrive Themes.
- Ative o tema e insira sua chave de licença nas três opções de opção.
- Vá para Aparência> Personalizar e alterar o design do tema para se adequar à sua marca.
- Vá para as páginas principais de seus sites e certifique-se de que nada quebrou com o novo tema e corrigi-los manualmente.
Passo 2: Eu atualizei nossa hospedagem
O que esse ajuste faz: Recomendamos um provedor de hospedagem que tenha sido melhor e mais rápido para nós do que muitos outros no mercado.
Por que fazer isso: Isso é realmente mais complicado de explicar.Simplificando, sua hospedagem é o computador que serve seus arquivos e sua conexão com a internet.Seu provedor de hospedagem também afeta o tempo de atividade do seu site.
Custo: $ 24.95 / mês para até 5 sitesAlternativa: Hospedagem compartilhada mais barata, mas mais lenta ou mais cara e menos dispendiosa "hospedagem WordPress"
Devo dizer que a nossa hospedagem não foi ruim, mas também não foi ideal.Usamos o Synthesis do Copyblogger.Quando eu estava executando o teste de velocidade da página, ele continuava retornando a recomendação "melhorar os tempos de resposta do servidor".Isso basicamente significa que nosso servidor não era ótimo, dado o volume de tráfego com o qual estávamos lidando.
Adicione isso ao fato de que não fomos capazes de realizar serviços de otimização de imagem, claramente não valia mais de US $ 150 que estávamos pagando mensalmente.
Entre no Traffic Planet Hosting
Depois de ler comentários de vários blogueiros, decidi dar Traffic Planet Hosting uma tentativa.A razão pela qual eu fui a eles é porque eles realmente dependem do Amazon S3 em termos de servidores, de modo que, apesar de ser uma pequena empresa, eles dependem de uma das infraestruturas de servidor mais poderosas do mundo.
Além disso, eles oferecem um serviço de alto nível 24 horas.Eu sou um pouco de coruja noturna e até os incomodo às 2h da manhã no bate-papo, eles sempre foram capazes de me ajudar. Nada mau.
Mas a vantagem real do Traffic Planet Hosting no contexto deste post é que eu consegui aumentar a velocidade da minha página de 67 para 71 depois de mudar para eles.Nem uma tonelada, mas tenha em mente que eu já estava em uma hospedagem considerada premium e rápida.Se você estiver em algo como o Bluehost, provavelmente verá ganhos mais altos.
Se você juntar isso com o fato de que eu literalmente economizei US $ 600 / ano em custos de hospedagem e eles fizeram todas as transferências do site para mim, isso valeu a pena e me ajudou a obter a velocidade de carregamento da minha página em menos de 1 segundo.
Seus planos começam em US $ 24,99 / mês.Não é o mais barato e se você está apenas começando, eu ainda recomendo o Bluehost porque é bom o suficiente para um primeiro site.
Mas assim que você quiser atualizar para algo mais robusto com suporte real e otimizado para hospedagem WordPress, agora recomendo o Traffic Planet Hosting no WPEngine ou em qualquer outro por seu preço e desempenho.
Como você faz isso para o seu site?
- Ir para Trafficplanethosting.com
- Selecione o plano que você precisa para a quantidade de sites que você gerencia (a maioria de vocês deve estar bem com o plano mais barato)
- Se você quiser que eles transfiram seus sites do seu host anterior, envie um novo ticket com suas informações de login e hospedagem do WordPress, eles farão o resto.
Nota sobre a transferência do local: eles transferiram 9 dos nossos sites em 24 horas, foi tudo muito bom, mas algumas fotos se perderam na transferência.Certifique-se de fazer backup antes de mudar de empresa de hospedagem.
Passo 3: Corrigi nossas imagens
O que esse ajuste faz: Ele permite que você reduza suas imagens usando vários algoritmos de otimização de imagem diretamente do seu painel do WordPress sem perda de qualidade.
Por que fazer isso: As imagens são a parte mais pesada da maioria dos sites, a redução de imagens torna suas páginas muito menores e mais rápidas.
Custo: A partir de US $ 9Alternativa: Ferramenta de compressão de imagem gratuita menos capaz smush.it
Em 90% dos casos, as imagens são os maiores arquivos para download em uma página da web.Na verdade, eles respondem por 70% de todo o uso de largura de banda em todo o mundo.É por isso que eles são a única coisa em que você pode obter ganhos significativos de velocidade da página.
Você vê, existem vários serviços de compactação de imagem que permitem que você reduza suas imagens, fazendo com que suas páginas carreguem mais rapidamente.Os 2 principais concorrentes são os Smush.it do Yahoo, Yslow It, e Kraken.io.
Vs
Ambos podem ser instalados como plugins no WordPress, e é por isso que eu mantive esses dois e basicamente executei a imagem através de sua API à medida que os carregava.Se você usar um tema Thrive como recomendado acima, a associação Kraken está incluída, então você não precisa se preocupar com esta etapa.
A diferença entre os dois é que o Kraken é em grande parte superior, no entanto, é um serviço pago, enquanto o Smush é apenas metade bom, mas gratuito.Decida com sua carteira qual é a melhor oportunidade para você.
A razão pela qual entrei no Kraken foi para otimizar nossas imagens carregadas anteriormente, pois os temas do Thrive otimizam apenas as imagens recém-carregadas.Com crédito de US $ 9, consegui otimizar toda a biblioteca de imagens e reduzir o tamanho da imagem em até 85%!É enorme!
O site ficou significativamente mais rápido e leve depois de fazer essa alteração.É difícil fornecer um benchmark, já que os ganhos de velocidade variam de página para página, mas algumas de nossas páginas passaram de vários megabits para algumas centenas de kilobytes.Nada mal para um investimento único de US $ 9.
Como você faz isso?
- Vá para kraken.io e escolha o plano de US $ 9, a menos que você tenha uma grande biblioteca de imagens
- Vá para WordPress.org e instale o plugin Kraken .io e adicione sua chave de API nas configurações do plugin
- Vá para a sua biblioteca de mídia, selecione tudo e clique no botão "krak 'em all", selecione com perdas e execute o plugin
- Repita a operação em cada página do seu site.
Etapa 4: configurei com êxito o cache em nosso domínio
O que esse ajuste faz: Como seu CMS gera dinamicamente páginas em cada carga, o "cache" permite que seu site não regenere conteúdo fixo a cada carregamento de página, acelerando a geração de páginas.
Por que fazer isso: Porque é gratuito e é uma tarefa única que faz seu site funcionar mais rápido permanentementeCusto: Alternativas gratuitas: Não use cache
Eu tenho que admitir, o WordPress mudou a minha vida.Eu não sou um programador e isso me deu as ferramentas para competir com web designers quando se trata de criar sites.No entanto, devido à maneira como funciona, ele tem que calcular muitos dados toda vez que uma página é carregada.
O cache ajuda a simplificar esse trabalho, evitando que seu site tenha que recalcular a página inteira e, basicamente, "salvar" o trabalho que já foi feito.Na prática, isso significa coisas como o cabeçalho, a barra lateral, o rodapé, etc. Que tendem a ser semelhantes entre as páginas não devem ser baixadas uma e outra vez.
O plugin WordPress recomendado para configurar o cache da página e do navegador é o cache W3 Total.É o mais popular nesta categoria e provavelmente o mais integrado.Ele se conecta ao Yoast SEO, ele se conecta à maioria das redes de entrega de conteúdo.
Atenção, se você configurá-lo incorretamente, este plug-in pode danificar o site e, às vezes, excluí-lo completamente.
Como você faz isso?
- Vá para o motor de busca do plugin WordPress e procure por W3 Total Cache
- Instalar e ativar o plug-in
- Vá para Desempenho> Configurações Gerais
- Ative o cache de página, a minimização e o cache do navegador e clique em Salvar
W3 Total cache é um plugin complicado e pode prejudicar o seu site.
Etapa 5: instalar o módulo de velocidade da página do Google
Nota: Parece que o Google acabou de tirá-lo assim que eu estava publicando o post. No entanto, você pode instalar o mesmo conjunto de scripts em seus servidores gratuitamente com o módulo de velocidade da página. Confira aqui.
O que esse ajuste faz: ele usa os servidores e algoritmos do Google para servir seu site e acelerar ainda mais o carregamento com coisas como acima da prioridade de carregamento de dobra, carregamento de imagem preguiçoso etc. Por que fazer isso: porque é gratuito, e se uma das razões para melhorar a velocidade da sua página é o tráfego de pesquisa, quem melhor do que o Google otimiza passivamente para você?
Custo: Grátis (por hora)Alternativas: Codificação personalizada e conselhos de velocidade do site
Eu me considero muito inteligente, mas tenho certeza de que os PhDs do Google são provavelmente mais inteligentes.O serviço de velocidade de página do Google é (por enquanto) um serviço gratuito oferecido pelo Google que permite que qualquer pessoa com um site aproveite a infraestrutura do Google para servir alguns de seus recursos.
Aqui estão as principais características da velocidade da página do Google:
- Veicula arquivos importantes dos data centers locais do Google (atua como CDN baseada em rede do Google)
- Reescreva e combine HTML, CSS e Javascript para reduzir o número de solicitações de servidor
- Limpe o código para reduzir seu tamanho
- Otimize a prioridade de upload para carregar conteúdo visível primeiro (melhoria percebida na velocidade de upload).
- Redimensiona imagens para renderizar tamanho.
Uma coisa muito interessante sobre este serviço é o aumento da velocidade da página "percebida".Isso significa que eles têm a prioridade de carregar conteúdo acima da dobra primeiro, tornando seu site mais rápido para o visitante (e é um impulso para o núcleo de velocidade da sua página de SEO).
Outra característica interessante é que o serviço é basicamente uma CDN gratuita e que se sente muito melhor do que a versão gratuita do Cloudflare.Normalmente, os serviços de CDN premium, como o Max CDN, começam em US $ 9 / mês.Isso é uma economia de US $ 108 / ano, juntamente com a otimização do seu código.
Se você quiser entender como o serviço funciona tecnicamente, assista a este vídeo:
Como você faz isso?
Eu poderia ter feito um guia passo-a-passo, mas o Google fez melhor do que eu :).
Conclusão
Aqui está.Depois de fazer muita pesquisa on-line, apliquei essas 5 coisas ao nosso site e consegui alcançar os 10% melhores sites em termos de velocidade, apesar do fato de que comecei muito baixo.
Eu entendo a implicação técnica exata de cada etapa?Claro que não. Eu não sou um engenheiro, e muitos dos passos sugeridos são baseados em tecnologias avançadas da web que nem mesmo a maioria dos engenheiros poderia necessariamente explicar.
Mas a prova está no pudim: funciona e é conveniente.Se você aplicasse tudo o que encontrou neste guia, veria um custo único de US $ 58, juntamente com um custo de US $ 24,99 / mês para hospedagem em vez de US $ 7,99 para provedores de hospedagem mais baratos.
Esse é um custo pequeno em comparação com a alternativa: contratar um desenvolvedor de ponta para fazer tudo isso por você por muito dinheiro.
Eu adoraria obter seu feedback na seção de comentários sobre isso e talvez aprender os outros truques que você usou para tornar seu site mais rápido!
