Categories Cache Trình duyệt

Tận dụng cache trình duyệt: Kỹ thuật tăng tốc website đơn giản, hiệu quả

tận dụng cache trình duyệt

#1. Cache phía trình duyệt là gì?

  • Trình duyệt lưu giữ các file tài nguyên của trang web trong bộ nhớ cục bộ của máy tính / thiết bị di động khi người dùng ghé thăm một trang web.
  • “Tận dụng” bộ nhớ đệm của trình duyệt (browser cache) là khi người quản trị web đưa ra các hướng dẫn cụ thể cho trình duyệt biết nên xử lý các tài nguyên trên website của họ như thế nào.

Khi một trình duyệt web hiển thị trang web của bạn, nó sẽ tải một số thứ như logo, file CSS và các tài nguyên khác.

bộ nhớ đệm trình duyệt

Điều mà bộ nhớ đệm trình duyệt làm là “ghi nhớ” các tài nguyên mà trình duyệt đã từng tải về trước đó. Khi người duyệt web ghé thăm một trang khác trên website của bạn, thì logo, file CSS, vân vân không cần phải tải lại lần nữa, bởi vì trình duyệt đã “ghi nhớ” chúng rồi (lưu trữ). Đây là lý do lần truy cập đầu tiên vào một trang web nào đó thường chậm hơn đáng kể so với các lần truy cập tiếp theo.

Khi bạn tận dụng bộ nhớ đệm của trình duyệt, các tài nguyên của trang web sẽ được lưu giữ trong bộ nhớ đệm. Các trang web của bạn sẽ được tải nhanh hơn rất nhiều khi khách tiếp tục truy cập website, vì các trang cùng chia sẻ một số tài nguyên hệt nhau.

Nếu bạn đã kiểm tra tốc độ của website (ví dụ bằng Pingdom) và thấy là trang vẫn chưa tận dụng bộ nhớ đệm trình duyệt thì bài viết này sẽ hướng dẫn bạn cách làm chi tiết.

P/S: Bạn có thể kiểm tra vấn đề bộ nhớ đệm trình duyệt bằng các công cụ khác như Google PageSpeed Insights.


#2. Tận dụng bộ nhớ đệm trình duyệt như thế nào

  1. Thay đổi tiêu đề (header) yêu cầu các tài nguyên của bạn để tận dụng bộ nhớ đệm;
  2. Tối ưu hóa chiến lược cache (bộ nhớ đệm) của bạn.

#3. Thay đổi yêu cầu tiêu đề tài nguyên của bạn để sử dụng bộ nhớ đệm

Với đa số mọi người, cách để bật bộ nhớ đệm trình duyệt là thêm một số đoạn mã vào file gọi là .htaccess trên máy chủ web.

Bạn có thể làm điều đó thông qua file manger (ví dụ như FileZilla hoặc bất kỳ công cụ nào để bạn thêm, tải file) trên hosting của bạn.

P/S: nếu bạn sử dụng WordPress, bạn có thể tham khảo bài viết này để biết cách chỉnh sửa, và hạn chế lỗi khi làm việc với .htaccess:

File .htaccess điều khiển rất nhiều thứ quan trọng trên website của bạn, do vậy bạn cần tìm hiểu một chút về nó trước khi chỉnh sửa. Nếu thao tác lỗi trên .htaccess, trang web của bạn sẽ không truy cập được!


#4. Thiết lập bộ nhớ đệm bằng .htaccess

Đoạn mã bên dưới nói với các trình duyệt rằng nó nên lưu trữ vào bộ nhớ đệm những tài nguyên nào và “nhớ” chúng trong khoảng thời gian bao lâu. Nó phải được thêm vào ở vị trí trên cùng của file .htaccess

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

Lưu file .htaccess và tải lại trang web của bạn.


#5. Làm thế nào để thiết lập thời gian lưu trữ bộ nhớ đệm khác nhau cho các tệp khác nhau

Bạn có thể thấy trong đoạn mã trên các khoảng thời gian như “1 year/1 năm” hoặc “1 month/1 tháng”, và thông tin này được liên kết với các định dạng file, ví dụ đoạn mã trên nói rằng file định dạng .jpg (ảnh) phải được lưu trữ trong bộ nhớ đệm trong vòng một năm.

Nếu bạn muốn thay đổi điều đó, chẳng hạn bạn muốn ảnh chỉ được lưu trữ trong một tháng thôi, thì cách đơn giản là thay thế “1 year” bằng “1 month”. Các giá trị trong đoạn mã trên đã được tối ưu hóa khá ổn và thích hợp với hầu hết các trang web và blog.


#6. Các phương thức cache thay thế (vẫn sử dụng .htaccess)

Phương thức trên được gọi là “Expires/Hết hạn” và nó hoạt động được cho hầu hết website sử dụng .htaccess, và những ai mới làm quen với bộ nhớ đệm trình duyệt thường sử dụng cách này.

