👀 Everyone likes fast website! How? "Frontend performance tips"
Tags: frontend, beginners, performance
Published: 2022-03-20 12:26:59

## Basic principles
- Reduce file size
- Reduce number of requests to sever
- Avoid something which blocks rendering
- Using browser cache
- Using CDN (server setting)

---

## 💎 Images
⭐ Image file size is huge, so priority is NO.1. you MUST check it at first!

### 🗒 Extensions
- **jpg**
If you want to use like this "normal photo", you should use jpg because it is lighter than png.
![japan street](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nv1zgupuwnspgqy9tvve.jpg)

- **png**
It is heavier than jpg, so normally I don't use it, png has higher quality than jpg though. But if you use **transparency**, you have to use png.

There are 3 options in png

|| png8 | png24 | png32 |
|---------| --------- |:---------:| -------:|
|**number of colors**| 258 colors | 16 million| same as png24 |
|**transparency**| ✅ | ⛔ | ✅ |

- **svg**
If you use icon or something like this ↓, you should use vector format. Then .svg is best
[What is vector format?](https://www.youtube.com/watch?v=ATwi28Arqok)
![icon note](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qb22ai1mmyqzhsinxx5.png)
 
- **webp❗**
 I introduced .jpg and .png, but honestly .webp is better. This is new extension, anyway **LIGHT**❗
I highly recommend you to use it instead of .png, .jpg❗

### 🗒 Optimize file
▼ I think a lot of companies are like that
```
👩‍🎨 hi! I'm designer!
   I created beautiful and high quality photo just now!
👨‍💻 hey! I'm engineer! Wow so nice photo! thank you!
   I put it in server, you can see it in tomorrow!
👩‍🎨 Wow thank you!
```
it's like you travel somewhere and there is 10kg shampoo and 15kg underwear. Yeah, it's so weird and heavy 😅
But people do like that normally in digital world.

↓ so you have to care about these
**size:** sets image size the same as on browser size
**compress:** Use [like this website](https://www.iloveimg.com/compress-image)

## 💎 Minify
To reduce file size ! like Pikachu size
delete newlines, spaces, comments
▼ This is normal css file (650bytes)
```css
/*basic setting*/
* {
    margin: 0;
    padding: 0;
}

/* explanation of command option */
.cmd_explain_en {
    font-size: 14px;
    color: #666;
}

/* emphasize */
.ex_exp {
    color: #930;
    font-weight: bold;
}

.yomi_en {
    font-size: 12px;
    color: #666;
}

.ex_sample {
    color: #003300;
    display: block;
    width: 95%;
    border: 1px solid #999;
    padding: 10px;
    margin-bottom: -16px;
    margin-left: auto;
    margin-right: auto;
    font-size:14px;
    line-height: 21px;
    word-break: break-all;
}

.ex_cmd {
    color: #006600;
    font-weight: bold;
}
```
▼ This is minify (409bytes)
```css
* {margin: 0;padding: 0;}
.cmd_explain_en {font-size: 14px;color: #666;}
.ex_exp {color: #930;font-weight: bold;}
.yomi_en {font-size: 12px;color: #666;}
.ex_sample {color: #003300;display: block;width: 95%;border: 1px solid #999;padding: 10px;margin-bottom: -16px;margin-left: auto;margin-right: auto;font-size:14px;line-height: 21px;word-break: break-all;}
.ex_cmd {color: #006600;font-weight: bold;}
```


## 💎 CSS
### 🗒 avoid `@import`
▼ css can import in css file like this
```css
// style.css
@import url('./another-style.css')

body {
  background-color: black;
}
```
There are two prolmens
- increase number of requests
- after loading style.css completely, start getting another-style.css

**How to solve it?**
integrate css files by some build tools like [gulpjs](https://gulpjs.com/), [webpack](https://webpack.js.org/) 

## 💎 Javascript
### 🗒 avoid reading synchronously
▼ for example, there is like this html file
```html
<!doctype html>
<html>
  <head>
    <script src='script.js'></script>
    <link href='style.css' ref='stylesheet'>
  </head>
  <body>
  ...
```
It is like that 
```
👨‍✈️ Hi, I'm human. I wanna see this website, click link!
↓
😎 Hey! Im browser rendering engine! I got html file just now!
↓
👨‍✈️ (waiting for watching website with smile)
↓
😎 At first... I have to read javascript file 'script.js'
↓
↓ (...in 30s)
↓
👨‍✈️ Hey! I don't see anything on browser!!
↓
😎 OMG! this javascript file is sooo huge! 
↓
👨‍✈️ What?? could you show me some contents at first ??
```
Yeah while browser rendering engine reads javascript file, rendering html,css stops

**How to solve it?**
reading javascript file asynchronously
- async
- defer
```javascript
<script defer src='foo.js'></script>
<script async src='hoge.js'></script>
```
**difference between defer and sync**
Before explaining it, you should know there are two important times in javascript flow
1. Read
2. Execute

**Read** timing is the same, but **execute** timing is different. 
- **Defer**
 → wait for finishing DOM tree, starts executing. Yeah he has patience
- **Async**
 → can't wait DOM tree!! I wanna execute javascript asap!!
 → it's faster, but it has risk that javascript can't find DOM element

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygsyektqaonidfbq21qm.png)
 

### 🗒 The way of "import"
If you import whole js library, it would be so huge size (like loadsh.js, moment.js). Instead of it, you can choose file in library
![import cost](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a19aigmcq3ai8xob91vg.gif)
(▲ you can check import size by **import cost** extension on Jetbrains IDEs and VScode. I don't use other editors, so I don't know)

### 🗒 Find big library or not necessary library!!
You should check javascript files size, for example [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)
![webpack-bundle-analyzer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3czjzumxw5moo15juu7s.png)
 

## 💎 Prefetch, Prerender
If you can load **link tag** content, before page transition,  page will be opened SO quickly like magic.

### 🗒 DNS prefetch
resolve domain names before resources get requested
```html
<link rel="dnsprefetch"href="http://example.com">
```
### 🗒 Pre load resources
get resource before request and saves in browser cache
```html
<link rel="prefetch"href="./image.gif">
```
### 🗒 Pre rendering webpage
load all resources in HTML file and render as well in background.
(⭐ If there is a lot of resources in HTML file, your PC will be overloaded)
```html
<link rel="prerender"href="//example.com/prerender.html">
```

## 💎 Gzip
Gzip is one of the compression type of files, it's like somebody was on diet and loose weight

▼ This is server setting, but you can see file is sent gzip or not on browser inspect
![gzip in inspect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqehqj2536juix2ftgee.png)

## 💎 Browser cache
⭐ Setting on server

▼ four types of browser cache
```
<strong cache>
- Expires header
- Cache-control header

<weak cache>
- Last-Modified header
- ETag header
```
### 1️⃣ Expires header (strong cache)
`Expires: Mon, 02 Nov 2034 13:19:30GMT`
Until this time, resources are saved in browser cache and even don't send http request to server.

- **weak point**
If there is time setting difference between client(browser) and server, cache can't set property

↓ 😼 So next setting is better choice actually
### 2️⃣ Cache-control header (strong cache)
`Cache-Control:max-age=6000`
6000 second after loading resources, save in browser cache


### 3️⃣ Last-Modified header (weak cache)
```
1. 💻 browser send request to server like always
2. 📮 server responses to browser with this HTTP response header
  "Last-Modified: Wed, 15 Nov 2021 04:55:00 GMT"
↓
↓ (2days later)
↓
3.💻 browser send request same url with like this request header
  "If-Modified-Since: Wed, 15 Nov 2021 04:55:00 GMT"
4.📮 Server see this header and like that
  - Something is modified since that time! I have to give new resources!!
  - Nothing is modified since that time, I just response `304 modified`, then browser uses browser cache
```
### 4️⃣ ETag header (weak cache)
It's almost same as "Last-Modified header".
Difference is ETag uses ID of version instead of date
```
1. 💻 browser send request to server like always
2. 📮 server responses to browser with this HTTP response header
  "Etag: "H*SJkfeoDKJF89jfsk"
↓
↓ (2days later)
↓
3.💻 browser send request same url with like this request header
4.📮 Server see this header and like that
  - OMG! We modified something and created new Etag! have to response new resources!
  - Our Etag in server is the same as the one which browser sent me just now, I just response `304 modified`, then browser uses browser cache
```
---
### (HTTP/2)
Recently HTTP/2 is famous as http protocol, this is better protocol than HTTP/1.

One of the most difference between them is **Loading multiple resources at same time**

Because of it, basic principle of **reduce number of requests** is not so important like before, but still **Less is better**

[▼ from this website](https://www.litecdn.net/blog/http1-http2/)
![http2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2o78v6k5tc2qajj388ld.png)