DEV Community

Kaziu
Kaziu

Posted on

 

👀 Everyone likes fast website! How? "Frontend performance tips"

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

  • 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?
    icon note

  • 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!
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

▼ 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;}
Enter fullscreen mode Exit fullscreen mode

💎 CSS

🗒 avoid @import

▼ css can import in css file like this

// style.css
@import url('./another-style.css')

body {
  background-color: black;
}
Enter fullscreen mode Exit fullscreen mode

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>
  ...
Enter fullscreen mode Exit fullscreen mode

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 ??
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

🗒 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
(▲ 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
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">
Enter fullscreen mode Exit fullscreen mode

🗒 Pre load resources

get resource before request and saves in browser cache

<link rel="prefetch"href="./image.gif">
Enter fullscreen mode Exit fullscreen mode

🗒 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">
Enter fullscreen mode Exit fullscreen mode

💎 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

💎 Browser cache

⭐ Setting on server

▼ four types of browser cache

<strong cache>
- Expires header
- Cache-control header

<weak cache>
- Last-Modified header
- ETag header
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

(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
http2

Top comments (0)

Advice For Junior Developers

Advice from a career of 15+ years for new and beginner developers just getting started on their journey.