Categories Lazy load

Tại sao Lazy load ảnh không hấp dẫn như mong đợi?

nút chia sẻ mạng xã hội

Vài lời: bài viết này ra đời cách đây khá lâu, tôi mới cập nhật lại một chút. Ở thời điểm hiện tại nhìn chung lazy load ảnh triển khai được trên hầu hết kiểu website vì nó ngày càng ít rủi ro (công nghệ thay đổi chóng mặt thật!). Nội dung bên dưới vẫn có giá trị ở khía cạnh là nó sẽ cho bạn biết kiểu trang nào sẽ nhận được lợi ích lớn nhất và bạn cần thêm hỗ trợ gì để lazy load ảnh mượt mà hơn.


Lazy load ảnh là một trong các công nghệ tăng tốc web đã được biết đến từ lâu. Nó có nhiều ưu điểm:

  • Giảm tải cho máy chủ nhờ hạn chế số lượng kết nối đồng thời.
  • Giảm thời gian tải trang do không phải tải các ảnh nằm dưới màn hình đầu tiên ngay lập tức.
  • Không phức tạp về mặt kỹ thuật, chỉ cần 1KB JS để triển khai, thậm chí trình duyệt Chrome còn giúp bạn có được công nghệ này mà không cần mã JS nào vì nó được tích hợp sẵn (bắt đầu từ phiên bản 76) – còn gọi là native lazy loading.
  • Và vì đơn giản nên nhiều công cụ chất lượng cao hỗ trợ cho nó hoàn toàn miễn phí.

Thế nhưng nếu bạn biết WordPrees thì tôi cần phải tiết lộ ngay: ngay cả một trong những plugin rất tốt về mảng này là Flying Images, với nhiều tiện lợi gộp chung vào một gói như:

Với ngần ấy ưu điểm, Flying Images vẫn chỉ có hơn 1000 lượt kích hoạt sau khoảng 4 tháng chính thức có mặt trên WordPress.org – (tất nhiên cũng phải trừ hao chuyện các tính năng mới như CDN và WebP mới được plugin bổ sung khoảng 2 tháng trở lại đây).

Giờ chúng ta sẽ cùng phân tích lý do tại sao?


1. Lazy load ảnh chỉ hiệu quả trên trang có nhiều ảnh

Điều này là hoàn toàn dễ hiểu. Nếu trang của bạn có 2 bức ảnh. Một bức đầu tiên làm hình minh họa (cái nên hiển thị ngay lập tức cho người đọc thấy thay vì tải lười), thế thì bạn chỉ còn một ảnh để lazy load. Một bức ảnh duy nhất đó, chẳng hạn có dung lượng 50KB, dễ dàng tải gần như ngay lập tức thay vì phải lazy load.

Một trang ít ảnh trong nội dung chính, có khả năng có nhiều ảnh nhất ở phần bài liên quan. Có thể có 4 – 10 ảnh đại diện ở đó, nhưng phần lớn chúng đều là các ảnh nhỏ (khoảng 10KB mỗi ảnh là nhiều).


2. Có rủi ro trông thấy khi triển khai lazy load trên kết nối di động

Hai nguyên nhân khiến lazy load trên di động đầy rủi ro:

  • Kết nối ở đây không ổn định và phần cứng cũng kém hơn.
  • Cộng với chuyện nhiều người có thói quen lướt rất nhanh nội dung bài viết (bạn thấy mọi người vẩy ngón trỏ hoặc ngón cái khi cầm smartphone nhanh như thế nào rồi đúng không).

Hệ quả là hiện tượng ảnh chưa kịp tải vẫn xảy ra (người dùng kéo đến phần có ảnh, nhưng chỉ thấy một khoảng trống hoặc ảnh vẫn đang trong quá trình tải), cho dù người ta đã cố gắng hạn chế điều này bằng cách tải trước ảnh khi nó cách khung nhìn của người dùng một ngưỡng khá lớn, chẳng hạn 1000px hoặc 2000px hay thậm chí hơn nữa. Các hàm nhận biết tốc độ kết nối của người dùng để tải ảnh sớm hơn trên kết nối chậm cũng chỉ có tác dụng phần nào.

