Submit Search
Upload
Performance na web: o modelo RAIL e outras novidades
•
9 likes
•
2,040 views
Caelum
Follow
Palestra do Sérgio Lopes no QCon SP 2016
Read less
Read more
Technology
Report
Share
Report
Share
1 of 58
Download now
Download to read offline
Recommended
Nueva pagina web
Nueva pagina web
Sebastian Leon
Práctica dennis hidalgo
Práctica dennis hidalgo
Dennis Hidalgo
Videos
Videos
gueste1da30f
Otimizando o time to market - do zero a produção em poucas iterações
Otimizando o time to market - do zero a produção em poucas iterações
Caelum
Os Caminhos de uma Estratégia Mobile
Os Caminhos de uma Estratégia Mobile
Caelum
All you need to know about JavaScript loading and execution in the browser - ...
All you need to know about JavaScript loading and execution in the browser - ...
Caelum
Performance Web além do carregamento
Performance Web além do carregamento
Caelum
Otimizações de Performance Web: Desafios do Mundo Mobile
Otimizações de Performance Web: Desafios do Mundo Mobile
Caelum
Recommended
Nueva pagina web
Nueva pagina web
Sebastian Leon
Práctica dennis hidalgo
Práctica dennis hidalgo
Dennis Hidalgo
Videos
Videos
gueste1da30f
Otimizando o time to market - do zero a produção em poucas iterações
Otimizando o time to market - do zero a produção em poucas iterações
Caelum
Os Caminhos de uma Estratégia Mobile
Os Caminhos de uma Estratégia Mobile
Caelum
All you need to know about JavaScript loading and execution in the browser - ...
All you need to know about JavaScript loading and execution in the browser - ...
Caelum
Performance Web além do carregamento
Performance Web além do carregamento
Caelum
Otimizações de Performance Web: Desafios do Mundo Mobile
Otimizações de Performance Web: Desafios do Mundo Mobile
Caelum
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
Caelum
Progressive Web Apps: o melhor da Web appficada
Progressive Web Apps: o melhor da Web appficada
Caelum
Tudo que você precisa saber sobre picture e srcset
Tudo que você precisa saber sobre picture e srcset
Caelum
Como o HTTP/2 vai mudar sua vida
Como o HTTP/2 vai mudar sua vida
Caelum
Métricas e a automatização do controle de qualidade
Métricas e a automatização do controle de qualidade
Caelum
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
Caelum
Offline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio Lopes
Caelum
Design Responsivo - MobCamp 2014
Design Responsivo - MobCamp 2014
Caelum
Além do responsive design: a mudança de paradigma do design adaptativo e os m...
Além do responsive design: a mudança de paradigma do design adaptativo e os m...
Caelum
Por trás dos frameworks e além do reflection
Por trás dos frameworks e além do reflection
Caelum
Introducao a inteligencia artificial na educacao
Introducao a inteligencia artificial na educacao
Caelum
Wsrest 2013
Wsrest 2013
Caelum
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Caelum
Porque você deveria usar CDI nos seus projetos Java! - JavaOne LA 2012 - Sérg...
Porque você deveria usar CDI nos seus projetos Java! - JavaOne LA 2012 - Sérg...
Caelum
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - ...
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - ...
Caelum
Plataforma java: detalhes da JVM
Plataforma java: detalhes da JVM
Caelum
CDI e as ideias pro futuro do VRaptor
CDI e as ideias pro futuro do VRaptor
Caelum
Qualidade de código - a qualidade que faz a diferença
Qualidade de código - a qualidade que faz a diferença
Caelum
Design de código: qualidade que faz a diferença, qcon 2011
Design de código: qualidade que faz a diferença, qcon 2011
Caelum
[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites
[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites
Caelum
More Related Content
More from Caelum
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
Caelum
Progressive Web Apps: o melhor da Web appficada
Progressive Web Apps: o melhor da Web appficada
Caelum
Tudo que você precisa saber sobre picture e srcset
Tudo que você precisa saber sobre picture e srcset
Caelum
Como o HTTP/2 vai mudar sua vida
Como o HTTP/2 vai mudar sua vida
Caelum
Métricas e a automatização do controle de qualidade
Métricas e a automatização do controle de qualidade
Caelum
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
Caelum
Offline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio Lopes
Caelum
Design Responsivo - MobCamp 2014
Design Responsivo - MobCamp 2014
Caelum
Além do responsive design: a mudança de paradigma do design adaptativo e os m...
Além do responsive design: a mudança de paradigma do design adaptativo e os m...
Caelum
Por trás dos frameworks e além do reflection
Por trás dos frameworks e além do reflection
Caelum
Introducao a inteligencia artificial na educacao
Introducao a inteligencia artificial na educacao
Caelum
Wsrest 2013
Wsrest 2013
Caelum
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Caelum
Porque você deveria usar CDI nos seus projetos Java! - JavaOne LA 2012 - Sérg...
Porque você deveria usar CDI nos seus projetos Java! - JavaOne LA 2012 - Sérg...
Caelum
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - ...
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - ...
Caelum
Plataforma java: detalhes da JVM
Plataforma java: detalhes da JVM
Caelum
CDI e as ideias pro futuro do VRaptor
CDI e as ideias pro futuro do VRaptor
Caelum
Qualidade de código - a qualidade que faz a diferença
Qualidade de código - a qualidade que faz a diferença
Caelum
Design de código: qualidade que faz a diferença, qcon 2011
Design de código: qualidade que faz a diferença, qcon 2011
Caelum
[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites
[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites
Caelum
More from Caelum
(20)
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
Progressive Web Apps: o melhor da Web appficada
Progressive Web Apps: o melhor da Web appficada
Tudo que você precisa saber sobre picture e srcset
Tudo que você precisa saber sobre picture e srcset
Como o HTTP/2 vai mudar sua vida
Como o HTTP/2 vai mudar sua vida
Métricas e a automatização do controle de qualidade
Métricas e a automatização do controle de qualidade
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
Offline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio Lopes
Design Responsivo - MobCamp 2014
Design Responsivo - MobCamp 2014
Além do responsive design: a mudança de paradigma do design adaptativo e os m...
Além do responsive design: a mudança de paradigma do design adaptativo e os m...
Por trás dos frameworks e além do reflection
Por trás dos frameworks e além do reflection
Introducao a inteligencia artificial na educacao
Introducao a inteligencia artificial na educacao
Wsrest 2013
Wsrest 2013
Design Responsivo por uma Web única
Design Responsivo por uma Web única
Porque você deveria usar CDI nos seus projetos Java! - JavaOne LA 2012 - Sérg...
Porque você deveria usar CDI nos seus projetos Java! - JavaOne LA 2012 - Sérg...
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - ...
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - ...
Plataforma java: detalhes da JVM
Plataforma java: detalhes da JVM
CDI e as ideias pro futuro do VRaptor
CDI e as ideias pro futuro do VRaptor
Qualidade de código - a qualidade que faz a diferença
Qualidade de código - a qualidade que faz a diferença
Design de código: qualidade que faz a diferença, qcon 2011
Design de código: qualidade que faz a diferença, qcon 2011
[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites
[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites
Performance na web: o modelo RAIL e outras novidades
1.
PERFORMANCE NA WEB O
MODELO RAIL E OUTRAS NOVIDADES
2.
@sergio_caelum sergiolopes.org
3.
4.
OTIMIZAÇÕES WEB MINIFICAR CSS/JS COMPRIMIR
HTML GZIP CONCATENAR CSS/JS SPRITES CACHE / EXPIRES OTIMIZAR IMAGENS JS NO FIM DA PÁGINA CSS NO TOPO ASSÍNCRONO LAZY-LOAD CDN DIMINUIR COOKIES PARALELIZAR REQs
5.
PERFORMANCE?
6.
ONLOAD
7.
VÁRIAS PERFORMANCES CARREGAMENTO INTERAÇÃO ANIMAÇÃO MEMÓRIA BATERIA
8.
LIMITES DA PERCEPÇÃO
DE PERFORMANCE 100ms 1s 10s instantâneo mesma tarefa perde atenção
9.
RAIL
10.
Response Animation Idle Load
11.
12.
LOAD 1s
13.
14.
15.
16.
17.
18.
CRITICAL RENDERING PATH
19.
20.
21.
~600px ~9000px ABOVE THE FOLD (ATF)
22.
< 14 KB
(1 RTT) inline do CSS ATF inline do JS ATF flush ATF resto do CSS e JS tudo async
23.
< 14 KB
(1 RTT) inline do CSS ATF inline do JS ATF flush ATF resto do CSS e JS tudo async server push http/2
24.
25.
ANIMATION 60FPS
26.
ANIMATION 16ms
27.
28.
29.
30.
31.
elem1.style.top = elemX.offsetTop
+ 10 + 'px'; elem2.style.top = elemY.offsetTop + 10 + 'px'; elem3.style.top = elemZ.offsetTop + 10 + 'px'; elem4.style.top = elemW.offsetTop + 10 + 'px';
32.
// reads var topX
= elemX.offsetTop; var topY = elemY.offsetTop; var topZ = elemZ.offsetTop; var topW = elemW.offsetTop; // writes elem1.style.top = topX + 10 + 'px'; elem2.style.top = topY + 10 + 'px'; elem3.style.top = topZ + 10 + 'px'; elem4.style.top = topW + 10 + 'px';
33.
34.
35.
36.
.header-barraBusca { height: 100px; position:
absolute; top: -100px; } botaoBusca.onclick = function() { container.classList.toggle('buscaVisivel'); };
37.
.container { position: relative; } .container.buscaVisivel
{ top: 100px; }
38.
.container { position: relative; top:
0; transition: top 500ms; } .container.buscaVisivel { top: 100px; }
39.
40.
.container { transition: transform
500ms; } .container.buscaVisivel { transform: translateY(100px); }
41.
42.
43.
.container { transition: transform
500ms; will-change: transform; } .container.buscaVisivel { transform: translateY(100px); } .container { transition: transform 500ms; transform: translateZ(0); } .container.buscaVisivel { transform: translateY(100px); }
44.
45.
46.
agrupar read /
write DOM (fastdom) animação com CSS animação GPU (transform / opacity)
47.
RESPONSE 100ms
48.
registre o input
em <100ms o máximo em background indique progresso se >500ms
49.
RESPONSE + ANIMATION
50.
IDLE 50ms
51.
quebre a tarefa setTimeout
/ setImmediate / requestAnimationFrame / requestIdleCallback coisas pesadas em background Web Workers
52.
// carrega videos
assincronamente var containers = document.querySelectorAll('.elasticMedia-container[data-src]' for (var i = 0; i < containers.length; i++) { var src = containers[i].getAttribute('data-src'); containers[i].innerHTML = '<iframe class="elasticMedia" src="' + src + '" f }
53.
setTimeout(function(){ // carrega videos
assincronamente var containers = document.querySelectorAll('.elasticMedia-container[data-src]' for (var i = 0; i < containers.length; i++) { var src = containers[i].getAttribute('data-src'); containers[i].innerHTML = '<iframe class="elasticMedia" src="' + src + '" f } }, 500);
54.
requestIdleCallback(function(){ // carrega videos
assincronamente var containers = document.querySelectorAll('.elasticMedia-container[data-src]' for (var i = 0; i < containers.length; i++) { var src = containers[i].getAttribute('data-src'); containers[i].innerHTML = '<iframe class="elasticMedia" src="' + src + '" f } });
55.
PERFORMANCE é UX
56.
IDLE 50ms ANIMATION 16ms LOAD
1s RESPONSE 100ms
57.
RAIL
58.
OBRIGADO! sergiolopes.org @sergio_caelum
Download now