Lazy loading là gì? Những thông tin không thể bỏ qua

1244
12-06-2018
Lazy loading là gì? Những thông tin không thể bỏ qua

Trong thế giới của web design, những gì bạn không nhìn thấy có thể khiến bạn tổn thương ("what you don't see can hurt you"). Tệ hơn nữa, nó có thể làm hỏng danh tiếng thương hiệu hoặc các giá trị cốt lõi hoặc cả hai.

Cụ thể là tôi đang nói về images. Hình ảnh có thể tiêu tốn rất nhiều băng thông (con số này lên tới 70% đối với một số website). Bạn phải trả phí để gửi chúng đi, đồng thời người dùng của bạn cũng bị tính phí để xem chúng. Trên thực tế, cả bạn và người dùng đều phải trả tiền cho cả những hình ảnh không bao giờ được nhìn thấy, bởi vì khách truy cập nhiều khi còn không bao giờ cuộn xuống đủ xa để xem chúng.

BizFly Cloud có thể giúp bạn loại bỏ các thách thức băng thông liên quan đến các hình ảnh trong website. Trong bài viết sau đây, tôi sẽ chia sẻ một giải pháp phổ biến, kèm theo những phân tích về ưu và nhược điểm của giải pháp này: Lazy Loading (Tạm dịch: "tải lười biếng").

Bạn cần lưu ý rằng, hình ảnh không chỉ ảnh hưởng đến hiệu suất thực tế của website mà còn ảnh hưởng đến cả hiệu suất trực quan nữa. Hiệu suất trực quan (perceived performance) tạo cho website "cảm giác" nhanh hơn ngay cả khi website đó đã đang load với tốc độ rất nhanh rồi. 

Nếu muốn cài đặt kĩ thuật này, hãy click vào đường link sau để xem hướng dẫn cụ thể : Cách cài đặt chi tiết Lazy Loading Images - Phương pháp tăng tốc độ tải trang hữu hiệu

2. Use Cases

Chúng ta hãy xem xét nhanh một số Use Cases gây ra những cơn đau đầu cho các nhà phát triển front-end:

- Images below the fold:

Lazy loading là gì? - Ảnh 1.

Có thể nói đây là vấn đề chính. Các trang web từ galleries, đến các stores, đến các landing page đôi khi tải cả những nội dung mà người dùng không bao giờ xem hoặc tương tác. Tại sao người dùng phải trả phí nếu họ không cuộn xuống để xem?

- Hero images (Hình ảnh lớn đại diện)

Những hero images thường khá to, đậm và có vị trí nổi bật ngay trên cùng và đương nhiên chúng cồng kềnh, ngốn khá nhiều thời gian để tải xuống. Vậy trong khoảng thời gian chờ chúng được tải xuống đến khi hiển thị trên trang, người dùng phải xem cái gì đây?

- Image carousels (Băng chuyền hình ảnh)

Tùy thuộc vào kích thước của images, băng chuyền có thể là sự kết hợp các vấn đề của cả Hero images và Images below the fold. Chúng có dung lượng và kích cỡ rất lớn, những người dùng của bạn dường như sẽ không kiên nhẫn đủ lâu, dành thời gian để xem tất cả các hình ảnh này!

Trên thực tế, các website càng lớn, càng nổi tiếng thì các vấn đề kể trên càng nghiêm trọng và cấp bách hơn. Chờ đợi việc tải xuống cả tấn hình ảnh trên các kết nối chậm thật sự là một cơn ác mộng với khách truy cập website. Và họ sẽ còn bực bội hơn nữa khi biết rằng chính các bức ảnh của bạn đã ngốn hết cả dữ liệu trên gói di động ít ỏi của họ!

3. Lazy Loading là gì?

Định nghĩa

Lazy loading tức là chỉ tải hình ảnh khi cần thiết, VD: khi người dùng cuộn xuống đủ xa để xem chúng. 

Nhược điểm

Cách tiếp cận này có thể dẫn đến sự nhấp nháy của phần nội dung bị thiếu.

Lazy loading là gì? - Ảnh 2.

Ưu điểm

