Vì sao trong hầu hết trường hợp bạn KHÔNG nên sử dụng Lazy load

bởi Nguyễn Đức Anh
mèo lười

Tôi rất ghét lazy load. Tại sao? Bởi vì nó làm ảnh hưởng xấu đến UX (user experience / trải nghiệm người dùng) trong khi lợi ích của nó có thể chỉ là để qua mặt (tricking) các bài kiểm tra về tốc độ trang (page speed tests) mà thôi. Nó về cơ bản là cách rẻ tiền để làm tăng điểm số tốc độ trang thông qua việc tải chỉ vài thành phần (ảnh, script) lúc ban đầu. Vấn đề là với mắt người, nó làm mọi thứ tải chậm hơn!

Chắc chắn…có logic hợp lý nằm ở chỗ các thành phần (ảnh) nằm xa bên dưới của trang không nên tải ngay nếu người dùng không cuộn chuột đến đó. Chính xác…nhưng bạn có thực sự kiểm soát được các thành phần được tải lười và bạn có chắc chắn là việc trì hoãn tải không ảnh hưởng đến trải nghiệm người dùng?

Tôi sẽ đào sâu vào chủ đề này để biết khi nào bạn nên (và không nên) sử dụng lazy load.

Khi nào bạn KHÔNG nên sử dụng lazy load:

  • Bạn có ảnh ở trong màn hình đầu tiên. (nó làm trì hoãn tải ảnh ở header và banner)
  • Bạn đang bán hàng/trang thương mại điện tử. (người mua hàng thường cuộn chuột rất nhanh)
  • Bạn áp dụng nó chỉ để đánh lừa điểm số tốc độ trang. (trong khi nó ảnh hưởng xấu đến UX của người dùng thực)
  • Bạn đã sử dụng CDN. (máy chủ CDN thực hiện công việc tải ảnh, không phải máy chủ của bạn)
  • Bạn chỉ có vài bức ảnh trên các trang. (các nội dung tĩnh dễ dàng được cache trình duyệt và tải nhanh chóng)
  • Bạn có website vốn đã tải nhanh rồi và một máy chủ đủ mạnh. (không có ích gì khi bạn tải lười các thành phần trên trang nếu website của bạn đang tải nhanh và hosting xử lý chúng dễ dàng)

Mục đích website của bạn trước hết là phục vụ người dùng, rồi sau đó đến robots/máy tìm kiếm. Tại sao bạn lại để các ảnh tải sau đó chứ không phải tải sớm hơn? Mục đích của việc cải thiện tốc độ tải trang là tải mọi thứ NHANH HƠN, chứ không phải chậm hơn. Để trang web của bạn tải ảnh ngay lập tức làm trang web của bạn tải nhanh hơn với người dùng. (Bạn quên mất từ LƯỜI trong “tải lười”? Nó có nghĩa là mọi thứ được tải chậm hơn!)

Bạn không biết cách để tải mọi thứ nhanh hơn? Bạn có thể cải thiện nó theo nhiều cách khác nhau! Website của tôi có thể giúp bạn làm điều đó.

Khi nào bạn NÊN sử dụng lazy load:

  • Phần lớn ảnh của bạn nằm từ màn hình thứ hai trở đi, ít nhất cần vài lần cuộn chuột từ phần đầu của website (để đảm bảo rằng nó không tải ảnh/thành phần mà người dùng có thể không cuộn chuột đến).
  • Bạn có các bức ảnh lớn, và không có CDN. (giúp bạn tiết kiệm tài nguyên máy chủ/băng thông)
  • Bạn có nhiều ảnh, và không có CDN. (giúp bạn tiết kiệm tài nguyên máy chủ/băng thông)
  • Ảnh không có nhiều giá trị trong trải nghiệm người dùng. (người dùng chỉ quan tâm đến nội dung văn bản)
  • Sử dụng nó cho SCRIPT, không phải cho ảnh. (hoàn hảo cho việc tăng tốc độ tải trang)
  • Máy chủ web của bạn thực sự yếu. (tải lười sẽ giúp bạn giảm tải quá trình xử lý của máy chủ)

Như bạn thấy, có một vài trường hợp tôi khuyến khích sử dụng lazy load. Nhưng ngoài vài kịch bản này ra, thì cách tốt nhất là sử dụng CDN và để tất cả các ảnh của bạn tải một cách tự nhiên!

Kết luận cuối cùng về lazy load

Xét cho cùng, lazy load chỉ nên sử dụng để tăng tốc độ tải trang hoặc để giảm nhu cầu sử dụng của máy chủ lưu trữ. Và KHÔNG nên dùng để bù đắp việc viết mã kém hoặc máy chủ không đủ mạnh. Khi được sử dụng chính xác, lazy load sẽ không làm ảnh hưởng đến phần hiển thị của trang web. Khi sử dụng không đúng cách, lazy load làm ảnh hưởng xấu đến trải nghiệm người dùng.

(Dịch từ bài viết: Why You Should (almost) NEVER Use Lazy Load, tác giả: Johnny Nguyen, website: WPJohnny)

Nhận xét của người dịch

Johnny vẫn hay có những quan điểm thú vị, dù không phải lúc nào tôi cũng đồng ý.

Những trước hết là điểm giống đã. Tôi cũng không bao giờ sử dụng lazy load trên các trang thương mại điện tử, nơi một sai sót nhỏ có thể trả giá bằng đơn hàng lớn bị mất, thay vào đó tôi tập trung vào đầu tư hosting mạnh mẽ hơn (hoặc và CDN) để tăng tốc tải trang.

Với website blog, nhiều ảnh, tôi vẫn thường xuyên sử dụng tải lười ảnh để tối ưu chi phí (nhờ giảm tải cho máy chủ) và thực sự nó có cải thiện tốc độ lúc ban đầu do không phải tải toàn bộ ảnh trong bài.

Còn một số điểm tôi khác cách nghĩ của Johnny:

  • Sử dụng CDN không đồng nghĩa với việc bạn không nên dùng lazyload. Vấn đề nằm ở chi phí, các dịch vụ CDN phần lớn tính tiền theo dung lượng sử dụng. Nếu bạn có nhiều ảnh hoặc các ảnh dung lượng lớn, sử dụng CDN kết hợp lazyload giúp bạn tiết kiệm chi phí.
  • Sử dụng lazyload không đồng nghĩa với máy chủ không đủ mạnh. Một lần nữa là tối ưu chi phí, rất nhiều trang tin lớn trên thế giới đều dùng lazy load không phải họ không có máy chủ đủ mạnh, mà họ không muốn đầu tư quá mức chi phí cho máy chủ, trong khi có thể tiết kiệm được.
  • Ảnh hưởng xấu đến trải nghiệm người dùng của lazy load ngày càng nhỏ. Với công nghệ lazy load phát triển hơn, chẳng hạn với native lazy load của trình duyệt Chrome và việc tải ảnh trước khi nó đi vào viewport (khung nhìn) giúp tổi thiểu hóa tác hại đến UX. Một plugin rất tốt trong công việc này là Flying Images. Với những ảnh thuộc màn hình đầu tiên, nhiều công cụ lazy load cũng cho phép chúng ta tùy chỉnh để những ảnh thuộc màn hình đầu tiên vẫn tải bình thường (ngay lập tức) trong khi các ảnh dưới màn hình đầu tiên lại được trì hoãn tải.
0 bình luận

Khu vực bình luận

avatar