P/S 1: Một cách cải tiến lazy load ảnh rất tốt trên di động là sử dụng ảnh LQIP (ảnh giữ chỗ chất lượng thấp), về bản chất đây là ảnh giống ảnh gốc nhưng có chất lượng thấp hơn đáng kể nên dung lượng giảm nhiều. Trên kết nối tốc độ chậm, khi người dùng lướt đến phần có ảnh mà ảnh chất lượng cao chưa kịp tải về đầy đủ thì ảnh giữ chỗ đã có mặt rồi, dù chỉ là kẻ dự bị còn nhiều thiếu sót thì vẫn còn hơn không có gì trong bối cảnh ảnh chất lượng cao bị “chấn thương”.

Nếu thấy một khoảng trống người dùng sẽ thất vọng lớn, và thậm chí là đóng trình duyệt để xem trang khác, nhưng với ảnh chất lượng thấp thế chỗ, họ có khả năng kiên nhẫn xem tiếp, và khoảng thời gian đó thường là đủ để tải ảnh chất lượng cao về.

Trên kết nối tốc độ cao, LQIP không gây ảnh hưởng gì đáng kể, do vậy đây là giải pháp rất hay nếu được triển khai một cách khéo léo. Thư viện lazysizes.js là một cách hay nếu bạn muốn áp dụng LQIP. Với những ai đang dùng WordPress, tôi không biết hiện có plugin nào hỗ trợ LQIP hay không? có thể không có loại miễn phí vì để thực hiện LQIP nó phải tạo ra ảnh chất lượng thấp của ảnh gốc tương ứng, và trên các trang có nhiều ảnh sẵn rồi, đây sẽ là nhiệm vụ nặng nề.

[Cập nhật: hiện plugin LiteSpeed cache giúp bạn tạo ảnh LQIP rất tốt, tiện và miễn phí rộng rãi.]


3. Nó không đem lại lợi ích đáng kể trên máy bàn

Giả sử bạn có 5 bức ảnh dưới màn hình đầu tiên. Tổng dung lượng vào khoảng 300KB. Nghe cũng lớn.

Tuy nhiên với tốc độ kết nối máy bàn rất cao + phần cứng mạnh như hiện nay, thời gian để tải chúng và hiển thị lên màn hình có thể chưa đến 0,2 – 0,3s. Đó là khoảng thời gian không dễ để cảm nhận. Trong khi rõ ràng ảnh hưởng đến trải nghiệm người dùng của nó dù nhỏ vẫn dễ nhận ra hơn (hầu hết mọi người đều quan sát được bằng mắt thường khi trang nào đó dùng lazy load ảnh).

Hình dưới đây kiểm tra tốc độ kết nối internet trên máy bàn ở mạng gia đình. Khi latop ở xa cột thu sóng wifi, nó vẫn có tốc độ chấp nhận được là 2,8 Mbps tương đương với 350 KB/s. Còn khi laptop ở khoảng cách trung bình, tốc độ thu được lên tới 26 Mbps tương đương 3,25 MB/s (1 Byte = 8 bit). Bạn có thể kiểm tra tốc độ kết nối của chính bạn bằng cách truy cập trang fast.com (công cụ thuộc sở hữu của mạng phim thu phí trực tuyến Netflix)

tốc độ internet khi chậm
Đây là kết nối internet khi tốc độ chậm
tốc độ internet rất cao
Đây là kết nối internet khi tốc độ cao

Người ta giảm thiểu được ảnh hưởng đến trải nghiệm người dùng bằng cơ chế tải trước như đã nói ở phần di động (khi công nghệ này được áp dụng nhiều người không nhận ra trang đang sử dụng tải lười ảnh). Vì vậy, công bằng mà nói: máy bàn dù sao vẫn là nơi an toàn nhất để triển khai lazy load ảnh.

Còn một yếu tố nữa làm lợi ích tải lười ảnh trên máy bàn vốn không lớn nay còn nhỏ hơn nữa: ở nhiều website, hơn 90% lưu lượng truy cập đến từ di động, chưa đến 10% nhỏ nhoi còn lại đến từ máy bàn và máy tính bảng. Ví dụ như hình dưới đây từ một website tôi quản lý, thống kê 90 ngày qua cho thấy 92,1% kết nối là qua di động, máy tính để bàn chỉ có 6,5%:

nhiều trang chủ yếu được truy cập thông qua di động

Như vậy triển khai lazy load rất an toàn trên máy tính để bàn, tuy nhiên lợi ích của nó xét trên tổng thể có thể nhỏ hơn nhiều so với bạn mong đợi. Hình trên cho thấy chỉ 6,5% lượt truy cập nhận được lợi ích rõ rệt từ lazy load.


4. Vậy những trang web nào đang sử dụng lazy load ảnh và tại sao?

Bạn sẽ nhanh chóng nhận ra rằng đó là các trang báo điện tử, chia sẻ kiến thức, vân vân có số lượng người truy cập rất lớn. Đó là những trang kiểu như vnexpress.net; 24h.com.vn; medium.com… Bất cứ trang nào có lượng truy cập cao đều có khả năng đang sử dụng lazy load ảnh (nhưng hầu hết các trang thương mại điện tử thì không)*.

Và bây giờ sẽ là câu trả lời cho câu hỏi tại sao?

Bởi vì có số lượng người dùng rất lớn nên tiền máy chủ để thuê chạy website không hề nhỏ. Giả định là 10 ngàn $/tháng. Các trang thiên về giải trí, tin tức như vậy lại rất nhiều ảnh, cồng kềnh với nhiều quảng cáo, do vậy sử dụng lazy load có thể giúp máy chủ của họ tiết kiệm được 20% công suất (lại là con số giả định nữa để bạn dễ mường tượng) và tải nhanh hơn đáng kể. Nói cách khác họ có thể tránh phải bỏ ra 2 ngàn $ và 1s chờ đợi nhờ lazy load.

Con số này sẽ tiếp tục lớn hơn trên các hệ thống có hàng triệu người truy cập mỗi ngày. Lazy load tiết kiệm chi phí tuyệt đối không hề nhỏ cho họ.

Tuy nhiên nhiều trang thương mại điện tử cũng có số lượng người truy cập lớn lại không áp dụng lazy load, đặc biệt là tại trang bán sản phẩm (trên các trang chia sẻ kiến thức có thể họ vẫn áp dụng lazy load). Nguyên nhân là rủi ro không hiển thị ảnh trong trường hợp này sẽ phải trả cái giá cao hơn nhiều việc đầu tư thêm máy chủ để tải ảnh ngay lập tức.

Giá trị 1 visitor trên các trang giải trí nhỏ hơn nhiều giá trị 1 visitor trên trang thương mại điện tử.

(*): Vẫn có những ngoại lệ. Một trang thương mại điện tử lớn là Điện Máy Xanh áp dụng lazy load ảnh ngay cả trên trang bán sản phẩm của họ. Tôi thực sự ngạc nhiên khi nhận thấy điều đó, nhưng chắc chắn họ có lý do để làm vậy (tiền máy chủ chắc hẳn không phải là vấn đề, tôi đoán rằng họ tập trung vào vấn đề tốc độ: các trang thương mại điện tử có rất nhiều ảnh, có thể lên đến hàng 100 ảnh trên trang category).

[Cập nhật: hiện rất nhiều trang thương mại điện tử lớn đều sử dụng lazy load ảnh, cơ sở để họ tự tin làm điều đó gồm hai yếu tố: (1) công nghệ lazy load ảnh đã được cải thiện rất nhiều, ảnh hưởng xấu đến trải nghiệm người dùng được giảm đáng kể, (2) các công ty này đều sử dụng CDN chất lượng cao, giúp tốc độ tải ảnh được đẩy lên tối đa.]


