Sửa lỗi “Leverage browser caching”

Cập nhật: 18/06/2019

Khi kiểm tra tốc độ với GTMetrix, đôi khi bạn sẽ được công cụ đưa ra gợi ý về vấn đề “Leverage browser caching“.

leverage-browser-caching1-min

Bạn cũng có thể gặp nó khi kiểm tra với “think with Google” – Một công cụ kiểm tra hiệu suất website của Google.

leverage-browser-caching-google1-min

Lỗi này là như nào?

Khi bạn truy cập vào một trang web, các tập tin HTML/CSS/JS/Ảnh sẽ được tải về và lưu vào bộ nhớ cache của trình duyệt.

Khi bạn mở các trang khác trong website đó, trình duyệt chỉ cần tải Chữ, mà không cần tải lại các tệp HTML/CSS/JS trùng lặp nữa.

Điều này giúp website tải nhanh hơn, tốn ít băng thông hơn.

Cảnh báo này xuất hiện trong kết quả kiểm tra tốc độ của GTMetrix khi:

  • HTTP Cache Header của hosting bạn, hoặc của bên thứ ba không chính xác
  • Hoặc có HTTP Cache Header, nhưng Cache Time được thiết lập quá ngắn

Cách sửa lỗi Leverage Browser Caching

Thường có 3 nguyên nhân thường gặp gây ra lỗi này, đó là:

  • Cấu hình hosting của bạn
  • Google Analytics
  • Script từ các bên thứ ba, ví dụ: Livechat

1. Sửa lỗi Leverage Browser Caching trên Hosting

Nguyên nhân phổ biến nhất là do hosting có thiết lập Cache Header không hợp lý. Như ảnh ở đầu bài, là do Cache Time thiết lập quá ngắn.

Nói về Cache, có 02 phương thức hay được áp dụng là Cache-control Header và Expire Header.

Cache-control Header: bật cache ở phía trình duyệt và thiết lập thời gian tối đa để lưu cache

Expire Header: chỉ định một thời điểm cụ thể mà cache không còn được lưu

Và để sửa lỗi Leverage browser caching, ta chỉ cần chèn đoạn mã cho 2 phương thức này vào htaccess của website là được!

Bạn chỉ cần chèn một trong hai thôi nhá. Tùy vào cảnh báo của GTMetrix đưa ra là gì.

Mã này áp dụng cho hosting sử dụng Apache. Hầu hết hosting mình giới thiệu trên blog này đều sử dụng Apache.

Thêm Cache-Control Header

Thêm dòng này vào .htaccess, phía dưới #BEGIN WordPress và phía trên #END WordPress

.htaccess ở đâu trên Hosting?

them-cache-control-header-min

Dòng 1 – Dòng 3 nhá.

Thêm Expire Header

Thêm dòng này vào .htaccess, phía dưới #BEGIN WordPress và phía trên #END WordPress

them-expire-header1-min

Dòng 5 – Dòng 23 nhá.

Cache-Control-Header thường được khuyên sử dụng! Tuy nhiên một số công cụ lại kiểm tra theo Expire Header.

Nếu bạn sử dụng Cloudflare, bạn cần Purge Cache để code trên được cập nhật.

Với Cloudflare

Nếu bạn sử dụng Cloudflare, bạn có thể vào đó thiết lập mà không cần chèn các đoạn code như trên. Chỉ cần truy cập vào Tab Caching.

Kéo xuống phần Browser Cache Expiration. Và thiết lập số ngày lưu cache. Như ví dụ là mình thiết lập lưu cache trong 02 ngày (tức là sau 2 ngày cache sẽ bị khóa và tải lại HTML/CSS/JS/Ảnh)

Và kết quả sau khi kiểm tra lại với GTMetrix. Đã mất gần hết cảnh báo.

leverage-browser-caching2-min

2. Sửa lỗi Leverage Browser Caching do Google Analytics

Nguyên nhân thứ hai gây ra lỗi Leverage Browser Caching là từ Google Analytics.

Mặc định tập tin JS của Google Analytics được thiết lập là 2 giờ. Và bạn không thể thay đổi được.

Cách xử lí đơn giản nhất là tiến hành tải và lưu tập tin JS của Google Analytics về Hosting của bạn với plugin CAOS | Host Google Analytics Locally.

complete-analytics-optimization-suite-min

Tiến hành cài đặt và kích hoạt plugin

Sau đó vào Cài đặt > Optimize Analytics

Điền mã theo dõi Google Analytics vào Google Analytics Tracking ID và Position of tracking code là chọn Footer

Và lưu lại thôi. Công cụ này không ảnh hưởng tới việc thống kê truy cập nhá. Blog THEMEVI cũng đang sử dụng plugin này.

3. Script từ bên thứ ba

Rất tiếc là bạn không thể kiểm soát được Cache của script từ các bên thứ ba như Facebook Chat, Livechat Tawk.to, Subiz, Google Maps…..