Menambahkan Lazyload ke Blog Hexo

Posted on | In | Comments:

Beberapa waktu lalu saya sempat kebingungan untuk meng-install plugin Lazyload di blog yang dibuat dengan Hexo. Plugin ini berfungsi untuk mempercepat loading ke blog kita yang cara kerjanya menunda load konten yang berada di bawah sampai konten tersebut kita scroll tampil tepat di monitor. Plugin ini sangat berguna terutama untuk yang blog-nya banyak gambar-gambar ukuran besar seperti blog portofolio saya. Berikut adalah hasil audit dan tes kecepatannya sebelum dipasang Lazyload.

Audit

Tes Kecepatan

Lemod bukan? Sudah jelas karena isinya gambar-gambar karya dengan ukuran HD semua. 😂

Cara Install

Sekarang kita coba install plugin ini.

1
2
cd blog
npm install hexo-lazyload-image --save

Buka _config.yml lalu isi config seperti di bawah.

1
2
3
4
lazyload:
  enable: true 
  onlypost: false
  loadingImg: # eg /images/loading.gif

Kita coba generate dulu di localhost.

1
hexo clean && hexo generate

Jika berhasil maka load gambar seharusnya akan seperti demo di bawah ini.

image

Pembuktian

Let’s take some test again! Dan ini hasilnya…

Tes Kecepatan

Audit

Cheer…

Jika ada kesalahan kata-kalimat dalam artikel ini mohon beri tahu saya, bisa lewat komentar atau kontak di halaman about. Terimakasih.

Sumber: https://github.com/Troy-Yang/hexo-lazyload-image

0%