Critical Rendering Path - Velocidade também é uma funcionalidade

Critical Rendering Path
Velocidade também é uma funcionalidade
João Lucas P Santana
jlucasps@gmail.com
Critical Rendering Path - #wpo #crp #perfmatters DEVDAY 2014 @jlucasps

Percepção de velocidade
http://goo.gl/JPG1WP, http://goo.gl/WYF7j

Network
HTML
CSS
DOM
JavaScript Render
CSSOM
Tree Layout Paint

Construindo o DOM
vagrant@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:~$

Characters Tokens Nodes DOM
<html>
<head>
<title>DEVDAY 2014</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<header>
<a href="http://devday.devisland.com" target="_blank">#DEVDAY2014</a>
</header>
<section>
</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

Tokenizer
Tree
builder
Construindo o DOM
3c 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 ...
Characters <html><head><title>DEVDAY 2014</title><meta..><link..></head><body><header><a href="h ...
Tokens StartTag: html StartTag: head StartTag: title ... EndTag: title Tag: meta
Nodes html head title DEVDAY2014 meta ... h2 DEVDAY 2014 @ BH/Br
DOM html
head
title meta link
body
header
a
DEVDAY 2014
#DEVDAY2014
href="assets/style.css"
type="text/css"
rel="stylesheet"

DOM - Document Object Model
parsing incremental
inicia-se ao receber os primeiros bytes
conteúdo, propriedades e
relacionamento entre os nodes

Construindo o CSSOM
Characters
Tokens
Nodes
CSSOM
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 ...
body{font-family:Roboto,sans-serif;background-color:#fafafa;color:#263238}article, ...
html
body
body {
font-family: 'Roboto', sans-serif;
background-color: #fafafa;
header { color: #263238; }
font-family: 'Roboto', sans-serif;
bg-color: #01579b;
color: #e1f5fe; }
header section
a h2
color: #e1f5fe;
text-decoration: none; }
#DEVDAY2014 DEVDAY 2014 @ BH/Br
header a {
http://goo.gl/6ptLCJ

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

CSSOM - CSS Object Model
parsing não incremental
render blocking
recalculate styles

DEVDAY 2014 @ BH/Br
CSSOM
section h2 {
font-weight: bold; }
section
section
img h3
h2 img
h2
DOM
DEVDAY 2014 @ BH/Br
Render Tree
DEVDAY 2014 @ BH/Br
section
section {
display: block;
text-align: center; }
h2 img h3
section img {
width: 100%;
border: 1px #263238 solid; }
h3
section h3 {
display: none;}
http://goo.gl/ouzsUr

Render Tree
DOM e CSSOM formam Render Tree
Somente nodes visíveis na página

Layout
onde e como os elementos serão
posicionados na tela
http://goo.gl/0L9usy
↑ tamanho ou complexidade do
DOM/CSSOM
↑ tempo em Layout

need layout: 14
tree size: 14
scope: document

Painting
tamanho da área
formato (bordas)
sombras
transparências
background-images
Render Tree Layout Paint

Galaxy S4, GPRS 50Kbps, 500ms RTT
loading
rendering
painting
}
http://goo.gl/xjZAiJ
}
}

Otimizando o DOM
minify, compress, cache
http://goo.gl/hPLUqB, http://goo.gl/CW7HJC, http://goo.gl/wxIXkU

JavaScript
<section>
</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>

... .. ... ..
</section>
<script type="text/javascript" src="assets/effects.js"></script>
</body>
Build
DOM
parser blocked Run JS
GET effects.js response

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header> .. </header>
<section> ... <h2>DEVDAY 2014 @ BH/Br</h2> ... </section>
<script type="text/javascript" src="assets/effects.js"></script>
</body>
request
GET /
idle blocked Run JS
DOM CSSOM DOM . . .
response
GET css
GET js
response
response
http://goo.gl/d4FuxG

JavaScript
consultar e modificar DOM/CSSOM
bloqueado durante CSSOM
bloqueia construção do DOM
<script src="assets/effects.js" async></script>

Otimizar o Critical Rendering Path
Minimizar dados
minify, compress e cache: HTML, JS e CSS
Reduzir blocking resources
media queries para CSS, async/onload para JS
Minimizar tamanho do CRP
número e ordem dos resources
http://goo.gl/BJqIvR

Otimizar o Critical Rendering Path
Evitar redirects
Melhorar response time
Browser cache
Content Delivery Network (CDN)
Priorizar conteúdos visíveis

Referências
github.com/davidsonfellipe/awesome-wpo
Docs, Blogs, Articles, Talks, Analyzers, Benchmark, CDN, Image
Optimizers, Loaders, Minifiers, Sprite Generators, Web Performance
Meetup Groups
Ilya Grigorik, Crash Course on Web Performance
Bandwidth, latency, and radio performance - http://goo.gl/IiLJTf
Optimizing networking performance (and HTTP 2.0) - http://goo.gl/SiJ6DI
Critical rendering path - http://goo.gl/Hs5Jx2
Delivering 60 FPS in the browser - http://goo.gl/uZly5u

Velocidade também é uma funcionalidade
Obrigado!
João Lucas P Santana
jlucasps@gmail.com

Critical Rendering Path - Velocidade também é uma funcionalidade

More Related Content

Critical Rendering Path - Velocidade também é uma funcionalidade