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“.
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.
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?
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
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.
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.
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…..