Skip to content

Instantly share code, notes, and snippets.

@anonystick
Last active March 19, 2019 04:00
Show Gist options
  • Save anonystick/42e6df36438be7dade9d18d0770327d8 to your computer and use it in GitHub Desktop.
Save anonystick/42e6df36438be7dade9d18d0770327d8 to your computer and use it in GitHub Desktop.
Why you don't need Lazy load lib javascript?
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ì không?
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.
Và tất cả đều chung một quan điểm:
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 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 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.
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 đượ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.
Plus: Ở bài tiếp theo tôi sẽ giới thiệu một các bạn một thư viện tuyệt vời về các sử dụng LAZY LOAD nhưng vẫn thân thiện với SEO.
Cảm ơn các bạn đã đọc .
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment