critical rendering path - velocidade também é uma funcionalidade
DESCRIPTION
Desenvolver aplicações web requer que você entenda seus usuários e o que eles precisam, mas também requer que você entenda como o Browser funciona, como seu conteúdo é entregue e exibido aos usuários. Dessa forma, você fornece uma boa experiência com performance apropriada. Nesta palestra introduziremos os conceitos presentes no campo de Web Performance Optimization, desde as requisições de rede, passando pela sequência de passos utilizados pelos Browsers para converter e executar os conteúdos (HTML, Javascript e CSS), definir o layout e, por fim, exibir as informações.TRANSCRIPT
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Critical Rendering PathVelocidade também é uma funcionalidade
João Lucas P [email protected]
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Percepção de velocidade
http://goo.gl/JPG1WP, http://goo.gl/WYF7j
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Critical Rendering Path
Network
HTML
CSS
DOM
CSSOM
JavaScript Render Tree Layout Paint
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Construindo o DOMvagrant@precise32:~$ curl 10.0.2.2:3000
<html>
<head>
<title>DEVDAY 2014</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="assets/style.css">
</head>
<body>
<header>
<a href="http://devday.devisland.com" target="_blank">#DEVDAY2014</a>
</header>
<section>
<h2>DEVDAY 2014 @ BH/Br</h2>
<img src="assets/devday2013.png">
<h3>Critical Rendering Path</h3>
</section>
</body>
</html>
vagrant@precise32:~$
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Characters Tokens Nodes DOM
<html>
<head>
<title>DEVDAY 2014</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="assets/style.css">
</head>
<body>
<header>
<a href="http://devday.devisland.com" target="_blank">#DEVDAY2014</a>
</header>
<section>
<h2>DEVDAY 2014 @ BH/Br</h2>
<img src="assets/devday2013.png">
<h3>Critical Rendering Path</h3>
</section>
</body>
</html>
StartTag: html StartTag: head
StartTag: title DEVDAY 2014
EndTag: title Tag: meta
Tag: link EndTag: head
StartTag: body StartTag: header
StartTag: a #DEVDAY2014
http://goo.gl/6ptLCJ
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Tree builder
Tokenizer
Construindo o DOM3c 68 74 6d 6c 3e 3c 68 65 61 64 3e 3c 74 69 74 6c 65 3e 44 45 56 44 41 59 65 ...
<html><head><title>DEVDAY 2014</title><meta..><link..></head><body><header><a href="h ...Characters
StartTag: html StartTag: head StartTag: title EndTag: title Tag: meta...Tokens
Nodes html head title DEVDAY2014 meta ... h2 DEVDAY 2014 @ BH/Br
DOM html
head
title meta link
body
header
aDEVDAY 2014
#DEVDAY2014
rel="stylesheet"
type="text/css"
href="assets/style.css"
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
DOM - Document Object Model
parsing incremental
inicia-se ao receber os primeiros bytes
conteúdo, propriedades e relacionamento entre os nodes
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Critical Rendering Path
Network
HTML
CSS
DOM
CSSOM
JavaScript Render Tree Layout Paint
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Construindo o CSSOMCharacters
Tokens
Nodes
CSSOM
body{font-family:Roboto,sans-serif;background-color:#fafafa;color:#263238}article, ...20 62 6f 64 79 20 7b 20 20 20 20 20 66 6f 6e 74 2d 66 61 6d 69 6c 79 3a 20 5c 27 ...
html
body
header section
a h2
#DEVDAY2014 DEVDAY 2014 @ BH/Br
body { font-family: 'Roboto', sans-serif; background-color: #fafafa; color: #263238; }header {
font-family: 'Roboto', sans-serif; bg-color: #01579b; color: #e1f5fe; }
header a { color: #e1f5fe; text-decoration: none; }
http://goo.gl/6ptLCJ
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Construindo o CSSOM
<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 400px)">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="landscape.css"rel="stylesheet" media="(orientation: landscape)">
@media (min-width: 500px) and (max-width: 600px) {
/* styles here */
}
http://goo.gl/m6QlkF, http://goo.gl/FCAK6A
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
CSSOM - CSS Object Model
parsing não incremental
render blocking
recalculate styles
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Critical Rendering Path
Network
HTML
CSS
DOM
CSSOM
JavaScript Render Tree Layout Paint
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
section
h2 img
DEVDAY 2014 @ BH/Br
Render Tree
h3
section
h2
DEVDAY 2014 @ BH/Br
img h3
DEVDAY 2014 @ BH/Br
DOMsection
img h3h2
section h2 { font-weight: bold; }
section { display: block; text-align: center; }
section h3 { display: none;}
section img { width: 100%; border: 1px #263238 solid; }
CSSOM
http://goo.gl/ouzsUr
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Render Tree
DOM e CSSOM formam Render Tree
Somente nodes visíveis na página
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Critical Rendering Path
Network
HTML
CSS
DOM
CSSOM
JavaScript Render Tree Layout Paint
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Layoutonde e como os elementos serão
posicionados na tela
http://goo.gl/0L9usy
↑ tamanho ou complexidade do DOM/CSSOM
↑ tempo em Layout
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
need layout: 14tree size: 14scope: document
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Critical Rendering Path
Network
HTML
CSS
DOM
CSSOM
JavaScript Render Tree Layout Paint
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Paintingtamanho da áreaformato (bordas)
sombrastransparências
background-images
Render Tree Layout Paint
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
http://goo.gl/xjZAiJ
Galaxy S4, GPRS 50Kbps, 500ms RTT
}}}
loadingrenderingpainting
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Critical Rendering Path
Network
HTML
CSS
DOM
CSSOM
JavaScript Render Tree Layout Paint
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Otimizando o DOM
minify, compress, cache
http://goo.gl/hPLUqB, http://goo.gl/CW7HJC, http://goo.gl/wxIXkU
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
JavaScript<section>
<h2>DEVDAY 2014 @ BH/Br</h2>
<img src="assets/devday2014.png">
<h3>Critical Rendering Path</h3>
</section>
<script type="text/javascript">
var section = document.getElementsByTagName('section')[0],
span = document.createElement('span');
span.innerText = "#crp #wpo #perfmatters #devday2014";
span.style.fontWeight = "bold";
section.appendChild( span );
</script>
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
... .. ... ..
<h3>Critical Rendering Path</h3>
</section>
<script type="text/javascript" src="assets/effects.js"></script>
</body>
BuildDOM
GET effects.js response
Run JSparser blocked
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/style.css">
</head>
<body>
<header> .. </header>
<section> ... <h2>DEVDAY 2014 @ BH/Br</h2> ... </section>
<script type="text/javascript" src="assets/effects.js"></script>
</body>
request
GET /
GET css
GET js
response
response
CSSOM DOM . . .DOM
response
idle blocked Run JS
http://goo.gl/d4FuxG
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
consultar e modificar DOM/CSSOM
JavaScript
bloqueado durante CSSOM
bloqueia construção do DOM <script src="assets/effects.js" async></script>
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Critical Rendering Path
Network
HTML
CSS
DOM
CSSOM
JavaScript Render Tree Layout Paint
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Otimizar o Critical Rendering Path
Minimizar dadosminify, compress e cache: HTML, JS e CSS
Reduzir blocking resourcesmedia queries para CSS, async/onload para JS
Minimizar tamanho do CRPnúmero e ordem dos resources
http://goo.gl/BJqIvR
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Otimizar o Critical Rendering Path
Evitar redirectsMelhorar response time
Browser cache
Content Delivery Network (CDN)
Priorizar conteúdos visíveis
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Referências
github.com/davidsonfellipe/awesome-wpoDocs, Blogs, Articles, Talks, Analyzers, Benchmark, CDN, Image
Optimizers, Loaders, Minifiers, Sprite Generators, Web Performance Meetup Groups
Bandwidth, latency, and radio performance - http://goo.gl/IiLJTfOptimizing networking performance (and HTTP 2.0) - http://goo.gl/SiJ6DI
Critical rendering path - http://goo.gl/Hs5Jx2Delivering 60 FPS in the browser - http://goo.gl/uZly5u
Ilya Grigorik, Crash Course on Web Performance
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps
Critical Rendering PathVelocidade também é uma funcionalidade
João Lucas P [email protected]
Obrigado!