Web Performance For Dummies
Why should I care?
Well, duh.
Critical Rendering Path
DOM
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>
CSSOM
body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }
body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }Render Tree
Layout
Paint
The only thing I want you to remember
By default CSS is treated as a render blocking resource, which means that the browser will hold rendering of any processed content until the CSSOM is constructed.
Why?
The Good News
<link href="style.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" media="all">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css" rel="stylesheet" media="print">Media types and media queries allow us to mark some CSS resources as non-render blocking.
They will still be downloaded though.
JavaScript you say?
JavaScript
Browser
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path: Script</title>
</head>
<body>
<p>
Hello
<script>document.write("<span>Amazing</span>");</script>
World!
</p>
</body>
</html>QUIZ TIME
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path: Script</title>
</head>
<body>
<span>Hello World!</span>
<script>
var span = document.getElementsByTagName('span')[0];
span.textContent = 'interactive'; // change DOM text content
span.style.color = 'red'; // change CSSOM property
</script>
</body>
</html><html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path: Script</title>
</head>
<body>
<script>
var span = document.getElementsByTagName('span')[0];
span.textContent = 'interactive'; // change DOM text content
span.style.color = 'red'; // change CSSOM property
</script>
<span>Hello World!</span>
</body>
</html>The second thing I want you to remember
Executing our inline script blocks DOM parsing and DOM construction, which will delay the initial render.
What about CSS?
The browser will delay script execution until it has finished downloading and constructing the CSSOM, and while we’re waiting, the DOM construction is also blocked!
# index.html
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path: Script</title>
</head>
<body>
<span>Hello World!</span>
<script src="script.js"></script>
</body>
</html>
# script.js
var span = document.getElementsByTagName('span')[0];
span.textContent = 'interactive'; // change DOM text content
span.style.color = 'red'; // change CSSOM propertyNow we'll have to wait to fetch the JS file first, then parse it, then run it, and only then we can resume parsing the DOM. What a waste :(
A better way?
Async & defer
<script>
<script async>
<script defer>
An example
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
<script src="app.js"></script>
</body>
</html>
You can't optimize what you can't measure.
How to measure
DEMO TIME
Web Performance For Dummies
By arkh4m
