O tempo de carregação de uma página ou aplicativo web na janela do browser e dos dispositivos afeta a qualidade da experiência dos usuários e reflete nos resultados comerciais e de veiculação das marcas a elas associadas.

Desde o final de 2009, a Google passou a considerar o tempo de carregação um fator importante para seu posicionamento nos resultados de buscas. A empresa tinha experimentado as consequências de minimizar a importância deste fator: quando o buscador aumentou em 500 milisegundos o tempo de carregação da página Principal, o site perdeu 20% do tráfego. Já a Amazon.com considera um aumento de 100 milisegundos como responsável pela perda de 1% nas vendas. (1)

Gerente sênior de produtos da Microsoft (2010), Pete LePage, declarou em evento para desenvolvedores que os vilões do tempo de carregação de páginas web eram, além do Javascript, a renderização (20% do tempo), o layout (entre 10% e 30%), o tempo de carregamento de URLs, o CSS e a depuração do código HTML. (3)

Pesquisa feita em 2012 pela Strangeloop com um site móvel mostrou que uma demora de 200 ms não afetava o acesso, mas quando esta passava 1000 ms, a taxa de conversao diminuiu 3.5% (5).

Embora o uso da banda larga no Brasil tenha aumentado muito nos últimos anos, temos no país um número ainda relativamente alto de usuários que acessam a internet por conexões baixa velocidade, que precisam ser considerados no projeto de mídias digitais para o público brasileiro.

Dados da TIC Domicílios de junho de 2014, mostravam que 10% das conexões domésticas no Brasil ainda eram feitas por linha discada. Além disso, em setembro de 2015, a velocidade média da Internet no Brasil era de 3,6 Mbps, segundo pesquisa da Akamai. Embora a velocidade média da internet no Brasil tenha crescido no segundo trimestre de 2015 e passado de 3,4 Mbps para 3,6 Mbps, uma página da web ainda era carregada em 6416 milissegundos com o uso de banda larga fixa. E a a velocidade era um pouco mais baixa nas conexões móveis, com tempo médio de abertura de um site em 7324 ms. O uso da internet por smarphones é ainda lento em relação à web para computadores, o que valoriza as páginas leves e limpas. (6)

A velocidade download de páginas é definida na relação entre o código e o browser (os pixels que aparecem na tela). Diferentes tarefas do browser contribuem para este desempenho:

O download e a verificação de HTML. Javascript e CSS .

Avaliação do Javascritpt.

O cálculo da aplicação dos estilos para cada elemento.

A definição e a localização de cada elemento na página.

Definição dos pixels para cada elemento.

Para otimizar o download de páginas e telas, é preciso levar estes elementos consideração.

Atividades relacionadas à otimição da velocidade de download

Verificar o tempo de carregação de diversas páginas do canal em conexão lenta (300Kbps ou menos). Se uma página ou app leva mais de 30 segundos para carregar, pode estar perdendo usuários na internet e em dispositivos móveis, que têm conexões mais lentas.

Para não distrair a interlocução do usuário médio com o dispositivo, o tempo de download das páginas ideal é de 10 segundos.

Segundo Jakob Nielsen, o tempo de carregação afeta a experiência de uso de páginas web porque o desempenho do cérebro humano é prejudicado quando submetido a longo tempo de espera; além disso, o usuário perde a sensação de estar no controle da experiência de uso quando obrigado a esperar longos períodos. (4) .

Testar as principais páginas em sites como o Google Page Speed, o WebWait, o webpagetest.org, o Page Speed Insights, da Google, ou o YSlow. Substituir as imagens por equivalentes compactadas geradas por estes programas.

Limpar o código HTML para manter o mínimo de marcações possível (50KB ou menos), sem excessos de chamadas de CSS, muitos divs ou tabelas. Reduzir também marcações de código não utilizadas.

Publicar imagens, animações e vídeos que realmente se somem às informações em formato de texto, para evitar o aumento do tempo de carregação das páginas com informação inútil.

Utilizar as imagens adequadamente, JPGs para fotos, PNG 8 para imagem a traço. GIFs não são tão comprimidas quanto PNGs, que são não só menores como também de melhor qualidade.

