1. Resources loading involves blocking on CSS (CSSOM) construction before executing JavaScript. Asynchronous JavaScript avoids blocking. 2. Critical rendering focuses on minimizing blocking of visual content while above-the-fold resources like CSS are downloaded. Asynchronous scripts and media queries help. 3. Optimizing performance suggests techniques like minification, caching, reducing requests, prioritizing CSS, and deferring non-critical JavaScript.

1. Html from request to
rendering
@toan

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

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

4. Resources loading

5. 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

6. 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

7. Resources loading
eg4) Async (external) JavaScript
eg5) Inlined both the CSS and JavaScript
<script src="timing.js" async></script>

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

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

10. Critical rendering
Making the script asynchronous
<script src="app.js" async></script>

11. 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

12. 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

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

14. resources
https://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/