Thời đại ngày nay cũng đã khác xưa khi tốc độ website quyết định việc người dùng có hoặc không dừng lại tại website của bạn. Một website có tốc độ tải trang quá 10 giây coi như … chết chắc. Bởi vì người dùng thời nay khó tính và không đủ kiên nhẫn ngồi đợi website bạn được tải lên. Đó là chưa nói đến yếu tố tốc độ tải trang cũng có 1 giá trị rất quan trọng nếu bạn muốn làm SEO. Vậy làm thế nào để nâng tốc độ tải trang, khiến website bạn truy cập … vèo vèo !
Giải pháp tăng tốc độ tải trang có rất nhiều, trong đó tôi đặc biệt chú ý đến công cụ YSlow nằm trong bộ Addon của Firefox có hướng dẫn khá đầy đủ về việc làm thế nào để tối ưu hóa website của bạn. Bạn có thể tìm hiểu thêm về YSlow và cách tối ưu hóa website bằng YSlow để biết thêm. Tôi cũng xin lưu ý với các bạn rằng những hướng dẫn của YSlow có thể chỉ dành cho dân developer thôi bởi những tùy chỉnh chuyên sâu của YSlow dân làm blog sẽ mù tịt.
Y-Slow và Firebug có thể là lựa chọn không tồiNhưng xin các anh, chị và các bạn blogger đừng hoang mang, trong khuôn khổ bài viết này tôi xin hướng dẫn các bạn 3 giải pháp tương đối đơn giản để tối ưu hóa khối lượng tải xuống của website bằng cách can thiệp vào file .htaccess. Phương pháp này có vẻ đơn giản và dễ thực hiên hơn rất nhiều lần. Bạn nào xài máy chủ Window thì xin phép ngồi nhìn thôi hen !
Phụ mục
Chiêu thứ nhất: Disable Etags
Entity tags (ETags) là một cơ chế giúp máy chủ web và trình duyệt dùng xác định xem thành phần trong bộ nhớ cache của trình duyệt có phù hợp với thành phần gốc trong máy chủ hay không.Theo các qui định tối ưu hóa của Yahoo! Việc tắt Etags có thể góp phần giảm tải cho máy chủ và giảm đi một lượng băng thông đáng kể cho website.
Để tắt Etag đi, bạn chỉ cần đặt đoạn code sau vào file .htaccess:
[code] Header unset ETagFileETag None
[/code]
Chiêu thứ hai: Thêm Expires Headers
Expires Headers (tôi xin phép giữ nguyên thuật ngữ này khi trình bày) – là một dạng khai báo nhằm thông báo với trình duyệt rằng các thành phần được tải xuống (như hình ảnh, file video, file flash…) được lưu trữ trong bộ nhớ cache đến một thời gian nhất định nào đó. Việc này giúp ích cho lần truy cập tiếp theo của người dùng sẽ nhanh hơn do trình duyệt không yêu cầu tải lại các thành phần này mà nó sẽ lấy từ bộ nhớ cache. Miễn sao các thành phần này vẫn còn thời gian hiệu lực.
Để thêm expires header bạn thêm .htaccess đoạn code sau:
[code] Header set Expires "Tue, 16 Jun 2020 20:00:00 GMT"[/code]
Còn nếu bạn muốn chỉ một số thành phần được lưu trữ lại trong bộ nhớ cache chúng ta có thể thêm điều kiện như sau:
[code] <FilesMatch ".(ico|jpg|jpeg|png|gif|js|css|swf)$">Header set Expires "Tue, 16 Jun 2020 20:00:00 GMT"
</FilesMatch>
[/code]
Trong ví dụ trên, chỉ những file có đuôi (hay định dạng) .icon,.jpg, .jpeg, .png, .gif, .js, .css, .swf mới được thêm Expire Header. Các thành phần khác vẫn được gọi lại (vì mục đích làm mới trang chẳng hạn).
Ví dụ trên cho phép bạn cấu hình Expires Headers theo một điểm thời gian xác định; bạn cũng có thể cấu hình Expires Headers theo một khoảng thời gian xác định bằng cách sau:
[code] ExpiresActive OnExpiresDefault "access plus 10 years"
[/code]
Ví dụ trên cho bạn cấu hình thời gian quá hạn của cache trong vòng 10 năm dựa trên thời gian truy cập. Nếu bạn muốn cấu hình thời gian theo thời điểm hiện tại, bạn có thể sử dụng code sau:
[code] ExpiresActive OnExpiresDefault "now plus 10 years"
[/code]
Thật đơn giản phải không các bạn đọc NhanWeb ?
Ngoài ra, bạn có thể cấu hình riêng cho từng định dạng file bằng cách sau:
[code] ExpiresActive OnExpiresByType text/html "access plus 1 day"
ExpiresByType image/gif "access plus 10 years"
ExpiresByType image/jpeg "access plus 10 years"
ExpiresByType image/png "access plus 10 years"
ExpiresByType text/css "access plus 10 years"
ExpiresByType text/javascript "access plus 10 years"
ExpiresByType application/x-javascript "access plus 10 years"
[/code]
Và đây là kiểu kết hợp cả phương thức theo khoảng thời gian và theo định dạng file nếu bạn nào quan tâm:
[code] ExpiresActive OnExpiresDefault "access plus 10 years"
ExpiresByType text/html "access plus 1 day"
[/code]
Đoạn code trên sẽ cấu hình thời gian quá hạn của tất cả các file được tải xuống trong vòng 10 năm. Riêng file HTML sẽ quá hạn trong vòng 1 ngày. Điều này khá tốt cho các website, blog vì việc cập nhật thông tin là hàng ngày nhưng hình ảnh thì rất ít khi thay đổi.
Với cách này bạn có thể tiết kiệm một lượng băng thông kha khá được tiêu tốn bởi bạn đọc trung thành của bạn đấy ! NhanWeb.com cũng đang sử dụng cách này và lượng tài nguyên tiêu thụ đã giảm, tốc độ tải trang thì tăng lên rõ rệt.
Lưu ý là chiêu này đòi hỏi bạn phải mở mod mod_expires lên nhé !
Tuyệt chiêu thứ 3: Nén file
Nén file có thể bạn đã nghe nhiều; nhưng kĩ thuật nén file có lẽ là ít người biết bởi nó liên quan đến ngôn ngữ lập trình bạn sử dụng. Bằng cách sử dụng.htaccess, chúng ta cũng có thể nén file lại trước khi chuyển nó đến tay khách truy cập. Việc này chẳng những tăng tốc độ tải trang mà nó còn khiến cho băng thông của bạn thoải mái hơn.
Cách làm như sau:
[code] SetOutputFilter DEFLATE[/code]
Tương tự như trên, bạn có thể kết hợp với điều kiện nén:
[code] <FilesMatch ".(js|css|html|htm|php|xml)$">SetOutputFilter DEFLATE
</FilesMatch>
[/code]
Tương tự như chiêu thứ 2, chiêu này đòi hỏi mod mod_deflate phải được cài đặt trên server của bạn. Thông thường mod này không được cài đặt sẵn nên bạn phải yêu cầu cài đặt và config nó mới có thể sử dụng. Bạn có thể kiểm tra bằng cách tạo file phpinfo.php và yêu cầu người quản trị hệ thống cài đặt cho bạn nếu cần.
Kiểm tra như thế nào ?
Một Addon của Firefox có thể giúp bạn kiểm tra những đoạn mã tôi đã cung cấp cho bạn ở trên có hoạt động hay không đó là Firebug.Bạn chỉ cần mở tab NET trên Firebug và kiểm tra các thông số có liên quan như hình sau:
Hoặc bạn có thể cài thêm ứng dụng YSlow để thêm điểm số (score) của YSlow cung cấp cho bạn sẽ biết hiệu quả.
Cache sẽ hết hạn sau … 10 năm nữaBạn sử dụng và gặp khó khăn ? Bạn muốn góp ý cho bài viết ? HÃY BÌNH LUẬN cùng tôi !
Nguồn bài: http://www.deluxeblogtips.com/2010/06/htaccess-rules-website-performace.html
n2y says
thanks tác giả, bài viết rất hữu ích
Lão Còi says
Thank bác, cho em xin copy về blog chia sẻ với anh em nha :)
Khuyết danh says
xin phép được đăng lên website mình để lưu trữ nhé
Đoàn Quang Hưng says
Cảm ơn bác. Cái này sẽ rất hữu ích cho anh em Blogger đây
Tên vi phạm says
Nhân cho mình hỏi với những file js như của google analytics, google adsense, các counter như histats, statscounter.. thì làm thế nào để gán cái Expires Headers, vì mình test speed của một số trang thì vẫn báo lỗi Expires Headers ngắn quá với mấy file js như trên.
vd như báo dưới đây:
WARNING – (24.0 hours) – http://pagead2.googlesyndication.com/pagead/images/adchoices/en-000000.png
WARNING – (24.0 hours) – http://s0.2mdn.net/2878480/gc_bw_11_turbine_728x90_d.swf
WARNING – (24.0 hours) – http://s0.2mdn.net/879366/flashwrite_1_2.js
WARNING – (24.0 hours) – http://pagead2.googlesyndication.com/pagead/images/adchoices/en.png
WARNING – (24.0 hours) – http://pagead2.googlesyndication.com/pagead/expansion_embed.js
WARNING – (24.0 hours) – http://pagead2.googlesyndication.com/pagead/images/adchoices/icon.png
WARNING – (24.0 hours) – http://pagead2.googlesyndication.com/pagead/images/adchoices/icon.png
WARNING – (24.0 hours) – http://pagead2.googlesyndication.com/pagead/images/adchoices/en-000000.png
Nguyễn Duy Nhân says
Chào bạn ! Bạn chỉ có thể thêm Expires Headers cho những nội dung được cung cấp và lưu trữ ngay chính trên hosting của mình thôi. Còn phần các file từ các hệ thống khác thì không thể.
Thân,
Tên vi phạm says
Vậy có cách nào để tối ưu với những file từ hệ thống khác như ví dụ trên của mình không? Nếu không thì một số cái điển hình như quảng cáo google và thống kê truy cập từ 1 hãng thứ 3 là vô phương ah :(
Nguyễn Duy Nhân says
Có lẽ là vậy nhưng đừng lo: băng thông là băng thông của họ, server lưu trữ cũng là của họ. Và chúng ta không bị thiệt hại gì cả.
thatgood says
Ah vấn đề là khi mình dùng các chương trình test speed thì vẫn thấy báo lỗi làm chậm lượt tải web với mấy cái đó, nhưng thôi chắc không sao vì cũng không nhiều lắm và không quá ảnh hưởng. Thank bạn nhé!
Nguyễn Duy Nhân says
Các script bạn đưa xuống cuối trang sẽ không làm ảnh hưởng nhiều đến tốc độ tải trang.
MrBlessings says
Bài viết khá hữu ích :D :D , làm thử phát >:D:D<
Nhung says
Mình thấy trình duyệt web dùng lâu thi thoảng cũng phải xóa cache, vậy dùng phương phát thứ nhất có ổn không à?
Tuấn Anh says
Chào bạn Nhân,
Mình mới ghé qua blog này của bạn và thấy nội dung khá hữu ích. Tuy vậy, đối với bài viết này, có vẻ như bạn đang copy và dịch lại từ bài viết gốc của mình tại đây mà không hề có chú thích về nguồn gốc cũng như link ngược trở lại bài viết. Toàn bộ lời văn trong 3 tuyệt chiêu mà bạn nói, cùng với các đoạn code trong bài đều là copy 1-1 từ bài viết nguồn.
Hy vọng bạn có thể ghi rõ ràng chú thích về nguồn gốc bài viết để tôn trọng người đã viết ra bài này.
Chân thành cám ơn.
Nguyễn Duy Nhân says
Chào bạn Tuấn Anh,
Mình không nhớ chính xác nguồn nhưng hình như đúng là nguồn từ blog của bạn(mình nhớ không nhầm thì ngày xưa bạn sử dụng giao diện khác – giao diện giống NhanWeb hiện tại). Bài này mình đọc và dịch lại theo cách hiểu của mình nên cũng lằng nhằng không biết để thông tin tác giả thế nào. Trong trường hợp này, dĩ nhiên lỗi thuộc về mình vì ý tưởng cho bài viết là của bạn.
Comment này xin lỗi bạn nếu gây ra sự khó chịu cho bạn. Thật sự mình cũng không biết xử lý những tình huống này như thế nào vì bài do mình viết nhưng sử dụng ý tưởng của bạn – trường hợp giống như các báo xào bài lại của nhau.
Mình sẽ đặt backlink đến bài viết của bạn bên cạch lời xin lỗi.
Trân trọng,
Tuấn Anh says
Chào Nhân,
Cũng ko có chuyện gì lớn lắm, mình chỉ yêu cầu ghi nguồn thôi. Bạn ghi rồi thì mọi thứ ổn cả.
Chúc blog bạn phát triển.
chuhe says
hé hé, quá good :-/ =))
TVD says
Chào bạn, phần hình ảnh có nên tối ưu không, mình thấy nếu tối ưu quá ảnh bị mờ
Nguyễn Duy Nhân says
Chào bạn,
Hình ảnh theo mình là nên tối ưu vì thứ này ảnh hưởng lớn nhất đến tốc độ tải trang, đặc biệt là cho di động.
Về chất lượng hình ảnh thì khi cân đối cần xem xét và cân đối tối ưu ở mức độ nào để đảm bảo hài hòa giữa tốc độ tải trang và chất lượng hình ảnh.