Melanjutkan series Sebelumnya, kali ini tutorial singkat kita akan membahas teknik optimasi Website berbsis Codeigniter dengan Images Lazy Loading. Images atau gambar adalah elemen Wajib di setiap website, namun juga bisa menjadi boomerang bagi website kita karena sangat mempengaruhi performace website dari segi Respon Time bahkan dari "kacamata" Search Engine.
Series Sebelumnya
- Tutorial: Optimasi Web Codeigniter 3 [Part 2]
- Optimasi Website dengan Kode Minifikasi [Part 1]
- Artikel Seputar PHP & Codeigniter lainnya
Search Engine dewasa ini sangat menuntut situs kita harus cepat diakses. Dan salah satu penyebab lemotnya loading itu adalah Gambar. Nah cara yang sekarang umum digunakan oleh semua orang adalah dengan cara me-Lazy Load gambar alias Gambar dibuat di Load secara Asyncronous setelah semua Elemen lain ke-Load semua.
Perlu diingat, yang paling utama tetap kalau Gambar itu sebelum kita pasang di website harus di Olah dulu seusai keperluan. Misal kita Atur ukurannya, Kita Compress atau perkecil size gambar dengan tools yang tersedia seperti JpegMini atau tools yang lain.
Dari semua Library Lazy Load yang sudah saya coba, Saya akhirnya sekarang pakai library Lazyizes. Cara pemakaiannya cukup mudah,
Pasang librarynya di situs
...
...
...
<script src="lazysizes.min.js" async="">script>
Set Attribute class="lazyload" dan data-src="my_image.jpg" untuk semua Gambar yang kita kehendaki
Cukup dengan langkah diatas tanpa konfigurasi tambahan apa-apa, Gambar kita sekarang sudah di-Lazy Load dan itu yang saya pakai di Blog ini. Jika mau konfigurasi tambahan, silahkan baca di Repo-nya.
Misal dalam source code Demo nya
Dan itu akan me-lazy load gambar di halaman berikut
Silahkan Download Source lengkapnya ci_amp . Jika ada pertanyaan silahkan dikomentar ya.
Untuk Demo Live-nya, silahkan cek Blog ini karena sudah pakai metoda Lazy Load yang sama. misal halaman Author atau halaman Category