Menu

Udacity: Website Performance Optimization

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

Udacity Project https://github.com/udacity/frontend-nanodegree-mobile-portfolio

Analysis tools

Critical Rendering Path

DOM
Javascript
CSSOM
Render Tree
Layout
Paint

Critical Rendering Path

  1. DOM – Converting HTML to DOM (Characters = Tokens – Nodes – DOM)
curl http://www.link.com


1-2Javascript
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

Viewport

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

Optimizations

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
https://tinypng.com/
gifsicle create and optimize GIF images http://www.lcdf.org/gifsicle/
jpegtran optimize JPEG images http://jpegclub.org/jpegtran/
optipng lossless PNG optimization http://optipng.sourceforge.net/
pngquant lossy PNG optimization http://pngquant.org/
4. optimize fonts https://google-webfonts-helper.herokuapp.com/fonts
5. minification of HTML, CSS, JS – remove comments
HTML Minifier http://kangax.github.io/html-minifier/ Source https://github.com/kangax/html-minifier
CSS Minifier http://css.github.io/csso/csso.html Source: https://github.com/ben-eb/cssnano and https://github.com/css/csso
JS Minifier http://lisperator.net/uglifyjs/ Source: http://css.github.io/csso/csso.html
6. Enable Gzip on the server Setup https://github.com/h5bp/server-configs-apache Test: http://www.whatsmyip.org/http-compression-test/
7. Enable Caching in browser

Summary


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.

Source

Udacity Website performance optimization