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

Phần Cơ hội trong báo cáo Lighthouse liệt kê tất cả các URL chặn lần hiển thị đầu tiên trên trang. Mục tiêu là giảm tác động của những URL chặn hiển thị này bằng cách đưa vào 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 tài nguyên không dùng đến.

Ảnh chụp màn hình của bài kiểm tra Lighthouse loại bỏ 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 sẽ gắn cờ hai loại URL chặn hiển thị: tập lệnh và biểu định kiểu.

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 với thiết bị của người dùng. media="all" được coi là chặn hiển thị.

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

Bước đầu tiên để giảm tác động của tài nguyên chặn hiển thị là xác định tài nguyên nào quan trọng và không quan trọng. Sử dụng thẻ Phạm vi lập chỉ mục 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ã đã được sử dụng và lượng mã đã tải:

Công cụ của Chrome cho nhà phát triển: Thẻ Mức độ phù hợp
Công cụ của Chrome cho nhà phát triển: Thẻ Mức độ phù hợp.

Bạn có thể giảm kích thước trang bằng cách chỉ gửi mã và kiểu mà bạn cần. Nhấp vào 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 cho 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 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 một thẻ script cùng dòng trong trang HTML. Khi tải, trang sẽ có những thông tin 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 và sau đó đánh dấu URL bằng các thuộc tính async hoặc defer (xem thêm Thêm tương tác với JavaScript).

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

Cách loại bỏ biểu định kiểu chặn hiển thị

Tương tự như mã cùng dòng trong thẻ <script>, các kiểu quan trọng cùng dòng cần có cho lần hiển thị đầu tiên bên trong khối <style> ở head của trang HTML. Sau đó, tải không đồng bộ phần còn lại của các kiểu bằng liên kết preload (xem phần Trì hoãn việc sử dụng 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à chèn cùng dòng CSS "Trong màn hình đầu tiên" 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 đó, thêm thuộc tính phương tiện vào từng liên kết biểu định kiểu. Khi tải một trang, trình duyệt chỉ chặn màu vẽ đầu tiên để truy xuất các biểu định kiểu khớp với thiết bị của người dùng (xem phần Hiển thị chặn CSS).

Cuối cùng, bạn cần giảm kích thước CSS để xoá mọi khoảng trắng hoặc ký tự thừa (xem bài viết Rút gọn CSS). Điều này đả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ột mô-đun để chèn CSS và JavaScript quan trọng vào cùng dòng, hoặc có thể tải không đồng bộ các tài sản qua JavaScript, chẳng hạn như mô-đun Tổng hợp CSS/JS nâng cao.

Joomla

Một số trình bổ trợ Joomla có thể giúp bạn đưa các tài sả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.

WordPress

Có một số trình bổ trợ của WordPress có thể giúp bạn đưa các tài sả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