in Desenvolvimento

Como ganhei 2,4s no carregamento do meu blog (6ª regra: Coloque os scripts no final da página)

Estava analisando o tempo de carregamento do meu blog pelo Google Analytics, e percebi que estava com um tempo muito alto, e que variava muito dentro de um curto período.

Resolvi dar uma lida no html que meu blog reenderizava, lembrando que no caso do WordPress, o html final depende de vários elementos como: tema, plugins e configurações.

No meu caso, identifiquei facilmente que alguns scripts eram carregado no header da pagina:

image

Além disso, alguns plugin carregava script de terceiros (linkedin, twitter e google) no head e de maneira síncrona. O que impactava diretamente, e deixando a reenderização da pagina dependente de outros sites.

Para melhorar a performance, implementei a 6ª regra:”Coloque os scripts no final da página”, do Steve Sourdes sobre Web Performance http://stevesouders.com/examples/rule-js-bottom.php

Qual o Problema?

Um navegador pode fazer um numero limitados de downloads simultâneos dos recursos da página que ele está renderizando, o Http/1.1 sugere como padrão que os navegadores paralelizem 2 downloads simultâneos por host, algumas versões do Firefox fazem até 8 downloads simultâneos por host.

Entretanto, ao fazer o download de um script, o navegador para de utilizar essa paralelismo até terminar o download e carregamento do script em questão. Com isso, nenhum outro download é iniciado, ou outro script é carregado pelo navegador, além disso, a visualização progressiva da pagina é interrompida para todos os elementos posteriores ao script.

Isso acontece porque um script pode alterar o conteúdo da pagina, por isso o navegador aguarda o carregamento do script para garantir o que está sendo carregado, outro motivo para isto acontecer, é garantir a ordem de execução dos scripts.

Ou seja, mover os scripts para o final da pagina possibilita que mais conteúdo seja mostrado com a visualização progressiva do navegador, o que melhora a experiência do usuário.

Como ganhei 2,4s no carregamento do meu blog

Após identificar o problema, repliquei meu blog em outra pasta do meu servidor, fiz outro website que respondia por http://old.rodolfofadino.com.br e comecei as alterações nos fontes do site de produção: http://www.rodolfofadino.com.br .

A minha única alteração foi trazer todas as chamadas de scripts para o final da pagina, claro que isso poderia ter impactado em chamadas de scripts no site todos, entretanto as partes que utilizavam os scripts estavam preparadas para isso.

Html resultado:

image

 

Métricas do Ganho de Performance

Para analisar o ganho de performance utilizei uma ferramenta excelente chamada Web Page Test (http://www.webpagetest.org) que faz toda uma analise do carregamento da pagina, além de ser possível fazer comparações entre dois sites, no meu caso eu comparei o http://old.rodolfofadino.com.br/ (scripts no topo) com o http://www.rodolfofadino.com.br/ (scripts do final da pagina).

Chegando aos seguintes resultado:

image

image

image

 

Sem nenhuma alteração no numero de requisições:

image

 

E sem nenhuma alteração no tamanho total (Bytes):

image

Com essa ferramenta é possível gerar um vídeo com a comparação dos carregamentos das diversas urls que foram testadas, abaixo está um vídeo de comparação entre a versão otimizada (NEW) e a versão antiga do meu blog (OLD)

 

Bom, existem diversas técnicas para atrasar ou carregar scripts de maneiras assíncronas, em breve farei outros posts sobre o assunto.

Estou a disposição para dúvidas, criticas e sugestões

Abs

Rodolfo

  • Guilherme Moraes

    Grande Rodolfo,

    Desculpe pela pergunta, mas essa forma de carregar os scripts no final, também gera diferença em uma aplicação .Net WebForms? Você já testou em outros sites ou somente no blog?

    Obrigado 🙂

  • http://www.rodolfofadino.com.br/ Rodolfo Fadino

    Fala Guilherme,
    carregamento de script assíncrono, ou, o mais baixo possível melhora a performance do frontend, servindo para qualquer tecnologia que entregue um html para o usuário (ASP.NET MVC, WebForms, PHP, etc)

    Quanto ao uso, onde eu trabalho, utilizamos muito carregamento de scripts o mais baixo possível, e assíncrono, essa biblioteca é muito boa para carregar scripts (http://labjs.com/)

    abs

  • Guilherme Moraes

    Vlw vou dar uma olhada no labjs!

    Grato!