Lazyload Jquery gây hại cho SEO

Tiêu đề có hơi giật gân một chút, xin lỗi vì đã làm các tín đồ của Lazyload/Jquery giật mình.

Nhưng, bạn có chấp nhận hay không thì sự thật vẫn là là vậy. Ngay dưới đây, tôi sẽ lập luận và chứng minh điều này cũng như đề xuất hướng khắc phục.

jquerylazoload

Cảnh báo:

– Bạn KHÔNG nên tin, hãy tự kiểm chứng.

– Tôi có tật lười viết, mà đã viết là viết rất dài, vì vậy bạn nào không thích dài dòng thì chỉ nên đọc phần kết luận ở cuối bài.

– Bài này viết theo lối thực nghiệm (Mặc dù tôi là dân vật lý lý thuyết hẳn hoi!) vì vậy, tôi sẽ trình bày lý thuyết rồi suy đoán và chứng mình suy đoán theo trình tự thời gian, nhắc lại, nó dài!

– Tôi nghèo, không có nhiều domain, do đó mượn luôn domain shop của vợ để thí nghiệm, tôi biết điều này là cấm kị nhưng vì sự thật, tôi đành phải làm (Có một chút nghiêm trọng nhẹ ở đây!). Vậy nên các bạn xin đừng táy máy ẻm, tội nghiệp! 🙂

– Như mọi bài khác, bài này chỉ là quan điểm cá nhân.

Về Lazyload

Lazyload là một Plugin Jquery cho những tín đồ Jquery yêu thích sự mượt mà và kiêu sa đáng kinh ngạc trong tốc độ tải trang web. Khỏi phải nói nhiều về Plugin này cho những ai đã biết về nó.

Với những bạn chưa biết Lazyload là gì, hãy xem demo này về lazyload, Như các bạn thấy, kéo đến đâu hình ảnh khu đó mới hiện lên mờ mờ ảo ảo, chưa kéo thì hình ảnh là một khoảng trống, chưa được GET về, vì vậy cơ chế này nhanh hơn cơ chế bình thường và được ưa chuộng là ở chỗ nó giảm tải được cho trang, tăng tốc độ load cũng như tạo hiệu ứng thân thiện, đẹp mắt, tạo phong cách PRO (Google thích điều này!).

Tôi thì lại tin vào luật “Súng & Bơ” vì vậy từ những năm trước, tôi đã ngại dùng. Vừa rồi có loạt bài về module Page Speed, có bộ lọc Lazyload của Google với cơ chế tương tự Lazyload Jquery này nên tôi có ý định quay lại minh chứng cho suy nghĩ của tôi về chị lazyload này. (Các bạn cứ yên tâm dùng lazyload của Google nhé, đừng sợ ảnh hưởng như tôi sắp nói, Google đã rất thông minh khi thêm một số yếu tố nhằm tránh sự gây hại cho SEO, hi vọng có dịp viết bài này tiếp)

Thí nghiệm

Hướng dẫn sử dụng Lazyload cho website được đăng tại http://www.appelsiini.net/projects/lazyload

Tôi nói sơ qua vậy

– Bước 1: Gắn javascript của Lazyload và của Jquery vào web

– Bước 2: Đặt hình muốn lazyload tác động lên (Chưa tải khi ở dưới đường fold) trong thẻ <img> như dưới đây

<img class="lazy" data-original=“hinh-that.jpg” src=“hinh-gia.gif” width=“640” height=“480”>

Trong đó:

  • data-original=“hinh-that.jpg” là hình gốc muốn hiện ra
  • src=“hinh-gia.gif” là một hình kích thước nhỏ (1×1 chẳng hạn, màu trắng chẳng hạn), làm bù nhìn, hiện sẵn trước khi hình gốc hiện lên thay thế.

– Bước 3: Gắn một đoạn script xử lý và cấu hình (hiệu ứng,…) để lazyload tác động lên thể <img> trên.

Xong, bạn sẽ có một trang tuyệt với với các hình to tổ chảng được mờ mờ ảo ảo load lên trông rất Pro, rất mượt và duyên dáng, Google muôn đời thích điều này!

Khoan, chờ một chút, có gì lạ ở đây

Nếu hiện cái hình của mình bằng code này

<img data-original=“hinh-that.jpg” src=“hinh-gia.gif” width=“640” height=“480”>

thì hóa ra, hình thật của mình bị bỏ qua bởi Google do nằm trong data-original, thay vào đó, web mình, khi Google bot đọc, toàn 1 mớ hinh-gia.gif (nằm trong src chuẩn). Có quái không, nhất là với những trang cần SEO hình ảnh?

Thực tế luôn,

Các bạn xem trang này Demo1 http://www.quanaosi.vn/ao-hawaii-cho-dan-lam-seo.htm

Đang được dùng Lazyload để load hình, và những hình này, lại là hình cần làm SEO, cần hiện nguyên hình trên Google search.

Các bạn view source đi, một mớ hình giả, bù nhìn /wp-content/uploads/test/blank.gif nằm trong src (Chuẩn) trong khi các hình gốc, cần SEO thì nằm trong mớ data-original (không chuẩn) mà Google không thèm quan tâm.

Không tin à, sử dụng chức năng Fetch as Google bot trong WMT bạn cũng sẽ thấy tương tự.

Vậy

Mong muốn của người nông dân: Hình trong trang phải được Google index, search phải lên google, hiện nguyên hình cái hình áo Hawaii đẹp của em để mà khách click vô, ít nhất là phải hiện trong Google image search.

Suy đoán sau phân tích trên: Chết cha, Hình thật dùng lazyload có lẽ sẽ không được Google index vì không nằm trong src chuẩn của thẻ img.

Kết quả thật từ Google: Quả thật hình cần SEO không được index. Xem Hình kết quả dưới đây:


Oh, May quá, Google index trang của mình rồi!

Oppp…Google không biết gì về mấy cái hình của mình, mặc dù mình SEO dữ tợn lắm mà :((

Không tin vào mắt của mình, nhưng tất cả đã được báo trước. Kiên nhẫn chờ vài hôm nữa, kết quả vẫn thế, không có gì thay đổi.

Cách khắc phục

Quay lại lazyload, hay như thế, pro như thế, nhẹ như thế mà bỏ thì uổng.

Mong muốn của người nông dân: Hình trong trang phải được Google index, search phải lên google, hiện nguyên hình cái hình áo Hawaii đẹp của em để mà khách click vô, ít nhất là phải hiện trong Google image search.

Nhưng làm sao để Google index đây?

Suy đoán: Nguyên nhân Google không thèm index là do cái hình thật của mình lại nằm trong data-original thay vì src của img.

Vì vậy, bất chấp mọi thứ phải đưa cho bằng được hình thật vào src tức là ít nhất phải như thế này:

<img src=“hinh-that.jpg” width=“640” height=“480”>

Yêu cầu của Lazyload, muốn chạy được thì phải có data-original chứa hình thật và src chứa hình bù nhìn.

Đơn giản thôi, Google không đọc được Javascript nên mới có cớ sự trên, thế thì lấy độc trị độc vậy: Ta sẽ dùng javascript để thêm các thuộc tính data-original như yêu cầu của lazyload, chấp Google đọc luôn.

Tức là làm như sau

Hình thật vẫn nằm trong src (yên tâm với Google)

<img class="lazy" src=“hinh-that.jpg” width=“640” height=“480”>

Tiếp theo, viết một script thêm thuộc tính data-original vào với giá trị là giá trị của thuộc tính src cũ. Đồng thời, sau đó, sửa thuộc tính src hiện tại thành giá trị “hình-gia.gif” để nó hiện bù nhìn. Code nó như thế này:

$(“img.lazy” ).each(function(){
$(this).attr(“data-original”, $(this).attr(“src”));
$(this).attr(“src”, “hinh-gia.gif”);
});

Bạn nào biết Jquery thì không khó để hiểu nó, mà bạn nào không biết Jquery thì đọc đoạn trên mình có giải thích cơ chế rồi.

Như vậy, sau khi lên trình duyệt, đoạn <img> trên sẽ chuyển thành:

<img class="lazy" data-original=“hinh-that.jpg” src=“hinh-gia.gif” width=“640” height=“480”>

Rồi sau đó, hiệu ứng Lazyload sẽ được áp dụng lên.

trong khi Google đọc thì lại là

<img src=“hinh-that.jpg” width=“640” height=“480”>

(Google thích điều này nhất!)

Demo2 đây các bạn: www.quanaosi.net/ao-hawaii-cho-dan-lam-seo.htm

Chú ý: demo2 khác demo1 chỉ 2 điểm:

– demo1 host ở quanaosi.vn và demo12 quanaosi.net;

– demo1 dùng “lazyload thuần túy”, demo2 dùng “lazyload biến hóa SEO” (Gọi vậy đi, chứ không biết gọi sao)

Ngoài ra, nội dung hiển thị không khác gì cả, như các bạn thấy.

Kết quả thật từ anh Google: Thật bất ngờ, tôi phải vui mừng thốt lên giữa đêm, mặc dù không có gì ngoài mong đợi cả, hình ảnh đã dc index đẹp trên Google web search và Google image search cho demo2, quanaosi.net, dùng “lazyload biến hóa SEO”. Trong khi hình của  “lazyload thuần túy” thì mãi không thấy đâu cả:

Tự sướng nè:


Hình ảnh của page hiện nguyên hình trên Google Search Web.

Trên Google image search cũng không ngoại lệ, hình ảnh phê luôn.

Kết luận

Lazyload CÓ gây hại cho SEO, như tiêu đề, vậy là không giật tít nhé. Và đã thử nghiệm “lâm sàn” với Lazyload Jquery trên 2 page khác nhau. Các cơ chế Lazyload khác cũng tương tự nếu hình thật đặt ở thuộc tính khác src chuẩn mà không có cơ chế thay thế.

– Bạn vẫn yêu Lazyload, vậy sẽ tốt hơn nữa nếu bạn tham khảo cách chống chế của mình ở trên.

– Bạn có cách khác, nên comment ngay dưới bài này.

– Bạn có thắc mắc, cũng xin vui lòng post comment.

Trần Triệu Phú – Trungtamtinhoc.edu.vn

Loading Facebook Comments ...

16 Comments

  1. Good áp dụng ngay cho site mình

  2. VỀ TỐC ĐỘ LOAD TRANG CO THAY ĐỔI KHÔNG BỞI VÌ LÚC ĐẦU THAY VÌ NÓ HIỆN HÌNH GIẢ 1KB BAY GIO NO CHAY HINH THAT 300KB

  3. Rat tuyet voi. Rat hop voi SEO. dang do du su dung so kg hop voi SEO. Gap bai nay that tuyetttttttttttttttttt VVVVVVVVVVVVVoi…………….^_^

  4. Cảm ơn bạn đã chia sẻ!
    Bài viết rất hay, very like!

  5. mục tiêu của lazyload là giúp cho page load ảnh hiệu ứng đẹp và tốc độ load page nhanh hơn, giờ bạn làm thế này thì nó chỉ còn mỗi cái đẹp còn tốc độ thì không cải thiện, vì src=”hinh-that.jpg” kích thước lơn mà nó phải load ngay từ đầu

  6. theo tôi thì làm thế này cũng nội dung hình đó nhưng nhỏ hơn, đảm bảo cả về tốc độ,seo hình ảnh và hiệu ứng, cái quan trọng nhất ở đây là SEO, xấu tí chả quan trọng

  7. Dọa vớ dọa vẩn …. cả một đống dùng lazy load kìa ! nhưng đã biết dùng lazy load thì không dùng cái cách ngu ngu như admin nói là SRC=:HÌNH FAKE: DATA-ORIGINAL=:HÌNH THẬT:

  8. Chờ hoài cũng có comment đáng mong chờ.
    Như mình đã comment trước đó, “Bài này có 1 điểm Sai mà k ai góp ý cả sao?” (Tab Google+, manseo.vn chơi ác quá, 3 tab comment lận)
    Comment của bạn [nguyen] và comment đầu của bạn [newbi] đã chỉ ra chỗ sai đến hỏng trong cách khắc phục mà mình để xuất. Bạn nào có cách khắc phục tối ưu hơn không?

    @[Jam Việt]: Đúng rồi, mình dọa đó mà, ngay từ đầu mình cũng có ý là mình dọa mà, ai yếu tim thì sơ chơi :). Cũng có thể cái cách dùng data-original=“hinh-that.jpg” src=“hinh-gia.gif” là của lazyload mình sài, sau khi bọn developer của lazyload đọc dc bài này thấy quả thật chúng ngu ngu nên đã cải tiến =))

  9. Đầu tiên cảm ơn bạn đã khám phá ra cách khắc phục về nhược điển của Lazyload.
    Tuy nhiên theo mình khi dùng như vậy có còn đúng mục đích của Lazyload không, hay dùng như vậy rồi chỉ là hiệu ứng cho pro xíu, bởi vì khi dùng Lazyload là để cho web chạy nhanh, tải ảnh từ từ.
    Nếu xét về quy trình xử lý thì khi dùng Lazyload như trên cho web co 10 hình ảnh thì:
    1 – Đầu tiên tải thư viện Lazyload
    2 – Tiếp theo là tải 10 ảnh vì thẻ img có src.
    3 – Xử lý vòng lặp jquery thể img class lazy có thêm data-original
    4 – Xử lý chức năng Lazyload()
    Trường hợp web có 10 hình ảnh, không cần dùng Lazyload như trên, quy trình xử lý sẽ bỏ qua bước 1,3,4 mà tốt cho SEO hình ảnh là bình thường.
    Vậy theo cá nhân mình trường hợp 2 tốt hơn, đơn giản, không dùng thủ thuật khắc phục Lazyload chi cho lung tung, mà lại phải xử lý nhiều thứ, làm web chậm hơn.

  10. khâm phục tác giả bài viết này

  11. sao không dùng AJAX nhỉ ?

  12. @Kim Vang: nói như bạn không đúng rồi, việc dùng Lazyload để tải ảnh từ từ giúp việc load trang được nhanh hơn. Làm theo tác giả giúp khắc phục nhược điểm của LazyLoad ảnh hưởng tới SEO là chuẩn đấy. Còn theo giả thiết bạn đặt ra, mình sẽ phân tích thế này:
    Quy trình tải web vẫn theo 4 bước như bạn nói:
    ” 1 – Đầu tiên tải thư viện Lazyload
    2 – Tiếp theo là tải 10 ảnh vì thẻ img có src.
    3 – Xử lý vòng lặp jquery thể img class lazy có thêm data-original
    4 – Xử lý chức năng Lazyload() ”
    – Nếu không sử dụng LazyLoad, trình duyệt client sẽ bỏ qua bước 1,3,4 mà tải bụp 1 cái 1 loạt Image cùng với content của trang web => Thời gian hiển thị trang web sẽ rất chậm
    – Sử dụng LazyLoad phải sử lý cả 4 bước, nhưng làm tuần tự : Tải contet => Hiển thị ra trình duyệt => Xử lý vòng lặp jquery thể img class lazy có thêm data-original => Load từng thẻ Image
    Như vậy, việc dùng LazyLoad sẽ hiển thị trang web cho người sử dụng nhanh hơn, không mất thời gian chờ lâu vì tải content về hiển thị trước, còn không dùng lazyload trình duyệt nó sẽ chờ tải xong tất cả content + ảnh rồi mới hiển thị ra cho người dùng bạn nhé 🙂

  13. Hình trong trang phải được Google index, search phải lên google, hiện nguyên hình cái hình áo Hawaii đẹp của em để mà khách click vô, ít nhất là phải hiện trong Google image search.

  14. Tại sao không để tag img trong ? Vẫn đảm bảo google index được và trang vẫn chạy lazy load tốt .

  15. Cái nào cũng có cái hay của nó, nếu dùng lazy load theo kiểu bạn, lúc đầu là load hình thật ra, rồi thay bằng hình giả, sau đó lại dùng lazy load để về lại hình thật, như thế liệu có tác dụng không?

  16. Load hình thật, rồi chạy script chèn hình giả vào, sau đó lại load từng hình thật… chủ thớt lại thấy nó nhanh hơn dc nhỉ. :v

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*