1.
DESAFIOS PRÁTICOS DE
PERFORMANCE WEB

2.
@sergio_caelum
sergiolopes.org

3.
@sergio_caelum
sergiolopes.org

4.
~600px
~7.000px
ATFABOVE THE FOLD

5.
CRITICAL RENDERING PATH

6.
PRIORIZAR ATF

7.
CSS / JS
ATF RESTO
INLINE ASYNC

8.
HTMLATF +
CSS ATF +
JS ATF +<= 14KB

9.
FLUSH ATF

10.
WEB FONTS

11.
INLINE?
SERVER-PUSH!

12.
SERVER-PUSH?
PRELOAD!

13.
<link rel="preload" as="image" href="hero.jpg">

14.
<link rel="preload" as="font"
href="opensans.woff2"
type="font/woff2"
media="(min-width: 600px)"
crossorigin>

15.
CARREGAMENTO,
EXECUÇÃO,
ANIMAÇÃO

16.
BACKGROUND
Web Workers

17.
QUEBRE A TAREFA
setTimeout / setImmediate /
requestAnimationFrame / requestIdleCallback
BACKGROUND
Web Workers

18.
ANIMATION

19.
ANIMATION 60FPS

20.
ANIMATION 16ms

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

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

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

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

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

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

27.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
// preparaAnimacao
// disparaAnimacao
// aposAnimacao
}

28.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}

29.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}

30.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());

31.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');

32.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
.cartao.remove {
position: absolute;
}

33.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}

34.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {

35.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();

36.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;

37.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;

38.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;

39.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});

40.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}

41.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
.anima .cartao {
transition: 500ms ease-out;
}
.anima .cartao.remove {
opacity: 0;
}

42.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
disparaAnimacao();
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}

43.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
requestAnimationFrame(disparaAnimacao);
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}

44.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
requestAnimationFrame(disparaAnimacao);
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
function aposAnimacao() {
lista.classList.remove('anima');
this.remove();
}

45.
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
requestAnimationFrame(disparaAnimacao);
this.addEventListener('transitionend', aposAnimacao);
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
function aposAnimacao() {
lista.classList.remove('anima');
this.remove();
}

46.
DESAFIOS PRÁTICOS DE
PERFORMANCE WEB

47.
OBRIGADO!
sergiolopes.org
@sergio_caelum