» » Nâng cao lưu vào bộ nhớ cache trong trình duyệt

Nâng cao lưu vào bộ nhớ cache trong trình duyệt

Nâng cao lưu vào bộ nhớ cache trong trình duyệt của Google Pagespeed nhằm giúp các tài nguyên như HTML, Javascript, CSS và hình ảnh được tải nhanh hơn. Điều này giúp người dùng truy cập trang web của bạn một cách nhanh chóng hơn và giảm tải tài nguyên trên máy chủ của bạn.

  • Người truy cập không cần tải các tài nguyên trước đó từ máy chủ của bạn. Các tài nguyên này được trình duyệt lưu vào bộ nhớ và truy xuất cho các lần sau.
  • Đặc biệt hiệu quả trên các trang web mà người dùng thường xuyên truy cập lại các vùng giống nhau của các trang web.
  • Giảm tải máy chủ và tăng tốc độ với người truy cập.

Bộ nhớ cache trong trình duyệt là gì?

Mỗi khi trình duyệt tải một trang web, nó cũng cần tải về tất cả các tập tin để hiển thị trang web đúng cách. Điều này bao gồm tất cả các HTML, CSS, Javascript và hình ảnh.

Dù các tài nguyên của trang web là lớn hay nhỏ, việc tải đi tải lại các tài nguyên này là tốn thời gian và không cần thiết.

Có 2 vấn đề ở đây là:

  1. Các tập tin có kích thước lớn mất nhiều thời gian để tải. Điều này có thể là thảm họa đối với một máy tính có kết nối chậm hoặc một thiết bị di động.
  2. Mỗi lần trang web được tải thì máy chủ web của bạn phải xử lý tất cả các yêu cầu này. Điều này làm hao tổn tài nguyên máy chủ và dẫn đến trang web được truyền tải một cách chậm chạp.

Bộ nhớ cache trong trình duyệt có thể giúp lưu một số tập tin của trang web vào bộ nhớ đệm của trình duyệt người dùng. Khi các tập tin này được tải lần đầu tiên, trình duyệt sẽ lưu các tập tin này lại. Bắt đầu từ các lần truy cập tiếp theo, F5 hoặc chuyển sang trang khác, trình duyệt sẽ truy xuất các tập tin này mà không cần có một truy vấn đến máy chủ.

Tất cả những điều đó có nghĩa rằng trình duyệt sẽ không tải cùng một tài nguyên nhiều hơn một lần. Và tất nhiên, máy chủ của bạn sẽ không xử lý quá nhiều yêu cầu sau đó. Vì vậy trang web được tải nhanh hơn.

Làm thế nào nó hoạt động?

Nâng cao lưu vào bộ nhớ cache trong trình duyệtMáy chủ web của bạn sẽ phải chỉ định một số tập tin và tài nguyên mà trình duyệt cần lưu vào bộ nhớ cache. Ví dụ bạn có một logo và bạn dự định logo của bạn sẽ không được thay đổi trong vòng một tháng, bạn có thể yêu cầu trình duyệt lưu logo của bạn vào cache trong vòng một tháng. Như vậy, trình duyệt sẽ tải logo của bạn một lần đầu tiên và lưu vào cache một tuần, sau đó nó sẽ truy xuất logo đó từ cache mà không tải logo này từ máy chủ của bạn.

Nâng cao lưu vào bộ nhớ cache trong trình duyệt

Để nâng cao lưu vào bộ nhớ cache trong trình duyệt, bạn cần phải thay đổi HTTP headers của loại tập tin để trình duyệt có thể nhận dạng.

Tìm đến tập tin .htaccess trong thư mục root trang web của bạn. Tập tin này có thể được ẩn nhưng bạn hoàn toàn có thể hiển thị nó trong FileZilla hoặc File manager ở cPanel.

Bạn cần phải chỉ định loại tập tin cần lưu vào cache và thời gian hết hạn. Chỉnh sửa tập tin này như sau đây:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A31536000
ExpiresByType text/x-component A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType application/javascript A31536000
ExpiresByType text/javascript A31536000
ExpiresByType text/x-js A31536000
ExpiresByType text/html A3600
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType text/xml A3600
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/vnd.ms-fontobject A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType application/json A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/x-font-otf A31536000
ExpiresByType application/vnd.ms-opentype A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType image/svg+xml A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType application/x-font-ttf A31536000
ExpiresByType application/vnd.ms-opentype A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/font-woff A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
</IfModule>

Như trên, chúng ta thấy loại tập tin và thời hạn cache ở sau cùng mỗi dòng. Tùy theo thời gian thay đổi nội dung của các tài nguyên mà bạn có thể tăng hoặc giảm thời hạn cache tương ứng.

Đối với WordPress, bạn có thể dùng một trong các plugin như W3 Total Cache, WP Super Cache…

Lưu ý khi sử dụng bộ nhớ cache trong trình duyệt

  • Nên sử dụng bộ nhớ cache trong trình duyệt cho tất cả các tài nguyên tĩnh trên trang web.
  • Sử dụng thời hạn cache tối thiểu là một tháng và tối đa là một năm.
  • Không nên cache cho các tập tin và tài nguyên mà bạn thường hay cập nhật. Người dùng có thể không truy cập được phiên bản mới của trang web kịp thời. Vì thê hãy sử dụng thời hạn cache ngắn hơn cho các tài nguyên này.
  • Bạn không thể cache trong trình duyệt đối với các tài nguyên nằm trên một server khác như Google, Facebook, Twitter…

Nâng cao lưu vào bộ nhớ cache trong trình duyệt là một khuyến nghị của Google Pagespeed, vì thế nó có thể giúp bạn cải thiện được tốc độ và xếp hạng rất tốt. Để kiểm tra trang web của bạn, vui lòng vào Google Pagespeed.

Thích hoặc chia sẽ bài này

  • Administrator

    Mặc dù dùng CDN nhưng cũng thích cache cái này lắm 😀

  • hay lắm, tks ad đã chia sẻ 😀