Pernah mengalami masalah website lelet alias loadingnya lama? atau ga ngeh, karena sinyal WiFi bagus? Tapi ada baiknya jika anda seorang blogger untuk mengecek kecepatan Website/Blog anda, karena ini sangat penting sebagai indikator SEO, karena Google sendiri juga menyarankan. Dan jangan lupa yang terpenting bagi kita para blogger adalah bahwa lambatnya tampilan sebuah website bisa menurunkan traffic loh, ga percaya? coba deh cek blog kamu pake gtmetrix.com tahu kan, itu situs untuk memeriksa performa website kita, cobain yah..
Punya Masalah Website Lelet? Bisa Menurunkan Traffic Loh...
Lazy Load Untuk Mempercepat Loading Website Dan Menaikkan Rank SEO
Salah satu faktor yang memperlambat loading sebuah situs adalah "image", iyess, gambar menjadi salah satu faktor penyebabnya, semakin besar size dan resolusi sebuah gambar memang membuat kualitasnya semakin bagus tapi tidak pada performa. Semakin besar size dan resolusi maka page size sebuah situs akan semakin besar juga sehingga page load menjadi lama. Nah, untuk mengatasi lelet alias lemotnya sebuah situs/blog/website, maka pada artikel kali ini kita akan bahas sebuah widget yang bernama Lazy Load.
Apa yang dimaksud dengan Lazy Load?
Pengertian dari Lazy Load adalah teknik yang digunakan untuk memuat gambar dalam website/situs/blog menjadi tidak sinkron, bisa terjadi konten di bagian awal atau di atas yang akan ditampilkan lebih dulu, baru kemudian di bawahnya begitu seterusnya. Saat pengunjung membuka sebuah website/blog/situs maka image di bagian atas akan muncul sementara di bawahnya tidak akan muncul, karena browser tidak akan memuat gambar jika pengunjung tidak melakukan scroll down.
Sebagai contoh silahkan kunjungi pixabay.com, sebuah website/blog/situs yang juga merupakan favorit saya karena menyediakan jutaan gambar dengan kualitas terbaik, jika tidak menggunakan lazy load, maka pixabay.com akan memakan page load time nya akan sangat lama, tentunya pixabay.com akan menjadi tidak menyenangkan bagi pengunjung jika lemot alias lelet loadingnya. Nah, untuk mengatasinya kkk menggunakan fasilitas widget lazy load ini.
Berikut Penampakan Situs Pixabay.com
Bisa bayangin kan, kalau sebuah situs besar seperti pixabay mempunyai page load time yang lama, tentunya akan menjengkelkan pengunjungnya. pixabay saat ini menjadi situs viral yang lagi nge tren khususnya para blogger dan pembuat conten yang membutuhkan gambar-gambar berkualitas dan gratis tentunya, seperti saya, hehe..
Lazy Load Untuk Apa? Ini Manfaat Mengapa Kamu Harus Menggunakan Lazy Load
Tidak hanya untuk mempercepat loading sebuah website/situs/blog, ternyata lazy load memiliki banyak manfaat untuk meningkatkan performa, ini beberapa manfaat dari memasang widget lazy load pada website/situs/blog :
1. Meringankan Kinerja Browser
Browser para pengunjung akan memuat lebih cepat, karena tidak perlu meminta semua gambar dari server hosting sekaligus. Karena memuat gambar secara tidak sinkron maka bisa membuat perbedaan antara pengunjung yang tetap berada di laman atau yang meninggalkannya.
Apalagi website/situs blog yang menggunakan JavaScript untuk menampilkan konten, maka memuat DOM dengan cepat sangatlah penting. Kebanyakan script akan menunggu pemuatan DOM selesai dengan sempurna sebelum menjalankannya, dengan memanfaatkan penggunaan Lazy Load maka hal tersebut membuat pemuatan menjadi jauh lebih cepat.
2. Meningkatkan Kinerja Server Hosting
Dengan menggunakan lazy load maka server tidak perlu mengirimkan semua gambar ataupun video, namun hanya memuat yang terlihat di viewport saja, sehingga bisa menghemat bandwidth dan resource server. Dengan menerapkan lazy load pada website/situs blog juga meningkatkan user experience, bagi pengunjung yang mengakses apalagi versi mobile dengan perangkat seluler atau device dengan koneksi internet yang lambat, tentunya akan sangat terbantu dengan penggunaan dari manfaat lazy load yang satu ini.
3. Meningkatkan Rank Optimisasi di SEO (Search Engine Optimization)
Lazy load juga akan berperan aktif dalam membuat website/situs/blog menjadi lebih SEO Friendly, karena kecepatan load speed adalah menjadi salah satu indikator bagi SEO, maka semua teknik untuk mempercepat loading sebuah laman termasuk lazy load akan bermanfaat untuk SEO, bahkan Google pun menyarankan penggunaan widget untuk mempercepat pemuatan laman.
Bagaimana Cara Menerapkan Lazy Load Pada Website/Situs/Blog
Ada berbagai teknik untuk menerapkan lazy load pada website/situs/blog, berikut ini adalah beberapa contohnya :
Cara Menerapkan Lazy Load pada Website
Terdapat beberapa teknik untuk menerapkan lazy load pada website, Nah berikut ini cara menggunakan lazy load pada website.
1. Native Lazy Load
Cara ini adalah yang termudah dalam penerapan penggunaan Lazy Load, hanya dengan menambahkan kode html biasa tanpa perlu menambahkan jacascript ataupun kode-kode rumit lainnya, caranya tambahkan kode berikut :
<img src=”image.jpg” loading=”lazy” alt=”…” />
<iframe src=”content.html” loading=”lazy”></iframe>
Teknik ini hanya menambahkan kode "lazy" tanpa menambahkan JavaScript, atribut "loading" adalah salah satu opsi yang akan menunda pemuatan gambar selain di layar sebelum pengguna melakukan scroll. Opsi lainnya adalah :
Lazy : Bekerja sangat baik
Eager : Memaksa Browser menampilkan konten segera
Auto : Mengeset otomatis
2. Menggunakan Efek Blurred Image
Salah satu teknik yang digunakan untuk menerapkan lazy load pada website/situs/blog adalah dengan memberikan efek blur pada gambar, salah satu caranya adalah memanfaatkan JavaScript yang dibuat oleh Craig Bugler, efek ini menggerus performa hanya 463 Byte CSS dan 1007 Byte minify JavaScript, support untuk layar retina, dan dependency free
3. Memanfaatkan Plugin Lazy Load di Wordpress
Plugin yang ini bisa dimanfaatkan buat anda yang menggunakan wordpress, hanya dengan menginstallnya maka secara otomatis website anda sudah terpasang fitur lazy load di saat plugin diaktifkan, berikut ini adalah beberapa plugin lazy load yang bisa digunakan untuk wordpress :
A3 LAZY LOAD - WP ROCKET - BJ LAZY LOAD
Demikian artikel tentang Lazy Load Untuk Mempercepat Loading Website Dan Menaikkan Rank SEO, semoga bermanfaat.
Jangan Lupa Bantu Share Ya...
No comments:
Post a Comment