5 Tips Membuat Website Tercepat Di Divi 5 (Public Alpha)

Divi 5 adalah hasil upaya bertahun-tahun untuk menciptakan pengalaman WordPress terbaik. Mengoptimalkan setiap interaksi dan aspek Visual Builder dan front end telah menjadi bagian utama dari hal ini. Pada akhirnya, peningkatan ini dapat Anda nikmati—tetapi ada beberapa cara yang dapat Anda kembangkan di Divi 5 untuk mendapatkan hasil terbaik.

Artikel ini akan mengeksplorasi manfaat kinerja yang ada pada Divi 5 dan bagaimana Anda dapat sepenuhnya memanfaatkan pengoptimalan ini untuk membangun situs web secepat mungkin.

Pelajari lebih lanjut tentang Divi 5 Public Alpha dan cara mengunduhnya.

Unduh Divi 5 Alpha Coba Demo Divi 5 Menjadi Penguji Bug Divi 5

Divi 5 Dibangun Agar Cepat

Divi 5 telah sepenuhnya ditulis ulang, dengan kinerja sebagai prioritas utama. Berbeda dengan Divi 4 yang dibuat dengan kode pendek, Divi 5 menggunakan struktur berbasis blok yang lebih modern. Pergeseran ini saja telah mengurangi waktu yang dihabiskan untuk memproses konten dan memuat halaman secara signifikan. Kerangka kerja baru ini juga memungkinkan kami mengurangi HTML yang dimuat secara signifikan, yang berarti laman Anda dimuat lebih cepat, terutama pada tata letak yang panjang dan rumit.

Selain itu, Divi 5 menyertakan struktur file JavaScript yang jauh lebih kecil dan lebih efisien. Semua skrip diabstraksi dan hanya dimasukkan ke dalam antrean bila diperlukan, artinya kode yang tidak perlu tidak memperlambat kinerja situs web Anda. Pelajari lebih lanjut tentang peningkatan kinerja Divi 5.

Semua peningkatan ini membuat Divi 5 lebih cepat, tetapi ada beberapa langkah yang dapat Anda ambil untuk membuat situs Anda lebih cepat.

5 Tips Membuat Website Divi 5 Tercepat

Membuat situs web yang luar biasa cepat dengan Divi kini semakin mudah. Ini semua berkat peningkatan kinerja Divi 5 yang dramatis dan fitur bawaan yang memudahkan pembuatan situs web berkinerja baik. Kami yakin bahwa kami mengambil yang terbaik dari Divi dan merebut kembali wilayah tersebut.

1. Kurangi Jumlah Jenis Modul pada suatu Halaman

Salah satu keuntungan terbesar dari pembangunan kembali Divi 5 adalah tidak memuat aset yang tidak diperlukan secara berlebihan. Hal ini khususnya terlihat pada Modul Divi, dengan setiap modul menambahkan gaya dan skrip uniknya sendiri ke halaman. Semakin beragam penggunaan jenis modul, semakin banyak sumber daya yang diperlukan untuk merender halaman. Memang ini bukan masalah besar, tetapi jika Anda sadar akan kinerja, ini adalah sesuatu yang penting untuk diingat (ini berlaku untuk situs web atau pembuat halaman mana pun).

Tampilan Modul Sisipkan 5 Divi

Untuk menyederhanakan sumber daya dan mempercepat situs Anda, fokuslah pada penggunaan jenis modul inti dalam jumlah terbatas pada halaman tertentu. Cara terbaik untuk menerapkan strategi ini adalah dengan menggunakan Divi Library dan Divi Cloud. Anda dapat dengan mudah menggunakan kembali elemen yang telah dirancang sebelumnya dengan menyimpan masing-masing modul, bagian, dan tata letak. Hal ini memastikan bahwa gaya dan modul yang sama diterapkan secara konsisten, mengurangi kemungkinan halaman membengkak dengan variasi yang tidak perlu.

Menyimpan Baris/Bagian/Modul memungkinkan Anda dengan mudah menggunakan kembali elemen tersebut (dengan pengaturan gaya yang sama) di tempat lain di halaman atau situs web Anda.

Mengingat modul mana yang telah Anda gunakan pada suatu halaman sepertinya dapat membatasi Anda, namun ada lebih dari satu cara untuk mendesain sebuah halaman. Contoh di bawah ini menunjukkan dua cara membuat hal yang sama dengan susunan modul yang berbeda. Bergantung pada apakah Modul Blurb sudah digunakan pada halaman atau belum, Anda dapat memilih untuk mendesain bagian halaman ini dengan modul tersebut atau dengan memecahnya.