O formato PNG 24 não mostra as transparências no Internet Explorer 6 e 7 e as imagens são mais pesadas que o PNG 8. O Fireworks tem melhor algoritmo de compressão de imagens em PNG 24 que o Photoshop.

Prover informações que carreguem rápido em todas as páginas, para tornar o tempo de espera do download de imagens mais agradável e relacionado à esperiência de uso do site.

Elementos de navegação em forma de texto, localizados no alto das páginas, permitem a navegação antes que as imagens sejam carregadas.

Inserir imagens maiores e arquivos para download nas camadas mais profundas, com aviso claro sobre o tamanho do arquivo e seu formato.

Medir o frame rate das páginas para entender como o código é processado pelos browsers e dispositivos, com ferramentas como Chrome Canary.

Verificar a relação entre o tempo de carregação e indicadores de negócios, com o controle de variáveis relacionadas aos dois fatores antes e depois dos testes.

Pode-se também medir o tempo médio no qual o conteúdo visível de uma interface online fica visível. Pode-se fazer as medidas em segundos, embora o ideal seja em milisegundos, e resultado depende do tamanho da superfície exposta.

Considera-se a progressão visual da imagem enquanto carrega e registra-se em quanto tempo o conteúdo carrega, independentemente dos elementos invisíveis (scripts, elementos do DOM, elementos escondidos embaixo da dobra). O ideal é que se verifique se a página está completa em vários pontos durante o tempo de carregação (com capturas de telas em diversos momentos).

Esta métrica permite avaliar não só a importância do tempo de carregação das páginas e telas como os fatores que o afetam; é especialmente útil para comparar o desempenho entre diversos canais.

A velocidade de carregação das páginas de um site é um fator muito importante para que seu conteúdo seja procurado e bem aceito por um grande número de usuários, e deve ser um dos indicadores de qualidade considerados em relação à usabilidade da interface.

(Atualizado em 24.9.2015)

 

Referências

6) Velocidade média da Internet no Brasil é de 3,6 Mbps (Convergência Digital, acesso em 24.9.2015)

Speed Index (WebPagetest Documentation, acesso em 26.4.2014)

5) Case study: The impact of HTML delay on mobile business metrics (Web Performance Today, acesso em 7.5.2013)

How long do users stay on web pages? de Jakob Nielsen (Alextbox, acesso em 12.9.2011)

4) Website response times (AlertBox, acesso em 21.6.2010)

3)Velocidade do Javascript não é tudo no browser, diz Microsoft (IDGNow.com, acesso em 14.6.2010)

2) Average top 100 weblog performance survey (WebSiteOptimization.com, acesso em 20.2.2009)

1) How to make your website really, really fast (ZDNet, acesso em 20.2.2009, não mais disponível)

Ferramentas (controle de qualidade de website)

Google Analytics Site Speed Overview

Google “Make the web faster” – conjunto de processos para otimização da velocidade download de interfaces web

Yslow – analisa páginas web e sua velocidade, com base nos critérios do Yahoo

Pingdom – testa e analisa o tempo de carregação de uma página.

WebPageTest – ferramenta para teste de velocidade de download, em diversos browsers

Calibre – medida de indicadores de qualidade, como velocidade de download, consistência do código, em tempo real, contratos com escalonados para diferentes escalas

Google PageSpeed Insights – analisa de interfaces web segundo velocidade de carregação

Chrome Canary – mede a frame rate (FPS) e o tempo de carregação de páginas, para verificar como os browsers e dispositivos processam o código

GTMetrix – análise de interfaces web segundo parâmetros como velocidade de carregação

W3C Mobile Checker – ferramenta para avaliação de sites móveis

Topcoat – biblioteca de CSS de código aberto que ajuda desenvolvedores a construir aplicativos web comênfase em velocidade<

Google Analytics Site Speed Overview – ferramenta para medir a velocidade front end de um website (mediante pagamento)

10 Excellent tools for testing your site on mobile devices

test everything! ferramenta para teste de websites na validação do código, em SEO, em mídias sociais e outros recursos

Web Page Analyzer – ferramenta gratuita do site Websiteoptimization

WebSiteOptimization.com – avalia a velocidade de download de uma página, com sugetões sobre formas de diminuir o tempo de carregação

TinyPNG – compressão de imagens sem comprometimento da qualidade