Em Wall Street Oasis, percebemos que, toda vez que nos concentramos em melhorar a velocidade de nossa página, o Google nos envia mais tráfego orgânico. Em 2018, o site da nossa empresa atingiu mais de 80% do nosso tráfego de pesquisas orgânicas. São 24,5 milhões de visitas. Não é preciso dizer que estamos muito atentos a como podemos continuar a melhorar nossa experiência de usuário e manter o Google feliz.
Acreditamos que este artigo seria uma excelente maneira de destacar as etapas específicas que tomamos para manter a velocidade da página na velocidade da luz e no tráfego orgânico em boas condições. Embora este artigo seja algo técnico (a velocidade da página é um problema importante e complexo), esperamos que ele forneça aos proprietários e desenvolvedores de sites uma estrutura sobre como tentar melhorar a velocidade da página.
Informação técnica rápida: nosso site é construído sobre o Drupal CMS e estamos rodando em um servidor com uma pilha LAMP (mais verniz e memcache). No entanto, se você não estiver usando o MySQL, as etapas e os princípios deste artigo ainda serão relevantes para outros bancos de dados ou para um proxy reverso.
Pronto? Vamos cavar mais fundo.
5 etapas para acelerar o back-end
Antes de seguir para etapas específicas que podem ajudar você a acelerar seu back-end, pode ser útil revisar o que entendemos por "back-end". Você pode pensar no backend de tudo que é usado para armazenar dados, incluindo o banco de dados e os servidores, basicamente qualquer coisa que ajude o site a trabalhar com o qual você não interaja visualmente. Para mais informações sobre a diferença entre o backend e o frontend, leia este artigo
Etapa 1: verifique se você tem um proxy reverso configurado
Este é um primeiro passo importante. Para Wall Street Oasis (WSO), usamos um proxy reverso chamado Varnish. É de longe a camada de cache mais crítica e rápida, e serve a maior parte do tráfego anônimo (usuários que efetuaram logout). O verniz armazena em cache a página inteira na memória, então retorná-la ao visitante é muito rápido.
Etapa 2: Estender o TTL desse cache
Se você tem um grande banco de dados de conteúdo (especificamente no intervalo de mais de 10.000 URLs) que não muda com muita freqüência, para aumentar a taxa de acertos na camada de cache de verniz, você pode estender a vida útil (TTL basicamente significa quanto antes de remover o objeto do cache).
Para o WSO, chegamos a duas semanas (já que tivemos mais de 300.000 discussões). Em um determinado momento, apenas alguns milhares desses URLs do fórum estão ativos, portanto, faz sentido armazenar em cache as outras páginas. A desvantagem disso é que, quando você faz alterações no modelo ou no design do site, deve aguardar duas semanas para que ele alcance todos os URLs.
Etapa 3: aquecer o cache
Para manter nosso cache "quente", temos um processo específico que afeta todos os URLs em nosso mapa do site. Isso aumenta a probabilidade de uma página estar no cache quando um usuário ou bot do Google visita essas mesmas páginas (ou seja, nossa taxa de sucesso). melhoria). Também mantém o verniz cheio de mais objetos, pronto para ser acessado rapidamente.
Como você pode ver na tabela abaixo, a proporção de "acertos de cache" (verde) em relação ao total de acertos (azul + verde) é maior que 93 por cento.
Etapa 4: ajuste seu banco de dados e concentre-se nas consultas mais lentas
No WSO, usamos um banco de dados MySQL. Certifique-se de ativar o relatório de consulta lenta e verifique-o pelo menos a cada trimestre. Verifique as consultas mais lentas usando o EXPLAIN. Adicione índices quando necessário e digite novamente as consultas que podem ser otimizadas.
No WSO, usamos um banco de dados MySQL. Para ajustar o MySQL, você pode usar os seguintes scripts: https://github.com/major/MySQLTuner-perl e https://github.com/mattiabasone/tuning-primer
Etapa 5: cabeçalhos HTTP
Use o servidor de envio HTTP2 para enviar recursos para a página antes de serem solicitados. Só não se esqueça de tentar quais devem ser empurrados, em primeiro lugar. JavaScript foi uma boa opção para nós. Você pode ler mais sobre isso aqui.
Este é um exemplo da inserção do servidor do nosso URL das perguntas da entrevista do banco de investimento:
; rel = preload; como = script,; rel = preload; como = script,; rel = preload; como = script,
Verifique se você está usando o formato correto. Se é um script:
Se é um arquivo CSS:
7 passos para acelerar o frontend
As etapas a seguir são para ajudar a acelerar seu aplicativo frontend. O front-end é a parte de um site ou aplicativo com o qual o usuário interage diretamente. Por exemplo, isso inclui fontes, menus suspensos, botões, transições, controles deslizantes, formulários etc.
Etapa 1: modificar a localização do seu JavaScript
Alterar a localização do seu JavaScript é provavelmente uma das alterações mais difíceis, pois você terá que fazer um teste contínuo para garantir que ele não interrompa a funcionalidade do seu site.
Tenho notado que toda vez que eu removo o JavaScript, vejo que a velocidade da página melhora. Sugiro remover o máximo de Javascript possível. Você pode minimizar o JavaScript necessário que você precisa. Você também pode combinar seus arquivos JavaScript, mas use vários pacotes.
Sempre tente mover o JavaScript para o final da página ou online. Você também pode adiar ou usar o atributo assíncrono sempre que possível para garantir que não esteja processando o bloqueio. Você pode ler mais sobre como mover o JavaScript aqui.
Etapa 2: otimize suas imagens
Use o WebP para as imagens sempre que possível (Cloudflare, um CDN, faz isso por você automaticamente, vou tocar mais no Cloudflare abaixo). É um formato de imagem que usa compactação com perdas e compactação sem perdas.
Sempre use imagens com o tamanho correto. Por exemplo, se você tiver uma imagem exibida em uma caixa de 2 "x 2" em seu site, não use uma imagem grande de 10 "x 10". Se você tem uma imagem maior do que é necessário, está transferindo mais dados pela rede e o navegador precisa redimensionar a imagem para você.
Use a carga adiada para evitar / atrasar o download de imagens que estão mais abaixo na página e não na parte visível da tela.
Etapa 3: otimize seu CSS
Você quer ter certeza de que seu CSS está online. Ferramentas on-line como essa podem ajudá-lo a encontrar o CSS crítico que está on-line e a resolver o bloco de processamento. Bônus: você manterá o benefício do cache de ter arquivos separados.
Certifique-se de minimizar seus arquivos CSS (nós usamos o AdVagg já que estamos no Drupal CMS, mas há muitas opções para isso dependendo do seu site).
Tente usar menos CSS. Por exemplo, se você tiver determinadas classes CSS que são usadas apenas em sua home page, não as inclua em outras páginas.
Sempre combine arquivos CSS, mas use vários pacotes. Você pode ler mais sobre esta etapa aqui.
Mova suas consultas de mídia para arquivos específicos para que o navegador não precise carregá-las antes de renderizar a página. Por exemplo:
Para mais informações sobre como otimizar seu CSS, veja a interessante publicação de Patrick Sexton.
Etapa 4: alivie suas fontes da Web (elas podem ser PESADAS)
É onde seus desenvolvedores podem entrar em uma discussão com seus designers se você não for cuidadoso. Todo mundo quer ver um site lindamente projetado, mas se você não for cuidadoso com a maneira como esse design é implementado, isso pode causar problemas de velocidade indesejados. Aqui estão algumas dicas sobre como colocar suas fontes em uma dieta:
- Use svg online para fontes de ícones (como a fonte incrível). Desta forma, reduzirá o caminho da cadeia crítica e evitará conteúdo vazio quando a página for carregada pela primeira vez.
- Use fontello para gerar os arquivos de fonte. Dessa forma, você pode incluir apenas os glifos que você realmente usa, o que leva a arquivos menores e velocidade de página mais rápida.
- Se você for usar fontes da web, verifique se você precisa de todos os glifos definidos no arquivo de fonte. Se você não precisa de caracteres japoneses ou árabes, por exemplo, veja se há uma versão com apenas os caracteres que você precisa.
- Use o intervalo Unicode para selecionar os glifos de que você precisa.
- Use woff2 sempre que possível, uma vez que já está comprimido.
- Este artigo é um ótimo recurso na otimização de fontes da web.
Aqui está a diferença que medimos quando usamos fontes otimizadas:
Depois de reduzir nossos arquivos de origem de 131kb para 41kb e eliminar um recurso externo (teste de usabilidade), o tempo totalmente carregado em nossa página de teste foi totalmente reduzido de 5,1 a 2,8 segundos. Isso é uma melhoria de 44% e certamente fará o Google sorrir (veja abaixo).
Aqui está a melhoria de 44%.
Etapa 5: Mover recursos externos
Quando possível, mova os recursos externos para o servidor para que você possa controlar os cabeçalhos de expiração (isso instruirá os navegadores a armazenarem o recurso em cache por mais tempo). Por exemplo, movemos nosso Pixel do Facebook para nosso servidor e o salvamos em cache por 14 dias. Isso significa que você será responsável por verificar as atualizações de tempos em tempos, mas poderá melhorar a pontuação de velocidade da sua página.
Por exemplo, em nossa página de perguntas de entrevista sobre capital privado, é possível ver como o arquivo fbevents.js é carregado de nosso servidor e o cabeçalho http do controle de cache está configurado para 14 dias (120.900 segundos).
Controle de cache: public, max-age = 1209600
Etapa 6: usar uma rede de entrega de conteúdo (CDN)
O que é um CDN? Clique aqui para saber mais.
Eu recomendo o uso do Cloudflare, já que ele torna muitas tarefas muito mais fáceis e rápidas do que se você as experimentasse em seu próprio servidor. Isto é o que fizemos especificamente na configuração do Cloudflare:
Speed
- Auto-minify, verifique tudo
- Baixo polonês
- Ativar brotoli
- Ativar miragem
- Escolha com perdas
- Verifique o site
Network
- Ativar HTTP / 2 – Você pode ler mais sobre este tópico aqui
- Atualmente, nenhum navegador suporta HTTP / 2 através de uma conexão não criptografada. Para fins práticos, isso significa que seu site deve ser servido via HTTPS para aproveitar o HTTP / 2. O Cloudflare tem uma maneira fácil e gratuita de ativar o HTTPS. Confira aqui.
Cifra
- Sob SSL
- Sob TLS 1.3
- Escolha Ativar + 0RTT – Mais sobre este tópico aqui.
Etapa 7: Use os trabalhadores de serviços
Os funcionários do serviço fornecem ao proprietário do site e aos desenvolvedores algumas opções interessantes (como notificações automáticas), mas em termos de desempenho, estamos muito empolgados sobre como esses funcionários podem nos ajudar a criar um sistema de cache mais inteligente.
Para saber como fazer com que os trabalhadores de serviços trabalhem em seu site, visite esta página.
Como os recursos (imagens, CSS, javascript, fontes etc.) são armazenados por um trabalhador do serviço, os visitantes que retornam geralmente recebem o serviço com muito mais rapidez do que se não houvesse trabalhadores.
Testes, ferramentas e comida para viagem.
Para cada alteração que você faz para tentar melhorar sua velocidade, você pode usar as seguintes ferramentas para monitorar o impacto da alteração e garantir que esteja no caminho certo:
Sabemos que há muito a ser digerido e muitos recursos vinculados anteriormente, mas se você tiver pouco tempo, poderá começar na Etapa 1 das seções Backend e Front-End. Essas duas etapas só podem fazer uma grande diferença para elas mesmas.
Boa sorte e deixe-me saber se você tem alguma dúvida nos comentários. Eu me certificarei de que João Guilherme, meu chefe de tecnologia, esteja em condições de responder qualquer pergunta para a comunidade pelo menos uma vez por dia durante a primeira semana em que for publicada.
Feliz afinação!
