Html from request to rendering

@toan

Content

1. Resources loading.2. Critical rendering.3. Optimizing performance.

Resources loading

image credit: https://developer.chrome.com/devtools/docs/network

Resources loading

Resources loading

* Blue line is dom content loaded event and red line is loaded event=> We must block and wait for CSS (CSSOM) before we can execute JavaScript

eg1) With only images:

eg2) With images + javascript + css

Resources loading

* As soon as the browser hits the script tag it will block (DOM) and wait until the CSSOM is constructed.

eg3) Change external script to inline script

Resources loadingeg4) Async (external) JavaScript

eg5) Inlined both the CSS and JavaScript

<script src="timing.js" async></script>

Critical rendering

image credit https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

Critical renderingUsing extend js to query cssom -> the browser will pause until “style.css” is downloaded and CSSOM is constructed.

Critical renderingMaking the script asynchronous

<script src="app.js" async></script>

Making the script asynchronous & css stylesheet was only needed for print

<script src="app.js" async></script><link href="style.css" rel="stylesheet" media="print">

Critical rendering

Optimizing performance.- Avoid Landing Page Redirects- Minify, compress, cache.- Make fewer requests- CSS blocks rendering -> put on top- JS blocks downloads -> put on bottom.

- Use media queries on link to unblock rendering. Usually means breaking CSS into media-applicable pieces

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px)" href="small-device.css" />

- Inline CSS. if the external CSS resources are small.- Avoid CSS @imports

Optimizing performance.- Defer Javascript execution.- use async attribute on script.- new fetch() method provides an easy way to asynchronously request data.

resourceshttps://developers.google.com/web/fundamentals/performance

https://developers.google.com/speed/docs/insights/mobile

http://chimera.labs.oreilly.com/books/1230000000545/ch10.html

http://www.projectsbygeng.com/2015/04/27/100-days-of-code-day-18-website-performance-optimization/

http://www.sitepoint.com/optimizing-critical-rendering-path/