Menggunakan 3 modul terpisah (kiri) atau Modul Blurb (kanan). Yang mana yang harus dipilih tergantung pada modul mana yang sudah Anda gunakan.

Sekarang, jangan terlalu khawatir tentang hal ini. Jika halaman Anda memerlukan elemen tertentu, Anda harus membuatnya. Namun bila Anda memiliki banyak cara untuk membangun sesuatu, Anda dapat dengan mudah menggunakan modul yang sudah digunakan pada halaman agar tidak memuat sumber daya tambahan.

2. Memanfaatkan Preset Global untuk Mengurangi CSS

Salah satu cara paling efektif untuk meningkatkan kinerja situs web Anda di Divi 5 adalah dengan menggunakan Preset. Saat Anda menerapkan preset ke suatu elemen, Divi 5 menghasilkan lebih sedikit CSS karena menggunakan sistem berbasis kelas yang berbagi gaya di beberapa elemen. Jika beberapa elemen menggunakan gaya yang sama, halaman Anda akan menghasilkan lebih sedikit CSS untuk tingkat desain yang sama.

Membuat preset global untuk modul yang sering digunakan—seperti tombol, header, dan bagian—menghilangkan kebutuhan untuk menyesuaikan gaya secara manual untuk setiap instance baru. Hal ini secara signifikan mengurangi jumlah total CSS khusus yang dihasilkan, belum lagi waktu yang diperlukan untuk menata situs web Anda.

Berikut beberapa ide tentang bagaimana Anda dapat mulai menggunakan preset dalam alur desain Anda:

• Preset Baris : Anda dapat menambahkan pengaturan seperti struktur kolom, lebar alur, padding, dan gaya latar belakang ke preset baris. Hal ini membantu menjaga konsistensi spasi dan gaya visual untuk baris di seluruh situs Anda.
• Preset Bagian : Preset bagian memungkinkan Anda menentukan warna latar belakang, gradien, atau gambar, padding dan spasi, serta pengaturan visibilitas seperti kondisi tampilan atau CSS khusus untuk perangkat tertentu.
• Modul Preset (misalnya, Modul Tombol) : Preset modul memungkinkan Anda menambahkan pengaturan seperti gaya teks tombol, warna, efek hover, radius batas, bayangan, dan perataan. Hal ini memastikan tombol-tombol di seluruh situs web Anda terlihat konsisten dan sesuai dengan tema desain Anda. Anda dapat membuat beberapa variasi, namun menggunakan preset yang sama di satu halaman akan menambah penghematan gaya.

3. Hindari Konten Divi 4 untuk Meningkatkan Kinerja

Jika Anda menginginkan kinerja terbaik dari Divi 5, Anda memerlukan setiap halaman untuk dimigrasi sepenuhnya. Sejak kami meluncurkan Divi 5 sebagai Public Alpha, ada beberapa fitur yang hilang yang akan segera tersedia (walaupun sebagian besar yang Anda harapkan sudah ada). Jika halaman Anda menggunakan elemen yang belum didukung Divi 5, halaman tersebut tidak dapat sepenuhnya dimigrasikan ke D5. Dalam kejadian ini, kerangka Divi 4 dimuat untuk halaman tersebut (untuk kompatibilitas mundur), artinya halaman tersebut masih berfungsi tetapi tidak menikmati manfaat kecepatan halaman Divi 5.

Contoh Migrator Divi 5 yang menemukan konten D4 yang tidak didukung

Untuk memanfaatkan sepenuhnya pengoptimalan Divi 5, gunakan alat migrasi bawaan untuk memindai situs web Anda untuk konten Divi 4. Migrator akan menyorot modul, templat, atau plugin apa pun yang belum didukung di Divi 5.

Jika Anda ingin memanfaatkan Divi 5 sepenuhnya sekarang, Anda harus mengonversi atau mengganti elemen ini dengan elemen yang kompatibel dengan Divi 5. Jika Anda tidak terburu-buru, Anda dapat menunggu pembaruan Divi 5 Public Alpha berturut-turut, yang mungkin memberikan lebih banyak kompatibilitas untuk item yang saat ini ditampilkan sebagai tidak didukung. Pelajari lebih lanjut tentang migrasi Divi 5.

4. Batasi Animasi dan Efek, Terutama Paro Atas

Animasi dan efek dapat menyempurnakan desain situs web, namun pastinya akan menambah waktu buka ekstra, terutama untuk konten di paro atas. Area ini sangat penting untuk persepsi kinerja karena ini adalah hal pertama yang dilihat pengguna. Waktu muat yang lebih lambat di sini dapat berdampak negatif terhadap pengalaman pengguna dan data vital web inti situs web Anda, khususnya metrik seperti Largest Contentful Paint (LCP) dan Cumulative Layout Shift (CLS).

