Không nên sử dụng Lazy load ảnh trên thiết bị di động

không nên lazy load trên di động

Ảnh là thành phần chiếm dung lượng lớn trên website nên có nhiều biện pháp chủ động can thiệp vào nó để giảm ảnh hưởng đến tốc độ tải trang.

Một số biện pháp đó bao gồm:

Nếu bạn muốn tìm hiểu kỹ hơn về việc tối ưu hóa tốc độ tải ảnh thì đọc bài này.

Lazy load bộc lộ nhiều ưu thế trên máy bàn

Vì máy bàn có tốc độ kết nối internet cao, ổn định, và phần cứng xử lý dữ liệu của máy bàn cũng tốt hơn nên lazy load ảnh trên máy bàn hầu như không gặp vấn đề gì, thường thì chỉ có một chút giật cục, và nó có thể được khắc phục bằng một số biện pháp can thiệp tinh tế như làm blur để ảnh hiện dần trong tầm mắt người dùng. Trang web làm điều này rất xuất sắc là medium.com, với ảnh xuất hiện rất mềm mại.

Lazy load không chỉ làm trang tải nhanh hơn, nó còn giúp tiết kiệm băng thông đáng kể, khi mà nó không phải mất dung lượng cho nội dung mà người dùng không xem. Vấn đề giảm dung lượng khá quan trọng khi kết hợp với CDN, vì các dịch vụ CDN phần lớn tính chi phí theo dung lượng, với kiểu tính tiền dùng đến đâu trả đến đấy.

Tại sao thiết bị di động lại là vấn đề

Ngược lại máy bàn, kết nối của thiết bị di động thường không cao bằng, không ổn định bằng, cũng như nó có phần cứng yếu hơn trong việc xử lý dữ liệu. Chính vì những điều này lazy load ảnh trên di động có thể gây ra một số phiền toái rất khó chịu như:

  • Ảnh tải về rất chậm, người dùng lướt qua phần có ảnh mà đợi một hồi lâu mới thấy ảnh tải về được
  • Trong trường hợp xấu nhất, ảnh thậm chí không tải về

Chính vì những lý do đó bạn không nên sử dụng lazy load trên thiết bị di động.

Một số plugin tạo cache cho WordPress có khả năng bật/tắt lazy load trên thiết bị di động, chẳng hạn như WP-Rocket.

Giải pháp thay thế

Trì hoãn tải ảnh được xem là biện pháp tốt hơn lazy load.

Trong khi lazy load là nước đến chân mới nhảy (ảnh trong tầm nhìn thì mới tải xuống), cơ chế trì hoãn tải ảnh lại khác, nó là cơ chế làm các việc quan trọng trước, còn các việc kém quan trọng để sau.

Trì hoãn tải ảnh trước hết tải bất cứ ảnh nào trong màn hình đầu tiên nhưng trì hoãn các ảnh từ màn hình thứ hai trở đi, cho đến khi trang tải xong mới thôi. Khi bắt gặp thẻ đóng <body> trong <html> nó mới tải các ảnh còn lại.

Trì hoãn tải ảnh sẽ làm tốc độ tải trang về mặt nhận thức cao hơn, nhưng nó thường không tiết kiệm băng thông bằng lazy load, tuy nhiên băng thông lại không phải là vấn đề lớn trong đa số website (nhất là khi họ không sử dụng CDN), do vậy mình khuyến khích các bạn dùng trì hoãn tải ảnh thay thế lazy load.

Vấn đề kỹ thuật

Dù rằng trì hoãn tải ảnh rất dễ thực hiện, nhưng như mình biết, hiện vẫn chưa có plugin nào hỗ trợ cho nó, trong khi các plugin dành cho lazy load ảnh thì có rất nhiều (thí dụ a3 lazy load). Giờ những người muốn trì hoãn tải ảnh vẫn phải làm việc này một cách thủ công, điều chắc chắn sẽ thành vấn đề nếu họ có số lượng bài viết lớn trên website.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top