Bật tùy chọn nén văn bản

Phải phân phát các tài nguyên dựa trên văn bản ở định dạng nén để giảm thiểu tổng số byte mạng. Mục Cơ hội trong báo cáo Lighthouse liệt kê tất cả các tài nguyên dựa trên văn bản chưa được nén:

Ảnh chụp màn hình của chế độ kiểm tra Bật tính năng nén văn bản trong Lighthouse

Cách Lighthouse xử lý tính năng nén văn bản

Lighthouse thu thập tất cả các phản hồi:

  • Có các loại tài nguyên dựa trên văn bản.
  • Đừng thêm tiêu đề content-encoding được đặt thành br, gzip hoặc deflate.

Sau đó, Lighthouse nén từng mục này bằng GZIP để tính toán mức tiết kiệm tiềm năng.

Nếu kích thước ban đầu của một phản hồi nhỏ hơn 1, 4 KiB hoặc nếu mức tiết kiệm tiềm năng khi nén nhỏ hơn 10% kích thước ban đầu, thì Lighthouse sẽ không gắn cờ phản hồi đó trong kết quả.

Bật tính năng nén văn bản trên máy chủ

Bật tính năng nén văn bản trên(các) máy chủ đã phân phát những phản hồi này để vượt qua quy trình kiểm tra này.

Khi yêu cầu một tài nguyên, trình duyệt sẽ sử dụng tiêu đề yêu cầu HTTP Accept-Encoding để cho biết những thuật toán nén mà trình duyệt hỗ trợ.

Accept-Encoding: gzip, compress, br

Nếu trình duyệt hỗ trợ Brotli (br), bạn nên sử dụng Brotli vì Brotli có thể giảm kích thước tệp của tài nguyên nhiều hơn các thuật toán nén khác. Tìm how to enable Brotli compression in <X>, trong đó <X> là tên máy chủ của bạn. Kể từ tháng 12 năm 2022, Brotli được hỗ trợ trong tất cả các trình duyệt chính, ngoại trừ Safari trên iOS. Hãy xem phần Khả năng tương thích với trình duyệt để biết thông tin cập nhật.

Sử dụng GZIP làm phương án dự phòng cho Brotli. GZIP được hỗ trợ trong tất cả các trình duyệt chính, nhưng kém hiệu quả hơn Brotli. Hãy tham khảo phần Cấu hình máy chủ để biết các ví dụ.

Máy chủ của bạn phải trả về tiêu đề phản hồi HTTP Content-Encoding để cho biết thuật toán nén mà máy chủ đã dùng.

Content-Encoding: br

Kiểm tra xem có nén phản hồi hay không

Cách kiểm tra xem một máy chủ có nén phản hồi hay không:

Nhấn Control+Shift+J (hoặc Command+Option+J trên máy Mac) để mở DevTools. Nhấp vào thẻ Mạng.

  1. Nhấn tổ hợp phím Control+Shift+J (hoặc Command+Option+J trên máy Mac) để mở Công cụ cho nhà phát triển.
  2. Nhấp vào thẻ Mạng.
  3. Nhấp vào yêu cầu đã tạo ra phản hồi mà bạn quan tâm.
  4. Nhấp vào thẻ Tiêu đề.
  5. Kiểm tra tiêu đề content-encoding trong phần Tiêu đề phản hồi.
Tiêu đề phản hồi content-encoding
Tiêu đề phản hồi content-encoding.

Cách so sánh kích thước đã nén và kích thước chưa nén của một phản hồi:

  1. Nhấn tổ hợp phím Control+Shift+J (hoặc Command+Option+J trên máy Mac) để mở Công cụ cho nhà phát triển.
  2. Nhấp vào thẻ Mạng.
  3. Bật các hàng yêu cầu lớn. Xem phần Dùng các hàng yêu cầu lớn.
  4. Hãy xem cột Kích thước để biết phản hồi mà bạn quan tâm. Giá trị trên cùng là kích thước nén. Giá trị dưới cùng là kích thước đã giải nén.

Xem thêm bài viết Giảm thiểu và nén tải trọng mạng.

Hướng dẫn cụ thể theo ngăn xếp

  • Drupal: Phải phân phát các tài nguyên dựa trên văn bản ở định dạng nén (gzip, deflate hoặc brotli) để giảm thiểu tổng số byte mạng. Hãy cân nhắc sử dụng một CDN vốn hỗ trợ tính năng này hoặc định cấu hình máy chủ web để thực hiện thao tác này. Tìm hiểu thêm.
  • Joomla: Bật chế độ cài đặt Nén trang Gzip (Hệ thống > Cấu hình chung > Máy chủ).
  • WordPress: Bật tính năng nén văn bản trong cấu hình máy chủ web.

Tài nguyên