Cách Trì hoãn Tải Hình ảnh Trước khi Cuộn Trang cho Blogspot

Cách Trì hoãn Tải Hình ảnh Trước khi Cuộn Trang Một trong những yếu tố góp phần vào việc tải trang nhanh,tối ưu hóa seo, hôm nay Vozshare xin chia sẻ với các bạn cách trì hoãn tải ảnh .
Trì hoãn tải ảnh trước khi cuộn trang ở đây là khi tải trang ảnh sẽ không tải cho đến khi chúng ta cuộn trang và nó sẽ làm tăng tốc độ của blog. Tôi cũng đã chia sẻ một quy trình như thế này ở đây Cách tăng tải blog với LazySizes .

How to Delay Image Loading Before Scrolling Pages

How to Delay Image Loading Before Scrolling Pages

Đầu tiên, mở Blogger > Nhấp vào menu Chủ đề > Nhấp vào Chỉnh sửa HTML > Sau đó tìm và thêm mã bên dưới trước </body>

Code 1

<script>
//<![CDATA[
// LazyLoad
function loadScript(d){var o=document.createElement("script");o.src=d,document.body.appendChild(o)}function downloadJSAtOnload(){loadScript("https://cdn.jsdelivr.net/gh/vozshare/vozshare@main/lazysarline.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Đối với những bạn đã thêm mã Lazysizes thì chỉ cần thay mã bằng phiên bản

Code 2 này

<script>
//<![CDATA[
// Lazysizes
var lazysizer=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazysizer||0!=document.body.scrollTop&&!1===lazysizer)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/vozshare/vozshare@main/lazysarline.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazysizer=!0)},!0);
//]]>
</script>

Chọn một trong các mã ở trên

Nó gần giống như trong bài về Lazysizes, bạn chỉ cần tìm mọi thứ img trong theme. Mã sẽ như thế này:

<img...

Ví dụ :

<img src='//www.blogger.com/img/icon_delete13.gif'/>

Thêm class='lazy'cho code 1 và code 2 class='lazyload' vào đánh dấu như thế này:

<img class='lazy' data-src='//www.blogger.com/img/icon_delete13.gif' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Thay đổi src thành data-src và thêm

src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='sau data-src

Hoặc ví dụ này:

<img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 280, &quot;300:200&quot;)' height='186' width='280'/>

Vì vậy, như thế này:

<img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 280, &quot;300:200&quot;)' height='186' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' width='280'/>

Làm như trên cho tất cả đánh dấu img trong chủ đề. Điều gì sẽ xảy ra nếu đánh dấu img đã chứa một lớp? Vì vậy, bạn chỉ cần thêm class lazy hoặc lazyload sau lớp đầu tiên, ví dụ:

<img class='blogger lazy' data-src='//www.blogger.com/img/icon_delete13.gif' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Khi hoàn tất, hãy lưu chủ đề và xem kết quả trên blog của bạn.

Kết Quả
Tiếp theo, để cải thiện phần tiêu đề Expires mà bạn có thể kiểm tra trên GTmetrix , bạn cần thay thế s1600 và s640 trên liên kết hình ảnh trong trình chỉnh sửa bài đăng. Ví dụ như thế này:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5fFPku5o91x9GL3dvDWAf_PBqpxv59y48KwCfc0O7pbCPkEb5J8keOjYP2u4eVEix_vP-ku_xFSaWFQuph_PjNJenjYEnTYqMcXbrU6RTm0-_tQu3utrO5b7PTh_Wl8ntVw4C83_P-8Zj/s1600/Cara%2BMemasang%2BWidget%2BNewsletter%2Bdi%2BBlogger.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memasang Widget Newsletter di Blogger" class="lazyload" style="border: none;" data-original-height="800" data-original-width="1200" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5fFPku5o91x9GL3dvDWAf_PBqpxv59y48KwCfc0O7pbCPkEb5J8keOjYP2u4eVEix_vP-ku_xFSaWFQuph_PjNJenjYEnTYqMcXbrU6RTm0-_tQu3utrO5b7PTh_Wl8ntVw4C83_P-8Zj/s640/Cara%2BMemasang%2BWidget%2BNewsletter%2Bdi%2BBlogger.png" title="Cara Memasang Widget Newsletter di Blogger" width="640" /></a></div>

Thêm -rw vào mỗi hình ảnh bài đăng

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5fFPku5o91x9GL3dvDWAf_PBqpxv59y48KwCfc0O7pbCPkEb5J8keOjYP2u4eVEix_vP-ku_xFSaWFQuph_PjNJenjYEnTYqMcXbrU6RTm0-_tQu3utrO5b7PTh_Wl8ntVw4C83_P-8Zj/s1600-rw/Cara%2BMemasang%2BWidget%2BNewsletter%2Bdi%2BBlogger.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memasang Widget Newsletter di Blogger" class="lazyload" style="border: none;" data-original-height="800" data-original-width="1200" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5fFPku5o91x9GL3dvDWAf_PBqpxv59y48KwCfc0O7pbCPkEb5J8keOjYP2u4eVEix_vP-ku_xFSaWFQuph_PjNJenjYEnTYqMcXbrU6RTm0-_tQu3utrO5b7PTh_Wl8ntVw4C83_P-8Zj/s640-rw/Cara%2BMemasang%2BWidget%2BNewsletter%2Bdi%2BBlogger.png" title="Cara Memasang Widget Newsletter di Blogger" width="640" /></a></div>

Xin lưu ý, nếu bạn đã thêm -rw trong mỗi hình ảnh bài đăng. Hình ảnh sẽ không được đọc bởi các tiện ích của bên thứ ba như tiện ích Bài đăng gần đây, Bài đăng ngẫu nhiên, v.v. Trừ khi bạn điều chỉnh mã của bên thứ ba sang định dạng hình ảnh mới.

Kết Luận

Như vậy là Vozshare vừa chia sẻ với các bạn về Cách Trì hoãn Tải Hình ảnh Trước khi Cuộn Trang . Hy vọng rằng bài viết này sẽ hữu ích với các bạn. Chúc các bạn thành công!

Xem thêm: