Banyak sekali pengguna CMS WordPress yang menggunakan Web Builder Elementor. Dikarenakan Optimasi Elementor mudah sekali dilakukan desainnya baik oleh pemula apalagi oleh mereka yang sudah ekspert di bidangnya.
Elementor sendiri memiliki banyak sekali widget dan juga fitur yang mereka kembangkan dan dapat bersinergi dengan plugin lainnya. Seperti WooCommerce, LMS bahkan sampai ke Plugin SEO pun dapat diintegrasikan dengan Elementor.
Elementor memiliki 2 versi, yaitu versi Free dan versi Pro. Dimana Anda dapat melihat perbedaan keduanya di Elementor Free vs Elementor Pro.
Layaknya page builder lainnya yang memiliki banyak sekali fitur dan integrasi tentunya juga membutuhkan optimasi untuk hasil maksimal. Berikut adalah 13+ cara optimasi Elementor pada CMS WordPress yang dapat Anda lakukan.
Optimasi Server Hosting
Salah satu yang utama perlu dilakukan adalah menaikkan dan melakukan settingan pada cPanel yang sesuai dengan System Requirements Elementor.
Sebaiknya tinggikan angka yang ada dan sesuaikan dengan spesifikasi dari hosting Anda.
Maka apabila spesifikasi Hosting Anda sudah tidak sesuai, langkah – langkah selanjutnya tidak akan bisa optimasi. Maka kami sarankan Anda menggunakan minimum 1 CPU Core dan Memory 1 GB.
Instalasi PHP Extention yang Tepat
PHP Extention sangat berpengaruh, maka aktifkan PHP Extention : Zlib untuk meningkatkan performa dari Elementor dan WordPress Anda.
Modul PHP Zlib memungkinkan Anda membaca dan menulis file terkompresi gzip secara transparan. Oleh karena itu digunakan untuk menyajikan konten lebih cepat kepada pengguna akhir dengan mengompresi aliran data.
Pergunakan Tema yang Support Elementor
Theme atau tema menjadi hal pertama yang diperhatikan ketika menggunakan Page Builder, terutama Elementor karena tidak semua tema cocok dengan Elementor.
Ada satu tema yang benar benar support dengan Elementor, yaitu Hello Elementor.
Selain itu Hello Elementor, juga ada theme lain yang support seperti Blocksy dan juga Astra Theme.
Aktifkan Elementor Features
Anda dapat meningkatkan pengalaman dan juga fitur di Elementor hanya dengan mengaktifkan beberapa fitur yang tersedia di Elementor >> Setting >> Features.
Dimana di dalamnya terdapat beberapa fitur yang masih bersifat beta atau yang sudah release seperti :
- Inline Font Icons
- Grid Container
- Editor Top Bar
- Optimized Gutenberg Loading
- Landing Pages
- Nested Elements
- Lazy Load Background Images
- Optimize Image Loading
- Global Style Guide
- Menu
- Taxonomy FIlter
- Optimized DOM Output
- Improved Asset Loading
- Improved CSS Loading
- Additional Custom Breakpoints
- Flexbox Container
- Upgrade Swiper Library
- Default to New Theme Builder
- Hello Theme Header & Footer
- Page Transitions
- Notes
- Form Submissions
- Scroll Snap
Pastikan Anda hanya mengaktifkan fitur atau experience yang Anda butuhkan, Karena semakin banyak yang Anda aktifkan maka akan menambah beban pada plugin dan berhubungan dengan plugin lainnya.
Pergunakan Format File Image WEBP atau SVG
Apabila Anda ingin mempercepat ketika loading image, maka sebaiknya pergunakan format image WebP atau SVG namun dalam hal ini kami sarankan menggunakan WebP.
Anda dapat mengunggah file yang sudah berformat WebP atau untuk dapat membuat versi WebP yang diproses oleh server maka Anda bisa menggunakan plugin “Performance Lab” by WordPress Performance Team.
Kemudian centang bagian WebP Support Health Check dan WebP Uploads
Namun apabila Anda ingin menggunakan file SVG, maka enable / Aktifkan “Enable Unfiltered File Uploads” pada bagian Elementor >> Settings >> Advanced.
Jenis format yang ringan dan juga aman akan meningkatkan secara tidak langsung kecepatan loading pada halaman yang membuka gambar tersebut.
Perkecil Ukuran Gambar
Gambar sebaiknya dioptimasi sesuai dengan 2 Hal yaitu :
- Perkecil Resolusi Gambar
Resolusi gambar yang muncul sebaiknya tidak melebih dari ukuran layar dan penggunaan dimana akan diletakkan gambarnya.
Resolusi gambar sebaiknya dicek juga untuk tampilan mobile dan laptopnya. - Perkecil ukuran file Gambar
Anda dapat mengecilkan ukuran gambar dengan compress online.
Kami menyarankan untuk melakukan optimasi gambar sebelum di upload. Karena ketika Anda melakukan compress image / resize image setelah di upload hanya akan menambah banyak jumlah file dan beban server untuk load.
Pergunakan Font Lokal
Secara general dan kasus pada umumnya, yang membuat loading lama adalah menggunakan font Google. Namun apabila Anda mempunyai font disarankan menggunakan font lokal.
Elementor sudah menyediakan cara dan form yang bisa Anda pergunakan untuk upload font baik itu dengan format WOFF, WOFF2, TTF, SVG, dan EOT.
Perkecil DOM Request
Perkecil DOM request yang dapat Anda cek dengan menggunakan GTMetrix.
Dengan melihat DOM Request, maka Anda bisa melakukan filter file dan plugin mana saja yang perlu diaktifkan ketika loading halaman.
Pergunakan Plugin Cache
Salah satu yang memperingan dalam loading speed adalah dengan menggunakan plugin cache. Dan banyak sekali plugin cache baik itu secara grtais atau berbayar.
Dalam memilih plugin cache, pastikan Anda mengetahui server menggunakan type apa ? Apakah Litespeed, Nginx atau Apache. Karena apabila salah menggunakan yang terjadi bukan optimasi namun akan merusak tampilan dari situs Anda.
Contoh plugin cache : LiteSpeedCache, W3 Total Cache, dan WP Rocket.
Pergunakan Lazy Load Image
Lazy load adalah istilah yang digunakan pada website untuk mengurangi beban loading, walaupun terdapat gambar di dalamnya.
Artinya gambar / image tersebut hanya akan diakses ketika terbuka halamannya / menuju ke section atau bagian dari section tersebut.
Lazy Load dapat dilakukan dengan menggunakan plugin seperti Smush atau jika Anda menggunakan WP Rocket maka sudah tersedia option untuk mengaktifkan fitur lazy load image.
Optimasi Elementor CSS dan JS
Dengan menggunakan plugin cache juga, Anda dapat juga melakukan optimasi elementor CSS dan JS dengan 2 cara yaitu
- Minify CSS / JS
- Combine CSS / JS
Perhatikan juga bahwasanya Anda dapat melakukan deffered dan delay script sesuai dengan kebutuhan. Yang menjadi catatan, selalu cek tampilannya setiap kali anda melakukan penyimpanan pengaturan.
Nonaktifkan Plugin pada Halaman Tertentu
Seringkali karena Anda menggunakan banyak plugin , namun tidak dipergunakan disemua halaman, maka Anda perlu dan dapat memilih plugin yang aktif pada halaman tertentu.
Plugin yang dipergunakan untuk optimasi ini adalah dengan menggunakan plugin “Asset Clean Up”
Cek Responsive Mode
Salah satu poin yang sudah dibahas pada poin sebelumnya adalah Responsive Mode. Anda perlu cek pada masing masing breakpoint sesuai dengan ukuran resolusi.
Pastikan Anda mengaktifkan “Additional Custom Breakpoints” yang terletak di Elementor >> Setting >> Features.
Kurangi Animasi dan Filter Efek
Jika Anda ingin cepat, maka kurangi animasi dan filter efek.
Hal ini dikarenakan setiap animasi dan efek akan menambahkan baris coding dan beban loading untuk membuka halaman tersebut.
Bijak dalam menggunakan animasi dan filter efek akan membuat kecepatan loading website Anda semakin bagus.
Pemilihan Warna dan Font yang ringan
Anda dapat menonaktifkan warna dan font bawaan dari Elementor yang terhubung dengan tema Anda.
Semoga seluruh tips tersebut dapat Anda terapkan. Apabila ada informasi lebih lanjut, silahkan hubungi kami.
