Kỹ thuật Lazy loading là gì mà được nhiều người ứng dụng để nâng cao trải nghiệm của người dùng đến vậy? Bài viết sau sẽ hướng dẫn cách triển khai Lazy loading giúp tối ưu tốc độ tải trang. Cùng theo dõi nhé!
Lazy loading là gì?
Lazy loading là một kỹ thuật tối ưu website bằng cách trì hoãn tải các dữ liệu không quan trọng vào thời điểm tải trang. Hiểu một cách đơn giản, thay vì tải toàn bộ dữ liệu trên trang ngay lập tức, lazy loading chỉ tải dữ liệu khi bạn cần sử dụng/kéo chuột (scroll) đến chúng.
Khi trên trang của website có quá nhiều dữ liệu, nếu tải tất cả cùng một lúc sẽ khiến tốc độ tải trang dễ bị chậm lại, ảnh hưởng đến lượng truy cập cũng như chất lượng trang. Điều này dẫn đến trải nghiệm người dùng kém, tỷ lệ thoát trang tăng.
Vậy nên, với website áp dụng lazy loading, khi người dùng lướt đến đâu thì dữ liệu sẽ được tải đến đó. Đây chính là cách mà lazy loading thực hiện tối ưu cho một trang web.
Tương tự đối với hình ảnh, lazy loading image chỉ tải ảnh khi cần sử dụng, ẩn các ảnh không cần thiết (ảnh ngoài màn hình đang hiển thị) trên website. Lazy loading có thể áp dụng cho bất kỳ nguồn tài nguyên trên trang, kể cả file JavaScript.
Bản chất của lazy loading
Để sử dụng lazy loading trên một page trên website, thông thường bạn có thể sử dụng 2 cách: sử dụng thẻ và sử dụng thuộc tính background-image của CSS.
Lazy loading image qua thẻ img
Thẻ <img/> với định dạng cơ bản:
<img src=”/path/to/some/image.jpg”/>
Trình duyệt đọc src attribute để trigger đến việc tải ảnh. Vậy nên, bạn sẽ move link image qua 1 attribute khác để ngăn chặn việc tải ảnh này.
Dưới đây là một ví dụ về việc sử dụng data-src attribute, bạn hoàn toàn có thể đặt bất kỳ tên nào bạn muốn.
<img data-src=”/https://ink.imagekit.io/demo/default-image.jpg”/>
Sau khi đã thực hiện được việc ngăn chặn tải ảnh tức thời, bạn cũng cần thông báo cho trình duyệt biết khi nào cần tải ảnh lên. Lúc này, bạn sẽ sử dụng JavaScript để nắm bắt hành vi người dùng và thêm liên kết từ data-src vào lại attr src.
Lazy loading image qua thuộc tính background-image
Với cách sử dụng thuộc tính background-image, trình duyệt sẽ xây dựng cây DOM kèm theo CSSDOM, đồng thời kiểm tra xem kiểu CSS có thể áp dụng cho nút DOM hiện tại hay không.
Nếu DOM hiện tại có background-image thì trình duyệt sẽ tải lên ảnh đó. Tương tự đối với csr attr, việc đầu tiên bạn cần thiết lập cấu hình DOM có giá trị background-image:none, sau đó giá trị sẽ được thay đổi khi cần thiết.
Tính năng của lazy loading
Tính năng lazy loading (tải chậm) cung cấp một số lợi ích quan trọng trong phát triển phần mềm. Dưới đây là một số tính năng chính của lazy loading:
- Tối ưu hóa hiệu suất: Bằng cách tải dữ liệu và tài nguyên chỉ khi cần thiết, lazy loading giúp giảm thời gian tải trang và tối ưu hóa việc sử dụng tài nguyên hệ thống.
- Tiết kiệm băng thông mạng: Với lazy loading, chỉ những phần của trang hoặc ứng dụng được tải khi người dùng yêu cầu. Từ đó giúp tiết kiệm băng thông mạng. Điều này đặc biệt hữu ích khi có nhiều dữ liệu hoặc tài nguyên lớn cần tải.
- Cải thiện trải nghiệm người dùng: Lazy loading giúp giảm thời gian chờ đợi. Người dùng chỉ cần đợi tải dữ liệu khi thực sự cần thiết hoặc khi phần đó được hiển thị trên màn hình.
- Tải dữ liệu từ xa: Với tính năng này, khi có nhu cầu tải dữ liệu từ nguồn từ xa như cơ sở dữ liệu hoặc API. Lazy loading cho phép tải dữ liệu theo yêu cầu. Giúp tối ưu hóa việc truy xuất dữ liệu và giảm thời gian phản hồi ban đầu.
Những trường hợp nên/không nên sử dụng lazy loading
Tùy vào ứng dụng/website mà bạn nên cân nhắc sử dụng lazy loading như:
- Khi ứng dụng/website lớn và phức tạp.
- Khi ứng dụng/website được sử dụng bởi người dùng có kết nối internet chậm.
- Khi ứng dụng/website có nhiều hình ảnh hoặc tệp phương tiện khác.
- Khi ứng dụng/website có nhiều mã không được sử dụng thường xuyên.
- Ứng dụng/website cần tối ưu trên các thiết bị di động và cải thiện tốc độ trang web.
Tuy nhiên, có các trường hợp không cần sử dụng lazy loading như
- Khi ứng dụng/website nhỏ và đơn giản.
- Khi ứng dụng/website được sử dụng bởi người dùng có kết nối internet nhanh.
- Khi ứng dụng/website có nhiều mã quan trọng được sử dụng rất thường xuyên.
- Khi ứng dụng/website được sử dụng cho mục đích SEO.
- Các website thương mại điện tử hoặc bán hàng online. Bởi lazy loading có khả năng sẽ ẩn mất sản phẩm mà họ đang muốn tìm.
Ưu điểm và nhược điểm của lazy loading
- Một trong những ưu điểm lớn của lazy loading là cải thiện hiệu suất của trang web trong mắt người dùng do chỉ tải những dữ liệu cần thiết.
- Giúp hạn chế độ trễ xảy ra khi tải hàng loạt dữ liệu trên một trang.
- Lazy loading giúp bạn không bị mất chi phí băng thông cho nội dung mà bạn không tải xuống, không xem hoặc không xem. Nếu lưu lượng truy cập vào website là điều bạn quan tâm, thì lazy loading là một lựa chọn lý tưởng.
Tuy nhiên cũng có một số nhược điểm như:
- Cách tiếp cận này dẫn đến nhấp nháy nội dung bị thiếu.
- Quá trình lazy loading đòi hỏi khắt khe hơn, phức tạp hơn và dễ xảy ra lỗi hơn đối với Javascript. Dữ liệu khởi tạo tải chậm sẽ không xảy ra khi Javascripts không được tải xuống do lỗi kết nối mạng hoặc lỗi thực thi Javascripts.
Những cách triển khai lazy loading
Sau khi đã biết được lazy loading là gì thì cùng đến với cách triển khai lazy loading. Với Lazy loading, đây là một thuộc tính để website của bạn có thể điều khiển các thông tin, dữ liệu được hiển thị page (thường là hình ảnh).
Thông thường, để triển khai lazy loading, bạn có thể sử dụng những cách sau.
Dùng thuộc tính loading
Với cách dùng này, bạn không cần dùng JavaScript và lo lắng về những lỗi có thể xảy ra với các hình ảnh trên trang.
Điều duy nhất bạn cần làm là báo hiệu cho trình duyệt biết những hình ảnh nào cần áp dụng lazy-load bằng các thuộc tính loading với 3 giá trị tương ưng là: lazy, eager và auto.
- Lazy: Trình duyệt cần lazy-load dữ liệu này
- Eager: Giá trị này yêu cầu trình duyệt phải tải dữ liệu này ngay lập tức hoặc càng sớm càng tốt. Ngoài ra, nếu dữ liệu đang được tải ở giá trị lazy được chuyển sang eager thì dữ liệu sẽ lập tức được tải ngay.
- Auto: Trình duyệt sẽ tự động quyết định xem có nên lazy-load dữ liệu trên trang hay không.
Dùng Fallback hoặc Polyfill
Đối với những trình duyệt không hỗ trợ thuộc tính loading, bạn có thể triển khai lazy loading bằng cách dùng Fallback (dự phòng) và Polyfill (mã để triển khai các tính năng mà trình duyệt web không hỗ trợ).
Khi dùng Fallback hoặc Polyfill, bạn cũng cần viết code với thuộc tính loading để triển khai kỹ thuật lazy loading với các dữ liệu hình ảnh.
Dùng Intersection Observer API
Intersection Observer API cho phép bạn giám sát và thực hiện một điều gì đó đối với dữ liệu (cụ thể là hình ảnh) khi được người dùng lướt tới.
Mặc dù có hỗ trợ lazy-load các hình ảnh nhưng Intersection Observer API không hỗ trợ thuộc tính loading. Bạn chỉ dùng lệnh lazy image khi muốn lazy-load các hình ảnh trên trang web.
Ngoài ra, cách này cũng lazy-load được cả những hình nền bằng việc sử dụng lệnh lazy-background.
Một số lưu ý khi sử dụng lazy loading
Những cách sử dụng lazy loading vừa được nêu đều có những nét đặc thù với từng đặc tính của các trình duyệt web hiện nay.
Ví dụ: Nếu bạn bắt buộc phải dùng trình duyệt web Internet Explorer để lazy-load dữ liệu, bạn có thể dùng Polyfill để giả lập Intersection Observer API và sau đó sử dụng bình thường.
Khi dùng Intersection Observer API để lazy load dữ liệu hình ảnh, lệnh scr sẽ trở thành data-scr. Tuy nhiên, Google Bot sẽ không hiểu data-scr là gì. Điều này khiến ảnh của bạn bị cho là lỗi và không được index.
Bên cạnh đó, bạn cũng cần tránh lazy-load các ảnh đầu trang để tránh tối thiểu layout shift. Đồng thời, trước khi sử dụng lazy loading, bạn nên chỉ ra kích thướt ảnh để khi người dùng lướt tới vị trí đó, việc tải ảnh sẽ không làm xê dịch thông tin trên trang.
Câu hỏi thường gặp (FAQs)
Lazy loading có ảnh hưởng đến SEO không?
- Trả lời: Lazy loading không gây ảnh hưởng tiêu cực đến SEO. Ngược lại, nó có thể giúp tăng tốc độ tải trang, cải thiện trải nghiệm người dùng và giảm thời gian tải trang. Điều này có thể được Google và các công cụ tìm kiếm khác đánh giá cao.
Lazy loading có thể áp dụng cho trang web đa ngôn ngữ không?
- Trả lời: Có, lazy loading có thể áp dụng cho trang web đa ngôn ngữ mà không gặp vấn đề. Bạn chỉ cần áp dụng cùng một nguyên tắc tải nội dung theo từng ngôn ngữ tương ứng, đảm bảo rằng chỉ những phần cần thiết trong mỗi ngôn ngữ được tải trước.
Có công cụ hoặc plugin nào hỗ trợ triển khai lazy loading không?
- Trả lời: Có, có nhiều công cụ và plugin hỗ trợ triển khai lazy loading trên các nền tảng web khác nhau. Ví dụ như Lazy Load by WP Rocket cho WordPress hoặc Lazy Loader cho các dự án tùy chỉnh. Bạn có thể tìm hiểu và chọn công cụ phù hợp với nền tảng và yêu cầu của bạn.
Lazy loading có ảnh hưởng đến trải nghiệm người dùng không?
- Trả lời: Phần lớn thời gian tải trang được cải thiện khi sử dụng lazy loading, giúp người dùng truy cập nhanh chóng đến nội dung mà họ quan tâm. Điều này có thể cải thiện trải nghiệm người dùng, giảm tỷ lệ thoát khỏi trang và tăng khả năng tương tác trên trang web.
Qua bài viết trên, Miko Tech đã giúp bạn hiểu được lazy loading là gì và cách triển khai lazy loading. Chúc bạn thực hiện thành công. Đừng quên theo dõi bài viết tiếp theo từ Miko Tech nhé.
Trần Tiến Duy tốt nghiệp cử nhân chuyên ngành Thương Mại Điện tử tại trường đại học Sư Phạm Kỹ Thuật TPHCM. Từng Phụ trách mảng SEO Website tại nhiều lĩnh vực như giáo dục, công nghệ, thực phẩm, đồ dùng gia dụng, …v.v
Trần Tiến Duy hiện đang là Giảng viên Digital Marketing với chuyên môn chính là SEO tại trường Cao Đẳng FPT Tp.HCM.
Với hơn 5+ năm kinh nghiệm training & quản lý nhân sự về quản lý các dự án SEO/ Content SEO.
Hiện tại Trần Tiến Duy là SEO Manager tại công ty Miko Tech Agency chuyên về Thiết Kế Website, với sự Quản lý của anh đã đưa Miko Tech trở thành công ty chuyên về Thiết Kế Website thuộc TOP ngành trên nền tảng Internet hiện nay. Ngoài ra anh Trần Tiến Duy còn đào tạo training nhân viên. Ngoài ra anh Trần Tiến Duy còn đào tạo training nhân viên khoá học SEO Website nội bộ cho Doanh nghiệp giúp Doanh Nghiệp tối ưu tốc độ website phát triển kinh doanh mạnh mẽ hơn trong thời đại công nghệ số 4.0 hiện nay.
Anh Trần Tiến Duy còn chia sẻ miễn phí những Tool SEO hiệu quả giúp anh em SEOer tiết kiệm thời gian và được rất nhiều anh em trong giới SEOer và sinh viên sử dụng tại website: trantienduy.com/tool/
