Web Performance: Não deixe o usuário desistir do seu site

Web Performance Não deixe o usuário desistir do seu site

Amanda Vilela Desenvolvedora front-end, freelancer na Toptal, organizadora de algumas
comunidades de Sorocaba. • amandavilela.com • @amandavilela___ Oi :) 2

Importância da performance

Usuários não gostam de coisas lentas

Como melhorar a performance?

First Contentful Paint (FCP)

Time To Interactive (TTI)

Carregar o mínimo e mostrar algo relevante para o usuário

1. Remova o que não tem importância

Miniﬁque o código

- 12,4 KB

• Minifier: An online tool minifies JavaScript or CSS via
copy and paste. • Grunt: An NPM minification package that integrates into the Grunt workflow. • Gulp: An NPM minification package that integrates into the Gulp workflow. • Frameworks: Separe o modo desenvolvimento de produção

Revise a necessidade de certas libs

Só envie o código que o usuário precisa

- 7,5 KB

- 43,3 KB

Remova imagens desnecessárias

Otimize as imagens que restarem

• SVG no que for possível, mas não esqueça de
otimizar também: svgomg • Substitua GIFs por vídeos: WebM e MP4, ffmpeg

Não redimensione imagens no HTML nem no CSS

Imagens responsivas

Antes: Depois:

2. Use Lazy Load

First-View e o Above the Fold

Cuidado com o reﬂow!

3. Evite carregar a fonte no CSS

Self host para melhor performance

4. Reduza a quantidade de requests

CSS Inline

sim, CSS Inline

Above the Fold

- 44,1 KB Antes: Depois:

Cuidado com o tamanho do DOM!

5. Ative o GZip

6. Reduza os scripts bloqueantes

Uma tag <script> que: • Está no <head> do documento;
• Não tem um atributo defer; • Não tem um atributo async;

Carregamento assíncrono de CSS

7. Lazy load no JS

Comparação

8. Adapte com base na qualidade da rede

9. Faça cache dos recursos estáticos

HTTP cache headers

Service Worker

10. Código transpilado e mais bytes

11. Use HTTP2

Monitorando Métricas

Performance Budgets

budget.json

Lighthouse Bot

Referências • https://www.awwwards.com/brain-food-perceived-performance • https://developers.google.com/web/fundamentals/performance/why-performance-matters • https://developers.google.com/web/tools/chrome-devtools/coverage • https://developers.google.com/web/tools/chrome-devtools/evaluate-performance •
https://web.dev/fast/ • https://www.filamentgroup.com/lab/inlining-cache.html • https://web.dev/using-lighthouse-bot-to-set-a-performance-budget/

Slides: speakerdeck.com/amandavilela

Pull Request em: https://github.com/JSdayBR/recife

http://bit.ly/toptal-amanda

Obrigada!

Web Performance: Não deixe o usuário desistir d...

Web Performance: Não deixe o usuário desistir do seu site

More Decks by Amanda Vilela

Other Decks in Programming

Featured

Transcript