Introdução
Um app da Web rápido é um app da Web bem-sucedido. Seu trabalho como desenvolvedor não está concluído até que você tenha otimizado o desempenho real e percebido do app. Além de ser a coisa certa a fazer para garantir que os usuários tenham uma experiência excelente, há razões comerciais muito práticas e importantes para otimizar. A Amazon registrou uma queda de 1% nas vendas para cada 100 ms de latência do site, e o Google registrou uma queda de 20% no tráfego para cada 0,5 segundo de atraso (citação). Esses são números reais com implicações reais para sua empresa e seu app da Web.
A velocidade da Web é tão importante que o Google se dedica a tornar a Web mais rápida. Se você precisa de mais um motivo para otimizar a performance do seu app, o Google anunciou que a velocidade da página foi adicionada ao algoritmo de classificação.
Há muitas práticas recomendadas publicadas para otimizar o desempenho do seu app da Web, incluindo dois ótimos livros (Sites da Web de alto desempenho e Sites da Web ainda mais rápidos). Técnicas no servidor (implementar os cabeçalhos de controle de cache corretos) e no cliente (fornecer atributos de largura e altura da imagem) são combinadas em uma estratégia de ponta a ponta para otimizar o desempenho. Com tantas dicas e truques, às vezes é difícil avaliar como elas se aplicam à vida real e ao seu app da Web.
Felizmente, as Chrome DevTools (incluídas em todas as instâncias do Chrome) oferecem 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 aborda o painel de auditorias, que tem escopo semelhante à ferramenta muito conhecida YSlow, 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 do painel de auditorias está disponível apenas no Chrome, mas esperamos que outros navegadores WebKit sejam integrados.
Primeiros passos
Para ilustrar como o painel de auditorias pode recomendar melhorias na performance do app da Web, vamos direcionar a ferramenta para o site www.html5rocks.com. Vamos usar o painel de auditorias para ajudar a tornar nosso site ainda mais rápido.
Para iniciar as Ferramentas para desenvolvedores, basta usar o ícone do Chrome (canto superior direito da janela do Chrome) e selecionar "Ferramentas" > "Ferramentas para desenvolvedores".
Para mais informações sobre como começar a usar as Ferramentas do desenvolvedor, leia a documentação oficial.
O painel de auditorias está localizado no painel principal de ferramentas. Você vai notar que, depois de selecionado, o painel de auditorias ainda não executou a análise do seu app da Web. A execução de todas as heurísticas pode ser lenta, especialmente para um app da Web grande, como o Gmail. Por isso, a ferramenta está desativada por padrão.
Vamos começar clicando no botão "Run", que recarrega o app da Web com as heurísticas de desempenho ativadas. Depois que a página for recarregada, você vai encontrar uma lista de recomendações semelhante à captura de tela abaixo.
O painel de auditorias classifica as sugestões por gravidade, com as mais graves marcadas com um ponto vermelho e as de gravidade média marcadas com um ponto amarelo. Essa codificação por cores ajuda você a priorizar as sugestões, concentrando-se primeiro nas mais importantes (e com os maiores ganhos).
O número entre parênteses, após a sugestão, indica quantas instâncias a ferramenta de auditoria detectou. Por exemplo, houve 12 instâncias de "Usar o armazenamento em cache do navegador". Isso dá uma ideia de com que frequência a sugestão pode ser aplicada.
Estratégias de velocidade
Como mencionado anteriormente, há muitas estratégias conhecidas e amplamente testadas para otimizar o desempenho de apps da Web. Não vamos abordar todos eles em detalhes neste artigo, mas é fácil encontrar mais informações e detalhes. Os recursos úteis para saber mais sobre as especificidades da otimização de apps da Web incluem os tutoriais Vamos tornar a Web mais rápida e A latência de alta escalabilidade está em todos os lugares e custa vendas.
O painel de auditorias agrupa as sugestões em duas categorias: "Utilização da rede" e "Performance da página da Web".
De acordo com o painel de auditorias, para melhorar a utilização da rede, faça o seguinte:
- usar o armazenamento em cache do navegador
- usar o armazenamento em cache do proxy
- minimizar o tamanho do cookie
- veicular conteúdo estático de um domínio sem cookies;
- especificar as dimensões da imagem
Para melhorar a performance da página da Web, devemos:
- otimizar a ordem de estilos e scripts;
- remover regras CSS não usadas
Vamos analisar uma das estratégias em que podemos nos concentrar para melhorar o desempenho do htmlrocks.com.
Aproveitar o processo de cache do navegador
Por exemplo, vamos analisar a recomendação de aproveitar o armazenamento em cache do navegador. O que isso significa especificamente? Ao abrir a opção na interface, os seguintes detalhes são mostrados:
- Os recursos a seguir não têm uma expiração de cache. Os recursos que não especificam uma validade podem não ser armazenados em cache pelos navegadores.
- Os recursos abaixo que podem ser armazenados em cache têm uma vida útil curta.
- Os recursos a seguir não são armazenados em cache de forma explícita. Considere torná-los armazenados em cache, se possível.
Armazenar recursos em cache é uma excelente maneira de melhorar a utilização da rede, o que resulta em contas de largura de banda mais baixas para o desenvolvedor e tempos de resposta mais rápidos para o usuário. Infelizmente, a ferramenta não informa exatamente o que você precisa fazer. Por isso, precisamos analisar as recomendações e usar nosso conhecimento sobre otimizações de desempenho de apps da Web para aplicar essas sugestões.
Armazenamento em cache
Sem entrar em detalhes sobre o armazenamento em cache HTTP, podemos abordar alguns conceitos 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 informar 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 for estático, o servidor diga ao cliente para armazená-lo 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 cacháveis
Vamos analisar uma recomendação em detalhes e aprender a conectar a recomendação de auditoria a outras ferramentas no DevTools. Especificamente, vamos ver como corrigir "os seguintes recursos não são explicitamente armazenados em cache".
Como o armazenamento em cache é feito pelo protocolo HTTP, precisamos analisar a solicitação e a resposta HTTP para o recurso http://www.html5rocks.com/. Basta clicar no recurso para conferir os detalhes e cabeçalhos originais da solicitação e da resposta.
Você vai ser direcionado ao painel "Rede", "Recursos" ou "Origens" (dependendo do tipo de recurso clicado) com mais informações. Nesse caso, vamos acessar o painel de rede.
Estamos tentando confirmar se o servidor disse ao cliente "não armazenar em cache a página inicial de html5rocks.com". Para fazer isso, clique no recurso para conferir os cabeçalhos de resposta, que são os cabeçalhos e as instruções enviadas pelo servidor.
Cache-Control.O servidor enviou o cabeçalho "Cache-Control: no-cache" para o cliente. Isso, como você pode imaginar, informa ao cliente para sempre solicitar o recurso e não fazer cache dele localmente. Especificamente, a especificação HTTP para "no-cache" diz:
"Se a diretiva "no-cache" não especificar um nome de campo, o cache NÃO PODE usar a resposta para atender a uma solicitação subsequente sem a revalidação bem-sucedida com o servidor de origem. Isso permite que um servidor de origem evite o armazenamento em cache, mesmo por caches configurados para retornar respostas desatualizadas às solicitações do cliente."
É exatamente por isso que o painel de auditorias recomenda ativar o armazenamento em cache, porque, caso contrário, o servidor e o cliente estão enviando informações potencialmente redundantes.
Agora que confirmamos a causa raiz da sugestão de auditoria, como corrigimos o problema? Nesse caso, a solução envolve a configuração ou o código do lado do servidor. Dependendo da sua configuração, você pode ativar o armazenamento em cache na configuração do servidor da Web ou no framework do app da Web. Especifique um cabeçalho Expires 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 apenas sugestões
O painel de auditorias recomenda melhorias com base em heurísticas genéricas. Ele aplica 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 perfeitas e devem ser levadas a sério.
No entanto, há alguns casos em que a recomendação pode estar correta, mas não leva a nenhuma melhoria. Por exemplo, se a página tiver apenas uma imagem grande, o painel de auditorias vai recomendar a adição de atributos de largura e altura à tag <img> para que o mecanismo de renderização conheça as dimensões da imagem sem precisar fazer o download e inspecionar a imagem. Embora esse seja um ótimo conselho, ele não vai ajudar muito se a imagem for o único elemento na página.
Depois de entender as sugestões, aplique-as. E não se esqueça de medir a performance antes e depois das mudanças para garantir que haja 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 crucial 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 se fazer para os usuários, mas também para o resultado final da sua empresa.