Sử dụng chính sách bộ nhớ đệm hiệu quả trên Nginx, Apache, Litespeed
Sơ đồ trang
Bộ nhớ đệm trình duyệt là gì? Đây là công nghệ lưu trữ tạm thời cho các tài liệu như trang HTML, fonts và hình ảnh để giảm băng thông, giảm thời gian phản hồi của máy chủ và giảm độ trễ cho website.
Những lợi ích chung của việc bật tính năng lưu vào bộ nhớ đệm của trình duyệt là:
- Trang web tải nhanh hơn cho các lần tiếp theo
- Số lượng yêu cầu được gửi đến máy chủ giảm
- Vì vậy, thời gian phản hồi của máy chủ được rút ngắn đáng kể
Lưu ý: Sử dụng tính năng bộ nhớ đệm của trình duyệt giúp trang web tải nhanh hơn chỉ dành cho người dùng cũ, không phải người dùng mới truy cập lần đầu vào website. Nếu tỷ lệ khách truy cập trở lại của bạn cao, bạn nên bật tính năng bộ nhớ cache của trình duyệt.
1. Người dùng truy cập website lần đầu tiên
Hình ảnh dưới đây tóm tắt một tình huống mà người dùng truy cập một trang web lần đầu tiên.
Khi bạn truy cập một trang web lần đầu tiên, trình duyệt web sẽ thu thập dữ liệu từ máy chủ web. Do bạn truy cập lần đầu nên tài nguyên web chưa được lưu trữ trong bộ nhớ cache của trình duyệt (tất nhiên là vậy rồi :D) . Sau lần đầu truy cập trình duyệt web sẽ lưu trữ các tài nguyên web trong bộ nhớ cache để cải thiện trải nghiệm của bạn trong lần truy cập trang web tiếp theo.
2. Người dùng đã ghé thăm website
Nếu người dùng truy cập trang web lần thứ hai bằng cùng một thiết bị máy tính, trang web sẽ tải nhanh hơn lần truy cập đầu tiên. Điều này là do trình duyệt web sẽ truy xuất các tài nguyên web tĩnh như hình ảnh, CSS và JavaScript từ bộ nhớ cache. Trình duyệt web sẽ được sử dụng để cung cấp trang HTML.
Hình ảnh sau đây tóm tắt trường hợp này.
Hình ảnh trên giả định rằng nội dung web là mới. Nội dung mới có nghĩa là nó chưa hết hạn và nó có thể được truy xuất từ bộ nhớ cache. Nội dung cũ có nghĩa là thời gian lưu trong bộ nhớ cache của nó đã hết hạn và nó chỉ có thể được truy xuất từ máy chủ web.
Phản hồi HTTP thường được sử dụng để lưu vào bộ nhớ đệm
Chủ sở hữu trang web có quyền kiểm soát chính sách bộ nhớ cache. Kiểm soát này được thực hiện bằng cách sử dụng tiêu đề bộ đệm HTTP. Các tiêu đề này được sử dụng để xác định thời gian tối đa mà tài nguyên web có thể được lưu vào bộ nhớ cache trước khi hết hạn.
Sau đây là các tiêu đề phản hồi HTTP thường được sử dụng để lưu vào bộ nhớ đệm:
ETag
Đây là chữ viết tắt của thuật ngữ ‘Entity Tag’. Nó hoạt động như một mã thông báo xác thực bộ nhớ cache. Nó được sử dụng khi các tệp được lưu trong bộ nhớ cache đã hết hạn. Trình duyệt web sử dụng ETag trong các yêu cầu của nó để xác định xem có bản sao cũ nào tồn tại trong bộ nhớ cache hay không.
Expires
Tiêu đề này xác định khi nào tài nguyên được lưu trữ trong bộ đệm sẽ hết hạn. Khi hết hạn sử dụng, trình duyệt sẽ xem xét nội dung cũ. Ví dụ: Expires: Sat, 23 October 2021 10:30:00 GMT.
Last modified
Tiêu đề này cung cấp thông tin về thời điểm nội dung web được sửa đổi. Nội dung chính của thông tin này bao gồm ngày và thời gian sửa đổi. Ví dụ: Last Modified: Sat, 23 October 2021 11:30:00 GMT.
Cache-Control
Tiêu đề này bao gồm các tham số khác nhau kiểm soát việc xác thực, hành vi bộ nhớ cache và thời gian hết hạn.
Cache Policy là một bộ quy tắc quy định xem việc một yêu cầu(request) có thể sử dụng bản cache của tài nguyên hay không. Việc sử dụng quy tắc này sẽ giúp trình duyệt sử dụng tài nguyên được cache phù hợp trong lần truy cập kế tiếp.
Thông thường khi trình duyệt gởi yêu cầu các tài nguyên trang web, máy chủ sẽ cung cấp cho trình duyệt thời hạn lưu trữ của các tài nguyên này trong bộ nhớ cache. Trong các lần truy cập kế tiếp có yêu cầu các tài nguyên này, trình duyệt sẽ sử dụng tài nguyên trong bộ nhớ cache thay vì phải tải về từ máy chủ. Trong đó, bộ nhớ cache của các tài nguyên tĩnh (static cache) còn được gọi là browser caching.
Khi kiểm tra hiệu năng bằng PageSpeed Insights, Lighthouse sẽ báo cáo các tài nguyên cần được cache nếu thõa tất cả điều kiện sau:
- Tài nguyên dạng hình ảnh, các tệp media, font, Javascript và CSS.
- Tài nguyên phản hồi với HTTP code:
200,203hoặc206. - Tài nguyên không có thiết lập
no-cache.
Một số chỉ thị của tiêu đề này bao gồm:
- no-cache: Lệnh này hướng dẫn trình duyệt xác thực nội dung trong bộ đệm để kiểm tra xem nó có tương ứng với nội dung trong máy chủ web hay không. Nếu nội dung mới, thì trình duyệt có thể tìm nạp nội dung đó từ bộ nhớ cache.
- public: Điều này có nghĩa là trình duyệt hoặc bất kỳ bên trung gian nào (như CDN hoặc proxy) có thể lưu vào bộ nhớ cache các tài nguyên web.
- private: Điều này có nghĩa là chỉ có trình duyệt mới có thể lưu vào bộ nhớ cache các tài nguyên web.
- no-store: Chỉ thị này hướng dẫn trình duyệt không lưu vào bộ nhớ cache.
Fix lỗi Serve static assets with an efficient cache policy
Fix lỗi Serve static assets with an efficient cache policy
Kích hoạt bộ đệm trình duyệt để fix lỗi Serve static assets with an efficient cache policy
Để kích hoạt bộ nhớ đệm trình duyệt bạn có thể làm theo bước sau:
1. Thiết lập Header trong Apache hoặc Litespeed
Đối với máy chủ Apache/Litespeed bạn hãy mở file .htaccess lên vào thêm vào đoạn code Cache-Control
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$"> Header set Cache-Control "max-age=84600, public" </filesMatch>
Giá trị max-age được thiết lập bằng 84600 giây.
Với header Expires, bạn hãy thêm đoạn sau vào tệp .htaccess:
## EXPIRES CACHING ## # Code Of Activating Browser Caching <IfModule mod_expires.c> ExpiresActive On # Images ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" # Videos ExpiresByType video/mp4 "access plus 1 year" ExpiresByType video/mpeg "access plus 1 year" # CSS ve JavaScript Files ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" # Other File Types ExpiresByType application/pdf "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType text/html "access plus 600 seconds" # Fonts ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-opentype "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" </IfModule> ## EXPIRES CACHING ##
2. Thiết lập Header trong NginX
Để thiết lập header Expires, các bạn hãy thêm đoạn mã sau vào tệp cấu hình server. Tệp này thường nằm ở /etc/nginx/nginx.conf
location ~* .(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* .(pdf|css|html|js|swf)$ {
expires 7d;
}
Với các tài nguyên hình ảnh, đa phương tiện, thời gian khuyến nghị là 365 ngày và 7 ngày với các tệp CSS, JS, HTML,…
Để thiết lập Cache-Control cho NginX, các bạn hãy dùng đoạn mã bên dưới:
location ~* .(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}
Sau khi thêm xong bạn có thể check lại với Google Pagespeed và xem kết quả, lỗi Serve static assets with an efficient cache policy đã được vượt qua
Serve static assets with an efficient cache policy
Với vài thao tác đơn giản bạn sẽ vượt qua được bài kiểm tra nếu check với PageSpeed Insights với thông báo: Serve static assets with an efficient cache policy (Sử dụng chính sách bộ nhớ đệm hiệu quả)
Chúc bạn thành công.
Bài viết liên quan
