Palestra do Sérgio Lopes no QCon SP 2016

1. PERFORMANCE NA WEB
O MODELO RAIL
E OUTRAS NOVIDADES

2. @sergio_caelum
sergiolopes.org

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

12. LOAD 1s

18. CRITICAL RENDERING PATH

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

25. ANIMATION 60FPS

26. ANIMATION 16ms

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

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;
}

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

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

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