Tôi có nên lười tải hình ảnh không?

Ngày nay, tải chậm được sử dụng rộng rãi trong các ứng dụng web để cải thiện hiệu suất ứng dụng. Nó giúp các nhà phát triển giảm thời gian tải, tối ưu hóa việc sử dụng dữ liệu và cải thiện trải nghiệm người dùng

Tuy nhiên, lạm dụng lazy loading có thể ảnh hưởng tiêu cực đến hiệu suất của ứng dụng. Vì vậy, trong bài viết này, tôi sẽ thảo luận về các hiệu ứng hiệu suất của lazy loading để giúp bạn hiểu khi nào nên sử dụng nó.

Lazy Loading là gì?

// with IFrame

Sau khi lazy loading được kích hoạt, nội dung sẽ chỉ hiển thị khi người dùng scroll đến nơi nội dung được yêu cầu hiển thị

Cách tải chậm hoạt động

Như bạn có thể thấy, lazy loading chắc chắn cải thiện hiệu suất ứng dụng và trải nghiệm người dùng. Đó là lý do tại sao các nhà phát triển chọn lazy-loading như một lựa chọn hiển nhiên cho các ứng dụng của họ

Tuy nhiên, lazy loading không phải lúc nào cũng đảm bảo cải thiện hiệu suất của ứng dụng. Vì vậy, hãy xem hiệu ứng hiệu suất của tải chậm là gì

Hiệu ứng hiệu suất của Lazy Loading

Theo nhiều nghiên cứu, có hai lợi thế chính mà bất kỳ nhà phát triển nào cũng có thể đạt được bằng cách tải chậm

• Giảm thời gian tải trang [PLT]. Chúng tôi có thể giảm thời gian tải trang ban đầu bằng cách trì hoãn tải tài nguyên
• Tối ưu hóa sử dụng tài nguyên. Bằng cách lười tải tài nguyên, chúng tôi có thể tối ưu hóa việc sử dụng tài nguyên hệ thống. Điều này hoạt động tốt với các thiết bị di động có bộ nhớ và khả năng xử lý thấp hơn

Mặt khác, một số tác động đáng kể đến hiệu suất có thể xảy ra nếu chúng ta lạm dụng lazy loading

Làm chậm cuộn nhanh

Nếu bạn có ứng dụng web chẳng hạn như cửa hàng trực tuyến, bạn cần cho phép người dùng cuộn lên xuống nhanh chóng và điều hướng

Sử dụng tải chậm cho các ứng dụng như vậy có thể làm chậm trải nghiệm cuộn vì chúng tôi cần đợi cho đến khi tải dữ liệu. Điều này sẽ làm giảm hiệu suất ứng dụng và gây ra các vấn đề về trải nghiệm người dùng

Chậm trễ do thay đổi nội dung

Nếu bạn chưa xác định thuộc tính chiều rộng và chiều cao của hình ảnh cho hình ảnh tải chậm, độ trễ đáng chú ý có thể xảy ra trong quá trình kết xuất hình ảnh. Vì các tài nguyên không được tải xuống khi tải trang ban đầu nên trình duyệt không thể biết kích thước nội dung để vừa với bố cục trang

Khi tài nguyên được tải và người dùng được cuộn đến chế độ xem cụ thể đó, trình duyệt cần xử lý nội dung và thay đổi lại bố cục của trang. Điều này sẽ khiến các yếu tố khác thay đổi và mang lại trải nghiệm người dùng không tốt

Bộ đệm nội dung

Nếu bạn đã sử dụng lazy loading không cần thiết trong ứng dụng của mình, nó có thể gây ra bộ đệm nội dung. Điều này xảy ra khi người dùng cuộn xuống nhanh trong khi tài nguyên vẫn đang tải xuống

Tình trạng này có thể xảy ra đặc biệt đối với các kết nối băng thông chậm và nó sẽ ảnh hưởng đến tốc độ hiển thị trang web

Khi nào nên sử dụng Kỹ thuật tải chậm

Bây giờ, bạn phải suy nghĩ về cách quyết định lượng lazy loading phù hợp để tận dụng tối đa nó với hiệu suất web tốt hơn

Những gợi ý sau đây sẽ hữu ích để tìm điểm ngọt ngào

1. Lười tải đúng tài nguyên ở đúng nơi

Nếu bạn có một trang web dài với nhiều tài nguyên, bạn có thể xem xét thêm lazy loading. Tuy nhiên, chỉ thêm lazy loading cho nội dung dưới màn hình đầu tiên hoặc bên ngoài quan điểm của người dùng

