por que investir em performance front-end?
TRANSCRIPT
![Page 1: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/1.jpg)
POR QUE INVESTIR EM PERFORMANCE FRONT-END?
LuizTiago.com
![Page 2: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/2.jpg)
ERA DESKTOP...
![Page 3: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/3.jpg)
7 bilhões de pessoas
> 5 bilhõesFonte: ONU / ITU
![Page 4: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/4.jpg)
25 DOS 30 MAIORES DO ALEXA POSSUEM VERSÃO MOBILE
![Page 5: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/5.jpg)
SUBMARINO
==
![Page 6: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/6.jpg)
SUBMARINO
==
![Page 7: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/7.jpg)
SUBMARINO
![Page 8: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/8.jpg)
AMERICANAS
==
![Page 9: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/9.jpg)
AMERICANAS
==
![Page 10: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/10.jpg)
AMERICANAS
![Page 11: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/11.jpg)
150kbps
18,75KB/s
18,75KB = 1s
2MB = (x)s
x = 106s
![Page 12: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/12.jpg)
MAS EU SÓ QUERIA COMPRAR UM
GAME
![Page 13: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/13.jpg)
SOLUÇÃO!
![Page 14: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/14.jpg)
SOLUÇÃO?
![Page 15: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/15.jpg)
SOLUÇÃO?
![Page 16: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/16.jpg)
WPOWeb Performance Optimization
CASE
![Page 17: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/17.jpg)
O QUE FIZERAM?
20 mi de usuários+15mi de acessos / mês
• 3MB => 287Kb
• 7.5s => 4.3s
• 3.2s ~= aumento em receita de R$ 1.000.000,00 por dia• R$ 16.000,00 / dia = Redução de custo em servidores
![Page 18: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/18.jpg)
WPOWeb Performance Optimization
WPOWEB PERFORMANCE OPTIMIZATION
![Page 19: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/19.jpg)
ARQUIVOS MINIFICADOSjquery-1.8.2.js - 252K jquery-1.8.2.min.js - 32K
![Page 20: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/20.jpg)
MENOS REQUISIÇÕES
![Page 21: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/21.jpg)
OTIMIZE IMAGENS
titulo.jpg - 62.3kb banner.......jpg - 51.7kbgif 32 cores, transparente! - 2.21K gif 32 cores - 7.76K
![Page 22: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/22.jpg)
SPRITES
28k 158k 57kOTIMIZADO
![Page 23: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/23.jpg)
CSS NO TOPO, JS NO FIM
![Page 24: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/24.jpg)
ADIE O QUE PUDER
![Page 25: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/25.jpg)
ADIE O QUE PUDER
![Page 26: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/26.jpg)
DRY - DON’T REPEAT YOURSELF
![Page 27: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/27.jpg)
REUTILIZAÇÃO
![Page 28: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/28.jpg)
MODULARIZAÇÃO
When we say an application is modular, we generally mean it's composed of a set of highly decoupled, distinct pieces of functionality stored in modules.“
Addy Osmani
![Page 29: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/29.jpg)
MODULARIZAÇÃO
![Page 30: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/30.jpg)
MODULARIZAÇÃO
Quanto vai serreutilizado?
Um módulo específicopode existir de forma
independente?
Ele pode ser testado de forma independente?
![Page 31: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/31.jpg)
WIDGETS
![Page 32: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/32.jpg)
PLUGINS
$('#banners').gallery();
![Page 33: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/33.jpg)
PADRONIZAÇÃO
![Page 34: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/34.jpg)
DESIGN PATTERNS
http://jstherightway.com/http://addyosmani.com/resources/essentialjsdesignpatterns/book/
![Page 35: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/35.jpg)
BOOTSTRAP
![Page 36: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/36.jpg)
BOOTSTRAP
![Page 37: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/37.jpg)
QUALIFICAÇÃO
![Page 38: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/38.jpg)
Hoje, conhecer HTML e CSS éobrigação de todo time!
“Luiz Tiago
![Page 39: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/39.jpg)
Dê tempo para sua equipe desenvolverbem feito!
“Luiz Tiago
![Page 40: Por que investir em performance Front-End?](https://reader034.vdocuments.net/reader034/viewer/2022052323/558a1832d8b42af6378b45d9/html5/thumbnails/40.jpg)
Obrigado, Fortaleza!
@luiztiagowww.luiztiago.com