Web performance [#perfmatters]
-
Upload
leandro-nunes -
Category
Technology
-
view
353 -
download
0
Transcript of Web performance [#perfmatters]
Coca-Cola
Web performance[case] CCZ - Digital Sampling
Leandro NunesFrontend Developer
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