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 property

Now 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

Web Performance For Dummies

  • 570
Loading comments...

More from arkh4m