Como conseguimos 100% de performance no Google Chrome Audits

Stored E-commerce
Sep 3, 2018 · 5 min read

Todo desenvolvedor, ao colocar um site em produção, almeja alcançar os maiores índices de performance, seja em tempo de resposta ou ter garantia de que o SEO está aplicado da melhor forma possível. Mas como testar isso?

O Google Chrome fornece uma ferramenta incrível de auditoria, que utiliza o Lighthouse como plugin, um projeto open-source do próprio navegador.

Para iniciar, clique na aba Audits e faça o setup de acordo com o tipo de dispositivo e velocidade de internet do usuário. No exemplo abaixo, o teste será realizado simulando um desktop com internet wi-fi local.

Após rodar os testes, serão exibidos várias dicas do que você pode melhorar para otimizar ainda mais o tempo de renderização da página, que reflete diretamente em SEO, dentre outros itens.

A aplicação

Antes de tudo, você deve garantir que sua aplicação esteja com as melhores práticas de server tuning e auto-scaling calibrados para receber uma pancada de usuários.

Abaixo um modelo de como é nossa infra:

Ao adicionarmos CloudFront na frente da API, reduzimos um problema de latência. Antes um request que demorava em média 400 milissegundos, passou a ser ~40 milissegundos. Adicionamos também Redis para cachear as chamadas na API.

Com a infra configurada da forma mais performática possível, ainda havia algo a melhorar graças à ajuda do Audits.

Para servir arquivos estáticos, o próprio S3 com CloudFront na frente já é uma ótima escolha, mas ainda sim o Audits recomenda adicionar um header para garantir que tais arquivos fiquem cacheados por um tempo predeterminado no navegador do usuário: cache-control: max-age:2678400 (1mês). Você pode ler mais sobre isso aqui.


Tempo de renderização

O Google leva muito em consideração o tempo de renderização de página, ou seja, o usuário precisa "ver" algo o mais rápido possível.

Neste projeto utilizamos uma fonte do Google. Precisamos alterar o modo de como a fonte do próprio Google era carregada. Arquivos de fontes são pesados e como precisam estar na tag head, são bloqueantes, o que atrapalha todo o resto. Para deixar o carregamento de forma assíncrona, seguimos assim:

<link rel="prefetch" href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" as="font" family="PT Sans" onload="this.rel=stylesheet"/>

Utilizando prefetch, informamos ao navegador para continuar carregando a página com uma fonte default, e quando a fonte estiver carregada, exibe.

Perceba que utilizamos um hack com o evento onload. Isto foi necessário para que a fonte fosse exibida no Internet Explorer.

Outro item a melhorar era o carregamento de scripts de terceiros. Adoramos trabalhar o Google Tag Manager para isso, porém nunca se sabe o que será carregado quando você adiciona um script terceiro. Além da própria integração que ele oferece com Google Analytics etc, adicionamos uma tag do Hotjar. O Tag Manager faz tudo sozinho, porém você pode adicionar dns-prefetch no seu HTML indicando ao navegar que o site logo irá fazer conexões com estes sitemas:

<link rel="dns-prefetch" href="//in.hotjar.com" />
<link rel="dns-prefetch" href="//script.hotjar.com" />
<link rel="dns-prefetch" href="//vars.hotjar.com" />

Com isso a latência pode ser reduzida significantemente.

“DNS requests are very small in terms of bandwidth, but latency can be quite high, especially on mobile networks. By speculatively prefetching DNS results, latency can be reduced significantly at certain times, such as when the user clicks the link. In some cases, latency can be reduced by a second. — Mozilla Developer Network

Veja mais sobre prefetch, dns-prefetch, preload, preconnect aqui.

Outro item que jamais havíamos pensado: porque carregar todas as imagens do rodapé, se talvez o usuário nem desça a barra de rolagem até o final? Deixamos então todas as imagens do rodapé com lazy load. Apenas carregamos estas imagens se o usuários descer a barra de rolagem.

E ainda falando de imagens, PNG é um arquivo pesado. Nós sempre passamos as imagens no ImageOptim. Já vimos casos em que este software conseguiu reduzir até 80% do tamanho de um PNG. Recomendamos o uso, basta arrastar a sua pasta de imagens para dentro dele.

https://imageoptim.com/mac

Ah, e nunca esqueça de comprimir o seu código HTML, Javascript e CSS. Garanta que eles estejam sendo servidos com o header content-encoding: gzip.


Progressive Web Apps

Com todas estas boas práticas aplicadas, conseguimos alcançar quase 100% de performance, mas ainda faltava algo: o PWA (Progressive Web Apps).

Este projeto foi desenvolvido em Vue.js usando o Nuxt.js, do qual o nosso desenvolvedor Jonas Galvez é core committer. Por se tratar de um e-commerce, precisávamos ter o first render via server side e o Nuxt ajuda muito nisso. Ele oferece uma opção muito prática para integrar PWA em seu site. Veja mais detalhes no link abaixo:

Além dos vários benefícios do PWA, o que mais gosto é poder cachear arquivos e deixá-los offline. Isso garante uma ótima experiência de carregamento principalmente no mobile para próximas visitas.

Abrindo o CSS daquela fonte do Google, é possível ver que ele carrega ainda mais 4 arquivos, que soma +45kb.

https://fonts.googleapis.com/css?family=PT+Sans:400,700

Então além de cachear imagens, Javascripts e CSS, estamos salvando também as fontes do Google:

https://fonts.gstatic.com/s/ptsans/v9/jizaRExUiTo99u79D0yExcOPIDUg-g.woff2

O Nuxt utiliza o módulo do Workbox para cache offline, o que facilita muito esta gestão de cache via Service Worker.


Espero que tenham gostado e façam bom proveito das dicas do Audits. Ele sempre é atualizado e fornece cada vez mais informações muito importantes e relevantes para o seu site.

Se você tem mais dicas de como otimizar a performance e renderização, compartilhe :)

Ps: ainda nesta semana liberamos a URL desta loja para vocês verem.

Stored E-commerce

Written by

stored.com.br

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade