Tối ưu PageSpeed Google bằng Lazy load images cho xenforo.P1

Tối ưu PageSpeed Google bằng Lazy load images cho xenforo là kỹ thuật giảm tải web tăng thời gian tải trang khi bạn truy cập web. Giúp web được Google chấm điểm cao hơn.

Cài Lazy load cho ảnh trong xenforo

Có rất nhiều addon xenforo để kích hoạt lazy load ảnh. Ví dụ như: Brivium - Image Lazy Loader
Nhưng nó lại không giải quyết được ảnh logo hoặc avatar hoặc bất cứ ảnh nào mà bạn chèn bên trong html của web.

Mình sẽ đi vào trường hợp là logo của web và avatar của thành viên. Để chèn lazy load cho chúng. Bạn có thể làm tương tự với bất cứ ảnh khác.
Logo xenforo
Vào Admin CP > style đang dùng > Template. Và tìm Template "logo_block"
Đây là đoạn code thường có chứa link ảnh logo:

Mã:

<img alt="{$xenOptions.boardTitle}" title="{$xenOptions.boardTitle}" src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />

Bạn chỉ cần thêm class="lazyload". Nó sẽ thành

Mã:

<img class="lazyload" alt="{$xenOptions.boardTitle}" title="{$xenOptions.boardTitle}" src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />

Tiếp đó, kéo xuống cuối và thêm đoạn code này

Mã:

<script language="javascript">
window.addEventListener("load", function(event) {
    lazyload();
});
</script>

Vậy là xong phần logo.

Thêm Lazy load cho ảnh Avatar xenforo.

Cái này bạn dùng Search Templates để tìm từ khóa "{xen:helper avatar" nhé.
Mình sẽ cài vào avatar của Navigation.
Sửa:

Mã:

<img src="{xen:helper avatar, $visitor, s, 'true'}.........

thành

Mã:

<img class="lazyload" src="{xen:helper avatar, $visitor, s, 'true'}.........

Tiếp đó, kéo xuống cuối và thêm đoạn code này

Mã:

<script language="javascript">
window.addEventListener("load", function(event) {
    lazyload();
});
</script>

Xem demo Lazy load hoạt động với ảnh:

Mã:

https://appelsiini.net/projects/lazyload/enabled/

Cho đi để nhận lại. If you Like! Like or Share