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, thì 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 nêu bật các nội dung nhúng của bên thứ ba có thể được tải từng phần khi tương tác. Trong trường hợp đó, facade (mặt tiề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 nội dung nhúng của bên thứ ba có thể trì hoãn
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ư các tiện ích nút trên mạng xã hội hoặc ứng dụng nhúng video (ví dụ: trình phát được nhúng của YouTube).
Dữ liệu về các sản phẩm có thể trì hoãn và các thành phần tượng trưng có sẵn được duy trì trong web của bên thứ ba.
Kiểm tra không thành công nếu trang tải các tài nguyên thuộc về một trong những nội dung nhúng của bên thứ ba này.
Trì hoãn bên thứ ba bằng thành phần tượng trưng
Thay vì thêm trực tiếp phần tử của bên thứ ba được nhúng vào HTML, hãy tải trang bằng một phần tử tĩnh trông giống với phần tử thực tế được nhúng của bên thứ ba. Mẫu tương tác sẽ có dạng như sau:
- Khi tải: Thêm mặt tiền vào trang.
- Khi di chuột qua: Thành phần tượng trưng 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: Thành phần tượng trưng thay thế chính nó bằng sản phẩm của bên thứ ba.
Thành phần được đề xuất
Nhìn chung, các tiện ích nhúng video, 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 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 cung cấp các đề xuất của chúng tôi về thành phần tượng trưng nguồn mở. Bạn cũng có thể dùng một trình tải iframe từng phần, chẳng hạn như vb/lazyframe.
Trình phát được nhúng trên YouTube
Trình phát được nhúng trên Vimeo
Trò chuyện trực tiếp (Intercom, Drift, Help Scout, Facebook Messenger)
Viết mặt tiền của riêng bạn
Bạn có thể chọn xây dựng giải pháp mặt tiền tuỳ chỉnh sử dụng mẫu tương tác đã nêu trước đó. Mặt tiền 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 đưa vào danh sách, hãy xem quy trình gửi.
Tài nguyên
Mã nguồn cho Kiểm tra tính năng tải từng phần các tài nguyên của bên thứ ba bằng thành phần mặt tiền.