gráfico de velocidade da página sprout social

Se você se mantiver atualizado com nosso atualizações de produto , você sabe que a equipe de produto HASHTAGS está sempre adicionando e melhorando os recursos do produto. Constantemente lançamos melhorias, grandes e pequenas, geralmente mais de uma vez por dia. Muitas mudanças não estão incluídas nem mesmo em nosso mais granular notas de lançamento . Por exemplo, na outra semana, lançamos cerca de 70 commits (unidades de mudança de código) para o aplicativo da web app.sproutsocial.com . Além disso, cerca de 20 commits foram lançados para nossa API, a força vital de nosso aplicativo da web e aplicativos móveis, e muitos, muitos mais para esses aplicativos móveis e a miríade de serviços de back-end que abrangem tudo o que é a tecnologia Sprout.



por que 777 tem sorte?

Essas alterações não anunciadas incluem algo do que você esperaria: correções de bugs, limpeza visual, limpeza de código (para nos permitir construir mais rápido). Também lançamos recursos obscuros: coisas que os funcionários do Sprout podem experimentar e fornecer feedback antes de serem liberados para os clientes. Outra categoria de mudanças no produto, e o assunto em questão, são as melhorias de desempenho da web.



Nossa equipe de engenharia usa várias ferramentas para monitorar a integridade e o desempenho de nossos sistemas. Estamos sempre atentos para detectar problemas ou medir mudanças de desempenho. Pensei em compartilhar alguns dos gráficos que olhamos, que revelam boas melhorias desde o início de 2015 para os tempos de carregamento de nossa página. Esses gráficos representam 'real' (ou seja, QUARTO ) vezes, que é a melhor tentativa de medir o que o usuário percebe.

Em primeiro lugar, aqui está nosso tempo médio de carregamento de 1º de janeiro de 2015 a 28 de abril. Se você pudesse aumentar o zoom antes de 16 de abril, veria que a média era de 2,7 segundos. Desde então, caiu para 1,7 segundos. Visualmente, isso é representado pela queda no lado direito. Isso significa que quando você visita qualquer uma de nossas páginas da web, está obtendo as informações de que precisa com mais rapidez.

sorte número quatro
captura de tela do tempo de carregamento da página do navegador

Essas médias são baseadas em tempos de carregamento de todo o mundo. Algumas de nossas mudanças têm o maior efeito fora dos Estados Unidos. Por exemplo, aqui estão os tempos de carregamento da página da Austrália. A melhoria foi de cerca de 1,6 segundos.

captura de tela do tempo de carregamento da página austrália

Isso não quer dizer que as páginas não carreguem mais rápido também nos EUA, onde as coisas são 0,7 segundo mais rápidas.

captura de tela do tempo de carregamento da página dos estados unidos

E aqui está um par de gráficos para os geeks de estatísticas. Uma das mudanças mais impactantes foi implantada no final de 16 de abril. Aqui você vê a média, a mediana e os tempos de carregamento de página do percentil 95. Observe a mudança brusca no padrão. O segundo gráfico destaca a mediana, ajustando a escala para melhor visualizar a diferença.



captura de tela do percentil mediano do navegador captura de tela do percentil do navegador

Então, o que contribuiu para essas melhorias?

Aqui está um resumo técnico dos mais importantes:

o que significa 25
  1. Recentemente, disponibilizamos o Sprout em espanhol e português brasileiro . Durante este projeto, fizemos a alteração para servir os arquivos de idioma, que tínhamos antes para o inglês, por meio do Amazon CloudFront CDN . Eles também acabam em caches do navegador devido aos cabeçalhos de controle de cache. Resumindo, o cache do navegador evita a necessidade de baixar algo novamente, e a melhor maneira de fazer algo rapidamente é não precisar fazer nada! Isso economizou cerca de 20 KB por carregamento de página, e tornar nossos tamanhos de página menores significa que eles baixam mais rápido.
  2. Usamos vários arquivos de fontes para tipografia e ícones. Implantamos a configuração CORS necessária para servir e armazenar em cache esses dados por meio do CloudFront, em vez de atendê-los diretamente do AWS S3. Simplificando, nossos arquivos de fonte chegam aos usuários por meio de uma rede global, oferecendo tempos de download mais rápidos.
  3. Bigode é nossa biblioteca de modelos. Compilamos esses modelos para Javascript, usando o Twitter Biblioteca Hogan . Anteriormente, eles eram servidos com nosso DOM, constituindo cerca de 80% dos bytes. Eles agora são buscados de forma independente, novamente por meio do CloudFront, permitindo que sejam armazenados em cache na borda e, novamente, em navegadores. Em termos simples, diminuímos o tamanho de nossas páginas, de modo que naturalmente eles baixam mais rápido.

Shameless Hiring Plug

Você é apaixonado por desempenho na Web? Estamos sempre procurando engenheiros como você, que desejam tornar qualquer camada da pilha mais rápida, de CSS a Javascript, HTTP / TCP, código do lado do servidor, cache, bancos de dados, kernels Linux e hardware. Por favor aplique a um de nossos trabalhos e destaque seus interesses de desempenho específicos. Me tweet com perguntas.

Compartilhe Com Os Seus Amigos: