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.
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?
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
💎 Minify
To reduce file size ! like Pikachu size
delete newlines, spaces, comments
▼ This is normal css file (650bytes)
/*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)
* {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
// 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, webpack
💎 Javascript
🗒 avoid reading synchronously
▼ for example, there is like this html file
<!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
<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
- Read
- 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
🗒 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
(▲ 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
💎 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
<link rel="dnsprefetch"href="http://example.com">
🗒 Pre load resources
get resource before request and saves in browser cache
<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)
<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
💎 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
Top comments (0)