5. Kết luận

Cuối cùng lazy load ảnh không phải là biện pháp bắt buộc dành cho các website nhỏ và trung bình nữa, nó giờ đây nhắm tới việc tiết kiệm chi phí, cải thiện tốc độ trên các hệ thống website rất lớn hoặc/và nhiều ảnh.

Các website nhỏ/trung bình tất nhiên chẳng mặn mà với điều này, họ có thể sẵn sàng bỏ ra thêm 10 – 20$ để đáp ứng lưu lượng truy cập tăng thêm thay vì phải lo lắng đến trải nghiệm người dùng. Với những chủ trang không sẵn sàng đầu tư thêm tiền, họ sẽ nghĩ đến việc dùng CDN miễn phí từ những cái tên như CloudFlare hay JetPack (CDN của ông chủ WordPress đã được cải thiện khá nhiều).

Như vậy đối với đa số website thông thường (không nhiều ảnh và lưu lượng truy cập không lớn), ở trên kết nối tốc độ cao và ổn định lazy load không đem lại lợi ích đáng kể. Còn với kết nối tốc độ chậm, có độ trễ cao trên di động nó lại đầy rủi ro! Hệ quả lazy load không phổ biến như chúng ta tưởng, mặc dù bề ngoài nó rất hấp dẫn.


Bonus

Ngay cả trên kết nối máy bàn cũng có thể chập chờn và làm cho lazy load trở nên tệ. Có lẽ bạn đã trải nghiệm hiện tượng này khi ở xóm trọ hoặc nhà cao tầng, chung cư khi máy tính xa nơi phát wifi, khi ấy tốc độ có thể giảm từ 5 đến 10 lần.

Tôi có bi quan quá về lazy load ảnh hay không? Liệu có cơ hội nào cho nó nữa?

Tôi nghĩ là có:

  • Bản thân sự ra đời của native lazy load trên Chrome là cải tiến đáng chú ý.
  • Tải trước ảnh khi ảnh kịp vào khung hình + nhận biết tốc độ kết nối cũng giúp giải quyết vấn đề ở mức độ nhất định (nhất là trên máy bàn, nó giúp triệt tiêu ảnh hưởng tiêu cực đến trải nghiệm người dùng).
  • Việc cho phép chọn lựa lazy load trên các thiết bị khác nhau (chẳng hạn trên máy bàn thì bật, điện thoại thì không) giúp nó có khả năng được tích hợp nhiều hơn do tránh được tình huống tiến thoái lưỡng nan do tốc độ kết nối, độ trễ chênh lệch nhiều trên hai nền tảng khác nhau.
  • Tốc độ internet có xu hướng tăng và ổn định hơn trên di động sẽ khiến người ta bớt lo lắng về hiện tượng “ảnh chưa kịp tải”. Tuy nhiên có vẻ điều này cũng khó cải thiện sớm được.
  • CDN với hệ thống máy chủ phân tán khắp các địa điểm trọng yếu giúp tốc độ tải ảnh cải thiện đáng kể (có thể đây là nguyên nhân chính khiến một số trang thương mại điện tử tự tin triển khai lazy load ảnh).
  • Bạn có thể tận dụng tiềm tăng tăng tốc của lazy load trong khi giảm được ảnh hưởng tiêu cực của nó bằng cách chỉ tải lười các ảnh ở sâu dưới màn hình và không quan trọng lắm.

Một số câu hỏi

1. Tôi có nên triển khai lazy load ảnh nếu số lượng cũng như dung lượng ảnh dưới màn hình đầu tiên không nhiều. Lưu lượng truy cập cũng chỉ trung bình mà thôi?

