Một vài công nghệ tối ưu performance cho website
M t vài công ngh t i u performance cho websiteộ ệ ố ư
Website r t quan tr ng đ b n có th ti p c n, đ a thông tin đ n v i ấ ọ ể ạ ể ế ậ ư ế ớ
ng i truy c p, nó là b m t c a s n ph m, d ch v , công ty c a b n. M tườ ậ ộ ặ ủ ả ẩ ị ụ ủ ạ ộ
website t t là m t website có t c đ t i trang nhanh, theo th ng kê,ố ộ ố ộ ả ố ng i ườ
dùng mong mu n có th nhìn th y n i dung trang web trong kho ng th i ố ể ấ ộ ả ờ
gian 2 giây tính t lúc gõ đ a ch truy c p (URL) vào browser. V y làm th ừ ị ỉ ậ ậ ế
nào mà các trang web th ng m i đi n t , m ng xã h i v i n i dung trang ươ ạ ệ ử ạ ộ ớ ộ
web v a nhi u nh, v a nhi u ch l i có th ph c v t t user v i kho ng ừ ề ả ừ ề ữ ạ ể ụ ụ ố ớ ả
2 giây? Trên th c t có r t nhi u cách đ t i u performance cho website, ự ế ấ ề ể ố ư
bài vi t này ch cung c p m t vài cách đ th c hi n đi u đó.ế ỉ ấ ộ ể ự ệ ề
1. Gi m HTTP request.ả
Thông th ng càng nhi u HTTP request càng khi n website c a b n load ườ ề ế ủ ạ
lâu h n. Trình duy t cũng đ c c u hình đ h n ch s l ng các request ơ ệ ượ ấ ể ạ ế ố ượ
đ ng th i đ n 1 host. Đ tránh bottleneck, s l ng thành ph n c a t ng ồ ờ ế ể ố ượ ầ ủ ừ
trang đ c gi m xu ng b ng cách h p nh t tài nguyên theo đó các file nh ượ ả ố ằ ợ ấ ỏ
h n, ch ng h n nh v i các icon, chúng s đ c nhóm l i v i nhau thành 1ơ ẳ ạ ư ớ ẽ ượ ạ ớ
file. Ph ng pháp này đã và đang đ c s d ng r t r ng rãi, đ c th n i ươ ượ ử ụ ấ ộ ể ụ ể ộ
dung, mình s đ a ra m t vài tip cho các b n tham kh o.ẽ ư ộ ạ ả
1.1 Inline, internal CSS/JS.
N u b n đ ý, h u h t các trang web l n đ u có s d ng inline/internal ế ạ ể ầ ế ớ ề ử ụ
css/js, đi u này đôi khi đi ng c l i v i quy t c khi code ph i không? ề ượ ạ ớ ắ ả
Nh ng l i ích c a vi c s d ng inline/internal css/js l i mang l i r t l n. ư ợ ủ ệ ử ụ ạ ạ ấ ớ
Ví d v i Goole, h s d ng inline/internal CSS/JS cho các ch c năng nh ,ụ ớ ọ ử ụ ứ ỏ
đi u này th c s h u ích khi m i giây Google có hàng tri u l t truy c p ề ự ự ữ ỗ ệ ượ ậ
đ n website c a h .ế ủ ọ
1.2 S d ng webpack.ử ụ
Why webpack? TL;DR: webpack là công c bundle (gói) các tài s n ụ ả
(assets) c a website l i. webpack quan tâm r t nhi u đ n performance, ủ ạ ấ ề ế
webpack luôn tìm cách thêm vào ho c nâng cao các ch c năng nh async ặ ứ ư
load chunk file ho c prefetch file đ h n ch loading time và tăng ặ ể ạ ế
performance.
1.3 S d ng 1 file nh ch a các icon.ử ụ ả ứ
Thay b ng vi c load t ng icon t web server, b n có th g p các icon l i ằ ệ ừ ừ ạ ể ộ ạ
thành 1 file png to và s d ng cssử ụ background-position đ hi n th icon mà ể ể ị
mình mong mu n.ố
2. T i u hóa web cache.ố ư
T i u hóa web cache giúp gi m t i cho máy ch v băng thông và đ tr . ố ư ả ả ủ ề ộ ễ
Đ i v i gà m v web server thì vi c s d ng CDN là cách đ n gi n và ố ớ ờ ề ệ ử ụ ơ ả
hi u qu cũng nh đ t n ch t xám nh tệ ả ư ỡ ố ấ ấ . Mình cũng chia s m t vài kinh ẻ ộ
nghi m v optimize web cache trong quá trình làm vi c c a mình.ệ ề ệ ủ
Đ nh nghĩa các URL sao cho thích h p nh tị ợ ấ : cách này l i d ng ợ ụ
browser caching url.
S d ng ETagử ụ : ETag là 1 HTTP response header, nó nh 1 ID cho 1 ư
phiên b n c th c a 1 resource, giúp caching chính xác h n.ả ụ ể ủ ơ
S d ng nginxử ụ : web server nhanh nh t, open source, nhi u config ấ ề
m u cho b n vo c, đ c s d ng nhi u b i các công ty và d ch v ẫ ạ ọ ượ ử ụ ề ở ị ụ
l n nh Dropbox, Netflix.ớ ư
Đ nh nghĩa các HTTP header phù h pị ợ : như Expires, Max-
Age, Cache-control, ...
3. T i u hóa webfont.ố ư
Webfont là m t t p các nét, m i nét là m t vector bi u di n ký t hay là ký ộ ậ ỗ ộ ể ễ ự
hi u. Vì v y font càng ph c t p thì file font size càng l n, vi c load font ệ ậ ứ ạ ớ ệ
file s làm t c đ t i trang tăng lên r t nhi u. L i khuyên là:ẽ ố ộ ả ấ ề ờ
b n không nên s d ng quá nhi u font trên 1 trang.ạ ử ụ ề
n u có th , hãy nén font có đ nh d ng EOT ho c TTF sang GZIP ế ể ị ạ ặ
(dùng webpack đ c).ượ
customize font loading và font rendering s d ngử ụ <link
rel="preload">, font-displayho c Font Loading API.ặ
4. T i u Database.ố ư
B n nên ghi lòng t c d ph ng pháp này tr c khi quy t đ nh t o thêm 1 ạ ạ ạ ươ ướ ế ị ạ
tr ng/b ng nào trong database.ườ ả
có thể bạn quan tâm
ỨNG DỤNG DRUPAL – XÂY DỰNG WEBSITE KHOA CÔNG NGHỆ THÔNG TIN
94
612
301
Kỹ thuật
94
(New)
Nghiên cứu tìm hiểu công nghệ MPLS để tiến tới thiết kế mạng ATM MPLS...
100
957
356
Kỹ thuật
100
(New)
Công nghệ bùn hạt hiếu khí khi ứng dụng ở Việt Nam và nghiên cứu để cô...
68
672
291
Kinh tế quản lý
68
(New)
Luận văn: Những cái nhìn tổng quan về công nghệ tác tử về công nghệ Ag...
75
762
299
Kỹ thuật
75
(New)
Điểm lại xu hướng phát triển công nghệ máy ảnh và tái tập trung vào cô...
18
915
921
Kỹ thuật
18
(New)
Luận văn kỹ sư công nghệ: Khô cá lóc ăn liền- thị trường cung ứng và c...
61
921
1.334
Kinh tế - Thương mại
61
(New)
NGHIÊN CỨU CÔNG NGHỆ TÁC TỬ VÀ CÔNG NGHỆ PHẦN MỀM HƯỚNG TÁC TỬ
76
743
510
Kỹ thuật
76
(New)
Tìm hiểu Alexa - công cụ kiểm tra thứ hạng website
6
638
271
Tài liệu CNTT khác
6
(New)
thông tin tài liệu
Website rất quan trọng để bạn có thể tiếp cận, đưa thông tin đến với người truy cập, nó là bộ mặt của sản phẩm, dịch vụ, công ty của bạn. Một website tốt là một website có tốc độ tải trang nhanh, theo thống kê, người dùng mong muốn có thể nhìn thấy nội dung trang web trong khoảng thời gian 2 giây tính từ lúc gõ địa chỉ truy cập (URL) vào browser
Mở rộng để xem thêm
từ khóa liên quan
tài liệu mới trong mục này
tài liệu hot trong mục này
tài liệu giúp tôi
Nếu bạn không tìm thấy tài liệu mình cần có thể gửi yêu cầu ở đây để chúng tôi tìm giúp bạn!
×
