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