Udacity: Website Performance Optimization

January 2, 2018 - Chrome, CSS, HTML, javascript, Linux

Udacity Project

Analysis tools

Critical Rendering Path

Render Tree

Critical Rendering Path

  1. DOM – Converting HTML to DOM (Characters = Tokens – Nodes – DOM)

2. CSSOM – Converting CSS to the CSS Object Model.
CSS is treated as a render blocking resource
Media types and media queries allow us to mark some CS resources as non-render-blocking

<link href="style.css" rel="stylesheet">
<link href="style.css"    rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css"    rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
<link href="portrait.css" rel="stylesheet" media="orientation:landscape"0>
  1. Render Tree – Captures visible elements from DOM and CSSOM. CSS rules are matched from right to left!
    “Flash of Unstyled Content” (FOUC). The browser blocks rendering until it has both the DOM and the CSSOM.

  2. Layout – Positioning elements on the page. Rerun layout step: Resize browser, change direction of the screen

  3. Paint
    Simpler style is faster to paint.

Analyzing the page load

Google Developer Tools > Performance > Reload the page


Make viewport size the full device width – 100% in CSS

<meta name="viewport" content="width=device-width" >

Steps to render the page

  1. Construct the DOM by parsing the HTML
  2. Request CSS & JS resources
  3. Parse CSS and construct the CSSOM tree
  4. Execute JS
  5. Merge DOM and CSSOM into the Render Tree
  6. Run layout
  7. Run Paint


DOM Optimizations

  1. Avoid Rendering Blocking CSS – use media queries and split css into multiple files
<link href="style.css" rel="stylesheet">

@media screen and (orientation: landscape) {
    .menu {float: right; }

@media print {
    body { font-size: 12px; }

Move print styles into separate css file – media attribute is non-blocking! The CSS is still downloaded but the rendering is not blocked.

<link href="style-print.css" rel="stylesheet" media="print">
@media print {
    body { font-size: 12px; }
  1. Optimize JS – Remove parsing blocking scripts as Javascript is parser blocking

– Use on load event

window.onload = function() {
<script src="analytics.js" async></script>

3. Optimize images
gifsicle create and optimize GIF images
jpegtran optimize JPEG images
optipng lossless PNG optimization
pngquant lossy PNG optimization
4. optimize fonts
5. minification of HTML, CSS, JS – remove comments
HTML Minifier Source
CSS Minifier Source: and
JS Minifier Source:
6. Enable Gzip on the server Setup Test:
7. Enable Caching in browser


1. Minify bytes
2. Remove files from Critical Rendering path – reduce critical resources
3. Shorten CRP length

in other words
The general sequence of steps to optimize the critical rendering path is:

Analyze and characterize your critical path: number of resources, bytes, length.
Minimize number of critical resources: eliminate them, defer their download, mark them as async, and so on.
Optimize the number of critical bytes to reduce the download time (number of roundtrips).
Optimize the order in which the remaining critical resources are loaded: download all critical assets as early as possible to shorten the critical path length.

To deliver the fastest possible time to first render, we need to minimize three variables:

The number of critical resources.
The critical path length.
The number of critical bytes.


Udacity Website performance optimization