O gerente de projetos do Internet Explorer Jatinder Mann da Microsoft apresentou uma a palestra 50 truques de performance para fazer suas aplicações HTML 5 e sites mais rápidos, no evento BUILD, fornecendo dezenas de dicas para criar aplicações web mais rápidas. Os conselhos dados por Jatinder Mann foram organizados em volta de seis princípios fundamentais.
1. Responder rapidamente a requisições de rede
- Evite redirecionamentos. 63% dos mil sites mais acessados utilizam redirecionamentos. A performance desses sites poderiam melhorar em 10% caso esse recurso não fosse utilizado.
- Evite utilizar a tag de meta-refresh. 14% das URLs do mundo utilizam essa tag.
- Reduza o tempo de resposta do servidor utilizando CDNs (redes de distribuição de conteúdo) localizadas o mais próximo possível dos usuários.
- Maximize o uso de conexões paralelas no navegador, efetuando o download de recursos a partir de diferentes domínios.
- Reutilize conexões. Não feche uma conexão ao responder uma requisição.
- Garanta que dados servidos por parceiros não estejam causando lentidão no carregamento das páginas.
- Entenda o tempo de cada um dos componentes de rede - Redirect, Cache, DNS, Request, Response etc. Utilize a API de tempo de navegação no Internet Explorer 9 e 10 para medir o tempo gasto pelo navegador em cada operação.
2. Minimizar o tamanho dos downloads. Minimize a quantidade de dados que precisa ser baixado quando a página é carregada. O tamanho médio de download de um site é de 777KB dos quais 474KB são imagens, 128 KB são scripts e 84KB são arquivos Flash.
- Faça requisições de conteúdo compactado (gzip).
- Mantenha recursos localmente em pacotes, como o Package Resource Index gerado por aplicativos da Windows Store. Dessa forma os recursos sempre estarão disponíveis quando necessário.
- Efetue o cache de recursos dinâmicos utilizando o recurso de cache do HTML5 (HTML5 App Cache). Esse cache efetua o download dos recursos apenas uma vez, evitando múltiplas requisições de rede. O cache também efetua um novo download dos recursos automaticamente quando a versão do aplicativo é alterada.
- Sempre que possível, forneça conteúdo que possa ser posto em cache, utilizando o campo "Expires" nas respostas.
- Utilize requisições condicionais configurando o campo If-Modified-Since na requisição.
- Efetue o cache de requisição de dados - HTTP, XML, JSON, etc - porque cerca de 95-96% das requisições não se alteram ao longo de um dia. Embora esta seja uma boa ideia, menos de 1% dos sites efetuam cache de respostas de requisições.
- Padronize a variação de maiúsculas e minúsculas no nome dos arquivos do site. Apesar de o servidor reconhecer a diferença entre Icon.jpg e icon.jpg, esses arquivos são recursos diferentes para a plataforma web, gerando diferentes requisições de rede.
3. Estruture o HTML de maneira eficiente. Para o Internet Explorer utilize as últimas versões do HTML, pois são as mais rápidas. Versões anteriores (Internet Explorer 6 ao 9) são reconhecidas pelo Internet Explorer 10, mas não são tão rápidas como a mais recente.
- Utilize o campo do cabeçalho http "X-UA-Compatible: IE=EmulateIE7" o invés da tag HTML <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">, para forçar o IE a executar em modo legado, o que pode ser necessário para algumas aplicações web de negócios. É mais rápido.
- Arquivos de estilos devem ser vinculados no topo da página dentro da tag <head> e depois da tag <title> para proporcionar renderização mais suave.
- Arquivos de estilos nunca devem ser vinculados no rodapé da página. A página pode piscar enquanto estiver carregando nesses casos.
- Evite utilizar "@import" para herança de estilos porque isso bloqueia a criação das estruturas de dados do CSS e a renderização das páginas.
- Evite utilizar estilos CSS diretamente na página e em tags HTML porque isso força o navegador a fazer uma mudança de contexto, na interpretação de HTML e CSS durante o carregamento da página.
- Vincule somente arquivos de estilos que realmente sejam necessários, para evitar o download e a interpretação de recursos que não serão usados.
- Vincule arquivos JavaScript no rodapé da página. Isso garante que imagens, CSS e outros recursos já foram carregados; então os scripts podem executar sem ter que esperar que outros recursos sejam carregados. Isso também evita a mudança de contexto.
- Não vincule recursos JavaScript no topo da página. Utilize o atributo "defer" se algum script precisar ser carregado no início da página.
- Evite utilizar JavaScript diretamente na página para evitar mudanças de contexto.
- Utilize o atributo "async" para carregar códigos JavaScript. Isso faz com que todo o carregamento e execução do script seja feito de maneira assíncrona.
- Evite código duplicado. 52% das páginas web do mundo inteiro contêm 100 ou mais linhas de código duplicadas, por exemplo vinculando o mesmo arquivo JavaScript duas vezes.
- Padronize a utilização de um framework JavaScript, seja ele jQuery, Dojo, Prototype etc. Dessa maneira o navegador não terá que carregar múltiplos frameworks para fornecer as mesmas funcionalidades.
- Não carregue scripts - como do Facebook, Twitter ou outros - só para "estar na moda". Eles competem por recursos.
4. Otimizar o uso de mídias. Imagens são os recursos mais utilizados, sendo que em média um website efetua download de 58 imagens.
- Evite efetuar o download de muitas imagens, mantendo o número máximo entre 20 e 30, devido ao tempo de carregamento da página.
- Utilize sprites para combinar diversas imagens em uma única imagem. Essa técnica reduz o número de conexões de rede, o número de bytes trafegados e o número de ciclos de GPU.
- Crie sprites manualmente, pois ferramentas podem deixar grandes espaços em branco, gerando maiores tempos de download e mais ciclos de GPU.
- Utilize imagens do tipo PNG, que oferecem a melhor relação entre tamanho do download, tempo de codificação, compatibilidade e taxa de compressão. Imagens JPEG podem ser utilizadas para fotografias.
- Utilize a resolução de imagens nativas para evitar que o download e consumo de CPU desnecessários, aumentando a escalabilidade.
- Sempre que possível substitua imagens por gradientes do CSS3.
- Sempre que possível substitua imagens por bordas arredondadas do CSS3.
- Utilize transformações do CSS3 para criar movimentos, rotações ou inclinações.
- Utilize Data URI para pequenas imagens sozinha. Esse recurso elimina a necessidade de um download adicional para a imagem.
- Evite a utilização de arquivos SVG complexos, pois eles exigem downloads mais demorados e processamento adicional.
- Especifique uma "imagem de capa" quando utilizar vídeos com HTML5. Dessa maneira, o navegador não terá que baixar todo o vídeo para descobrir a imagem inicial.
- Utilize HTML5 ao invés de Flash, Silverlight ou Quicktime. O HTML5 é mais rápido e o ambiente de execução de plug-in consome recursos do sistema.
- Efetue download de mídias ricas proativamente, de maneira assíncrona, e mantenha as mídias no cache da aplicação.
5. Escreva código JavaScript de alto desempenho
- Utilize inteiros ao executar operações matemáticas em JavaScript, sempre que possível. Operações de ponto flutuante demoram muito mais tempo para executar do que as equivalentes utilizando inteiros. Converta pontos flutuantes para inteiros utilizando os métodos Math.floor e Math.ceil, especialmente para operações computacionalmente intensas.
- Minifique código JavaScript para reduzir o tamanho dos downloads e obter melhor performance em tempo de execução.
- Inicialize o código JavaScript sob demanda. Carregue o código JavaScript dinamicamente quando for necessário.
- Minimize interações com o DOM, efetuando cache de variáveis como document, body, etc.
- Utilize código de manipulação do DOM interno, como element.firstChild ou node.nextSbiling. A performance desse código é melhor do que uma biblioteca de terceiros pode proporcionar.
- Utilize querySelectorAll para acessar uma grande quantidade de elementos do DOM.
- Utilize a propriedade .innerHTML para construir páginas dinamicamemte.
- Execute alterações no HTML de maneira agrupada, sempre que possível
- Mantenha o DOM pequeno e bem organizado, com o máximo de 1.000 elementos.
- O JSON é mais rápido que XML.
- Utilize os métodos nativos do navegador para trabalhar com JSON.
- Não exagere no uso de expressões regulares.
6. Entenda o que a sua aplicação está fazendo
- Entenda os temporizadores (timers) do JavaScript: setTimeout e clearInterval. Não deixe esses timers serem executados ao menos que sejam realmente necessários. Também os combine para obter melhores resultados.
- Alinhe os temporizadores à tela de exibição em 16.7 milisegundos, se o monitor atualizar a 60 Hz.
- Utilize o requestAnimationFrame para animações, quando for trabalhar com gráficos no IE 10/Chrome/Firefox. Esse recurso faz uso de callbacks para desenhar a tela, eliminando a necessidade de um timer.
- Utilize a API de visibilidade (document.hidden, Visibilityhange) para determinar o estado de visibilidade da aplicação, e controle o fluxo de atividades, quando a página não estiver visível. Essa estratégia economiza CPU e bateria.
Jatinder Mann recomenda, ainda, a utilização da ferramenta Windows Performance Tools para medir a performance de páginas no Internet Explorer e otimizá-las para menor consumo de CPU e aumentar o paralelismo.