Sites de Web de Alta Performância para testes de desempenho.

Começou a ler novamente “Sites de Web de Alta Performância” por Steve Souders. Um livro focado em conhecimento essencial sobre desempenho web para engenheiros de software frontend. Também posso dizer que este livro é uma boa opção para Testadores de Qualidade e Testes de Performance porque muitas vezes as melhorias do front-end não são consideradas na equipe de desenvolvimento. Por alguns meses, juntamente com meus colegas, estamos realizando processos de teste de desempenho que também incluem análise e otimização do front-end, e este processo está sendo realizado em colaboração com desenvolvedores, Testadores de Qualidade e Testes de Performance.

O livro “Sites de Web de Alta Performância” apresenta 14 regras específicas que devem ser consideradas ao construir aplicações web, segundo seu autor Steve Souders. Essas podem reduzir o tempo de resposta das aplicações em até 25% e como mais de 50%. O autor e seu livro, Joe Hewitt, melhor conhecido por suas contribuições para o debugger Firebug e desenvolvimento DOM Inspector, disse:

Se todos implementassem apenas o 20% das diretrizes de Steve, o mundo da web seria um lugar melhor. Com este livro e a extensão do YSlow de Steve, há realmente nenhuma razão para ter uma página web lenta.

Também, o desenvolvedor do Debuger de Web Fiddler, Eric Lawrence disse:

Steve Souders fez um excelente trabalho convertendo uma grande e secreta arte em um conjunto de passos engenheiros concisos que mudará o mundo do desempenho da web.

Implementando estes rulos é essencial para acelerar as respostas em aplicações web. Aqui estão os rulos e, nas próximas postagens, mostraremos-os com exemplos reais.

1.- Reduzir Solicitações HTTP #

Reduzindo solicitações HTTP é a técnica essencial para otimizar seu site. Reduzir o número de componentes em uma página reduz o número de solicitações necessárias para representar a página. Há várias soluções, como combinar JavaScript e CSS em um arquivo único, usar mapas de imagens ou Sprites CSS, entre outras.

2 - Use CDN #

Rede de Carregamento de Conteúdo (RCC) é uma maneira de enviar conteúdo de sua página ou aplicativo móvel para os usuários mais rapidamente e eficientemente, dependendo da localização do usuário. É composto por servidores instalados em todo o mundo que fornecem um web-experiência igualmente rápida para seus usuários. A proximidade do usuário à sua página web tem um impacto nos tempos de resposta. Implementar seu conteúdo em múltiplas servidores geograficamente dispersos tornará suas páginas carregar mais rápido.

3.- Adicione um cabeçalho Expires #

Quando você adiciona um cabeçalho Expires a componentes com datas futuras, pode armazená-los em cache, o que reduz o tempo necessário para que as páginas carreguem. Isso deve ser feito com imagens, scripts e arquivos de estilo. Não afeta a performance da página, mesmo se a página for visitada novamente mais tarde, reduzindo os tempos de resposta. Estes são importantes para reduzir o número de requisições HTTP, que diminui o tempo necessário para que o servidor comunque com o navegador. Também permite aos usuários reutilizar arquivos cache armazenados em seus browsers para reduzir a quantidade de arquivos que precisam ser baixados.

Componentes do GZIP #

Aplicações modernas implementam algum tipo de compressão. A redução do tempo para responder é feita ao diminuir o tamanho dos respostas HTTP. Comprimir os tipos de arquivos possíveis é uma maneira simples de reduzir a peso da página e acelerar o desempenho do usuário. Gzip é atualmente o método de compressão mais popular e eficaz disponível, geralmente reduzindo o tamanho das respostas em torno de 70%. Aproximadamente 90% da tráfego na Internet passa por navegadores que afirmam ser compatíveis com gzip.

5.- Coloque os estilos no topo #

O autor do livro especifica que ao investigar a performance da web na Yahoo!, eles encontraram que mover os arquivos de estilo para o cabeçalho permitiu que as páginas carregassem mais rapidamente. Isso ocorre porque colocar os estilos nopermite um renderização progressiva, especialmente importante para páginas com muita conteúdo e usuários com conexões de Internet lentas. A apresentação visual, como indicadores de progresso, tem sido bem estudada e documentada. Quando o navegador carrega a página em partes progressivas, os elementos do cabeçalho, barra de navegação, logotipo na parte superior, etc., servem como feedback visual para o usuário que está aguardando pela página. Isso melhora o experiência do usuário em geral.

Coloque o script no final #

Colocando os scripts no final das páginas permite que outros recursos não bloqueiem enquanto o download de um script não ocorrer, e o navegador não comece qualquer outro download mesmo em nomes de domínio diferentes. Se os scripts forem colocados no final da página, serão carregados na última vez. De fato, a carga do conteúdo/estrutura (CSS, imagens, HTML) será realizada primeiro e mostrará algo na janela do navegador mais rápido; os usuários não precisarão esperar que um script termine o download antes de ser possível ver qualquer coisa no aplicativo.