Batasi atau hilangkan animasi dan efek di bagian pahlawan Anda dan konten paruh atas lainnya untuk meningkatkan kinerja situs Anda. Sebaliknya, fokuslah untuk menghadirkan elemen halaman statis dan ringan yang dimuat dengan cepat.

Jika Anda harus menggunakan animasi, pastikan animasinya minimal dan tidak mengganggu pemuatan halaman awal. Menggunakan preset modul adalah cara terbaik untuk memastikan penggunaan animasi yang konsisten di seluruh modul (dan dengan demikian tidak memuat gaya animasi tambahan secara sia-sia).

5. Gunakan Thumbnail yang Dapat Diklik untuk Video Tersemat

Menyematkan video langsung dari platform seperti YouTube dapat memperlambat waktu buka laman Anda karena skrip dan sumber daya tambahan yang diperlukan untuk penyematan ini. Daripada langsung menyematkan video, gunakan gambar mini yang dapat diklik yang akan membuka video di lightbox atau tab baru. Dengan cara ini, video dan sumber daya terkait tidak akan dimuat sampai pengguna berinteraksi dengannya, sehingga mengurangi waktu muat awal laman Anda.

Modul Video Divi membuat ini sangat mudah. Di bawah tab “Konten”, Anda akan melihat area opsi berjudul “ Hamparan .” Anda kemudian dapat menambahkan gambar yang dioptimalkan sebagai overlay atau secara otomatis membuatnya dari video YouTube itu sendiri.

Teknik ini mencegah permintaan yang tidak perlu dibuat saat halaman pertama kali dimuat, sehingga membantu kinerja situs web Anda lebih cepat. Ini adalah cara sederhana untuk meningkatkan kinerja halaman sambil tetap menyediakan konten video.

Rekap: 5 Tips untuk Situs Web Divi 5 Lebih Cepat

• Kurangi Jumlah Jenis Modul: Minimalkan jumlah modul berbeda pada halaman untuk menyederhanakan pemuatan sumber daya.
• Memanfaatkan Preset Global: Terapkan preset untuk mengurangi CSS khusus dan membuat desain yang konsisten.
• Migrasi Sepenuhnya ke Divi 5: Gunakan Migrator Divi 5 untuk memindai dan mengganti konten Divi 4 yang tidak didukung.
• Batasi Animasi: Kurangi animasi dan efek, terutama di bagian hero, untuk pemuatan awal yang lebih cepat.
• Gunakan Gambar Kecil yang Dapat Diklik untuk Video: Ganti video yang disematkan dengan gambar mini yang dapat diklik untuk menghindari memuat skrip yang tidak perlu.

Kesimpulan

Divi 5 menghadirkan banyak peningkatan kinerja bawaan, menjadikannya lebih cepat daripada versi Divi yang lebih lama. Penghapusan kode pendek, pengembangan teknologi yang lebih baik (yang lebih baru), dan fitur-fitur yang berfokus pada kinerja semuanya berkontribusi pada pengalaman pengguna yang lebih lancar dan lebih cepat. Anda juga harus menggunakan praktik terbaik standar seperti mengoptimalkan gambar, menggunakan host yang cepat dan andal, memanfaatkan CDN atau edge-caching, dan menghilangkan file/kode yang tidak digunakan.

Untuk meringkas apa yang kami bahas, Anda dapat meningkatkan kinerja situs web Anda secara signifikan dengan mengurangi jumlah jenis modul di setiap halaman, memanfaatkan preset global, memastikan konten Anda bermigrasi sepenuhnya dari Divi 4, meminimalkan animasi, dan menggunakan thumbnail gambar untuk video. Penyesuaian kecil ini membantu Anda memanfaatkan sepenuhnya arsitektur Divi 5 yang dioptimalkan, memastikan situs web Anda tampak bagus dan dimuat dengan kecepatan sangat tinggi.

Ingat, meskipun Divi 5 dirancang dengan mempertimbangkan kecepatan, cara Anda membuat dan menyusun halaman tetap memainkan peran penting dalam memaksimalkan kinerja tersebut.

Unduh Divi 5 Alpha Coba Demo Divi 5

Bantu kami menjadikan Divi 5 lebih baik dengan berpartisipasi dalam proses pengujian bug! Masukan Anda akan membantu kami menyempurnakan Divi 5 dan memperbaiki masalah di awal proses pengembangan.

Menjadi Penguji Bug Divi 5