Meningkatkan Performa Website Elementor – Membuat website wordpress saat ini sangatlah mudah, dengan dibantu banyak page atau theme builder yang mampu membuat website semakin cepat untuk dibuat. Saat ini ada beberapa page builder untuk wordpress yang sangat populer.
Antara lain adalah WpBakery, Elementor, Oxygen Builder dan Gutenberg. Saat ini elementor dianggap sebagai pembuat halaman yang sangat powerfull untuk situs yang dibangun menggunakan wordpress. Selain mudah, elementor banyak menyediakan element yang tentunya tidak ada di plugin builder lainnya.
Sayangnya, jika ingin menggunakan fitur element secara lengkap harus menggunakan elementor versi pro. Selain harus menggunakan versi pro, nyatanya elementor memiliki kelemahan dalam hal kecepatan.
Baca juga: Cara Perbaiki Mixed Content Image WordPress
Jika suatu website menggunakan elementor sebagai pembangun halamannya, lalu dilakukan ujicoba menggunakan pagspeed insight maka hasilnya sangat mencengangkan. Banyak yang perlu diperbaiki untuk bisa mendapatkan nilai rata-rata pagespeed. Diantaranya adalah mulai dari markup HTML, CSS, Javascript hingga pada penggunaan font.
Lalu bagaimana membuat website dengan elementor untuk mendapatkan skor minimal atau terbaik?
Tips Membuat Website dengan Elementor
Ada beberapa tips yang dapat Anda lakukan untuk mendapatkan skor terbaik di pagespeed, dimana website yang dibangun menggunakan wordpress dan elementor. Berikut ini tips membuat website dengan elementor lebih cepat dan meningkatkan performa website elementor:
Pilih Tema WordPress yang Ringan
Mengapa saya menyarankan memilih tema yang wordpress yang ringan? Sementara elementor juga dapat melakukannya? Jika Anda memilih tema wordpress dengan banyak pilihan template dan hanya satu saja yang dipakai maka ini miliki ukuran instalasi yang sangat besar. Selain ukuran file instalasi, tentunya semakin banyak template semakin banyak file css, js yang tidak dipakai.
Perlu jadi perhatian penting adalah kompabilitas atau dukungan tema dengan penggunaan builder. Pastikan tema yang Anda gunakan mendukung untuk penggunaan builder seperti elementor.
Jika Anda membeli sebuah dari penyedia tema wordpress seperti themesforest, silahkan lihat pada bagian sidebar selah kanan. Maka akan melihat dukungan page builder pada tema tersebut
Install Plugin yang Dibutuhkan Saja
Penggunaan plugin dapat membuat ukuran database dan halaman website menjadi lebih besar. Tentunya ini akan menhambat kecepatan sebuah website dan hanya akan memperburuk kondisi sebuah website. Pastikan Anda hanya menggunakan plugin yang memang benar dibutuhkan saja.
Cari alternatif lain jika membutuhkan sebuah fitur yang tidak tersedia pada sebuah tema. Seperti penggunaan kustom kode atau hook wordpress, ini akan mengurangi penggunaan plugin.
Banyak tema mendukung penggunaan plugin woocommerce atau plugin ecommerce yang berkaitan. Jika website yang dibuat tidak menggunakan woocommerce atau plugin sejenisnya, ini lebih baik tidak perlu untuk diinstall meskipun bersifat required atau harus.
Sebagai contoh gambar diatas, website prameko.com menggunakan elementor sebagai page builder dan menggunakan tema premium. Namun, ada beberapa plugin yang diharuskan untuk diinstall, karena saya tidak membutuhkan plugin tersebut maka tidak menggunakannya. Nyatanya, ini tidak berpengaruh pada website hingga saat ini.
Ubah Ukuran & Kompres Gambar
Mengapa gambar harus diubah ukurannya dan di kompresi sebelum di unggah? Ada beberapa plugin yang dapat melakukan ini dengan cepat dan mudah. Namun, lagi dan lagi saya tidak menyarankan penggunaan plugin untuk mengubah ukuran dan kompresi gambar. Lebih baik menggunakan cara manual, meskipun menyita waktu namun nyatanya ini lebih maksimal.
Jika menggunakan plugin, ada beberapa teknologi kompresi tidak mendukung beberapa jenis server dan cache. Selain itu, tidak semua gambar juga dapat diubah ukuran dan kompresi. Banyak fitur juga yang tidak Anda butuhkan.
Lalu bagaimana dengan penggunaan gambar yang diambil dari situs penyedia gambar gratis tanpa hak cipta? Tentunya ini tetap dapat kita gunakan. Silahkan pilih ukuran gambar sesuai dengan kebutuhan website.
Pada umumnya ukuran medium ini sudah memenuhi kebutuhan gambar pada sebuah website. Ukuran file masih terlalu besar untuk ukuran medium? Silahkan lakukan kompresi gambar menggunakan tinypng.com. Salah satu website kompresi gambar yang dapat direkomendasikan untuk digunakan.
Lebih direkomendasikan lagi, gunakan untuk icon menggunakan format svg, dan untuk gambar adalah webp. Pagespeed insight sering menampilkan hasil audit untuk menggunakan format gambar menggunakan webp.
Kurangi Penggunaan Aset WordPress dan Elementor (CSS/JS)
Menggunakan elementor sebagai page builder ada banyak skrip yang berjalan di backend. Sayangnya, ada beberapa aset tidak digunakan saat memuat halaman. Sebagai contoh, pada halaman homepage dibangun sepenuhnya menggunakan elementor maka aset gutenberg ini tetap akan dimuat dan aktif di frontend meskupun tidak digunakan.
Baca juga: Rekomendasi Plugin Page Builder WordPress
Apakah ada pengaruhnya jika kita menonaktifkan penggunaan gutenberg? tentu, ini akan menambah kecepatan website semakin meninggkat. Lalu bagaimana untuk menonaktifkan gutenberg di frontend?
Menonaktifkan Pemuatan CSS Gutenberg
Tambahkan cuplikan kode berikut ini:
function pr_unload_files() {
wp_dequeue_style ( 'wp-block-library' );
wp_dequeue_style ( 'wp-block-library-theme' );
}
add_action( 'wp_enqueue_scripts', 'pr_unload_files', 100 );
Menonaktifkan Font Google Elementor
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
Nonaktifkan Fontawesome Elementor
//Disabled fontawesome elementor
add_action('elementor/frontend/after_register_styles',function() {
foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
wp_deregister_style( 'elementor-icons-fa-' . $style );
}
}, 20 );
Remove Dashicon Adminbar WordPress
Mengapa ini perlu dihapus? meskipun dalam keadaan tidak login, dashicon wordpress tetap akan dimuat tanpa harus login. Ini akan muncul pada bagian hal yang perlu di optimasi di pagespeed insight. Tambahkan kode berikut ini pada file function.php menggunakan FTP atau melalui themes editor wordpress.
/** Remove Dashicons from Admin Bar for non logged in users **/
add_action('wp_print_styles', 'jltwp_adminify_remove_dashicons', 100);
/** Remove Dashicons from Admin Bar for non logged in users **/
function jltwp_adminify_remove_dashicons() {
if (!is_admin_bar_showing() && !is_customize_preview()) {
wp_dequeue_style('dashicons');
wp_deregister_style('dashicons');
}
}
Disable Ikon Elementor (Eicons)
Letakkan kode berikut ini pada file function.php, ada baiknya silahkan backup terlebih dahulu website sebelum menambahkan kode ini.
function pr_eicons_files() {
if ( is_admin() || current_user_can( 'manage_options' ) ) {
return;
}
wp_deregister_style( 'elementor-icons' );
}
add_action( 'wp_enqueue_scripts', 'pr_eicons_files', 100 );
Gunakan Plugin Cache
Cara lain untuk meningkatkan performa kecepatan website yang menggunakan elementor sebagai page buildernya, dapat menggunakan plugin cache. Perlu diperhatikan sebelum memilih dan menggunakan plugin cache untuk mencari informasi dukungan plugin. Ada beberapa plugin cache tidak mendukung dan bekerja untuk beberapa jenis server.
Berikut ini beberapa plugin cache yang adapat digunakan:
- WpRocket
- W3 Total Cache
- WP Super Cache
- Litespeed Cache
- WP Optimize
- Hummingbird
- WP Fastest Cache
Demikianlah pembahasan mengenai bagaimana cara meningkatkan performa website elementor. Anda memiliki cara lain untuk meningkatkan kecepatan website yang menggunakan elementor? Silahkan ajukan pada kolom komentar dibawah ini. Semoga bermanfaat dan terimakasih.
