Phần của hình ảnh và video trong tải trọng thông thường của một trang web có thể là đáng kể. Đáng tiếc là các bên liên quan của dự án có thể không muốn cắt bớt bất kỳ tài nguyên truyền thông nào khỏi nguồn lực hiện có của họ . Những bế tắc như vậy rất khó chịu, đặc biệt khi tất cả các bên liên quan đều muốn cải thiện hiệu suất của trang web, nhưng không thể thống nhất về cách thực hiện. Rất may là tính năng tải từng phần là một giải pháp giúp giảm tải trọng ban đầu của trang đồng thời thời gian tải nhưng không tiết kiệm thời gian vào nội dung.
Tải từng phần là gì?
Tải từng phần là một kỹ thuật trì hoãn việc tải các tài nguyên không quan trọng trên trang thời gian tải. Thay vào đó, những tài nguyên không quan trọng này sẽ được tải vào thời điểm của bạn. Trong trường hợp có quan tâm đến hình ảnh, "không quan trọng" thường đồng nghĩa với "ngoài màn hình". Nếu bạn đã sử dụng Lighthouse và xem xét một số cơ hội cho có thể đã cải thiện, bạn có thể đã thấy một số hướng dẫn trong lĩnh vực này dưới dạng Hoãn kiểm tra hình ảnh ngoài màn hình:
Có thể bạn đã thấy tính năng tải từng phần trong thực tế, ví dụ như sau:
- Bạn đến một trang và bắt đầu cuộn khi đọc nội dung.
- Tại một thời điểm nào đó, bạn sẽ cuộn hình ảnh phần giữ chỗ vào khung nhìn.
- Hình ảnh phần giữ chỗ đột nhiên được thay thế bằng hình ảnh cuối cùng.
Bạn có thể xem một ví dụ về tính năng tải từng phần hình ảnh trên nền tảng xuất bản phổ biến Medium: sẽ tải hình ảnh giữ chỗ nhẹ tại tải trang và thay thế chúng bằng hình ảnh tải từng phần khi cuộn vào khung nhìn.
Nếu chưa quen với tính năng tải từng phần, có thể bạn sẽ thắc mắc về mức độ hữu ích của tính năng này kỹ thuật là gì và các lợi ích của kỹ thuật đó là gì. Hãy đọc tiếp để tìm hiểu!
Tại sao nên tải từng phần hình ảnh hoặc video thay vì chỉ tải?
Do có thể bạn đang tải nội dung mà người dùng có thể không bao giờ nhìn thấy. Đây là có vấn đề vì một số lý do:
- Việc này làm lãng phí dữ liệu. Trên các kết nối không đo lượng dữ liệu, đây không phải là điều tồi tệ nhất có thể xảy ra (mặc dù bạn có thể sử dụng băng thông quý giá đó để tải xuống các tài nguyên khác mà người dùng có thể thực sự nhìn thấy). Dữ liệu bị giới hạn nhưng việc tải những nội dung mà người dùng không bao giờ nhìn thấy có thể là lãng phí tiền của họ.
- Việc này làm lãng phí thời gian xử lý, pin và các tài nguyên hệ thống khác. Sau khi phát nội dung đa phương tiện tài nguyên được tải xuống, trình duyệt phải giải mã tài nguyên đó và hiển thị nội dung của nó trong khung nhìn.
Tính năng tải từng phần hình ảnh và video giúp giảm thời gian tải trang ban đầu quy mô trang và việc sử dụng tài nguyên hệ thống, tất cả đều có tác động tích cực đến hiệu suất.
Triển khai tính năng tải từng phần
Có một số cách để triển khai tính năng tải từng phần. Lựa chọn giải pháp của bạn phải tính đến các trình duyệt bạn hỗ trợ, và cả những gì bạn đang cố gắng tải từng phần.
Các trình duyệt hiện đại triển khai tính năng tải từng phần ở cấp trình duyệt,
Bạn có thể bật tính năng này bằng thuộc tính loading trên hình ảnh và iframe.
Để cung cấp khả năng tương thích với các trình duyệt cũ
hoặc tải từng phần trên các thành phần mà không cần tải từng phần tích hợp sẵn
bạn có thể triển khai giải pháp bằng JavaScript của riêng mình.
Ngoài ra, chúng tôi còn có một số thư viện hiện có giúp bạn làm việc này.
Hãy xem bài đăng trên trang web này để biết toàn bộ chi tiết về tất cả các phương pháp này:
Ngoài ra, chúng tôi đã biên soạn một danh sách vấn đề tiềm ẩn khi tải từng phần, và những điều cần lưu ý trong quá trình triển khai.
Kết luận
Nếu được dùng một cách cẩn thận, hình ảnh và video tải từng phần có thể hạ thấp đáng kể thời lượng ban đầu thời gian tải và tải trọng trang trên trang web của bạn (bao gồm cả Các chỉ số quan trọng về trang web). Người dùng sẽ không phải chịu những rủi ro không cần thiết về mạng hoạt động—bao gồm cả tranh chấp mạng trên các kết nối chậm hơn—và chi phí xử lý tài nguyên phương tiện mà họ có thể không bao giờ thấy, nhưng họ vẫn có thể xem các tài nguyên đó nếu muốn.
Theo các kỹ thuật cải thiện hiệu suất, thì tính năng tải từng phần là hợp lý không có gì gây tranh cãi. Nếu bạn có nhiều hình ảnh cùng dòng trên trang web của mình, thì đó là cách vô cùng hiệu quả để giảm bớt số lượt tải xuống không cần thiết. Người dùng trang web của bạn và các bên liên quan của dự án sẽ rất cảm kích!