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