Cara Lazy Load di WordPress (Gambar & Video)

Diterbitkan: 2023-05-25

Jika Anda adalah pemilik situs web, Anda mungkin pernah memikirkan tentang kecepatan situs setidaknya sekali di masa lalu. Lagi pula, Google mempertimbangkan kecepatan saat menentukan di mana menempatkan situs di hasil pencarian. Jadi, jika situs Anda lambat dimuat, Anda berada pada posisi yang kurang menguntungkan dalam hal peringkat. Dan kita semua tahu bahwa peringkat yang lebih tinggi menghasilkan lebih banyak lalu lintas.

Jadi, bagaimana Anda memastikan situs WordPress Anda memuat secepat mungkin? Salah satu caranya adalah dengan malas memuat gambar Anda.

Lazy loading adalah teknik yang menunda rendering gambar dan video hingga dibutuhkan. Menerapkan ini dapat sangat mempercepat situs Anda, dan kabar baiknya adalah Anda tidak perlu menjadi pengembang untuk menjalankannya.

Hari ini, kami akan menunjukkan cara memuat gambar dan video di WordPress menggunakan dua metode: dengan dan tanpa plugin.

Apa itu pemuatan malas?

Lazy loading adalah teknik umum yang digunakan untuk meningkatkan kecepatan halaman. Idenya sederhana: alih-alih memuat semua gambar pada halaman saat pengunjung pertama kali datang, itu hanya menampilkan gambar yang terlihat. Kemudian, saat pengunjung menggulir ke bawah halaman, lebih banyak gambar dimuat sesuai kebutuhan.

Artinya, jika pengunjung tidak pernah menggulir ke bagian bawah halaman, gambar di bawah area halaman yang dilihat tidak akan pernah dimuat. Dengan demikian, pemuatan yang lambat dapat menghemat milidetik (atau bahkan detik) yang berharga dari waktu pemuatan halaman Anda.

Selain itu, lazy loading juga dapat membantu Anda menghemat bandwidth. Ini sangat penting jika Anda memiliki orang yang mengunjungi situs Anda di perangkat seluler. Dengan menunda pemuatan gambar dan video yang tidak terlihat, Anda dapat mengurangi jumlah data yang digunakan.

Bagaimana cara kerja pemuatan lambat?

Secara umum, lazy loading bekerja dengan salah satu dari dua cara. WordPress, dimulai dengan versi 5.5, menambahkan atribut HTML5 yang disebut “memuat”. Dalam hal ini, browser menangani semua bagian dari proses pemuatan lambat tanpa memerlukan JavaScript tambahan.

Metode lain, yang dikembangkan sebelum atribut HTML5, adalah melalui beberapa JavaScript kreatif. Dalam hal ini, placeholder kosong disajikan saat halaman dimuat, lalu JavaScript digunakan untuk memuat gambar saat masuk ke viewport.

Either way, hanya gambar yang dibutuhkan oleh browser yang dimuat. Gambar lain dimuat setelah pengunjung menggulir ke bawah halaman.

Ada beberapa cara berbeda untuk melakukan ini, yang akan kita bahas lebih detail di bawah. Tapi itulah inti dari cara kerja lazy loading.

Apa manfaat dari pemuatan lambat?

Ada tiga manfaat utama untuk memuat gambar dengan lambat:

  • Peningkatan kecepatan situs
  • Pengurangan penggunaan bandwidth
  • Pengalaman pengguna yang lebih baik

Peningkatan kecepatan situs biasanya menjadi motivasi utama penerapan lazy loading. Dengan menunggu untuk merender gambar yang tidak perlu, Anda dapat mengurangi waktu muat halaman. Ini terutama berlaku jika Anda memiliki banyak gambar di halaman, atau jika gambar Anda berukuran besar.

Selanjutnya, lazy loading dapat membantu Anda menghemat bandwidth. Jika pengunjung tidak pernah menjelajahi halaman, tidak ada bandwidth yang terbuang untuk memuat gambar yang tidak akan pernah mereka lihat.

Terakhir, pemuatan lambat dapat meningkatkan pengalaman pengguna Anda. Ini karena pengunjung tidak perlu menunggu semua gambar di halaman dimuat sebelum mereka dapat mulai berinteraksi dengan situs Anda.

Apakah WordPress memuat malas secara default?

Ya, pada WordPress 5.5, pemuatan malas diaktifkan secara default secara otomatis saat instalasi. Namun, ada beberapa cara untuk menyesuaikan pengalaman yang cukup mudah dan intuitif. Kami akan membahas metode ini secara lebih rinci di bawah.

Haruskah saya malas memuat gambar saya? Apakah ada kekurangannya?