Sau khi bạn đã thành thạo về bộ nhớ đệm, bạn có thể muốn thử Cache-Control, một phương thức cache cho phép chúng ta có nhiều tùy chọn hơn (và nó cũng là cách tiếp cận tốt hơn, hiện đại hơn).

Ngoài ra cũng có thể xảy ra trường hợp phương thức expires không làm việc được trên máy chủ của bạn, trong trường hợp đó bạn có thể muốn thử phương pháp caching bằng Cache-Control.


#7. Cache-Control

Cache-Control cho phép chúng ta có nhiều điều chỉnh hơn một chút với bộ nhớ đệm trình duyệt và nhiều người còn thấy dùng nó dễ dàng hơn.

Ví dụ về cách dùng trong file .htaccess:

# 1 Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

Đoạn mã trên thiết lập tiêu đề kiểm soát bộ nhớ đệm (cache control) phụ thuộc vào loại file.


#8. Cách cache-control làm việc

Chúng ta cùng phân tích từng dòng code:

# 1 Month for most static assets

Dòng trên được dùng cho mục đích chú thích. Nó không làm bất cứ điều gì cả, ngoại trừ việc chú thích cho chúng ta biết đoạn mã ngay bên dưới dùng để làm gì. File .htaccess bỏ qua những dòng bắt đầu bằng ký tự #. Các chú thích được khuyến khích dùng vì bạn có thể có nhiều đoạn mã khác nhau trên file khi mà kiến thức hoặc nhu cầu của bạn tăng thêm.

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">

Dòng mã trên nói rằng “nếu file là một trong những file này, thì chúng ta sẽ phải làm điều gì đó với nó…”

Phần quan trọng của dòng trên cần phải để ý là có các định dạng file khác nhau được liệt kê (css, js, jpeg, png, vân vân) và các hướng dẫn lưu trữ đệm theo sau sẽ được áp dụng cho những định dạng file đó.

Thí dụ nếu bạn không muốn file định dạng jpg được lưu trữ vào bộ nhớ đệm cho khoảng thời gian này bạn có thể xóa “jpg” khỏi dòng, hoặc nếu bạn muốn thêm html vào đây, bạn chỉ cần thêm “html” vào dòng này là xong.

Header set Cache-Control "max-age=2592000, public"

Dòng trên là nơi mà các tiêu đề thực sự được chèn và các giá trị được cung cấp.

  • Phần “Header set Cache-Control” được dùng để thiết lập header/tiêu đề;
  • Phần “max-age=2592000” được dùng để chỉ ra khoảng thời gian nó nên được lưu trữ (tính theo giây). Trong trường hợp này chúng ta lưu bộ nhớ đệm trong vòng một tháng – cái có giá trị tương ứng là “2592000” giây;
  • Phần “public” để nói rằng nó là công khai (điều này tốt trong trường hợp bạn muốn nó được cache).
</filesMatch>

Dòng trên là lệnh đóng và kết thúc khối mã.


#9. Các vấn đề thường gặp với bộ nhớ đệm

Nếu bạn thiết lập bộ nhớ đệm cho html và ảnh trong vòng một năm hoặc lâu hơn, thì bạn cần phải lưu ý rằng điều này có nghĩa là nếu bạn thực hiện thay đổi cho trang của bạn nó có thể không được thấy bởi người dùng.

Điều đó xảy ra là vì nếu người dùng từng xem trang đó, thì khi họ vào lại, trình duyệt sẽ đi tìm trang cũ đang cache chứ không phải trang mới nhất mà bạn mới cập nhật. Nếu bạn có file mà bạn thi thoảng tinh chỉnh (ví dụ một file CSS nào đấy), bạn có thể khắc phục vấn đề cache bằng cách sử dụng URL fingerprinting.


#10. URL fingerprinting

Nếu bạn muốn trình duyệt lấy file tài nguyên mới nhất (chứ không phải lấy từ dữ liệu lưu trong bộ nhớ đệm) bạn có thể sử dụng tên file duy nhất cho nó.

Lấy ví dụ, nếu file css của bạn được đặt tên là “main.css”, bạn có thể đổi tên nó thành “main_1.css”. Lần tới khi bạn chỉnh sửa nó, bạn có thể đổi tên lần nữa thành “main_2.css”.

Điều đó giúp file mới cập nhật sẽ được tải (chứ không phải là file bị cache) và rất hữu dụng cho những file thường xuyên thay đổi.

Lời bàn của người dịch: đây là cách mà các plugin, theme vẫn hay làm, khi họ cập nhật lên phiên bản mới, các tên file sẽ được thêm các con số đằng sau.

Vài lời từ Kiến càng: nếu bạn dùng webserver OpenLiteSpeed kết hợp với plugin LiteSpeed cache, việc điều chỉnh cache trình duyệt sẽ không thành công qua giao diện của plugin cache này, bạn có thể tham khảo bài viết sau để khắc phục vấn đề đó.

(Dịch từ bài viết: Leverage browser caching- Tác giả: Patrick Sexton – Website: Varvy)

Back to Top