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

12/01/2019

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

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

  • Bộ nhớ đệm trình duyệt lưu các tệp tài nguyên trang web trên máy tính của người truy cập khi truy cập trang web.
  • “Tận dụng” bộ nhớ đệm trình duyệt là kỹ thuật hướng dẫn các trình duyệt cách xử lý tài nguyên của họ.

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

tân dụng bộ nhớ đệm tăng tốc website

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

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

Hãy kiểm tra website có bật tính năng này hay không,nếu chưa hãy xem cách cài đặt kỹ thuật tăng tốc website hiệu quả này.


Cách tận dụng bộ nhớ đệm trình duyệt

  1. Thêm đoạn mã vào máy chủ để yêu cầu lưu cache vào bộ nhớ trình duyệt .
  2. Tối ưu hóa bộ nhớ lưu trữ.

Thay đổi đoạn “code” để yêu cầu lưu trữ bộ nhớ đệm trình duyệt

Đối với hầu hết các web cách để kích hoạt lưu bộ đệm là thêm một số mã vào một tệp có tên .htaccess trên máy chủ / máy chủ web của bạn.

Điều này có nghĩa là đi đến trình quản lý tệp (hoặc fpt) trên hosting của mình.

Tệp .htaccess kiểm soát nhiều thứ quan trọng cho trang web của bạn. Nếu bạn không quen thuộc với tệp .htaccess, vui lòng đọc bài viết của tôi với .htaccess để biết một số cách biết trước khi thay đổi nó.

Bật bộ nhớ đệm trình duyệt bằng .htaccess

Đoạn mã dưới đây cho trình duyệt biết bộ đệm nên lưu gì và thời gian “ghi nhớ” nó ,đoạn mã này được thêm vào đầu tập tin .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 tệp .htaccess và sau đó làm mới trang web của bạn.

Cách đặt thời gian lưu trữ khác nhau cho các loại 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 năm” hoặc “1 tháng”. Chúng được liên kết với các loại tệp, như một ví dụ mã ở trên nói rằng tệp .jpg (hình ảnh) phải được lưu trong bộ nhớ cache trong một năm.

Nếu bạn muốn thay đổi điều đó và bạn chỉ muốn hình ảnh jpg của bạn được lưu trong bộ nhớ cache trong một tháng, bạn chỉ cần thay thế “1 năm” bằng “1 tháng”.

Phương pháp lưu trữ thay thế cho .htaccess

Phương pháp trên được gọi là “Expires” và nó hoạt động với hầu hết hosting sử dụng .htaccess,và khá dễ dàng cài đặt.

Ngoài ra nếu bạn muốn kiểm soát mạnh hơn bộ nhớ đệm của mình bạn có thể thử Cache-Control, một phương pháp lưu trữ khác cung cấp cho chúng ta nhiều lựa chọn hơn.

Cũng có thể phương pháp “Expires” không thể cài đặt được trên web của bạn hãy thử phương pháp Cache-Control để thay thế.

Kiểm soát bộ nhớ cache(Cache-Control)

Lưu ý: Tôi đã thực hiện một hướng dẫn đầy đủ hơn về Kiểm soát bộ đệm ở đây .

Kiểm soát bộ đệm cho phép chúng ta kiểm soát bộ nhớ đệm trình duyệt nhiều hơn và thiết lập cũng khá nhanh chóng.

Thêm đoạn mã này trong tệp .htaccess:

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

Cách kiểm soát bộ đệm hoạt động

 

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

Ý nghĩa dòng lệnh trên “nếu tệp là một trong những loại này”.

Bạn có thêm hoặc bớt loại tệp muốn lưu vào bộ nhớ đệm,chẳng hạng tôi không muốn lưu tệp ảnh jpge vào bộ nhớ đệm tôi sẽ loại bỏ jpeg ra khỏi đoạn mã trên.

Header set Cache-Control “max-age=2592000, public”

  •  “Header set Cache-Control” bạn có thể thay Cache-Control thành một cái tên nào đó dễ nhớ .
  • “max-age = 2592000″ cho biết thời gian cần lưu trong bộ nhớ cache (đơn vị giây). Trong trường hợp này, chúng ta sẽ lưu trữ trong một tháng là “2592000” giây.
  • “public” là lệnh lưu trữ nhưng tệp trên lại.

</filesMatch>

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

Vấn đề khi sử dụng lưu trữ bộ nhớ đệm trình duyệt

Nếu bạn liệt kê html và hình ảnh của bạn sẽ được lưu trong bộ nhớ cache trong một năm hoặc một khoảng thời gian dài khác, hãy nhớ rằng điều này có thể có nghĩa là nếu bạn thực hiện thay đổi cho các trang của mình, tất cả người dùng có thể không nhìn thấy. Điều này là do trình duyệt người dùng sẽ load các tệp được lưu trong bộ nhớ cache chứ không phải các tệp bạn đã thay đổi trên web. Nếu thỉnh thoảng bạn có tệp mà bạn chỉnh sửa (ví dụ – tệp CSS).

DỊCH VỤ SEO WEBSITE liên quan
Hãy liên hệ với chúng tôi để được tư vấn miễn phí các dịch vụ
LIÊN HỆ