Dalam kebanyakan kasus, pemuatan lambat gambar Anda adalah ide bagus jika Anda ingin meningkatkan kecepatan halaman atau menghemat bandwidth. Namun, ada beberapa kelemahan potensial untuk dipertimbangkan juga.

Pergeseran tata letak

Jika Anda malas memuat gambar Anda, tata letak halaman Anda mungkin berubah. Misalnya, jika Anda memiliki sidebar di sisi kanan halaman Anda, dan Anda malas memuat gambar yang ada di dalamnya, sidebar mungkin bergerak ke bawah untuk memberi ruang. Ini bisa sangat membingungkan bagi pengunjung Anda.

Sebagai aturan umum, disarankan menggunakan placeholder untuk menghindari masalah ini.

Potensi pukulan ke SEO

Jika Anda tidak melakukannya dengan benar, pemuatan gambar yang lambat dapat menyebabkan mesin telusur, seperti Google, kesulitan mengindeksnya. Konten adalah raja dalam hal peringkat, dan dalam hal ini, Anda bisa kehilangan bagian yang berharga.

Gambar Anda mungkin tidak lagi muncul di hasil pencarian dan, tergantung pada seberapa penting gambar tersebut terkait dengan konten halaman lainnya (seperti gambar produk untuk cantuman e-niaga), hal itu juga dapat meningkatkan peringkat pencarian reguler Anda.

Meskipun demikian, jika Anda mengatur pemuatan lambat dengan benar, ini tidak akan menjadi masalah. Itu sebabnya, kecuali Anda adalah pengembang yang percaya diri, tindakan terbaik Anda adalah menggunakan plugin pemuatan lambat atau tetap dengan pemuatan malas default yang disertakan dengan WordPress.

Konflik plugin

Selain itu, pemuatan lambat dapat menyebabkan masalah dengan beberapa plugin WordPress — seperti plugin yang menggunakan gambar untuk menghasilkan pratinjau media sosial.

Setiap kali Anda membuat perubahan pada situs Anda, Anda harus mengujinya secara menyeluruh untuk memastikan semuanya berjalan sebagaimana mestinya.

Dan, jika terjadi kesalahan, siapkan cadangan situs WordPress Anda untuk pemulihan cepat.

Cara mengaktifkan lazy loading di WordPress

Lazy loading sekarang diaktifkan secara default di WordPress. Jika Anda tidak menggunakan iterasi WordPress modern (walaupun kami menyarankan Anda melakukannya), atau jika Anda ingin kontrol yang lebih terperinci atas proses pemuatan lambat, Anda dapat melakukannya menggunakan salah satu dari dua metode berbeda: menggunakan plugin atau menambahkan kode ke lokasi.

1. Lazy load dengan plugin

Jika Anda bukan pengembang berpengalaman, sebaiknya gunakan plugin karena setiap kali Anda mengedit kode situs, Anda berisiko mengalami masalah. Bahkan jika Anda memiliki cadangan jika Anda merusak sesuatu, mungkin masih lebih baik menggunakan plugin yang memiliki reputasi baik.

Beranda Jetpack Boost

Jetpack Boost adalah plugin gratis yang didedikasikan untuk membantu Anda mengukur dan meningkatkan kinerja situs. Ini menawarkan fungsionalitas seperti:

  • Menunda JavaScript yang tidak penting
  • Mengoptimalkan pemuatan CSS
  • Pemuatan gambar malas
  • Pengujian kinerja situs

Untuk memulai dengan Jetpack Boost, unduh secara gratis dari direktori plugin WordPress.

Atau, di dasbor WordPress Anda, buka Plugins → Add New, lalu cari “Jetpack Boost” dan klik Install Now . Setelah diinstal, klik Aktifkan .

Jetpack Boost di repositori plugin

Selanjutnya, masuk ke opsi menu dashboard baru berjudul Boost . Kemudian, klik Mulai gratis .

Di halaman berikutnya, gulir ke bawah ke sakelar besar yang bertuliskan Lazy Image Loading dan aktifkan. Sekarang, lihat situs Anda dan pastikan semuanya ditampilkan dengan benar dan terlihat bagus. Itu dia! Pemuatan lambat bagus untuk digunakan hanya dengan beberapa klik.

Jika Anda ingin melangkah lebih jauh dan menyesuaikan pemuatan lambat situs Anda, Anda dapat melakukannya dengan menggunakan potongan kode, yang dapat Anda tambahkan ke file functions.php Anda. Atau, Anda dapat memasukkannya dengan plugin fungsionalitas.

