Lộ trình Hi?u su?t giao di?n ng??i dng

Hướng dẫn từng bước để trở thành một nhà phát triển Nhà phát triển Hi?u su?t giao di?n ng??i dng.

Quay lại trang chủ

Chú giải

Đề xuất
Lựa chọn thay thế
Tùy chọn

1HTML

HTML thu g?n xa bnh lu?n v kho?ng tr?ng.
T?i tr??c URL khi c th?.
Gi?m thi?u s? l??ng iframe.

2CSS

CSS thu g?n xa bnh lu?n, kho?ng tr?ng, v.v.
G?p CSS vo m?t t?p duy nh?t.
Lm cho cc t?p CSS khng ch?n.
Xa CSS khng s? d?ng.
Chn CSS quan tr?ng vo dng (above-the-fold).
Trnh CSS nhng / n?i tuy?n.
Phn tch ?? ph?c t?p c?a stylesheet.

3Phng ch?

S? d?ng ??nh d?ng phng ch? WOFF2.
S? d?ng preconnect ?? t?i phng ch? nhanh h?n.
Gi? kch th??c phng ch? web d??i 300 KB.
Ng?n ch?n Flash of Invisible Text (FOIT).

4Hnh ?nh

Nn hnh ?nh / gi? s? l??ng hnh ?nh ? m?c th?p.
Ch?n ??nh d?ng hnh ?nh ph h?p.
?u tin hnh ?nh vector h?n l bitmap.
??t thu?c tnh width & height trn hnh ?nh (b?o ton t? l?).
Trnh s? d?ng hnh ?nh Base64.
T?i ch?m hnh ?nh ngoi mn hnh.
Ph?c v? hnh ?nh c kch th??c g?n v?i kch th??c hi?n th?.

5JavaScript

Thu g?n JavaScript c?a b?n.
Trnh nhi?u ?o?n m <script> n?i tuy?n.
JavaScript khng ch?n: s? d?ng async / defer.
Gi? cc dependency ???c c?p nh?t.
Gim st kch th??c dependency.
Ki?m tra cc v?n ?? v? hi?u su?t trong cc t?p JS.
S? d?ng Service Workers ?? l?u ??m & tc v? n?ng.

6M?ng & Phn ph?i

S? d?ng CDN cho ti s?n.
S? d?ng HTTPS trn trang web c?a b?n.
Gi? tr?ng l??ng trang < 1500 KB (l t??ng < 500 KB).
Gi? th?i gian t?i trang < 3 giy.
Gi? Time To First Byte (TTFB) < 1.3 giy.
Gi?m thi?u cc yu c?u HTTP.
Ph?c v? cc t?p t? cng m?t giao th?c.
Trnh cc yu c?u khng th? truy c?p (404).
??t cc tiu ?? b? nh? ??m HTTP ph h?p.
B?t nn GZIP / Brotli.

7Cookies

Kch th??c cookie < 4096 byte.
S? l??ng cookie < 20.

8Cng c? hi?u su?t

PageSpeed Insights.
Lighthouse.
WebPageTest.
Chrome DevTools.
Bundlephobia.
Squoosh.app (t?i ?u ha hnh ?nh).

9Ti nguyn

H??ng d?n dnh ring cho framework.
Cc bi ni chuy?n / h??ng d?n ???c ?? xu?t.
Cc l? trnh lin quan