HomeĐời SốngLazy loading là gì

Lazy loading là gì

08:49, 28/03/2021

Mục lục nội dung

Tại sao lại yêu cầu “lazy-loading images”?Kĩ thuật 1: lazy-load thiết yếu thống với hiện tại đại“Lazy-loading images” có hại không?

Lời tựa

Trong nội dung bài viết lần này, hãy cùng bản thân nghiên cứu và phân tích tự “định kỳ sử” cho tới “hiện đại” những vấn đề về lazy-loading images nhé (bao gồm cả kim chỉ nan và code). Những trình diễn của mình dựa trên tay nghề và kiến thức và kỹ năng của phiên bản thân, thêm vào đó phân tích với tổng hòa hợp từ khá nhiều nguồn khác nhau nhằm mục tiêu cung cấp mang đến các bạn cái nhìn tương đối đầy đủ duy nhất bao gồm cả kim chỉ nan lẫn thực hành thực tế. Nếu chúng ta có góp ý hay bổ sung cập nhật gì thì nên để lại bình luận bên dưới nhé.

Bạn đang xem: Lazy loading là gì

Kĩ thuật “lazy-loading images” hiện thời đang có rất nhiều đổi mới đối với trước, tuy nhiên mình đang chưa đi ngay lập tức vào code mà vẫn tản mạn về lý thuyết một tí. Quý khách hàng nào ao ước khiêu vũ nhanh khô đến phần thực hành thì có thể bỏ qua phần chém gió lâu năm loại của bản thân nhé.


*
noscript> img data-src="https://aiesec-unwe.net/sample.jpg" />noscript>Tuy nhiên các bạn không cần thiết phải băn khoăn lo lắng do thiệt sự tỉ lệ thành phần user đọc báo mà tắt javascript là hết sức rẻ.

3. Không giỏi cho SEO

Vẫn là khi thực hiện Intersection Observer hay scroll. Khi con bot (mình ám chỉ GoogleBot) crawl website của bạn, nó sẽ không hiểu data-src là gì mà nó chỉ hiểu src mà lại thôi. Trong trường hòa hợp này nó vẫn coi nlỗi tấm hình đó bị lỗi cùng không index tnóng hình của công ty. Tuy nhiên nói vậy ko tức là không tồn tại giải pháp, có một trong những triông chồng dành cho bạn nếu khách hàng quan lại tâm:

Feed đến nhỏ bot bằng phương pháp thủ công bằng tay trải qua sitebản đồ (nếu như khách hàng là dân SEO thì các bạn sẽ đọc nó là gì)Kiểm tra xem navigator.userAgent liệu có phải là bot của Search Engine không. Nếu phải thì ta làm lơ việc lazy-load bằng cách triển khai ngay làm việc copy từ data-src sang src. Việc này hơi tricky phải bản thân ko nói chi tiết ở đây (nó liên quan mang lại SSR cùng CSR). Nếu bạn tất cả thắc mắc gì thì vướng lại phản hồi bên dưới nhé.4. Thêm code Javascript chỉ để lazy load vài tnóng ảnh

Nếu con số hình ảnh bắt buộc lazy load chỉ dưới 5 tnóng, với chúng ko tác động không ít đến tốc độ mua trang, thì bản thân khuyên không nên áp dụng lazy load. Vấn đề này chỉ khiến cho bạn tốn thêm các cái code javascript, cùng đã lớn hơn nếu khách hàng nhúng cả polyfill vào nữa. Thay vào kia, hãy kiếm tìm phương pháp optimize tnóng hình ảnh của chúng ta, với áp dụng native sầu lazy-load nếu rất có thể.

Xem thêm: 5 Thỏi Son Hồng San Hô Dạng Lì Màu Hồng San Hô Giá Tốt, Khuyến Mãi Hấp Dẫn

5. loading="lazy" không cung ứng background image

Nếu bạn muốn lazy-load ảnh background, thì cách sử dụng loading="lazy" sẽ không còn chạy và các bạn yêu cầu cần sử dụng 2 phương pháp còn lại nhé.

Tóm tắt bài viết trong một table

NativeIntersection Observerscroll event handler
PerformanceTốt nhấtTốtKhông thừa tệ ví như giải pháp xử lý tốt
Background ImageKhông
JavascriptKhông cầnCầnCần
SEOKhông hình ảnh hưởngCó hình ảnh hưởngCó hình ảnh hưởng
User friendlyTốt nhấtTốtcũng có thể lag ví như cách xử trí ko tốt
Browser supportChưa những (thiếu hụt safari)Không tư vấn IETốt trên các browserKhông tư vấn IETốt bên trên số đông browser, kể cả IE
PolyfillKhông phải (phiên bản thân nó đã là một trong những polyfill)

Download Source codes

Mình đi cùng source code dễ dàng mang đến 3 phương án sinh hoạt trên, chúng ta làm sao buộc phải thì có thể sở hữu về nhằm tham khảo nhé.

https://drive sầu.google.com/file/d/16jTYVUiA5xykDrhaP60GwvuztOPTOhwB/view?usp=sharing

Kết luận

“Lazy-loading images” chỉ là một vào tương đối nhiều kĩ thuật nhằm về tối ưu performance mang đến website. Sắp cho tới bản thân đã viết thêm các nội dung bài viết so sánh về website performance nhé.

Bài viết của chính mình tương đối lâu năm rồi, hi vọng những bạn muốn bài viết lần này của bản thân mình, bản thân đang luôn update nhằm nó không bị lạc hậu nhé. Nếu các bạn tất cả góp ý giỏi thắc mắc gì thì xin còn lại phản hồi bên dưới.