Video học lập trình mỗi ngày

Lazy load là gì? Trong bài viết này tôi sẽ nói rõ về phần vì sao không nên sử dụng thư viện lazy load (https://github.com/verlok/lazyload). Một lib rất được ưa chuộng, nhưng với riêng tôi thì nói không với thư viện này? Vì sao ư? Có thể nhiều bạn sẽ cười nhưng vui lòng đọc qua những điều mà tôi đã trải qua với thư viện này. Còn Công nghệ lazy thì quá tuyệt vời.

Khi tôi search về từ khoá lazy load là gì? có rất nhiều page cung cấp rất nhiều thông tin các cách sử dụng.

Lazy load là gì

Lazy load là một công nghệ giúp tăng hiệu suất trì hoãn tải hình ảnh trong các trang web dài vì hình ảnh bên ngoài chế độ xem (phần hiển thị của trang web) sẽ được tải cho đến khi người dùng cuộn đến chúng. 

Đồng ý là kể từ khi ra đời công nghệ này thì lazy loading giúp trang web của chúng ta được cải thiện rất nhiều. Những trang web có hình ảnh nhiều sẽ được giảm tải tôi về vấn đề load src trong image. Và công nghệ này đã được sử dụng rất nhiều, và cũng có nhiều thư viện javascript cung cấp và hỗ trợ điều này. 

Nhưng với một dân SEO thực thụ thì họ nhìn vào cấu trúc của một thư viện thì họ sẽ dùng thư viện nào??? Bây giờ các bạn hãy cùng tôi phân tích đoạn mã dưới đây của thư viện lazyload : https://github.com/verlok/lazyload, một trong những thư viện được sử dụng nhiều nhất trên các website.

 1 - Cú pháp lazy Image: 

<img alt="A lazy image" data-src="lazy.jpg"> 

2 - Cú pháp một lazy image được load bởi một img chất lượng thấp

<img alt="A lazy image" src="loading.jpg" data-src="lazy.jpg"> 

Giải thích: Ở cú pháp 1 thì các bạn thấy khi user scroll xuống thì sẽ không hiện bất kỳ một img default nào cho đến khi img content sẽ load xong. Điều này sẽ không là thân thiện cho lắm. 

Ở cú pháp 2 thay vì không có một hình ảnh mặc định thì ở đoãn mã 2 sẽ cung cấp cho các dev một chỗ để load những hình ảnh thấp qua đó tránh sự nhàm chán và buồn bã của trang web. Và các image gốc cũng sẽ load như ở cú pháp 1. 

Giờ hãy để tôi lướt qua một số trang web ví dụ như lazada. 

KẾT LUẬN:  

Các bạn thấy đó công nghệ lazy loading cũng đã được lazada áp dụng rồi nhưng tôi cá là cú pháp hoặc họ sẽ dùng lazy load kiểu khác. 

Nên tránh xa những kiểu thư viện dùng những cú pháp trên???? 

Giờ đến lúc tôi cảm thấy cú pháp trên không ổn với một dân SEO. Thứ nhất Google thu thập công cụ tìm kiếm các URL hình ảnh trong đó có thuộc tính src, nhưng ở đây thuộc tính src không ano được gán với url hình ảnh gốc do đó chúng không được thu thập thông tin.

 Do đó, hình ảnh của bạn sẽ không bao giờ được tìm thấy trên bất kỳ công cụ tìm kiếm và đặc biệt trên Google. Có thể các bạn cảm thấy không sao, nhưng với một các trang lớn thì nó là một sự tổn thương khá nặng đấy. Đến đây các bạn có thể hình dung ra rồi đúng không? 

Và các bạn lưu ý đây là ý kiến và kinh nghiệm từ một cá nhân như tôi. và tôi cũng mong các bạn cũng sẽ nếu ra những lợi ích or tiêu cực trên thư viện này.