Cách thêm expires header vào trang WordPress

Trong bài viết này, mình sẽ hướng dẫn cho các bạn cách thêm expires header cho hình ảnh, file CSS và JavaScript để tăng tốc trang web.

Việc thêm expires header không những không làm mất thời gian tải trang cho lần đầu tiên khách truy cập mà còn giúp thời gian tải trang giảm đi (tải trang nhanh hơn) cho lần xem, quay lại trang lần tiếp theo của người khách đó. Expires header xác định rõ một thời gian vừa đủ trong tương lai để trình duyệt không cần cố tìm nạp các hình ảnh, file CSS, JavaScript… mà chúng không thay đổi (điều này làm giảm số lượng request HTTP) và nhờ đó giúp cải thiện hiệu suất trên trang ở lượt xem tiếp theo.

Bạn có thể sử dụng plugin WordPress Far Future Expiry Header để thêm expires header một cách dễ dàng.

Nếu server của bạn là Apache (hầu hết web server là Apache) thì bạn có thể sử dụng chỉ thị ExpiresDefault để thiết lập expires date (thời hạn sử dụng) tương đối so với ngày hiện tại.

Ví dụ 1: Thiết lập expires date cho file là 2 tháng trong tương lai kể từ thời điểm hiện tại

ExpiresDefault "access plus 2 months"

Các giá trị có thể được sử dụng để xác định khoảng thời gian:

  • years (năm)
  • months (tháng)
  • weeks (tuần)
  • days (ngày)
  • hours (giờ)
  • minutes (phút)
  • seconds (giây)

Ví dụ 2:

ExpiresDefault "access plus 14 days"

Để thêm expires header vào hình ảnh, file CSS và JavaScript, hãy thêm đoạn sau vào file .htaccess của bạn:

#Expire Header
<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf)$">
ExpiresDefault "access plus 2 hours"
</FilesMatch>

hoặc

# Expire images header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000

A2592000 nghĩa là 1 tháng trong tương lai (60*60*24*30=2592000)

Lưu ý: Khi bạn sử dụng expires header cho file thì nó sẽ được lưu trữ trong trình duyệt cho đến khi hết thời hạn, do đó không sử dụng expires header trên các file thay đổi thường xuyên. Nếu bạn thay đổi hoặc cập nhật một file có expires header (ví dụ như file CSS hoặc JavaScript) thì sau đó bạn phải thay đổi tên file đó và sử dụng phiên bản đã được đổi tên của file để trình duyệt không tìm nạp file cũ.

Xóa các ETag

Theo Wikipedia, một ETag (entity tag) là một response header HTTP trả về một HTTP/1.1 phù hợp với web server để xác định sự thay đổi trong nội dung ở một URL nhất định. Khi một response HTTP mới chứa ETag giống một response HTTP cũ thì các nội dung được xem như là giống nhau và không cần tải thêm.

Các ETag được thêm vào để cung cấp một cơ chế chứng thực các thực thể linh động hơn last-modified date nhưng nếu bạn không tận dụng lợi thế của mô hình xác thực linh động mà ETag cung cấp thì tốt hơn hết hãy xóa bỏ hoàn toàn các ETag. Việc xóa các ETag sẽ làm giảm kích thước của các header HTTP trong response và request tiếp theo, qua đó giúp cải thiện hiệu suất trang web.

Thêm dòng sau vào file .htaccess của bạn để xóa các ETag:

FileETag none

Vài chỉnh sửa có thể giúp cải thiện đáng kể hiệu suất trang web của bạn mặc dù những chỉnh sửa đó khá nhỏ và việc áp dụng cũng không làm mất nhiều thời gian. Chỉ với một vài chỉnh sửa, mình có thể thấy tốc độ tải trang của mình đã được cải thiện đến 20%, trang chủ của mình lúc trước mất khoảng 5 giây để tải nhưng sau đó đã giảm xuống còn khoảng 3 giây mà thôi. Dưới đây là ảnh chụp màn hình của YSlow:

home_page_load_speed


Leave a Reply

Your email address will not be published. Required fields are marked *

×