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. Phần Cơ hội của báo cáo Lighthouse liệt kê tất cả tài nguyên dựa trên văn bản không được nén:

Ảnh chụp màn hình quy trình kiểm tra Bật tính năng nén văn bản của 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.
  • Không đưa tiêu đề content-encoding được đặt thành br, gzip hoặc deflate vào.

Sau đó, Lighthouse sẽ nén từng phương diện trong số này bằng GZIP để tính toán số tiền có thể tiết kiệm được.

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 các 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ì nó có thể giảm kích thước tệp của tài nguyên nhiều hơn so với 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 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 máy chủ đã sử dụng thuật toán nén nào.

Content-Encoding: br

Kiểm tra tính năng nén phản hồi

Cách kiểm tra xem 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ở DevTools.
  2. Nhấp vào thẻ Mạng.
  3. Nhấp vào yêu cầu đã gây 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 mã hoá nội dung
Tiêu đề phản hồi content-encoding.

Cách so sánh kích thước nén và giải 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ở DevTools.
  2. Nhấp vào thẻ Mạng.
  3. Bật hàng yêu cầu lớn. Xem phần Sử 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 phần Thu gọn và nén tải trọng mạng.

Hướng dẫn dành riêng cho 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 việc sử dụng một CDN hỗ trợ tính năng này ngay từ đầu 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 (System (Hệ thống) > Global configuration (Cấu hình chung) > Server (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