Tài nguyên của bên thứ ba thường được dùng để hiển thị quảng cáo hoặc video và tích hợp với mạng xã hội. Phương pháp mặc định là tải tài nguyên của bên thứ ba ngay khi trang tải, nhưng điều này có thể làm chậm quá trình tải trang một cách không cần thiết. Nếu nội dung của bên thứ ba không quan trọng, bạn có thể giảm chi phí hiệu suất này bằng cách tải từng phần nội dung đó.
Quy trình kiểm tra này làm nổi bật những nội dung nhúng của bên thứ ba có thể được tải từng phần một khi có tương tác. Trong trường hợp đó, một lớp mặt nạ sẽ được dùng thay cho nội dung của bên thứ ba cho đến khi người dùng tương tác với nội dung đó.
Cách Lighthouse phát hiện các thành phần có thể trì hoãn của bên thứ ba
Lighthouse tìm kiếm các sản phẩm của bên thứ ba có thể bị trì hoãn, chẳng hạn như tiện ích nút mạng xã hội hoặc video được nhúng (ví dụ: trình phát được nhúng của YouTube).
Dữ liệu về các sản phẩm có thể hoãn lại và các thành phần có sẵn được duy trì trong third-party-web.
Quy trình kiểm tra sẽ không thành công nếu trang tải các tài nguyên thuộc một trong những thành phần nhúng của bên thứ ba này.
Trì hoãn nội dung nhúng của bên thứ ba bằng thành phần tượng trưng
Thay vì thêm trực tiếp một thành phần nhúng của bên thứ ba vào HTML, hãy tải trang bằng một phần tử tĩnh trông tương tự như thành phần nhúng thực tế của bên thứ ba. Mẫu tương tác sẽ có dạng như sau:
- Khi tải: Thêm lớp ngoài vào trang.
- Khi di chuột: Thành phần tượng trưng sẽ kết nối trước với các tài nguyên của bên thứ ba.
- Khi nhấp vào: Mặt tiền sẽ tự thay thế bằng sản phẩm của bên thứ ba.
Mặt tiền được đề xuất
Nhìn chung, video được nhúng, tiện ích nút mạng xã hội và tiện ích trò chuyện đều có thể sử dụng mẫu mặt tiền. Khi chọn một lớp mặt tiền, hãy cân nhắc sự cân bằng giữa kích thước và bộ tính năng.
Danh sách sau đây đưa ra các đề xuất của chúng tôi về các lớp mặt nạ nguồn mở. Bạn cũng có thể dùng trình tải iframe trì hoãn, chẳng hạn như vb/lazyframe.
Trình phát được nhúng của YouTube
Trình phát được nhúng của Vimeo
Trò chuyện trực tiếp (Intercom, Drift, Help Scout, Facebook Messenger)
Viết lớp ngoài của riêng bạn
Bạn có thể chọn tạo một giải pháp mặt tiền tuỳ chỉnh sử dụng mẫu tương tác đã nêu trước đó. Lớp ngoài phải nhỏ hơn đáng kể so với sản phẩm của bên thứ ba bị trì hoãn và chỉ bao gồm đủ mã để mô phỏng giao diện của sản phẩm.
Nếu bạn muốn giải pháp của mình có trong danh sách, hãy xem quy trình gửi.
Tài nguyên
Mã nguồn cho Kiểm tra việc tải từng phần các tài nguyên của bên thứ ba bằng thành phần tượng trưng.