Sửa lỗi Serve static assets with an efficient cache policy

Google PageSpeed Insights là một trong những công cụ đánh giá hiệu năng website được yêu thích của rất nhiều anh em. Tuy nhiên, đôi khi Insights đưa ra một số khuyến nghị có thể gây bối rối cho các bạn thiếu kinh nghiệm như: Serve static assets with an efficient cache policy.

Tìm hiểu sâu hơn về vấn này, việc thực hiện thiết lập caching không phải là điều khó khăn. Thực hiện một vài thay đổi nhỏ trên trang web của bạn sẽ giúp cải thiện tốc độ tải trang và tăng điểm PageSpeed. Trong bài viết này mình sẽ giới thiệu về cache policy và một số thủ thuật để sữa lỗi này trên PageSpeed.

Cache Policy là gì?

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, 203 hoặc 206.
• Tài nguyên không có thiết lập no-cache.

Sữa lỗi Serve static assets with an efficient cache policy

Trong phần này mình sẽ hướng dẫn các bạn phân phối các nội dung tĩnh bằng chính sách bộ nhớ đệm hiệu quả như sau:

Thiết lập Cache-Control và Expires Headers

Có 2 thiết lập quan trọng dành cho static caching trong header là: Cache-Control và Expires

Cái đầu tiên sẽ cấu hình cho phép trình duyệt lưu tài nguyên trong bộ nhớ cache, và cái còn lại quy định thời hạn lưu trữ trong cache.

Trong giá trị của Cache-Control cũng có thể chứa giá trị quy định thời hạn cache bằng max-age. Giá trị của Expires sẽ quy định thời điểm cache hết hạn.

cache-control: public, max-age=604800 

Thực tế, bạn chỉ cần thiết lập giá trị Header Cache-Control là đủ. Tuy nhiên một số công cụ kiểm tra hiệu năng sẽ kiểm tra thêm header Expires. Vậy nên hãy thiết lập cả 2 nếu bạn thấy cần thiết.

Dưới đây là hướng dẫn thiết lập header Cache-Control và Expries cho NginX và Apache:

Hướng dẫn 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 2d;
}

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à 2 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";
}

Hướng dẫn thiết lập Header trong Apache

Với các máy chủ chạy Apache, chúng ta có thể cấu hình header Cache-Control trong tệp .htaccess như sau:

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"

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 HEADER 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 image/svg “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”
</ifmodule>
## EXPIRES HEADER CACHING ##

Các bạn cũng có thể tham khảo thêm cấu hình Browser caching trong .htaccess của Vietrick:

# BEGIN Browser Caching
<ifmodule mod_expires.c="">

ExpiresActive On
ExpiresDefault A0
<filesmatch "\.(txt|xml|js)$"="">
ExpiresDefault A31536000
</filesmatch>


<filesmatch "\.(css)$"="">
ExpiresDefault A31536000
</filesmatch>



<filesmatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac|eot|ttf|otf|woff|woff2|svg)$"="">
ExpiresDefault A31536000
</filesmatch>

<filesmatch "\.(jpg|jpeg|png|gif|swf|webp)$"="">
ExpiresDefault A31536000
</filesmatch>

</ifmodule>

<ifmodule mod_headers.c="">
  <filesmatch "\.(txt|xml|js)$"="">
   Header set Cache-Control “max-age=31536000”
  </filesmatch>

  <filesmatch "\.(css)$"="">
   Header set Cache-Control “max-age=31536000”
  </filesmatch>

  <filesmatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac|eot|ttf|otf|woff|woff2|svg)$"="">
   Header set Cache-Control “max-age=31536000”
  </filesmatch>

  <filesmatch "\.(jpg|jpeg|png|gif|swf|webp)$"="">
   Header set Cache-Control “max-age=31536000”
  </filesmatch>

</ifmodule>

Hạn chế việc sử dụng scripts của bên thứ 3 (Third-party)

Bên cạnh việc thiết lập Cache Policy cho server của mình, các bạn hãy hạn chế sử dụng các tài nguyên từ bên thứ ba. Lý do đơn giản là chúng ta chỉ có thể kiểm soát Cache Policy tại server của mình.

Ví dụ tiêu biểu trong trường hợp này là việc sử dụng Google Analytics. Mặc dù GA được thiết lập expires sau 2h. Nếu sử dụng mã nguồn WordPress, các bạn có thể cân nhắc sử dụng plugin Host Google Analytics Locally.

Nếu các script thì bên thứ ba là thành phần quan trọng trong trang web của bạn, thì giải pháp là hãy đặt những tài nguyên này ở tại máy chủ của bạn.

Kiểm tra kết quả

Sau khi thực hiện các thiết lập phân phối nội dung tĩnh bằng bộ nhớ đệm. Các bạn có thể kiểm tra lại bằng công cụ Chrome DevTools.

Trong trình chuyệt Chrome, các bạn nhấn phím F12 để mở DevTools. Rồi chuyển qua tab Network, nhớ bỏ tích ở ô Disable cache. Sau đó bạn hãy refresh hoặc F5 để tải lại trang vài lần và theo dõi kết quả ở cột Size.

Nếu sử dụng FireFox, các bạn có thể bật Web Developement > Network hoặc nhấn tổ hợp phím Ctrl + Shift + E. Bỏ tích ô Disable Cache, và theo dõi giá trị ở cột Transferred.

Kết luận

Chỉ với vài thao tác đơn giản, các bạn đã thiết lập chính sách phân phối bộ nhớ đệm một cách hiệu quả. Thủ thuật này sẽ giúp tăng tốc độ tải trang với những khách thường xuyên truy cập trang web của bạn. Để sữa lỗi Serve static assets with an efficient cache policy trong PageSpeed Insights, các bạn hãy:

• Thêm header Cache-Control và Expires.
• Hạn chế sử dụng scripts từ bên thứ 3 (third-party)

Nếu bạn có thủ thuật hay về Cache Policy để chia sẽ ở phần bình luận cho mọi người.