Berikut adalah beberapa tugas yang dapat Anda selesaikan:

  1. Nonaktifkan pemuatan lambat pada halaman tertentu
  2. Tetapkan placeholder yang ditampilkan hingga gambar dimuat
  3. Matikan pemuatan malas untuk gambar tertentu
  4. Matikan pemuatan lambat untuk kelas CSS tertentu

Misalnya, jika Anda ingin mengecualikan kelas CSS dari proses pemuatan lambat, Anda akan menggunakan kode ini:

 function mysite_customize_lazy_images( $blocked_classes ) {    $blocked_classes[] = 'my-header-image-classname';    return $blocked_classes; } add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

Untuk detail lebih lanjut, lihat dokumentasi pemuatan lambat yang lengkap.

2. Cara malas memuat gambar di WordPress tanpa plugin

Seperti yang kami sebutkan sebelumnya, WordPress, secara default, mengaktifkan pemuatan lambat untuk semua gambar yang telah menetapkan dimensi. Anda tidak perlu mengaktifkan apa pun atau menambahkan kode apa pun untuk melakukan ini. Namun, ada kalanya Anda ingin menyesuaikan cara kerja fungsi ini.

Misalnya, Anda tidak ingin menyertakan gambar template. Anda akan menambahkan kode ini ke file functions.php Anda:

 function disable_template_image_lazy_loading( $default, $tag_name, $context ) { if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) { return false; } return $default; } add_filter( 'wp_lazy_loading_enabled', 'disable_template_image_lazy_loading', 10, 3 );

Atau, mungkin Anda ingin mendapatkan super granular dan mematikan pemuatan malas untuk gambar tertentu. Anda dapat melakukannya dengan menetapkan kelas gambar tambahan untuk setiap gambar saat ditambahkan ke halaman atau postingan, lalu menambahkan kelas tersebut ke kode berikut di file functions.php Anda:

 function skip_loading_lazy_image_48_large( $value, $image, $context ) { if ( 'the_content' === $context ) { $image_url = wp_get_attachment_image_url( 48, 'medium' ); if ( false !== strpos( $image, ' src="' . $image_url . '"' )) { return false; } } return $value; } add_filter( 'wp_img_tag_add_loading_attr', 'skip_loading_lazy_image_48_large', 10, 3 );

Untuk menambahkan kelas gambar lewati-malas dalam contoh di atas ke gambar:

  1. Tambahkan gambar ke halaman atau posting melalui Perpustakaan Media.
  2. Setelah Anda menambahkan gambar, temukan pengaturan gambar Anda. Ini mungkin tampak berbeda tergantung pada apakah Anda menggunakan editor Blok Gutenberg, editor klasik, atau plugin pembuat situs. Kemampuan untuk menambahkan kelas CSS baru biasanya ditemukan di area setelan Lanjutan (Gutenberg dan editor klasik) atau di bagian bawah opsi setelan gambar Anda (sebagian besar pembuat situs lainnya).
  3. Tambahkan class skip-lazy ke gambar dan simpan pembaruan Anda.

Anda dapat mempelajari lebih lanjut tentang kemungkinan di dokumentasi WordPress.

Cara memuat video malas di WordPress

Jika Anda ingin memuat video Anda dengan malas, Anda dapat melakukannya dengan menambahkan kode ke video itu sendiri di pos atau halaman. Kode ini akan terlihat seperti ini:

 <video controls preload="none" poster="one-does-not-simply-placeholder.jpg"> <source src="one-does-not-simply.webm" type="video/webm"> <source src="one-does-not-simply.mp4" type="video/mp4"> </video>

Pertanyaan yang sering diajukan tentang pemuatan lambat di WordPress

Ingin mempelajari lebih lanjut tentang pemuatan malas WordPress? Kami telah menjawab beberapa pertanyaan umum di bawah ini:

Apakah malas memuat dan menunda gambar di luar layar adalah hal yang sama?

Menunda gambar di luar layar berarti menunggu untuk memuat gambar hingga konten penting lainnya, paruh atas telah dimuat. Ada beberapa cara untuk melakukannya, tetapi situs WordPress biasanya menggunakan pemuatan lambat.

Pada dasarnya, lazy loading adalah metode menunda gambar di luar layar.

Bisakah saya memuat gambar latar belakang dengan malas di WordPress?

Ya, Anda dapat memuat gambar latar dengan malas jika mau. Jetpack Boost mengaktifkan pemuatan lambat untuk gambar latar belakang. Namun, tergantung pada bagaimana gambar Anda disiapkan, mungkin tidak dapat mengidentifikasi semuanya. Misalnya, jika gambar dimuat melalui properti background:url, plugin tidak akan membacanya sebagai gambar dan, karenanya, tidak akan mengaktifkan pemuatan lambat untuk gambar tersebut.

Dalam situasi itu, Anda dapat menggunakan alat seperti Lazy Loader, yang memungkinkan Anda memilih gambar latar spesifik yang ingin Anda muat dengan malas.

Bisakah saya memuat video YouTube dengan malas?

Ya kamu bisa! Untuk melakukannya, sisipkan cuplikan kode berikut dari WPOrbit ke dalam file functions.php tema Anda. Jika Anda tidak yakin bagaimana melakukannya, lihat panduan kami untuk mengakses dan mengedit file functions.php .

 <?php // Do not include the above opening tag. // WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.net function iframelazy($content) { if(is_single()) { $content = str_replace('src="https://www.youtube.com/embed/','class="klazyiframe" data-src="https://www.youtube.com/embed/',$content); ob_start(); ?> <script> var ytflag = 0; var myListener = function () { document.removeEventListener('mousemove', myListener, false); lazyloadmyframes(); }; document.addEventListener('mousemove', myListener, false); window.addEventListener('scroll', function() { if(ytflag == 0){ lazyloadmyframes(); ytflag = 1; } }); function lazyloadmyframes(){ var ytv = document.getElementsByClassName("klazyiframe"); for (var i = 0; i < ytv.length; i++) { ytv[i].src = ytv[i].getAttribute('data-src'); } } </script> <?php $jqueryappend = ob_get_contents(); ob_end_clean(); } return $content.$jqueryappend; } add_filter('the_content', 'iframelazy');

Apakah pemuatan lambat berdampak pada SEO?

Ya, lazy loading dapat berdampak positif pada peringkat mesin pencari Anda. Google mempertimbangkan kecepatan situs saat memutuskan di mana peringkat halaman dalam hasil pencarian. Dan karena pemuatan lambat meningkatkan kinerja, ini juga dapat meningkatkan persepsi Google terhadap situs Anda.

Jika Anda melakukannya secara manual, alih-alih menggunakan plugin lazy loading, dan melakukan kesalahan, hal itu dapat berdampak negatif pada SEO dengan menghambat kemampuan mesin pencari untuk mengenali gambar Anda.

Apakah pemuatan lambat berdampak pada pengalaman pengguna?

Ya, pemuatan lambat dapat meningkatkan pengalaman pengguna Anda karena mengurangi waktu pemuatan situs Anda, sambil tetap memastikan bahwa pengunjung dapat langsung melihat konten Anda. Ini, pada gilirannya, dapat meningkatkan persepsi mereka tentang merek Anda.

Apakah saya memerlukan plugin untuk memuat konten saya dengan lambat?

Tidak, Anda tidak memerlukan plugin untuk memuat konten Anda dengan malas. Lazy loading diaktifkan di WordPress secara default. Namun, jika Anda ingin lebih mengontrol proses pemuatan lambat, Anda mungkin ingin menggunakan plugin. Berikut pilihan plugin lazy load terbaik untuk WordPress.

Apakah ada kerugian dari pemuatan konten yang lambat?

Tidak banyak kerugian dari pemuatan konten yang malas. Ini meningkatkan kecepatan, pengalaman pengguna, dan peringkat mesin pencari Anda. Namun, terkadang hal itu dapat menyebabkan perubahan aneh pada tata letak halaman Anda. Oleh karena itu, Anda harus selalu menguji situs Anda setelah mengaktifkan pemuatan lambat.

Apakah saya perlu memuat semua konten saya dengan malas?

Tidak, Anda tidak perlu malas memuat semua konten Anda. Anda dapat memilih untuk memuat lambat hanya elemen tertentu, seperti gambar, video, atau iFrame.

Apa lagi yang bisa saya lakukan untuk meningkatkan kecepatan pemuatan?

Selain lazy loading, ada beberapa cara lain yang bisa Anda lakukan untuk meningkatkan kecepatan situs WordPress Anda, antara lain:

  • Menggunakan jaringan pengiriman konten (CDN)
  • Berfokus pada peningkatan hal yang sama yang juga meningkatkan Data Web Inti.
  • Mengoptimalkan gambar Anda
  • Mengaktifkan cache browser
  • Meminimalkan sumber daya

Percepat situs Anda dengan pemuatan malas WordPress

Lazy loading gambar Anda adalah cara yang bagus untuk mengoptimalkan kinerja situs Anda dan meningkatkan pengalaman pengguna Anda secara keseluruhan. Jetpack Boost menawarkan cara yang paling nyaman dan tangguh untuk mengaktifkan pemuatan lambat, sekaligus menyediakan alat kecepatan canggih lainnya. Siap untuk memulai? Dapatkan Jetpack Boost!