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

Tận dụng bộ nhớ đệm trình duyệt để tăng tốc website

Cùng tìm hiểu kỹ thuật tăng tốc website đơn giản, hiệu quả giúp cải thiện điểm Google Pagespeed Insights, GTmetrix và WebPageTest.

Bộ nhớ đệm trình duyệt là gì?

  • Bộ nhớ đệm trình duyệt (Browser caching) lưu trữ các file tài nguyên trang web trên máy tính cục bộ (Local computer) khi người dùng truy cập một trang web.
  • Tận dụng bộ nhớ đệm của trình duyệt (Leverage browser caching) là khi webmaster hướng dẫn trình duyệt cách xử lý tài nguyên của trang web.

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

Nói theo một cách khác, bộ nhớ đệm của trình duyệt có nhiệm vụ ghi nhớ các tài nguyên mà trình duyệt đã tải trước đó. Khi khách truy cập vào một trang khác trên trang web của bạn thì logo, file CSS, JavaScript… của bạn không cần phải tải lại, vì trình duyệt đã “ghi nhớ” (lưu) chúng. Đây là lý do mà lượt xem đầu tiên của một trang web sẽ mất nhiều thời gian hơn lần truy cập sau.

Khi bạn tận dụng bộ nhớ đệm của trình duyệt, các file tài nguyên của bạn sẽ được lưu trữ trong bộ đệm của trình duyệt. Các trang sẽ tải nhanh hơn 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 GTmetrix hay Google PageSpeed Insights) 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.

Làm thế nào để tận dụng bộ nhớ đệm của trình duyệt

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

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

Đối với hầu hết mọi người, cách để kích hoạt bộ nhớ đệm là thêm một số mã vào file .htaccess

File .htaccess kiểm soát các thông tin cấu hình quan trọng cho website hoạt động. Vì vậy, bạn nên tìm hiểu về cách thức hoạt động của file .htaccess trước khi bắt đầu.

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.

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á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.

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 những ai 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.

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.

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 sử 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.

Cache-Control hoạt động như thế nào

Hãy cùng phân tích từng dòng mã vừa được ví dụ bên trên.

# 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 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ã.

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.

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.

Phương pháp lưu vào bộ nhớ đệm

Điều quan trọng là phải thiết lập Expires (hoặc Cache-Control max-age) và Last-Modified (hoặc ETag) cho tất cả các tài nguyên có thể lưu vào bộ nhớ đệm. Không cần thiết khi thiết lập cả ExpiresCache-Control: max-age hoặc cả Last-ModifiedETag.

Theo Varvy

Leave a Comment

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *