Áp dụng Lazy load cho Blogger

Trong biên tập nội dung website thì hình ảnh là một trong những loại nội dung tối quan trọng. Để nội dung bài viết trở nên sinh động, chúng ta thường phải sử dụng nhiều hình ảnh. Tuy nhiên việc dùng quá nhiều hình ảnh sẽ gây ảnh hưởng nặng nề tới tốc độ tải trang web. Một thống kê thực hiện bởi HTTP Archive cho biết hình ảnh chiếm khoảng 45% dung lượng mỗi trang web. Bài này sẽ hướng dẫn các bạn áp dụng kỹ thuật lazy load cho Blogger để tối ưu việc tải hình ảnh trên web.

Lazy load là gì?

Lazy load là một kỹ thuật trong lập trình web, dùng để trì hoãn việc tải tài nguyên cho đến khi cần thiết. Việc áp dụng kỹ thuật này giúp cải thiện đáng kể hiệu năng của các trang web lớn. Về cơ bản, với một trang web nhiều nội dung, các tài nguyên được chia thành nhiều phần, người dùng xem tới phần nào thì các tài nguyên đó mới được nạp thêm vào. Việc áp dụng kỹ thuật Lazy loading sẽ giúp tăng tốc độ tải trang web (vì chúng ta sẽ chỉ tải 1 phần nội dung trang).

Giới thiệu lazySizes

lazySizes là một lazyloader script được phát triển bởi Alexander Farkas. Lazysizes rất nhanh, nhẹ và SEO friendly. Script này hỗ trợ đầy đủ cho hình ảnh, iframe, scripts/widget… LazySizes sẽ tự động ưu tiên tải các tải nguyên quan trọng giúp cải thiện đáng kể hiệu suất của trang web.

Ngoài ra, lazySizes cũng được tích hợp tính năng responsive image. Script này sẽ tự động tính toán và phân phối kích thước hình ảnh phù hợp nhất đến người dùng. Điều này cũng có nghĩa là bạn có thể chia tác các tệp CSS dành cho nhiều loại nội dung khác nhau.

Những ưu điểm của lazySizes:

• Hiệu năng cao: script nhẹ, hoạt động mượt mà với số lượng lớn ảnh/iframe.
• Linh hoạt: script cung cấp nhiều tiện ích mở rộng cho các tính năng nâng cao. Ví dụ như hiệu ứng LQIP/blurry.
• SEO friendly: lazysizes không ẩn ảnh và tài nguyên của bạn khỏi Google. Nên sẽ không sự có khác biệt dù có sử dụng hay không với các bộ máy tìm kiếm.
• Độ tương thích cao: script hoạt động tốt với hầu hết các trình duyệt và hệ điều hành.

Ngoài ra, lazySizes còn rất nhiều tính năng và hiệu ứng khác, các bạn có thể xem thêm các ví dụ mẫu.

Áp dụng lazy load cho Blogger

Việc áp dụng kỹ thuật lazy load cho blogger sẽ giúp cho blog của bạn tải nhanh hơn, đem lại trải nghiệm mượt mà có người dùng. Trước khi tiến hành chỉnh sửa giao diện, các bạn hãy sao lưu lại template để phòng trường hợp có lỗi. Xem cách sao lưu giao diện Blogger.

Việc áp dụng lazy loading cho hình ảnh sẽ có 2 loại:

• Lazy load image trong thẻ <img>
• Lazy load background image

Các bạn tiến hành tải tệp lazysizes.min.js về và upload lên host của bạn. Nếu không có hosting riêng thì các bạn có thể dùng link của mình tại:

https://cdn.jsdelivr.net/gh/Omegakd/omegakd-blog/javascript/lazysizes.min.js

Áp dụng Lazy load image

Sau khi sao lưu, chúng ta tiến hành edit template: Theme > Menu > Edit HTML.

Đầu tiên, bạn thêm đoạn mã bên dưới vào trước thẻ </head>. Với nội dung của thuộc tính src là đường dẫn tệp script đã chuẩn bị.

<!-- Lazy Sizes - lazy load image-->
<script src="https://cdn.jsdelivr.net/gh/Omegakd/omegakd-blog/javascript/lazysizes.min.js" async="async"></script>

Để áp dụng lazy load cho blogger, thẻ <img> cần được cấu hình theo các cú pháp như sau:

<!-- non-responsive: -->
<img data-src="image.jpg" class="lazyload">

<!-- responsive example with automatic sizes calculation -->
<img data-sizes="auto" data-src="image2.jpg" data-srcset="image1.jpg 300w,
    image2.jpg 600w,
    image3.jpg 900w" class="lazyload">

<!-- iframe example -->
<iframe class="lazyload" allowfullscreen="" data-src="//www.youtube.com/watch?v=9GE7d5PaAq0" frameborder="0">
</iframe>

Chúng ta sẽ thực hiện theo cú pháp ở trên. Các bạn nhấn tổ hợp phím Ctrl + F, tìm kiếm thẻ: <img. Sau đó thêm thuộc tính class="lazyload" vào trong nội dung thẻ img và đổi src thành data-src.

Ví dụ ta có đoạn mã như sau:

<img src="//link-to-image.jpg" expr:alt="data:post.title" expr:title="data:post.title" width="72px" height="72px">

Sẽ thay đổi thành như bên dưới:

<img class="lazyload" data-src="//link-to-image.jpg" expr:alt="data:post.title" expr:title="data:post.title" width="72px" height="72px">

Các bạn lưu ý, nếu template của bạn sử dụng javascript để tạo nội dung HTML. Mã HTML sẽ phải sử dụng ở dạng Escape HTML. Ví dụ như đoạn mã dưới:

<script>
document.write('&amp;lt;img class=&amp;quot;vietrick-img&amp;quot; src=&amp;quot;'&amp;lt;data:post.thumbnail/&amp;gt;'&amp;quot; height=108 width=72 /&amp;gt;' );
</script>

Sẽ đổi thành như sau:

<script>
document.write('&amp;lt;img class=&amp;quot;vietrick-img lazyload &amp;quot; data-src=&amp;quot;'&amp;lt;data:post.thumbnail/&amp;gt;'&amp;quot; height=108 width=72 /&amp;gt;' );
</script>

Áp dụng Lazy load background image

Để áp dụng lazy loading cho CSS background image, chúng ta cần sử dụng thêm plugin lazysizes unveilhooks.

Các bạn chèn script ls.unveilhooks.min.js vào sau script lazysizes ở trên.

Sau đó với nội dung cần lazy loading, các bạn chỉnh sửa theo cú pháp bên dưới:

<div class="lazyload" data-bg="bg-img.jpg">
	<!-- Div content -->
</div>

Áp dụng Lazy load image cho bài viết

Thủ công

Để áp dụng lazy load cho bài viết, các bạn có thể chèn hard-code thủ công trong nội dung bài viết. Trong mục soạn thảo bài viết, các bạn chuyển qua chế độ soạn thảo bằng HTML. Sau đó có thể chèn thủ công class="lazyload” vào thẻ <img> .

Cách này tuy hơi vất vả một chút khi viết bài, nhưng bù lại nội dung sẽ thân thiện hơn với các bộ máy tìm kiếm.

Tự động bằng jQuery

Hoặc các bạn có thể sử dụng jQuery để tự động áp dụng lazy load cho blogger trên tất cả các hình ảnh trong bài viết. Ở template, các bạn chèn đoạn mã sau vào trước thẻ đóng </body>.

<script type="text/javascript">
	//Add lazyload for IMG and FRAME - Vietrick
	$(".post-body.entry-content img").each(function() {	$(this).attr("src", $(this).attr("src").replace("http://", "https://"));	$(this).addClass("lazyload");        $(this).attr("data-src",$(this).attr("src"));        $(this).removeAttr("src");    	});
	$(".post-body.entry-content source").each(function() {	$(this).attr("srcset", $(this).attr("srcset").replace("http://", "https://"));	$(this).addClass("lazyload");        $(this).attr("data-srcset",$(this).attr("srcset"));        $(this).removeAttr("srcset");    	});
	$("iframe").each(function() {		$(this).addClass("lazyload");        		$(this).attr("data-src",$(this).attr("src"));        		$(this).removeAttr("src");    });
</script>

Trong đoạn mã trên, chúng ta sẽ sử dụng CSS selector để trỏ đến thẻ img tại: .post-body.entry-content img. Tùy vào giao diện của bạn mà CSS selector có thể sẽ khác.

Kết luận

Ngày nay, việc trì hoãn tải các tài nguyên không cần thiết đã dần trở thành một tiêu chuẩn thông thường khi thiết kế web. Thậm chí đội ngũ phát triển trình duyệt Google Chrome cũng đang có dự án đưa tính năng này hỗ trợ mặc định trên trình duyệt. Từ đó giúp nâng cao trải nghiệm khi duyệt web. Vậy nên việc áp dụng kỹ thuật lazy load cho blogger không chỉ giúp tăng tốc trang web mà còn cải thiện trải nghiệm cho người dùng.

Nếu có khó khăn khi thực hiện, các bạn hãy để lại bình luận để mình hỗ trợ giúp nhé. Chúc các bạn thành công.