Home Trending Search Menu

Lazyload dan Preload Gambar dengan Plugin Optimize More! Images

Optimasi gambar juga merupakan salah satu faktor penting dalam meningkatkan kecepatan akses website Anda. Plugin ini dapat membantu Anda mengoptimasi lebih jauh kecepatan load time website Anda.

Plugin Optimize More! Image ini dapat diunduh secara gratis dari halaman resmi WordPress plugin repository. Anda bisa men-download-nya langsung di sini https://wordpress.org/plugins/optimize-more-images/ atau dengan mencarinya dengan kata kunci “optimize more images” dari dashboard plugin WordPress Anda.

Lazy Load Images

Lazy load images adalah metode untuk menunda pemuatan gambar di mana metode ini membuat browser hanya akan memuat gambar ketika gambar tersebut berada dalam viewport user.

Metode ini dapat membuat website Anda terbuka lebih cepat karena, sama seperti fitur Delay on User Interaction untuk CSS & JavaScript yang ada di plugin Optimize More!, metode ini membuat browser tidak langsung memuat semua gambar yang ada di satu halaman website dari sejak awal.

Bedanya dengan fitur Delay on User Interaction untuk CSS & JavaScript yang menunda pemuatan hingga ada interaksi user, Lazy loading image menunda pemuatan gambar hingga posisi gambar-gambar yang ada di halaman situs berada di posisi layar user ketika ia melakukan scrolling.

Lazyload

lazyload dan preload gambar dengan plugin optimize more! images
Optimize More! Images Plugin – Lazyload Tab

Pada bagian setting Lazyload Tab ini, Anda bisa mengaktifkan beberapa opsi lazyload yang disediakan oleh plugin Optimize More! Images ini:

  • Lazyload image tags (gambar yang menggunakan tag <img>)
  • Lazyload inline background images (gambar background yang pemanggilannya menggunakan inline style dalam html)
  • Lazyload CSS background images (gambar background yang pemanggilannya menggunakan CSS),
  • Lazyload iframes (seperti youtube dan google drive iframe)
  • Lazyload video

Selain itu, plugin ini juga memberikan tambahan opsi untuk:

  • Mengaktifkan <noscript> pada html (berguna bila mayoritas pengunjung Anda masih menggunakan browser yang tidak mendukung JavaScript)
  • Mengecualikan gambar, iframe, dan video (berguna untuk gambar-gambar, iframe, dan video yang posisinya berada di area above the fold)
  • Mengaktifkan loading=eager untuk gambar, iframe, dan video yang dikecualikan dari lazyload

Preload

lazyload dan preload gambar dengan plugin optimize more! images
Optimize More! Images Plugin – Preload Tab

Kalau lazyload untuk menunda, preload untuk mendahulukan. Preload berfungsi untuk meminta browser memuat aset terlebih dulu, tepat setelah browser selesai memproses HTML dari suatu halaman.

Selain lazyload gambar, plugin ini juga menyediakan fitur preload khusus untuk gambar-gambar yang sudah diatur sebagai featured image dari masing-masing artikel. Hal ini sangat berguna karena featured image umumnya selalu berada di area atas (above the fold), sehingga kita harus meminta browser untuk mendahulukan proses pemuatannya, bukan menundanya.

Pada bagian setting preload tab ini, Anda bisa memilih untuk mengaktifkan fitur preload featured image di masing-masing page-type.

CDN

lazyload dan preload gambar dengan plugin optimize more! images
Optimize More! Images Plugin – CDN Tab

CDN, atau Content Delivery Network, adalah salah satu bagian penting dalam optimasi performa website. Manfaat utama dalam menggunakan CDN adalah mengurangi beban server dan menghemat bandwitdh.

Plugin ini juga menyediakan fitur HTML rewrite untuk url-url gambar ke url CDN yang Anda gunakan. Tersedia juga field untuk mengecualikan gambar, dan pengaturan kualitas gambar bila CDN yang Anda gunakan memiliki fitur On the fly Image Compression.

Extra

lazyload dan preload gambar dengan plugin optimize more! images
Optimize More! Images Plugin – Extra Tab

Pada bagian setting Extra Tab, Anda dapat menemukan opsi untuk mengaktifkan fitur Add Missing Image Dimension, dan menyediakan field untuk mengatur fallback width dan height dari gambar ketika plugin ini tidak dapat menambahkan width dan height secara otomatis (pastikan semua tampilan ukuran gambar sudah teratur oleh CSS sebelum menggunakan fitur ini).


Sama seperti Plugin Optimize More, Plugin Optimize More! Images ini dapat membantu Anda dalam mempercepat load time sekaligus meningkatkan skor Google Core Web Vitals website Anda dengan mudah.

Leave a Reply

Your email address will not be published. Required fields are marked *