Introdução
Um app da Web rápido é um app de sucesso. Seu trabalho como desenvolvedor só termina quando você otimiza o desempenho real e percebido do app. Não é só a coisa certa a fazer para garantir que os usuários tenham uma excelente experiência, mas há motivos comerciais muito práticos e importantes para a otimização. A Amazon mediu uma queda de 1% nas vendas para cada 100 ms de latência do site, e o Google mediu uma queda de 20% no tráfego a cada 0,5 segundo (citação. Esses são números reais com implicações reais para sua empresa e seu aplicativo da Web.
A velocidade da Web é tão importante que todo o Google se dedica a tornar a Web mais rápida. Se você precisa de mais um motivo para otimizar o desempenho do seu app, anunciamos que a velocidade das páginas foi adicionada ao algoritmo de classificação.
Existem muitas práticas recomendadas publicadas para otimizar o desempenho de seu aplicativo da Web, incluindo dois ótimos livros: High Performance Web Sites e Even Faster Web Sites. As técnicas no servidor (implementam os cabeçalhos de controle de cache corretos) e no cliente (fornecem atributos de largura e altura de imagem) são combinadas em uma estratégia completa para otimizar o desempenho. Com tantas dicas e truques, às vezes é difícil avaliar como todos eles são mapeados para a vida real e para seu aplicativo da web real.
Felizmente, o Chrome DevTools (incluso em todas as instâncias do Chrome) oferece uma ferramenta excelente que inspeciona seu app da Web e oferece recomendações personalizadas para melhorar o desempenho e reduzir a latência. Este artigo é sobre o painel de auditorias, que tem um escopo semelhante à ferramenta YSlow (em inglês), e como você pode usá-lo para acelerar seu site, diminuir a latência e aumentar a satisfação do usuário.
No momento, a ferramenta Painel de auditorias está disponível apenas no Chrome, mas esperamos que outros navegadores WebKit a integrem futuramente.
Vamos começar
Para ilustrar como o painel Auditorias pode recomendar melhorias de desempenho de aplicativos da Web, transformaremos a ferramenta em nosso próprio www.html5rocks.com, que será nosso próprio painel de Auditorias, para tornar nosso site ainda mais rápido.
É muito fácil iniciar o DevTools. Basta clicar no ícone do Chrome (no canto superior direito da janela) e selecionar "Tools" > "Developer Tools".
Para saber mais sobre como começar a usar o DevTools, leia a documentação oficial.
O painel "Auditorias" está localizado no painel do botão principal de ferramentas. Depois de selecionado, o painel "Auditorias" ainda não passou pela análise do seu aplicativo da Web. A execução de todas as heurísticas pode ser lenta, especialmente em um aplicativo da Web grande, como o Gmail, então a ferramenta fica desativada por padrão.
Vamos começar clicando no botão "Run", que recarrega o app da Web com a heurística de desempenho ativada. Depois que a página for atualizada, você verá uma lista de recomendações parecida com a captura de tela abaixo.
O painel "Auditorias" classifica as sugestões por gravidade, sendo que a mais grave é marcada com um ponto vermelho e as sugestões de gravidade média com um ponto amarelo. Esse código de cores ajuda a priorizar as sugestões, focando primeiro nas mais importantes (e maiores ganhos).
O número entre parênteses, após a sugestão, representa quantas instâncias a Ferramenta de auditoria detectou. Por exemplo, houve 12 instâncias de "Use o navegador cache" (Usar o armazenamento em cache do navegador). Isso dá uma noção de quantas vezes a sugestão pode ser aplicada.
Estratégias de velocidade
Como mencionado antes, há muitas estratégias conhecidas e testadas para otimizar o desempenho de um app da Web. Não vamos abordar todos eles em detalhes neste artigo, mas é fácil encontrar mais informações e detalhes. Entre os recursos úteis para aprender mais sobre as especificidades da otimização de apps da Web estão os tutoriais Vamos tornar a Web mais rápida e A latência da alta escalabilidade está em todos os lugares e custa as vendas.
O painel Auditorias agrupa as sugestões em duas categorias: utilização da rede e desempenho da página da Web.
De acordo com o Painel de Auditorias, para melhorar o uso da rede, precisamos:
- aproveitar o armazenamento em cache do navegador
- aproveitar o armazenamento em cache do proxy
- minimizar o tamanho do cookie
- veicular conteúdo estático de um domínio sem cookies
- especificar dimensões de imagem
Para melhorar o desempenho da página da Web, precisamos:
- otimizar a ordem de estilos e scripts
- Remover regras de CSS não usadas
Vejamos uma das estratégias na qual podemos focar para melhorar o desempenho do htmlrocks.com.
Aproveitar o processo de cache do navegador
Por exemplo, vamos começar com mais detalhes sobre a recomendação para aproveitar o armazenamento em cache do navegador. O que isso significa especificamente? Ao abrir a opção na IU, vamos mostrar as seguintes informações:
- Os seguintes recursos não têm expiração de cache. Recursos que não especificam uma expiração não podem ser armazenados em cache pelos navegadores.
- Os seguintes recursos armazenáveis em cache têm um ciclo de vida de atualização curto.
- Os recursos a seguir são explicitamente não armazenáveis em cache. Considere torná-las armazenáveis em cache, se possível.
Armazenar recursos em cache é uma excelente forma de melhorar a utilização da rede, o que gera faturas de largura de banda menores para o desenvolvedor e tempos de resposta mais rápidos para o usuário. A ferramenta não diz exatamente o que você precisa fazer, então precisamos nos aprofundar nas recomendações e usar nosso conhecimento sobre otimizações de desempenho de apps da Web para aplicar essas sugestões.
Armazenamento em cache
Sem mergulhar no cache HTTP, certamente podemos falar sobre alguns dos princípios básicos. O protocolo HTTP inclui instruções de armazenamento em cache, permitindo que o servidor e o cliente reduzam a quantidade de dados que precisam ser transferidos pela rede. Por exemplo, o servidor pode dizer ao cliente para salvar o recurso localmente por um determinado período, eliminando a necessidade de solicitar o recurso novamente. O cliente também pode perguntar se o recurso do servidor é mais recente do que o armazenado localmente. O ideal é que se um recurso seja estático, o servidor deve instruir o cliente a armazenar o recurso localmente e evitar solicitar o recurso ao servidor no futuro. Como você pode imaginar, há uma quantidade incrível de detalhes sobre o armazenamento em cache HTTP, mas o tema geral é "reduzir a quantidade de dados enviados pela rede, armazenando recursos localmente no cliente".
Como corrigir recursos não armazenáveis em cache
Vamos analisar uma recomendação em detalhes e aprender a conectá-la a outras ferramentas do DevTools. Vamos conferir especificamente como corrigir "os seguintes recursos não podem ser armazenados em cache explicitamente".
Como o armazenamento em cache é realizado por meio do protocolo HTTP, precisamos examinar a solicitação e a resposta HTTP do recurso http://www.html5rocks.com/ . Basta clicar no recurso para visualizar os cabeçalhos e detalhes da solicitação e da resposta originais.
Você será levado para o painel Rede, Recursos ou Fontes (dependendo do tipo de recurso clicado) com mais informações. Neste caso, vamos acessar o painel "Network".
Estamos tentando confirmar que o servidor informou ao cliente "não armazenar em cache a página inicial de html5rocks.com". Para isso, clicamos no recurso para ver os cabeçalhos de resposta, que são os cabeçalhos e as instruções enviados pelo servidor.
Cache-Control.O servidor enviou o cabeçalho "Cache-Control: no-cache" ao cliente. Isso, como você imaginaria, diz ao cliente para sempre solicitar o recurso e não armazená-lo localmente. Especificamente, a especificação HTTP para "no-cache" lê:
"Se a diretiva no-cache não especificar um nome de campo, um cache NÃO poderá usar a resposta para satisfazer uma solicitação subsequente sem uma revalidação bem-sucedida com o servidor de origem. Isso permite que um servidor de origem impeça o armazenamento em cache, mesmo por caches que foram configurados para retornar respostas desatualizadas às solicitações do cliente."
É exatamente por isso que o painel Auditorias recomenda a ativação do armazenamento em cache. Caso contrário, o servidor e o cliente estarão enviando informações potencialmente redundantes.
Agora que confirmamos a causa raiz da sugestão de auditoria, como podemos corrigi-la? Nesse caso, a solução envolve a configuração ou o código do lado do servidor. Dependendo da sua definição, você pode ativar o armazenamento em cache na configuração do seu servidor da Web ou do framework do seu app da Web. Especificamente, inclua um cabeçalho Expira e um Cache-Control: private com um parâmetro max-age para qualquer recurso que você queira armazenar em cache.
As sugestões são exatamente isso, as sugestões
Lembre-se de que o painel Auditorias está recomendando melhorias com base em heurística genérica. Ele está aplicando as práticas recomendadas, aprendidas ao longo de muitos anos, ao seu app da Web específico. Na maioria das vezes, essas recomendações são pontuais e devem ser levadas a sério.
No entanto, há alguns casos em que a recomendação está correta, mas não resulta em melhorias. Por exemplo, se a página tiver apenas uma imagem grande, o painel "Auditorias" recomendará adicionar atributos de largura e altura à tag <img>. Assim, o mecanismo de renderização vai saber as dimensões da imagem sem precisar fazer o download e inspecionar a imagem. Embora esse seja geralmente um ótimo conselho, não ajudará muito se a imagem for o único elemento da página.
Lembre-se de aplicar essas sugestões depois de entendê-las. E não se esqueça de avaliar o desempenho antes e depois das alterações para garantir que realmente há uma melhoria.
Resumo
O Painel de auditorias é uma ferramenta excelente e fácil de usar que mostra rapidamente como otimizar o desempenho do seu app da Web. A velocidade é um atributo essencial do app da Web, já que muitas empresas encontraram correlações diretas entre desempenho e receita ou atividade. Otimizar o desempenho do app não é apenas a coisa certa a fazer para os usuários, mas é a coisa certa a fazer para os resultados da sua empresa.