1.
PERFORMANCE NA WEB
O MODELO RAIL
E OUTRAS NOVIDADES

2.
@sergio_caelum
sergiolopes.org

3.
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

4.
PERFORMANCE?

5.
ONLOAD

6.
VÁRIAS PERFORMANCES
CARREGAMENTO
INTERAÇÃO
ANIMAÇÃO
MEMÓRIA
BATERIA

7.
LIMITES DA PERCEPÇÃO DE PERFORMANCE
100ms 1s 10s
instantâneo mesma
tarefa
perde
atenção

8.
RAIL

9.
Response
Animation
Idle
Load

10.
LOAD 1s

11.
CRITICAL RENDERING PATH

12.
~600px
~9000px
ABOVE THE FOLD
(ATF)

13.
< 14 KB (1 RTT)
inline do CSS ATF
inline do JS ATF
flush ATF
resto do CSS e JS tudo async

14.
< 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

15.
ANIMATION 60FPS

16.
ANIMATION 16ms

17.
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';

18.
// 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';

19.
.header-barraBusca {
height: 100px;
position: absolute;
top: -100px;
}
botaoBusca.onclick = function() {
container.classList.toggle('buscaVisivel');
};

20.
.container {
position: relative;
}
.container.buscaVisivel {
top: 100px;
}

21.
.container {
position: relative;
top: 0;
transition: top 500ms;
}
.container.buscaVisivel {
top: 100px;
}

22.
.container {
transition: transform 500ms;
}
.container.buscaVisivel {
transform: translateY(100px);
}

23.
.container {
transition: transform 500ms;
will-change: transform;
}
.container.buscaVisivel {
transform: translateY(100px);
}
.container {
transition: transform 500ms;
transform: translateZ(0);
}
.container.buscaVisivel {
transform: translateY(100px);
}

24.
agrupar read / write DOM (fastdom)
animação com CSS
animação GPU (transform / opacity)

25.
RESPONSE 100ms

26.
registre o input em <100ms
o máximo em background
indique progresso se >500ms

27.
RESPONSE +
ANIMATION

28.
IDLE 50ms

29.
quebre a tarefa
setTimeout / setImmediate / requestAnimationFrame / requestIdleCallback
coisas pesadas em background
Web Workers

30.
// 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
}

31.
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);

32.
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
}
});

33.
PERFORMANCE é UX

34.
IDLE 50ms
ANIMATION 16ms
LOAD 1s
RESPONSE 100ms

35.
RAIL

36.
OBRIGADO!
sergiolopes.org
@sergio_caelum