Thủ thuật giúp tăng hiệu suất website của bạn
M t s th thu t giúp tăng hi u su t website c a b nộ ố ủ ậ ệ ấ ủ ạ
I, L i m đ uờ ở ầ
Là m t Developer, không ai trong chúng ta đ c b qua vi c tăng ộ ượ ỏ ệ
performance cho ng d ng, website,… mà mình t o ra. Tuy nhiên, khi m i ứ ụ ạ ớ
đi làm, hay còn g i là nh ng junior developer, chúng ta th ng ch ọ ữ ườ ỉ
c nầ “ch y đ c là đ c”ạ ượ ượ . Đi u này t o nên nh ng app, website có hi u ề ạ ữ ệ
năng c c kỳ t , mà ph n l n do developer thi u kinh nghi m. D i đây, ự ệ ầ ớ ế ệ ướ
mình mu n gi i thi u m t s th thu t tuy khá nh , d th c hi n nh ng ố ớ ệ ộ ố ủ ậ ỏ ễ ự ệ ư
l i c i thi n đáng k hi u su t cho website c a b n.ạ ả ệ ể ệ ấ ủ ạ
(Hình: m t website siêu đ n gi n nh ng có t c đ load nh rùa bò)ộ ơ ả ư ố ộ ư
II, M t s th thu tộ ố ủ ậ
1, Luôn luôn minimize các file js, css khi đ a lên productionư
Các file js, css n u minimize môi tr ng develop thì s ch ng có ý nghĩa ế ở ườ ẽ ẳ
gì, cũng nh bi n nó thành nh ng file không-th -đ c. Tuy nhiên đ i v i ư ế ữ ể ọ ố ớ
môi tr ng production thì l i khác ! ườ ạ
môi tr ng production, y u t t c đ luôn đ c u tiên, v y nên kích Ở ườ ế ố ố ộ ượ ư ậ
th c c a các file mà client s t i v cũng c n càng nh càng t t. V y nên ướ ủ ẽ ả ề ầ ỏ ố ậ
đ i v i các file js, css, vi c b các d u space, xu ng dòng nh m gi m kích ố ớ ệ ỏ ấ ố ằ ả
th c c a file là đi u luôn ph i làm khi đ a chúng lên production. B i vì ướ ủ ề ả ư ở
khi production, s ch ng có ai c n đ c nh ng file này ngoài máy tính, mà ở ẽ ẳ ầ ọ ữ
máy tính thì ch ng quan tâm đ n tính d đ c c a code. V y nên b n có b ẳ ế ễ ọ ủ ậ ạ ỏ
toàn b các space cũng nh xu ng dòng thì các câu l nh cũng đ c th c ộ ư ố ệ ượ ự
hi n y nh v y (đ i v i js và css thôi nhé).ệ ư ậ ố ớ
Hãy luôn luôn minimize các file js và css
V i câu h i làm th nào đ minimize các file js và css, thì b n có th ớ ỏ ế ể ạ ể
google, trong vòng 1 tích t c nó có th đ a ta đ n m t vài đ a ch sau đây:ắ ể ư ế ộ ị ỉ
https://javascript-minifier.com/
https://www.minifier.org/
https://cssminifier.com/
Đây đ u là các trang minimize js, css r t t t, b n ch c n copy n i dung ề ấ ố ạ ỉ ầ ộ
code c a mình và dán lên đây, vi c còn l i nh ng trang web kia s x lý ủ ệ ạ ữ ẽ ử
cho b n, r t ti n l i !ạ ấ ệ ợ
2, Gi m kích th c nhả ướ ả
Nh ng b c nh có th làm website c a b n tr nên c c kỳ n ng n , đ c ữ ứ ả ể ủ ạ ở ự ặ ề ặ
bi t n u nh website c a b n làm v th ng m i đi n t , m ng xã h i,… ệ ế ư ủ ạ ề ươ ạ ệ ử ạ ộ
v i l ng data v nh c c kỳ l n. N u không x lý nh tr c khi upload ớ ượ ề ả ự ớ ế ử ả ướ
lên, nó s khi n b n c c kỳ đau đ u.ẽ ế ạ ự ầ
1. Hãy s d ngử ụ jpeg-optimizer và tiny-png đ nén nh c a b n tr c ể ả ủ ạ ướ
khi upload mà không làm nh h ng đ n ch t l ng hình nhả ưở ế ấ ượ ả
2. Hãy xóa b metadata c a b c nh mà b n upload lên website. Tin tôi ỏ ủ ứ ả ạ
đi, ngoài v n đ performance ra, thì b n cũng không mu n upload ấ ề ạ ố
metadata c a m t b c nh lên internet đâu ! Trong m i b c nh, k ủ ộ ứ ả ỗ ứ ả ể
c jpg hay png,… cũng đ u có m t l ng thông tin nh đi kèm, nó ả ề ộ ượ ỏ
l u nh ng thông tin nh : ngày ch p, lo i máy ch p, th m chí là đ a ư ữ ư ụ ạ ụ ậ ị
đi m ch p,… nh ng thông tin này đ c g i là metadata c a b c nh.ể ụ ữ ượ ọ ủ ứ ả
Lo i b l ng thông tin này đi s gi m đ c m t l ng kha khá dataạ ỏ ượ ẽ ả ượ ộ ượ
mà client ph i t i v đ i v i nh ng website ch a nhi u nh. Ngoài ả ả ề ố ớ ữ ứ ề ả
ra, nó còn b o m t thông tin c a ng i ch p b c nh. Đ xóa ả ậ ủ ườ ụ ứ ả ể
metadata c a nh, b n có th dùng toolủ ả ạ ể verexif
3. Hi n th size khác nhau đ i v i các kích c màn hình khác nhau:ể ị ố ớ ỡ
Ngày nay, v i s phát tri n c a smartphone, thì vi c ph i hi n th trang ớ ự ể ủ ệ ả ể ị
web trên các màn hình v i kích c khác nhau là chuy n th ng ngày. V y ớ ỡ ệ ườ ậ
b n hãy th nh l i, xem đã bao gi mình render m t b c nh v i kích c ạ ử ớ ạ ờ ộ ứ ả ớ ỡ
l n trên các smartphone ch a ? Và r ng v i m t màn hình smartphone bé ớ ư ằ ớ ộ
nh v y, vi c hi n th m t b c nh l n, n ng li u có h p lý ? V y nên hãyư ậ ệ ể ị ộ ứ ả ớ ặ ệ ợ ậ
nh , luôn hi n th kích c nh phù h p v i kích th c màn hình.ớ ể ị ỡ ả ợ ớ ướ
V y làm th nào đ hi n th kích c nh phù h p v i kích th c màn ậ ế ể ể ị ỡ ả ợ ớ ướ
hình ? Trong CSS3, v i s xu t hi n c a Media Queries, m i vi c tr nên ớ ự ấ ệ ủ ọ ệ ở
th t đ n gi n.ậ ơ ả
B n có th tùy ch nh kích c , ho c th m trí là đ i nh khác đ i v i t ng ạ ể ỉ ỡ ặ ậ ổ ả ố ớ ừ
lo i màn hình sao cho phù h p v i yêu c u đ t ra.ạ ợ ớ ầ ặ
4. Hãy s d ng các CDN đ ch a các file css, js, nh c a b n. B n đâu ử ụ ể ứ ả ủ ạ ạ
th bi t r ng user c a mình s truy c p website t đâu, li u r ng ể ế ằ ủ ẽ ậ ừ ệ ằ
server b n đ t Vi t Nam, khi khách hàng truy c p website c a b n ạ ặ ở ệ ậ ủ ạ
t Nam Phi, website s đ t đ c t c đ b n mong mu n ? V y nên, ừ ẽ ạ ượ ố ộ ạ ố ậ
hãy luôn luôn s d ng các CDN, h s lo m i th cho b n, không chử ụ ọ ẽ ọ ứ ạ ỉ
v kho ng cách đ a lý, m t s d ch v còn minimize file giúp b n.ề ả ị ộ ố ị ụ ạ
3, Gi m t ng s file mà client ph i nh nả ổ ố ả ậ
Đi u này không có nghĩa là b n vi t ít code đi, hay ph i g p code c a các ề ạ ế ả ộ ủ
b n thành 1 file trên môi tr ng develop. Tuy nhiên, các b n s c n ph i ạ ườ ạ ẽ ầ ả
g p code c a các b n l i thànhộ ủ ạ ạ duy nh t 1 fileấ cho js, css (t t nhiên nh thìấ ả
không ph i g p đâu nhé).ả ộ
Hãy th t ng t ng vi c ng i dùng truy c p vào website c a b n cũng ử ưở ượ ệ ườ ậ ủ ạ
nh vi c h đ t mua m t món hàng. N u nh các b n ship t ng b ph n ư ệ ọ ặ ộ ế ư ạ ừ ộ ậ
c a món hàng đó m t, th i gian v n chuy n s tăng h n nhi u so v i vi c ủ ộ ờ ậ ể ẽ ơ ề ớ ệ
b n v n chuy n 1 l n toàn b món hàng đó luôn. Vi c g i các file html, ạ ậ ể ầ ộ ệ ử
css, js t server đ n client cũng v y, vi c b n tách các file ra s tăng th i ừ ế ậ ệ ạ ẽ ờ
gian load đ i v i website c a b n. Ch a k đ n vi c trong giao th c http, ố ớ ủ ạ ư ể ế ệ ứ
m i client ch có th t o t i đa 5 k t n i đ ng th i đ n máy ch , v y nên ỗ ỉ ể ạ ố ế ố ồ ờ ế ủ ậ
vi c g i nhi u file khác nhau là không nên.ệ ử ề
Đ g p các file js, css l i, hi n t i có r t nhi u công c h tr công vi c ể ộ ạ ệ ạ ấ ề ụ ỗ ợ ệ
này. B n có th tham kh o qua vạ ể ả ề webpack, nó có r t nhi u công d ng hayấ ề ụ
ho mà m t web developer c n ph i bi t.ộ ầ ả ế
III, L i k tờ ế
Trên đây mình đã t ng h p m t s cách th c siêu đ n gi n b ng kinh ổ ợ ộ ố ứ ơ ả ằ
nghi m c a mình đ tăng performance cho các website. Hy v ng bài vi t cóệ ủ ể ọ ế
ích cho các b n.ạ
có thể bạn quan tâm
CÁCH THỨC GIÚP TĂNG LƯỢNG TRUY CẬP WEBSITE
3
694
295
Marketing, bán hàng
3
(New)
Một số phần mềm tối ưu RAM, tăng cường hiệu suất máy tính tốt nhất
5
869
232
Cơ sở dữ liệu
5
(New)
Tiểu luận: Tìm hiểu về lãi suất ngân hàng và sự ảnh hưởng của lãi suất...
24
1.182
364
Kinh tế quản lý
24
(New)
Sử dụng kỹ thuật PCR-RFLP để xác định các kiểu gen prolactin receptor...
60
727
305
Kỹ thuật
60
(New)
Tất tần tật thủ thuật bảo vệ website Wordpress
10
970
336
An ninh, bảo mật
10
(New)
Báo cáo: Giới thiệu kỹ thuật điều chế OFDM, FDMA đơn sóng mang, MIMO S...
32
1.141
280
Kỹ thuật
32
(New)
Những website giúp bạn thư giãn sau thời gian làm việc vát vả
6
1.436
268
Tài liệu CNTT khác
6
(New)
THỰC PHẨM GIÚP TRẺ TĂNG CÂN
5
1.017
245
Mẹ và bé
5
(New)
thông tin tài liệu
Là một Developer, không ai trong chúng ta được bỏ qua việc tăng performance cho ứng dụng, website,… mà mình tạo ra. Tuy nhiên, khi mới đi làm, hay còn gọi là những junior developer, chúng ta thường chỉ cần “chạy được là được”. Điều này tạo nên những app, website có hiệu năng cực kỳ tệ, mà phần lớn do developer thiếu kinh nghiệm. Dưới đây, mình muốn giới thiệu một số thủ thuật tuy khá nhỏ, dễ thực hiện nhưng lại cải thiện đáng kể hiệu suất cho website của bạn.
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!
×
