Web performance [#perfmatters]

Coca-Cola

Web performance[case] CCZ - Digital Sampling

Leandro NunesFrontend Developer

leandrof@ciandt.com

Web Performance[ técnicas de otimização front-end ]

Performance

● Tempo de carregamento● Tempo de percepção● Tempo de execução (animação css - FPS)● Tempo de execução (js)

Performance

● Tempo de carregamento● Tempo de percepção● Tempo de execução (animação css - FPS)● Tempo de execução (js)

Impacto

● + Bounce rate● - Conversion rate● + SEO penalization● - UX (abandon)● + Hosting/Infrastructure costs

“... optimize front-end performance first,that's where 80% or more of the end-user response time is spent” — Steve Soulders

Banda Larga

HTTP 1.1

[ CASE ]CCZ - Digital Sampling

[ checkpoint ] * Conexão: Good 3G (1Mbps 40ms RTT)

● Size: 1.3MB

● Requests: 31

● DOMContentLoad: 3.14s

● Load: 6.49s

Imagens

[46%]

grunt-contrib-imageminhttps://github.com/gruntjs/grunt-contrib-imagemin

-5%[-6%]

Krakenhttps://kraken.io

Compressorhttps://compressor.io

Tinypnghttps://tinypng.com

[-74%] -41%

[-75%] -46%

Unveilhttps://github.com/luis-almeida/unveil

(http://www.appelsiini.net/projects/lazyload)

[-76%] -41%

[ checkpoint ] * (Otimização de imagens)

● Size: 1.3MB -> 821KB [-36%]

● Requests: 31 -> 29 [-6%]

● DOMContentLoad: 3.14s -> 2.96 [-6%]

● Load: 6.49s -> 3.83s [-40%]

Fonts

medium != book ?

medium book

[-34%]

[ checkpoint ] * (Otimização de fonts)

● Size: 1.3MB -> 797KB [-38%]

● Requests: 31 -> 28 [-9%]

● DOMContentLoad: 3.14s -> 2.87 [-8%]

● Load: 6.49s -> 3.50s [-46%]

Requests

[ checkpoint ] * (Otimização requests)

● Size: 1.3MB -> 722KB [-44%]

● Requests: 31 -> 25 [-19%]

● DOMContentLoad: 3.14s -> 2.86 [-8%]

● Load: 6.49s -> 3.38s [-47%]

Servidor

Gzip / Deflate(compactação de dados)

max-age(controle de cache)

[ checkpoint ] * (Otimização servidor)

● Size: 1.3MB -> 381KB [-70%]

● Requests: 31 -> 25 [-19%]

● DOMContentLoad: 3.14s -> 1.41 [-63%]

● Load: 6.49s -> 1.92s [-70%]

Inicial (6,49s)

Otimização de imagens (3,83s)

Otimização de fonts (3,50s)

Otimização de requests (3,38s)

Otimização de servidor (1,92s)

Recap... * Conexão: Good 3G (1Mbps 40ms RTT)

site site otimizado

381KB25

1.41s1.92s

1.3MB31

3.14s6.49s

“Performance is not a checklist, it's acontinuous process” — Ilya Grigorik

Obrigado

http://browserdiet.com/

PERFORMANCE

MATTERS