Bikin Website Sekarang
Apa Itu Preloader? Cara Kreatif Optimasi Website dan User Experience
Dengan rata-rata pengguna hanya memiliki kesabaran 3 detik untuk sebuah website, preloader menjadi fitur krusial untuk meningkatkan pengalaman pengguna. Tahukah Anda apa itu preloader website dan bagaimana cara membuatnya?
Contents
Apa Itu Preloader?
Preloader – atau yang sering disebut loading screen – sering kali terlihat di beberapa situs sebelum konten utama halaman web dimuat. Preloader bisa berupa apa saja, bisa sangat sederhana atau sarat animasi.
Bisa dikatakan, preloader website adalah elemen animasi yang muncul selama proses pemuatan konten. Elemen ini memberitahu pengguna bahwa mereka perlu menunggu sampai seluruh halaman siap.
Preloader melibatkan persiapan sumber daya tersebut dulu dan dicapai dengan menggunakan atribut “rel” dalam tag <link>. Teknik ini sangat penting untuk optimasi website dengan mengidentifikasi sumber daya yang penting yang dibutuhkan dan memulai loading awal sebelum halaman web tampil sepenuhnya.
Tujuan utama preloader website adalah untuk meningkatkan pengalaman pengguna (user experience) dengan membuat waktu loading terasa lebih singkat dan mencegah kekhawatiran apakah situs responsif atau tidak.
Bisa dibayangkan, saat pengguna memuat suatu halaman web, dengan berbagai sumber daya seperti gambar, skrip dan konten perlu diambil dari server. Tanpa preloader, pengguna mungkin akan frustasi saat menemukan halaman terkesan tidak aktif (padahal sebenarnya halaman sedang memuat konten).
Selain itu, preloader berguna untuk menurunkan bounce rate. Artinya, elemen ini mencegah pengguna meninggalkan situs karena pemuatan yang mengakibatkan penurunan rasio bounce dan peningkatan retensi pengunjung.
Komponen Preloader
Mengutip dari Geeks for Geeks, preloader website yang dapat memuaskan user experience adalah yang mengandung tiga komponen berikut ini:
- Animasi/Indikator Loading: Elemen visual ini menampilkan kemajuan pemuatan, seperti pemutar, bilah kemajuan.
- Desain dan Merek: Sangat penting bagi desain untuk selaras dengan warna, gaya, dan elemen visual situs web.
- Penempatan: Menempatkan preloader secara strategis pada halaman web memastikannya terlihat.
Contoh Preloader Website
Ada beberapa contoh preloader yang tersedia untuk menyesuaikan berbagai desain situs web, elemen branding, dan tujuan untuk pengalaman pengguna. Berikut ini beberapa contoh preloader:
- Spinner Preloader: pemutar animasi yang berputar ketika konten dimuat.
- Progress Bar Preloader: secara visual mewakili kemajuan pemuatan dengan cara mengisinya.
- Percentage Preloader: menampilkan kemajuan pemuatan numerik dan terkadang menyertakan bilah kemajuan dengan baik.
- Full screen Preloader: Mereka menutupi halaman selama pemuatan untuk memastikan pengalaman pengguna yang konsisten.
- Preloader logo: Menggabungkan logo situs web, dengan efek berputar atau berubah bentuk untuk memperkuat identitas merek.
- Preloader khusus: Dirancang secara kreatif agar sesuai dengan desain dan gaya setiap situs web.
- Preloader pemuatan lambat: Menunjukkan konten tambahan yang dimuat saat pengguna menggulir halaman.
- Preloader minimalis: animasi atau ikon yang memberikan umpan balik pemuatan tanpa menarik perhatian berlebihan.
Cara Membuat Preloader Website
Sebelumnya, preloader website harus dibuat dengan menggunakan kode HTML, CSS dan Javascript. Namun sejurus dengan perkembangan jaman, cara membuat preloader kini dimudahkan dengan plugin dan aplikasi pihak ketiga.
Preloader HTML, CSS, dan jQuery
Berikut langkah-langkah untuk membuat preloader website menggunakan HTML, CSS, dan jQuery:
Langkah 1: Buat struktur HTML:
- Tambahkan elemen <div> dengan kelas seperti preloader ke dokumen HTML Anda. Ini akan menjadi wadah untuk preloader Anda.
Langkah 2: Berikan gaya pada preloader:
- Gunakan CSS untuk memberikan gaya pada preloader. Anda dapat menyesuaikan posisi, ukuran, warna latar belakang, dan properti lainnya agar sesuai dengan desain situs web Anda. Berikut contoh preloader dengan kode CSS:
| .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 9999; display: flex; justify-content: center; align-items: center; } .loader { width: 40px; height: 40px; border: 10px solid #f3f3f3; border-top: 10px solid #3498db; border-radius: 50%; animation: spin 2s linear infinite; } |
Langkah 3: Tambahkan animasi pemuatan:
- Gunakan animasi CSS atau JavaScript untuk membuat animasi pemuatan dalam div preloader. Anda dapat memilih lingkaran berputar sederhana, bola memantul, atau animasi yang lebih kompleks.
Langkah 4: Sembunyikan preloader:
- Gunakan jQuery untuk menyembunyikan preloader setelah halaman selesai dimuat. Ini memastikan bahwa hal itu tidak mengganggu pengalaman pengguna.
| $(window).on(‘load’, function() { $(‘.preloader’).fadeOut(); }); |
Langkah 5: Tes dan Sesuaikan Kostum
- Uji preloader Anda di berbagai perangka dan browser untuk memastikan berfungsi dengan benar
- Sesuaikan tampilan dan gaya preloader agar sesuai dengan desain dan merek website Anda.
Berikut ini contoh preloader yang sudah dengan HTML, CSS dan jQuery:
| <!DOCTYPE html> <html> <head> <title>Preloader Example</title> <style> /* Your CSS styles here */ </style> </head> <body> <div class=”preloader”> <div class=”loader”></div> </div> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script> <script> $(window).on(‘load’, function() { $(‘.preloader’).fadeOut(); }); </script> </body> </html> |
Preloader dengan Plugin
Menambahkan animasi preloader melalui plugin adalah opsi yang lebih cepat dan mudah, terutama jika Anda menggunakan WordPress. Terdapat beberapa plugin preloader yang bisa Anda gunakan, tetapi kali ini kita akan mencoba WP Smart Preloader.
Plugin preloader ini tersedia gratis di WP Toolkit. Plugin ini menggunakan CSS dan markup HTML minimal untuk membantu mengurangi risiko pengguna meninggalkan website Anda saat konten dibuat. Untuk membuat preloader dengan WP Smart Preloader, ikut langkah-langkah berikut ini:
Langkah 1: Unduh WP Smart Preloader
- Unduh plugin WP Smart Preloader melalui Direktori Plugin WordPress.
- Kemudian unggah file .zip plugin tersebut ke situs WordPress Anda, dengan membuka Plugins > Add New > Upload Plugin di dasbor admin:
Pilihan lainnya adalah mencari plugin melalui bilah pencarian di layar Plugin > Add New:
- Setelah plugin terinstal, klik tombol Activate. Anda kemudian dapat menemukan opsinya di bawah Settings > WP Smart Preloader.
Langkah 2: Pilih Gaya Anda
- Pada halaman Setting WP Smart Preloader, pilih gaya untuk preloader. Di bagian Pilih Preloader, akan ada menu drop down yang menyediakan enam opsi gaya, serta opsi untuk animasi khusus
- Setelah Anda memilih gaya, Anda dapat melihat pratinjaunya di jendela di bawah ini. Jika Anda ingin menambahkan animasi kustom Anda sendiri, Anda dapat menyertakan kode HTML di bawah bagian Custom Animation.
- Di akhir layar ini, Anda dapat mengatur durasi untuk loader itu sendiri dan efek ‘fade out’:
Jika Anda membiarkan kolom ini kosong, nilai default akan ditetapkan pada 1500 milidetik (1,5 detik) dan 2500 milidetik (2,5 detik). Setelah selesai, klik tombol Simpan Perubahan .
Langkah 3: Preview Animasi Preloader Anda
- Setelah selesai mengkonfigurasi pengaturan, kunjungi situs WordPress Anda di tab browser baru untuk melihat pratinjau animasi preloader.
- Anda dapat kembali untuk membuat perubahan gaya sesuai kebutuhan. Setelah Anda puas dengan preloader, preloader akan siap digunakan.
Tips Mendesain Preloader yang Baik
Saat membuat Preloader website , penting untuk fokus pada peningkatan pengalaman pengguna. Berikut beberapa praktik yang perlu diingat:
- Buat preloader Anda tetap sederhana. Hindari penggunaan animasi yang berlebihan.
- Pastikan ukuran berkas preloader diminimalkan untuk waktu pemuatan.
- Menampilkan preloader untuk suatu durasi tertentu guna mencegah rasa frustrasi bagi pengguna.
- Hindari pemblokiran konten atau fungsi situs web dengan preloader.
- Pastikan preloader secara akurat mencerminkan kemajuan pemuatan.
- Pertahankan konsistensi desain dengan gaya dan tema situs web Anda.
Singkatnya, preloader website adalah alat dalam desain web yang sangat berguna untuk optimasi website dan meningkatkan user experience. Preloader sangat penting untuk situs web, terutama yang memiliki konten berat atau elemen yang dimuat secara dinamis.
Cara-cara membuat preloader di atas bisa Anda praktikkan sendiri. Namun jika Anda tidak mau repot, serahkan urusan membuat preloader kepada tim Jasa Pembuatan Website IDWebhost.
Member since 7 Aug 2024
