Day 50 of #100DaysOfCode: General strategies for optimizing critical render path
Tags: 100daysofcode, css, javascript, html
Published: 2020-11-23 12:12:15



```html
<html lang="en">
    <head>
        <link rel="stylesheet" href="css/style.css" type="text/css"></link>
    </head>
    <body>
        <div><img src="photo.jpg"></div>
        <script src="js/app.js"></script>
    </body>
</html>
```

### What are the critical resources, critical path length, total size for the above example?
* 3 number of critical resources
* 11 total critical KB
* 2 minimum critical path length(roundtrips)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ilhygaxotyhxummbeekw.jpg)

## Tip 1. Minify, compress, cache (for HTML, CSS, JavaScript)
* (1) Minimize bytes
* (2) Reduce critical resources
* (3) Shortten CRP length

## Tip 2. Minimize use of render blocking resources (for CSS)

### (1) Use Media queries on link to unblock rensering
* printer.css
```css
@media print {
    ...
}
```

* HTML
```html
<link rel="stylesheet" media="print" href="printer.css" />
```
### (2) Use inline CSS

## Tip 3. Minimize use of parser blocking resources (for JavaScript)
We can use async, defer, and [module](https://v8.dev/features/modules) to avoid blocking.

The following figure shows the difference between the async and the defer. *The order is async/blocking, HTML parsing, defer*.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jhq1sdcuohlnovuta2qu.png)

In the following code, the order should be test.js, inline script, inline module, test2.js.

```html
//3
<script type="module">   
    addTextToBody("Inline module executed"); 
</script>
//1
<script src="test1.js"></script>
//4
<script defer src="test2.js"></script>
//2
<script defer>   
    console.log("Inline script executed"); 
</script>
```

### (1) Defer JavaScript execution

1. The browser renders and downloads JavaScript files at the same time. (non-blocking)
2. The browser will execute JavaScript code after rendering.
3. The inline script will ignore defer. For the following code, For the following code, the order should be inline script, test.js

```html
<script defer src="test.js"></script>
```

The following optimized template is the code I found from the internet with dns-prefetch, preload, and defer.

```html
<!DOCTYPE HTML>
<html>
       <head>
          <meta charset="utf-8">
          <link rel="dns-prefetch" href="//cdn1.com/">
          <link rel="preload" href="//js.cdn1.com/test.js" as="script">
       </head>
       <body>
           <script type="text/javascript" src="//js.cdn1.com/test.js" defer></script>
       </body>
</html>
```

### (2) Use async attribute on script
1. The browser renders and downloads JavaScript files at the same time. (non-blocking)
2. The browser will execute JavaScript code before rendering.
```html
<script async src="test.js"></script>
```


## Articles
There are some of my articles and released projects. Feel free to check if you like! 
* [My blog-posts for software developing](https://medium.com/a-layman)
* [Facebook page](https://www.facebook.com/imalayman)
* [My web resume](https://jenhsuan.github.io/ALayman/cover.html)
* [Twitter bot](https://twitter.com/ALayman84368087)
* [Side project - Daily Learning](https://daily-learning.herokuapp.com/)

## References
* [Udacity course](https://classroom.udacity.com/courses/ud884)