Otimizando o Front-End para Experiências Rápidas

Otimizando o Front-End
Thales Carvalho, Course Manager
Udacity Brasil

Antes de começar
Pré-requisitos:
Disposição pra me ouvir falar (falo muito)
HTML, CSS, JavaScript
Saber o que é DOM
HTTP requests (vai-e-volta, GET)
Entender um pouco de
estruturas de dados (árvores e afins)
Um pouquinho de compiladores

Antes de começar
Pré-requisitos:
Um pouquinho de algoritmos e análise de
complexidade
Quase nada de SO (falarei de threads)

Conteúdo
Workshop baseado nos seguintes cursos da Udacity:
Otimização de Performance de Website
Otimização de Renderização no Browser
Alguém já fez esses cursos da Udacity?

Conteúdo
O que é o CRP e como isso funciona
Otimizações simples para economizar requisições e
evitar bloqueio do CRP
Ciclo de vida de aplicativos (RAIL)
Garantindo o bom e velho 60FPS
Otimizações em Animações, Estilos, Layout
Web Workers

“Para desenvolver um ótimo site, é necessário
entender os usuários e o que eles querem alcançar,
mas também como o browser funciona para
criarmos uma experiência rápida e positiva.”
Ilya Grigorik - Google Developer Advocate & Web Performance Engineer

Primeiro, meça. Depois, se necessário, otimize.

DOM
Caminho de Renderização Crítica
CSSOM
Render Tree
Layout
Paint
JavaScript
Critical
Rendering
Path

<html>
<head>
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet">
</head>
<body>
<p>
Hello <span>web performance</span> students!
</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>
http://udacity-crp.herokuapp.com/cssom.html

Conversão de HTML para DOM
Caracteres
Tokens
Nodes
DOM
<html><head><meta name=”viewport”
content=”width=device-width”><link href=”style.css” ...

Conversão de HTML para DOM
Caracteres
Tokens
Nodes
DOM
<html><head><meta name=”viewport”
content=”width=device-width”><link href=”style.css” ...
StartTag: html StartTag: head Tag: meta EndTag: head

Conversão de CSS para CSSOM
Caracteres
Tokens
Nodes
CSSOM
body {font-size: 16px} p {font-weight: bold} span
{color: red} p span {display: none} img {float: right}

HTML e CSS são bloqueadores de renderização
Ou seja, nenhum objeto será renderizado enquanto o DOM e CSSOM
não estiverem completamente construídos

DOM
CSSOM
Render Tree
Layout
Paint
JavaScript
Critical
Rendering
Path
Caminho de Renderização Crítica

A Árvore de Renderização
CSSOM
DOM

RENDER TREECSSOM

Layout
Cálculo da posição e dimensões
dos elementos de uma página

Layout
Modificando elementos de uma
página, o estilo ou redimensionando
janelas geram novos eventos de
layout

DOM
CSSOM
Render Tree
Layout
Paint
JavaScript
Critical
Rendering
Path

Quiz: Quais dos elementos é mais rápido para pintar?

Até agora, quais otimizações posso realizar?
Minificar HTML & CSS & JavaScript
Automatizando, claro! Use task runners: gulp, grunt, etc
Tornar CSS crítico inline(link)
Compactar (link)
HTTP Caching (link)

Quanto antes o browser receber o HTML e construir o DOM?
Quanto antes o browser receber o CSS e construir o CSSOM?
Quiz: Quando o browser irá renderizar a página?

Desbloqueio de CSS com Media Queries

Desbloqueio de CSS com Media Queries
<link rel=”stylesheet” href=”style.css”>
<link rel=”stylesheet” href=”style-print.css” media=”print”>

Quiz: Quais folhas de estilo serão bloqueadoras de renderização?
Utilizando um smartphone com orientação vertical

Desbloqueio de JS com Async
1. Não bloqueia a
construção do DOM
2. Não é bloqueado
pelo CSSOM

Quiz: script “bloqueador”, “inline” ou “async”?

Quiz: script “bloqueador”, “inline” ou “async”?
async inline bloqueador

Até agora, quais otimizações posso realizar?
Minificar, Compactar, Cache
HTML, CSS, JavaScript
Minimizar uso de recursos que bloqueiam a renderização
1. Uso de media queries em <link> para desbloquear renderização
2. Inline CSS
Minimizar uso de recursos que bloqueiam o parser
1. Postergar execução de JavaScript com defer
2. Usar atributo async no <script>

Diagramas de CRP com CSS Externo

Quiz: Calcular a métrica de CRP com CSS externo
Analise o caminho de renderização crítica
Número de recursos críticos
KB críticos totais
Comprimento de caminhos críticos mínimos (GET->response)

2
9
2
KB críticos totais
Quiz: Calcular a métrica de CRP com CSS externo

Diagramas de CRP com CSS e JS Externo

Quiz: Calcular a métrica de CRP com CSS e JS externo
KB críticos totais

