Loại bỏ các tài nguyên chặn hiển thị

Mục Cơ hội trong báo cáo Lighthouse liệt kê tất cả URL chặn lần hiển thị đầu tiên của trang. Mục tiêu là giảm tác động của những URL chặn kết xuất này bằng cách nội tuyến các tài nguyên quan trọng, trì hoãn các tài nguyên không quan trọng và xoá mọi nội dung không sử dụng.

Ảnh chụp màn hình quy trình kiểm tra của Lighthouse về việc loại bỏ các tài nguyên chặn hiển thị

URL nào bị gắn cờ là tài nguyên chặn hiển thị?

Lighthouse gắn cờ hai loại URL chặn kết xuất: tập lệnh và tệp định kiểu.

Một thẻ <script>:

  • Nằm trong <head> của tài liệu.
  • Không có thuộc tính defer.
  • Không có thuộc tính async.

Thẻ <link rel="stylesheet">:

  • Không có thuộc tính disabled. Khi có thuộc tính này, trình duyệt sẽ không tải biểu định kiểu xuống.
  • Không có thuộc tính media khớp cụ thể với thiết bị của người dùng. media="all" được coi là chặn kết xuất.

Cách xác định tài nguyên quan trọng

Bước đầu tiên để giảm tác động của các tài nguyên chặn kết xuất là xác định những tài nguyên nào quan trọng và không quan trọng. Sử dụng thẻ Mức độ phù hợp trong Công cụ của Chrome cho nhà phát triển để xác định CSS và JS không quan trọng. Khi bạn tải hoặc chạy một trang, thẻ này sẽ cho bạn biết lượng mã đã sử dụng so với lượng mã đã tải:

Công cụ của Chrome cho nhà phát triển: Thẻ Mức độ sử dụng
Công cụ của Chrome cho nhà phát triển: Thẻ Mức độ sử dụng.

Bạn có thể giảm kích thước trang bằng cách chỉ vận chuyển mã và kiểu mà bạn cần. Nhấp vào một URL để kiểm tra tệp đó trong bảng điều khiển Nguồn. Kiểu trong tệp CSS và mã trong tệp JavaScript được đánh dấu bằng hai màu:

  • Xanh lục (quan trọng): Các kiểu bắt buộc phải hiển thị đầu tiên; mã đóng vai trò quan trọng đối với chức năng cốt lõi của trang.
  • Đỏ (không quan trọng): Các kiểu áp dụng cho nội dung không hiển thị ngay lập tức; mã không được sử dụng trong chức năng cốt lõi của trang.

Cách loại bỏ các tập lệnh chặn hiển thị

Sau khi bạn xác định được mã quan trọng, hãy di chuyển mã đó từ URL chặn hiển thị sang thẻ script nội tuyến trong trang HTML. Khi tải, trang sẽ có những gì cần thiết để xử lý chức năng cốt lõi của trang.

Nếu có mã trong URL chặn hiển thị không quan trọng, bạn có thể giữ mã đó trong URL, sau đó đánh dấu URL bằng thuộc tính async hoặc defer (xem thêm phần Thêm tính tương tác bằng JavaScript).

Bạn nên xoá những đoạn mã không được sử dụng (xem phần Xoá mã không dùng đến).

Cách loại bỏ các tệp kiểu chặn hiển thị

Tương tự như mã nội tuyến trong thẻ <script>, các kiểu quan trọng nội tuyến cần thiết cho lần vẽ đầu tiên bên trong khối <style> tại head của trang HTML. Sau đó, tải không đồng bộ các kiểu còn lại bằng đường liên kết preload (xem phần Trì hoãn CSS không dùng đến).

Hãy cân nhắc việc tự động hoá quy trình trích xuất và nội tuyến CSS "Phần trên cùng của trang" bằng Công cụ quan trọng.

Một phương pháp khác để loại bỏ các kiểu chặn hiển thị là chia các kiểu đó thành các tệp khác nhau, được sắp xếp theo truy vấn nội dung nghe nhìn. Sau đó, hãy thêm thuộc tính nội dung đa phương tiện vào mỗi đường liên kết của tệp kiểu. Khi tải một trang, trình duyệt chỉ chặn nội dung vẽ đầu tiên để truy xuất các biểu định kiểu phù hợp với thiết bị của người dùng (xem phần CSS Chặn hiển thị).

Cuối cùng, bạn nên rút gọn CSS để xoá mọi khoảng trắng hoặc ký tự thừa (xem phần Rút gọn CSS). Điều này giúp đảm bảo rằng bạn đang gửi gói nhỏ nhất có thể cho người dùng.

Hướng dẫn dành riêng cho ngăn xếp

AMP

Sử dụng các công cụ như Trình tối ưu hoá AMP để hiển thị bố cục AMP ở phía máy chủ.

Drupal

Hãy cân nhắc sử dụng mô-đun để chèn CSS và JavaScript quan trọng vào cùng dòng, đồng thời sử dụng thuộc tính trì hoãn cho CSS hoặc JavaScript không quan trọng.

Joomla

Một số trình bổ trợ của Joomla có thể giúp bạn đưa các thành phần quan trọng vào cùng dòng hoặc trì hoãn những tài nguyên ít quan trọng hơn.

WordPress

Có một số trình bổ trợ của WordPress có thể giúp bạn đưa các thành phần quan trọng vào cùng dòng hoặc trì hoãn các tài nguyên ít quan trọng hơn.

Tài nguyên