Mục Cơ hội trong báo cáo Lighthouse liệt kê tất cả các URL đang 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 các URL chặn hiển thị 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 thứ không dùng đến.
Những URL nào bị gắn cờ là tài nguyên chặn hiển thị?
Lighthouse gắn cờ 2 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 thuộc tính này xuất hiện, trình duyệt sẽ không tải biểu định kiểu xuống. - Không có thuộc tính
mediakhớp cụ thể 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 các tài nguyên chặn hiển thị là xác định những tài nguyên quan trọng và không quan trọng. Sử dụng thẻ Mức độ sử dụng trong Công cụ cho nhà phát triển của Chrome để 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 biết lượng mã đã dùng so với lượng mã đã tải:
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. Các kiểu trong tệp CSS và mã trong tệp JavaScript được đánh dấu bằng 2 màu:
- Màu xanh lục (quan trọng): Kiểu bắt buộc cho lần hiển thị đầu tiên; mã quan trọng đối với chức năng cốt lõi của trang.
- Đỏ (không quan trọng): Kiểu áp dụng cho nội dung không xuất hiện ngay lập tức; mã không được dùng trong chức năng chính 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 một URL chặn hiển thị không quan trọng, bạn có thể giữ mã đó trong URL, rồi đánh dấu URL bằng các 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á mã không được sử dụng (xem phần Xoá đoạn 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ã 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 hiển thị đầu tiên bên trong khối <style> tại head của trang HTML.
Sau đó, hãy tải phần còn lại của các kiểu không đồng bộ bằng cách sử dụng đường liên kết preload (xem phần Hoãn lại CSS không dùng đến).
Hãy cân nhắc tự động hoá quy trình trích xuất và chèn CSS "Phía trên nếp gấp" bằng Công cụ quan trọng.
Một cách khác để loại bỏ các kiểu chặn hiển thị là chia các kiểu đó thành nhiều tệp, được sắp xếp theo truy vấn nội dung nghe nhìn. Sau đó, hãy thêm một thuộc tính nội dung nghe nhìn vào mỗi đường liên kết đến biểu định kiểu. Khi tải một trang, trình duyệt chỉ chặn lần hiển thị đầ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 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 đả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 cụ thể theo ngăn xếp
AMP
Sử dụng các công cụ như Trình tối ưu hoá AMP để hiển thị các 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, đồ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 tài sả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 phần tử quan trọng vào nội tuyến hoặc trì hoãn tài nguyên ít quan trọng hơn.