Lazy loading là kỹ thuật tải hiệu quả nhất được sử dụng phổ biến ngày nay. Bạn sẽ không bao giờ mất chi phí băng thông cho những gì bạn không tải xuống, không xem, không nhìn thấy. Nếu lưu lượng truy cập là mối quan tâm lớn nhất của bạn, thì lazy loading chính là một lựa chọn lí tưởng.

Quá trình thực hiện lazy loading có thể gặp một vài rắc tối trong thao tác. Thực tế, phương pháp này luôn đòi hỏi nhiều JavaScript hơn các phương pháp khác. Nhiều JavaScript hơn có nghĩa là phức tạp hơn, ngốn nhiều thời gian hơn, từ đó các lỗi sai cũng có nguy cơ xảy ra hơn.

Điều đó dẫn đến: Lazy loading là một trò chơi "được ăn cả, ngã về không" (all-or-nothing). Nếu tất cả JavaScript không được tải xuống qua một kết nối 3G chậm hoặc nếu tất cả JavaScript không được thực thi, thì hình ảnh có thể không hiển một chút nào. Nếu lazy loading không hoạt động, sẽ chẳng ai có thể xem các Images below the fold hay above the fold, hay bất cứ image nào cả.

Lazy loading là gì? - Ảnh 3.

Images below the fold và above the fold

4. Khi nào nên/ không nên sử dụng Lazy Loading?

Lazy loading là vô cùng lý tưởng cho những trường hợp mà bạn biết và hiểu rõ về nhân khẩu học của người dùng mục tiêu của mình, nhừng người dùng này chủ yếu sử dụng các thiết bị có kết nối và bộ vi xử lý tốt. Các thiết bị này chính là các điện thoại thông minh dòng từ trung đến cao cấp với tốc độ mạng nhanh và laptop hoặc desktop trên các kết nối băng thông rộng. Nếu người dùng của bạn không có những đặc điểm nêu trên thì tốt nhất bạn càng ít phụ thuộc vào JavaScript càng tốt.

Việc áp dụng lazy loading cho những hình ảnh không cần thiết trên một bài đăng trên blog và trên những photography portfolio của bạn quả là một ý tưởng tuyệt vời. Tuy nhiên, ngược lại hoàn toàn điều đó, các bức ảnh sản phẩm được áp dụng phương pháp lazy loading trong một cửa hàng trực tuyến có thể gây phản tác dụng, nhất là trong trường hợp đang ai đó đang cần đặt hàng sản phẩm, nhưng họ lại không thể tìm thấy sản phẩm đó. Sẽ trầm trọng hơn nếu họ lại còn đang sử dụng một thiết bị di động có kết nối kém.

Hình ảnh là nội dung thiết yếu trên website, chúng ta nên tối ưu chúng nhỏ nhất có thể, khiến chúng có thể được tải xuống bình thường nhất có thể. Đối với các hình ảnh không cần thiết hãy áp dụng lazy loading cho chúng.

Nếu bạn phải phụ thuộc vào JavaScript, hãy sử dụng một thư viện như lazysizes. Nó sẽ chịu trách nhiệm cho việc lazy loading và tạo ra những hình ảnh tương thích nhanh chóng trong quá trình hoạt động.

Kết luận

Kỹ thuật Lazy Loading chủ yếu phục vụ mục đích nâng cao trải nghiệm người dùng, giúp giảm thời gian đợi load nội dung ở phía client (cũng là một giải pháp nâng cao trải nghiệm người dùng). Từ đó tăng xác suất "giữ" người dùng tiếp tục đọc website lâu hơn.

GiangPTH - BizFly Cloud

>> Có thể bạn quan tâm: 10 Plugin jQuery Lazy Load giúp Website nhanh hơn và giảm tải cho WebServer

Kể từ ngày 05/11/2018, VCCloud chính thức đổi tên thành BizFly Cloud - là nhà cung cấp các dịch vụ đám mây hàng đầu tại Việt Nam hiện nay với các dịch vụ nổi bật như: BizFly Cloud Server, BizFly CDN, BizFly Load Balancer, BizFly Pre-built Application, BizFly Business Mail, BizFly Simple Storage. Hãy tăng tốc thích nghi cho doanh nghiệp cùng các giải pháp công nghệ của BizFly Cloudtại đây.

SHARE