Đảm bảo rằng bạn không bao giờ Tải chậm bất kỳ tài nguyên nào cần thiết để thực thi các tác vụ nền. Ví dụ: nó có thể là một thành phần JavaScript, hình nền hoặc nội dung đa phương tiện khác. Hơn nữa, bạn không được trì hoãn việc tải đối với những

Bạn có thể sử dụng công cụ Lighthouse của trình duyệt Chrome để thực hiện kiểm tra và xác định các tài nguyên khả thi để thêm thuộc tính Lazy-loading

2. Tải chậm nội dung không phải là trình chặn để sử dụng trang web

Tốt hơn hết là thử tải chậm đối với các tài nguyên web không quan trọng thay vì các tài nguyên thiết yếu. Ngoài ra, đừng quên xử lý lỗi và trải nghiệm người dùng tốt nếu tài nguyên không tải chậm như mong đợi

Xin lưu ý rằng lazy loading gốc vẫn chưa được hỗ trợ rộng rãi bởi tất cả các nền tảng và trình duyệt. Ngoài ra, nếu bạn đang sử dụng thư viện hoặc triển khai tùy chỉnh JavaScript, nó sẽ không hoạt động với tất cả người dùng. Đặc biệt, các trình duyệt bị tắt JavaScript sẽ gặp sự cố với kỹ thuật này

3. Nội dung tải chậm không quan trọng đối với Tối ưu hóa Công cụ Tìm kiếm [SEO]

Với việc tải chậm nội dung, trang web của bạn sẽ hiển thị dần dần. Điều đó có nghĩa là, một số nội dung không có sẵn khi tải trang ban đầu. Nhìn thoáng qua, có vẻ như lazy loading giúp cải thiện thứ hạng trang SEO vì nó làm cho trang của bạn tải nhanh hơn rất nhiều. Tuy nhiên, nếu bạn lạm dụng lazy loading, sẽ có tác động tiêu cực.

Khi quá trình lập chỉ mục SEO đang diễn ra, các công cụ tìm kiếm sẽ thu thập dữ liệu trang web để tìm dữ liệu trang web để lập chỉ mục trang. Nhưng do tải chậm, trình thu thập dữ liệu web không thể xem tất cả dữ liệu trang. Bởi vì chúng không khả dụng trừ khi người dùng tương tác với trang. Do đó, thông tin đó sẽ không bị bỏ qua cho SEO

Là nhà phát triển, chúng tôi không muốn dữ liệu kinh doanh thiết yếu của mình bị bỏ sót cho SEO. Vì vậy, tôi khuyên bạn không nên sử dụng tải chậm cho nội dung được nhắm mục tiêu SEO như từ khóa và thông tin doanh nghiệp

Phần kết luận

Lazy loading là một công cụ thông minh dành cho các nhà phát triển web để cải thiện khả năng sử dụng và hiệu suất của trang web. Tuy nhiên, giống như “quá nhiều đầu bếp làm hỏng nồi canh”, việc lạm dụng kỹ thuật này có thể làm giảm hiệu suất của trang web

Trong bài viết này, tôi đã tập trung sự chú ý của bạn vào tác động hiệu suất của tải chậm với một số gợi ý để hiểu khi nào nên sử dụng nó. Nếu bạn sử dụng kỹ thuật này một cách cẩn thận, biết khi nào và ở đâu để sử dụng nó, bạn sẽ đạt được hiệu suất đáng kể

Tôi hy vọng bạn đã tìm thấy bài viết này hữu ích. Cảm ơn bạn đã đọc

Xây dựng các ứng dụng web có thể kết hợp

Đừng xây dựng web nguyên khối. Sử dụng Bit để tạo và soạn các thành phần phần mềm tách rời — trong các khung yêu thích của bạn như React hoặc Node. Xây dựng các ứng dụng mô-đun và có thể mở rộng với trải nghiệm nhà phát triển mạnh mẽ và thú vị

Đưa nhóm của bạn đến Bit Cloud để lưu trữ và cộng tác trên các thành phần cùng nhau, đồng thời tăng tốc, mở rộng quy mô và chuẩn hóa đáng kể quá trình phát triển theo nhóm. Bắt đầu với các giao diện người dùng có thể kết hợp như Hệ thống thiết kế hoặc Giao diện vi mô hoặc khám phá phần phụ trợ có thể kết hợp. Hãy thử nó →

Là lười tải cần thiết?

Bạn có nên lười tải hình ảnh trong màn hình đầu tiên không?

Bạn không nên sử dụng lazy loading ở đâu?

Cách hiệu quả nhất để tải một hình ảnh là gì?