Câu trả lời: Hầu như là không. Bạn sẽ không nhận được lợi ích đáng kể nếu dung lượng và số lượng ảnh dưới màn hình đầu tiên không nhiều. Cộng với việc lưu lượng truy cập trung bình tôi nghĩ lazy load đặc biệt không cần thiết trong trường hợp này.

2. Tôi có nên triển khai lazy load ảnh không nếu lưu lượng truy cập vào website của tôi không lớn, nhưng dung lượng ảnh dưới màn hình đầu tiên lại nhiều?

Câu trả lời: Lưu lượng truy cập không lớn, có nghĩa là lazy load ảnh không đóng góp gì nhiều cho việc giảm tải máy chủ. Nhưng khi website có dung lượng ảnh dưới màn hình đầu tiên lớn thì việc triển khai lazy load chắc chắn sẽ giúp cải thiện thời gian tải trang đáng kể, và nếu mục tiêu của bạn là tăng tốc hiển thị trang thì lazy load đáng cân nhắc.

Trong khi lazy load hầu như không gặp vấn đề về trải nghiệm người dùng trên máy bàn khi được làm đúng cách thì trên di động có thể có vấn đề. Nếu website của bạn có phần đông người dùng là máy bàn, hãy an tâm triển khai. Nếu ngược lại bạn cần kiểm tra trên thiết bị di động, và có thể nên tích hợp CDN để độ trễ giảm xuống tối đa. Căn cứ trên tình hình thực tế bạn sẽ quyết định có nên triển khai hay không.

3. Tôi có nên triển khai lazy load ảnh không nếu tôi không có nhiều ảnh dưới màn hình đầu tiên nhưng website lại có lưu lượng truy cập cao

Triển khai lazy load ảnh trong trường hợp này không cải thiện được tốc độ hiển thị nhiều, nhưng nó có khả năng giúp bạn tránh phải nâng cấp máy chủ, mà khi quy ra giá trị tiền mặt có khả năng không nhỏ.

Tuy nhiên giảm tải cho máy chủ có nhiều cách khác tốt hơn để làm thay vì dùng lazy load, vốn rất rủi ro trên di động.

Vài cách dưới đây bạn nên áp dụng đồng thời để cho hiệu quả tốt nhất:

  • Sử dụng dịch vụ CDN miễn phí có chất lượng cao, ví dụ như của CloudFlare hoặc JetPack.
  • Nén ảnh đem lại khả năng tiết kiệm từ 5 – 20% dung lượng ảnh.

4. Trang của tôi vừa có nhiều ảnh dưới màn hình đầu tiên, vừa có lưu lượng truy cập lớn, tôi chắc chắn phải triển khai lazy load ảnh đúng không

Đây là trường hợp có khả năng cao nhất áp dụng lazy load ảnh, khi nó có triển vọng đem lại lợi ích kép rõ ràng là: cải thiện tốc độ tải trang và giảm tải cho máy chủ rất nhiều.

Nhưng như đã nói, vì ảnh hưởng của kiểu kết nối trên di động, bạn nên kết hợp với dịch vụ CDN chất lượng cao, có máy chủ phân tán rộng khắp để hạn chế tối đa độ trễ, qua đó giảm thiểu hiện tượng “ảnh chưa kịp tải” khi người dùng đã kéo đến khung nhìn thiết bị.

Bảng tóm tắt:

  Lưu lượng truy cập thấp Lưu lượng truy cập cao
Ít ảnh Không nên dùng Lazy Load ảnh. Hầu như không đem lại lợi ích gì đặc biệt. Có thể không cần dùng. Sử dụng các biện pháp khác để giảm tải cho máy chủ nếu cần.
Nhiều ảnh Có thể dùng để giảm thời gian tải trang, cân nhắc kết hợp CDN để không ảnh hưởng đến trải nghiệm người dùng. Nên dùng, cân nhắc kết hợp với CDN chất lượng cao để không ảnh hưởng đến trải nghiệm người dùng.

Back to Top