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

1.

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

2.

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

3.

Importância da performance

4.

Usuários não gostam de coisas lentas

5.

Como melhorar a performance?

6.

None

7.

None

8.

First Contentful Paint (FCP)

9.

Time To Interactive (TTI)

10.

None

11.

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

12.

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

13.

None

14.

Miniﬁque o código

15.

None

16.

- 12,4 KB

17.

• 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

18.

Revise a necessidade de certas libs

19.

None

20.

None

21.

None

22.

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

23.

None

24.

None

25.

None

26.

- 7,5 KB

27.

None

28.

None

29.

- 43,3 KB

30.

None

31.

None

32.

None

33.

Remova imagens desnecessárias

34.

None

35.

Otimize as imagens que restarem

36.

None

37.

None

38.

None

39.

None

40.

• 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

41.

Não redimensione imagens no HTML nem no CSS

42.

Imagens responsivas

43.

Antes: Depois:

44.

2. Use Lazy Load

45.

First-View e o Above the Fold

46.

None

47.

None

48.

None

49.

Cuidado com o reﬂow!

50.

None

51.

None

52.

None

53.

None

54.

3. Evite carregar a fonte no CSS

55.

None

56.

None

57.

None

58.

Self host para melhor performance

59.

None

60.

4. Reduza a quantidade de requests

61.

None

62.

CSS Inline

63.

sim, CSS Inline

64.

Above the Fold

65.

None

66.

None

67.

- 44,1 KB Antes: Depois:

68.

Cuidado com o tamanho do DOM!

69.

5. Ative o GZip

70.

None

71.

6. Reduza os scripts bloqueantes

72.

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

73.

Carregamento assíncrono de CSS

74.

None

75.

7. Lazy load no JS

76.

None

77.

None

78.

None

79.

None

80.

Comparação

81.

8. Adapte com base na qualidade da rede

82.

None

83.

None

84.

None

85.

None

86.

9. Faça cache dos recursos estáticos

87.

HTTP cache headers

88.

None

89.

Service Worker

90.

None

91.

None

92.

10. Código transpilado e mais bytes

93.

None

94.

None

95.

11. Use HTTP2

96.

Monitorando Métricas

97.

None

98.

None

99.

None

100.

None

101.

None

102.

None

103.

Performance Budgets

104.

budget.json

105.

None

106.

None

107.

None

108.

Lighthouse Bot

109.

None

110.

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/

111.

Slides: speakerdeck.com/amandavilela

112.

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

113.

http://bit.ly/toptal-amanda

114.

Obrigada!

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

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

Want more?

Transcript