Quiz: Calcular a métrica de CRP com CSS e JS externo
KB críticos totais
3
11
2

Quiz: Quais estratégias de otimização você utilizaria?

Como garantir uma página livre de engasgos?

DOM
Requisição HTTP
CSSOM
Render Tree
Layout
Paint
JavaScript
1 frame
(pior caso) Caminho
comum de
páginas
estáticas

Para páginas dinâmicas, JS e CSS estão constantemente
trabalhando e com isso impactando o CRP.
Consequentemente, afetando o FPS.

ou
Animações de CSS
API de Animações
Web

Ciclo de vida de aplicativos
Response
Animate
Idle
Loading

Ciclo de vida de aplicativos
Response………….
Animate…………...
Idle…………………...
Loading…………….
100ms
16ms
50ms
1 segundo

Usuário clica
Animação
inicia
Animação
termina
Usuário percebe
que a animação
terminou

Usuário clica
Animação
inicia
Animação
termina
Usuário percebe
que a animação
terminou
Animation
Pré-carregamento
de animações
complexas para
garantir 60fps
Pós-carregamento
de animações complexas

Usuário clica
Animação
inicia
Animação
termina
Usuário percebe
que a animação
terminou
Response Idle
Loading (1s)
Animation

Quiz: Quais tipos de interações requer animação em
60FPS?

Quiz: Quais tipos de interações requer animação em
60FPS?
X
X
X
X
X
X
X

Quando então carregar o ? Animation?
Quiz

Quando então carregar o ? Response?
Quiz

Quando então carregar o ? Loading da página?
Quiz

Quiz: Na fase Idle, quais tarefas podemos executar?
1. Carregar imagens do conteúdo principal
2. Pós-carregamento de animações
3. Iniciar requisições assíncronas de conteúdos não
mostrados na tela
4. Carregar imagens de conteúdos não mostrados logo que
carrega a página

Fonte: https://speakerdeck.com/paullewis/making-a-silky-smooth-web

Relembrando…
Primeiro, meça. Depois, se necessário, otimize.

Análise de performance - DESAFIO 1
Dicas:
● Feche todos os apps
● Entre em Incognito
● Foque nas causas dos gargalos, não em
sintomas
● Meça primeiro, depois otimize

Qual função é a causadora de gargalos?
1. Inicie a gravação da timeline
2. Clique em “Switch Layout”
https://goo.gl/kq3iwA

Resp: onSwitchLayoutClick

https://goo.gl/cjmH9j

Resp: totesLayingOutYo

Otimizando o JavaScript
Primeira regra:
Micro-otimizações raramente fará alguma
diferença.

for (var i=0; i<len; i++)
ou
while (++i < len)

Seu código JavaScript é compilado com
múltiplas otimizações por meio do compilador
JIT (Just In Time)

Otimizando o JavaScript para Animações
Você tem 10ms para gerar cada frame. Como
você se certifica que o JS está atrapalhando o
menos possível?
1. Otimiza o JS em nanossegundos
2. Executa o JS a cada 16ms agendado
3. Adia a execução do JS sempre para o finalmente do frame
4. Executa o JS o mais cedo possível em cada frame

Função
requestAnimationFrame

Qual função leva mais tempo para carregar?
1. onSortOne
2. onSortTwo
https://goo.gl/5vzBLp

Qual função leva mais tempo para carregar?
1. onSortOne
2. onSortTwo
Resp: onSortOne

E se fosse possível “paralelizar” a
execução de JavaScript?

Web Workers

Otimizando o Layout e Estilos
Obs: com JavaScript
Problema mais comum de
desempenho do Layout:
Layout Forçado Síncrono (FSL)

Obs: com JavaScript
Onde está a jaguncisse?

Quiz: Quais dos três não causa o layout chato síncrono

Obs: com JavaScript
Problema mais comum de
desempenho do Layout:
Layout Forçado Síncrono (FSL)
Tony Gentilcore: Como (não) disparar um layout no Webkit

Em parceria com especialistas
do React Training
Dominam o mercado de treinamento
do ecossistema React.
Inscrições até 27 de junho!
Por enquanto apenas em inglês

Revisor de Projetos
Udacity
Precisamos de revisores de
projetos para o Nanodegree
de React!

Revisor de Projetos
Udacity
Trabalho remoto e flexível
Recebe em dólar. Dindin do bom.
Oportunidade de aprendizado
Aguenta? thales.carvalho@udacity.com

Revisor de Projetos
Udacity
Trabalho remoto e flexível
Recebe em dólar. Dindin do bom.
Oportunidade de aprendizado
Conhece alguém? thales.carvalho@udacity.com

Otimizando o Front-End para Experiências Rápidas

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Otimizando o Front-End para Experiências Rápidas

Semelhante a Otimizando o Front-End para Experiências Rápidas (20)

Mais de iMasters

Mais de iMasters (20)

Otimizando o Front-End para Experiências Rápidas