7.- Evitando Expressões CSS #

Expressões CSS são uma maneira poderosa (e perigosa) de definir propriedades CSS dinamicamente. Essas expressões podem produzir milhares de avaliações CSS desnecessárias. Essas expressões são avaliadas frequentemente: quando a página é renderizada e alterações em sua dimensão, quando usamos o scroll na página, até mesmo quando o usuário move seu mouse sobre a página. As avaliações frequentes degradam o experiência do usuário.

8.- Criando Arquivos JavaScript e CSS Externamente #

Usar arquivos externos permite que os páginas sejam mais rápidas porque o navegador armazena-os em cache. Estes arquivos são inseridos nos documentos HTML que são baixados cada vez que uma solicitação HTTP é feita. Isso reduz a quantidade de requisições necessárias, mas aumenta o tamanho do HTML. No entanto, se os arquivos JavaScript e CSS forem armazenados em cache externamente no navegador, o tamanho do HTML diminui sem aumentar a quantidade de requisições HTTP.

9.- Reduzir Pesquisas DNS #

Pesquisas DNS adicionam atrasos nas solicitações iniciais para um host. Solicitar de muitas diferentes hosts pode afetar o desempenho. DNS tem um custo em termos de tempo, geralmente tomando entre 20 e 120 milésimos para encontrar o endereço IP de uma nomeação de host. O navegador não pode baixar nada do host até que a pesquisa seja concluída.

10. Minify JavaScript e CSS #

Remova caracteres desnecessários de JavaScript e CSS para acelerar as taxas de download. A minificação remove caracteres desnecessários de um arquivo para reduzir sua tamanho, melhorando os tempos de carregamento. Quando um arquivo é minimizado, comentários e espaços desnecessários (espaços, linhas novas, tabulações, etc.) são removidos. Isso acelera o tempo de resposta diminuindo a quantidade de arquivos que são baixados.

11. Evite Redirecionamentos #

Evite o uso de redirecionamentos por URL, pois isso adiciona demoras extras ao carregamento da página. Redirecionamentos são realizados usando os códigos HTTP 301 e 302, que indicam ao navegador que deve ir para outra localização. Inserir um redirecionamento entre o usuário e o documento HTML final retraí uma vez tudo na página, pois nada de conteúdo pode ser representado até que o documento HTML chegue, e componentes não podem ser baixados até então.

12 - Remova scripts duplicados. #

Repetir o mesmo arquivo de JavaScript duas vezes em uma página é prejudicial para a performance. Ou seja e mais simples, repetir JavaScript e CSS gera requisições adicionais e desperdiça tempo porque serão avaliados múltiplas vezes.

13.- Configure ETags #

Estes são identificadores únicos atribuídos a uma versão específica de um recurso dado em um servidor web. Os ETags são uma das várias mecanismos que o HTTP fornece para validação do caching, o qual permite aos clientes fazer solicitações condicionais. O problema com os ETags é que eles não se alinharão quando um navegador recebe a componente original de um servidor e então faz uma solicitação GET condicional para um servidor diferente. Isso é comum em sites usando uma cluster no lado do servidor. Para “sitios muito ativos” com múltiplos servidores, os ETags podem impedir que recursos idênticos sejam cacheados na cache, o que degrada a performance. Portanto, eles devem ser configurados corretamente.

14. Faça solicitações Ajax Cacheáveis (Cacheável) #

Permitir que as solicitações AJAX sejam cacheadas pode evitar atrasos desnecessários. Uma das vantagens do AJAX é que ele fornece feedback instantâneo ao usuário porque faz requisições assíncronas para informações da backend server web. No entanto, usar o AJAX não garante que os usuários não ficarão esperando respostas asincrônicas de JavaScript e XML. Optimizar as respostas do AJAX é importante para melhorar a performance, e torná-las cacheáveis é a maneira mais eficaz de otimizá-las.

Conclusão #

Implementando essas regras proporcionará uma significativa melhoria exponencial em termos de tempo de resposta e experiência do usuário. Embora muitas delas possam ser muito fáceis de implementar e trazer grandes melhorias no tempo de resposta, algumas podem levar a soluções técnicas um pouco mais complexas que acabem sendo um pouco caras, mas a recomendação aqui é trabalhar em conjunto com todos os envolvidos na desenvolvimento de software: programadores, infraestrutura, arquitetos, gerentes de projetos, até mesmo designers UX.
Se você está disposto a explorar esses tópicos, este livro será um bom aliado porque ensina cada regra com exemplos práticos. Even for iniciantes tem uma excelente seção para ensinar sobre o protocolo HTTP, um dos fundamentos indispensáveis para todos os envolvidos nessa área.