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!
