Optimasi WooCommerce Dan Bikin Ngebut Toko Online

TokoDaring.Com – Optimasi WooCommerce Dan Bikin Ngebut Toko Online. Ini artikel pamungkas untuk memaksimalkan performa toko daring WordPress WooCommerce anda. Bikin ngebut toko online WordPress WooCommerce juga bukan hal yang sulit dan anda bisa lakukan sendiri dengan sedikit bantuan tim.

Bikin ngebut toko online

Artikel Lainnya:

Optimasi WordPress Yang Bisa Anda Lakukan Sebagai Pemilik Bisnis Toko Online

Bikin ngebut toko online ? Ini adalah persaingan yang sebenarnya. Ketika mesin pencari mengharuskan kinerja yang maksimal dari platform eCommerce anda, atau anda terlempar dari persaingan SERP.

Anda mungkin memiliki budget iklan yang cukup dan tidak mengandalkan pencarian organik. Tapi jika loading halaman toko online anda lelet, maka konversi yang anda harapkan di jamin boncos.

Memaksimalkan performa toko online WordPress berarti harus melakukan optimasi WordPress itu sendiri. Maka kami sarankan untuk melihat dulu dua artikel berikutnyang pernah kami terbitkan sebelum anda melakukan optimasi WooCommerce.

1. Optimasi website eCommerce.
2. Optimasi WordPress.

Plugin WooCommerce lebih kompleks dibanding plugin lain

WooCommerce memang bukan plugin yang main-main. Untuk benar-benar memiliki fungsi sebuah website toko online WooCommerce memang full dan kompleks dengan kode dan sumber-sumber yang di perlukan itu.

Sebagai sebuah platform toko online, WooCommerce bisa saja menjadi semakin kompleks pada masa mendatang. Itu karena mengikuti perkembangan teknologi dan trend belanja online.

Belum lagi di tambah dengan plugin dan ekstensi lainnya. Tapi ada logika yang harus anda pahami terkait dengan kompleksitas website eCommerce anda. Dan itu akan membantu anda meningkatkan kinerjanya.

Ketika kita tau bahwa plugin toko online begitu kompleks dengan beragam fungsi dan fiturnya, maka penting sekali untuk mempersiapkan landasan yang kuat. Mulai dari layanan hosting yang anda gunakan, tema dan software pendukung lainnya

Optimasi WooCommerce

Memilih hosting yang tepat

Memilih paket hosting yang tepat adalah sesuai dengan skala toko online itu sendiri. Itu akan terkait dengan perkiraan berapa banyak produk yang anda jual, juga berapa banyak kunjungan harian.

Memperhatikan performa dan kualitas perusahaan hosting (provider) dimana kita akan menghosting website toko online adalah yang paling utama. Performa layanan hosting tersebut akan sangat mempengaruhi kinerja di kemudian hari.

Namun masalahnya performa hosting sangat bergantung dengan biaya paketan yang digunakan. Makin tinggi spek yang di tawarkan, akan makin bagus performa yang di dapatkan, dan tentu saja harga yang di tawarkan juga akan lebih mahal.

Untuk website jenis toko online memang tidak seharusnya menggunakan jenis shared hosting.

Tapi…hmm… baiklah, mungkin karena suatu keterbatasan, maka anda harus menggunakan jenis shared hosting tersebut. Maka upayakan untuk menggunakan shared hosting dimana anda bisa mengupgradenya dimasa mendatang dan tanpa harus menghentikan operasional toko online anda.

Cek paket shared hosting niagahoster

Sepanjang yang kami tau, penyedia layanan hosting yang jenis shared hostingnya berkualitas adalah niagahoster.

Paket shared hostingnya sudah lebih dari cukup untuk mendukung platform toko online di masa awal bisnis anda. Jika pada saatnya mengalami lonjakan trafik kunjungan dan kustomer, anda juga bisa mengupgrade ke level yang lebih tinggi.

Optimasi WooCommerce dengan mengoptimalkan backend

Beberapa trik optimasi WooCommerce berikut, selain ampuh untuk mengoptimalkan kinerja shared hosting website eCommerce anda. Juga ampuh untuk memaksimalkan halaman backend.

Sesuaikan tema yang digunakan

Memilih tema yang ringan akan sangat membantu meningkatkan kinerja toko anda. Tema dengan desain yang bagus juga kadang hanya berisi sedikit script dan kode.

Website toko online mungkin memerlukan kode CSS dan JS, dan anda bisa memilih yang hanya menggunakan vanila javascript karena di klaim lebih ringan dibandingkan dengan library yang lain.

Gunakan plugin seperlunya

Jumlah plugin yang dibundle pada tema website WooCommerce biasanya juga mengangkut banyak plugin, bahkan untuk yang ringan sekalipun. Misalnya untuk hanya sekedar mengganti tombol add to cart, hingga plugin-plugin yang lebih berat untuk keperluan customer manajemen.

Tapi benarkah itu semua diperlukan di awal-awal bisnis daring anda. Anda mungkin perlu untuk mencari sumber-sumber untuk mengkustom ketimbang menggunakan plugin.

Seperti misalnya kami memiliki artikel tutorial untuk sekedar mengganti tombol add to-cart, dan tidak perlu menginstall plugin.

Terkait tema dan plugin ini, jika anda memang benar-benar memerlukannya, maka saran kami jangan ragu untuk menggunakan versi premium meskipun anda harus merogoh kocek untuk membelinya. Pastikan saja tema dan plugin yang anda beli, di maintain secara baik oleh pihak developer.

Selalu update versi tema, plugin, dan WordPress.

Menjaga semuanya dalam posisi paling update adalah satu langkah optimasi WooCommerce. Faktanya pembaruan tema, plugin atau core WordPress lebih sering bertujuan untuk mengatasi masalah-masalah pada halaman backend.

Dalam operasional toko online penyiapan aspek-aspek backend begitu penting untuk mendukung pengoptimalan penjualan. Bayangkan jika anda menjual pakaian yang memiliki banyak variasi warna, ukuran dan tentu dengan harga yang berbeda.

Itu semua diatur dari halaman backend anda. Belum lagi setting mengenai pajak, kelas pengiriman dan hal-hal kompleks toko online lainnya.

Kami juga menyarankan anda untuk membuat versi staging atau development mode website toko online anda. Pada beberapa kasus misalnya, major realease dari plugin justru sering membuat website jadi bermasalah.

Versi staging website akan membantu operasional toko online anda tetap terhindar dari error yang tidak di inginkan.

Cek dan aktifkan modul PHP extension

Mungkin tanpa anda sadari bahwa ada modul-modul extention php yang bisa membantu anda mengoptimasi WooCommerce. Misalnya image magic, opcache, brotli, gzip dan yang lainnya.

Extensi tersebut tersedia pada menu PHP selector cPanel anda. Mungkin saja itu tidak diaktifkan secara default atau pihak hosting memang sengaja tidak mengaktifkannya.

Artinya mereka memberikan pilihan sepenuhnya kepada anda, apakah akan di aktifkan atau tidak. Maka, segera cek pada cPanel melalui PHP selectors, dan lihat apakah ada yang perlu diaktifkan disana.

Bersihkan database

Tips berikutnya untuk optimasi WooCommerce dan backend adalah dengan membersihkan database. Melalui phpMyAdmin bersihkan data-data sampah didalam setiap tabel database. Artikel kami berikut mungkin bisa menjadi acuan untuk bersih-bersih database WordPress dengan perintah SQL.

Buatlah perencanaan yang matang

Perencanaan membuat toko online yang matang, berarti anda mentransformasikan ide bisnis anda kedalam platform. Misalnya produk apa yang akan dijual. Lalu tentukan kategori, tag atau halaman-halaman yang akan dibuat.

Sekali anda menentukan kategory, tag atau page, usahakan untuk tidak merubahnya atau menghapusnya. Merubah taxonomy atau struktur URL akan berakibat pada error 404 not found.

Meskipun bisa di redirect, maka redirect akan membuat website WooCommerce menjadi lebih lambat meskipun hanya dalam hitungan sepersekian detik.

Optimasi WooCommerce dengan mengkustom fungsi dan fitur WooCommerce

Beberapa trik optimasi WooCommerce berikut bersifat lebih advance. Anda perlu untuk menambahkan beberapa baris script php ke dalam file function.php. Ini akan membatasi fungsi WooCommerce tanpa mempengaruhi atau merusak kemampuan dan fungsi toko online.

Misalnya jika website toko online hanya menjual sedikit produk dan ada banyak artikel blog yang diterbitkan untuk mendukung promosi digital anda.

Masalahnya fungsi dan fitur WooCommerce bersifat site wide meskipun untuk pengunjung yang sekedar membaca konten dan tidak membeli produk.

Beberapa langkah optimasi WooCommerce berikut adalah dengan cara mengkustomnya. Yaitu dengan memahami perbedaan halaman WooCommerce dan halaman non-WooCommerce. Lalu membuat setiap fitur dan fungsi WooCommerce berjalan pada halamanya saja. Ini ampuh untuk bikin ngebut toko online anda.

Disable cart fragment

Ini yang paling umum dan setiap pengguna WooCommerce sepertinya melakukannya. WooCommerce cart fragments adalah fitur yang mengupdate isi kerajang tanpa user melakukan refresh halaman. Sebagai fitur toko online ini tentu sebuah fitur yang penting tapi cart fragment tetap berjalan pada pengunjug yang hanya membaca artikel blog anda.

Maka itu bisa di kustom dengan menambahkan script berikut ke dalam file function.php.

/*
 * Optimasi WooCommerce
 * disable_cart_fragments
 */

add_action('wp_enqueue_scripts', 'disable_cart_fragments', 11);
function disable_cart_fragments() {
    if(is_page(array(10, 11, 12, 13, 14)) || is_singular('post')) { // asumsi ini adalah list halaman non WooCommerce.
        wp_dequeue_script('wc-cart-fragments');
    }
}

Disable widget WooCommerce

Widget adalah yang biasa anda tambahkan pada sidebar atau footer di website anda. Secara default ada banyak widget WooCommerce dan tidak semuanya anda gunakan. Maka tetap biarkan yang anda gunakan dan non-aktifkan sisanya.

Dengan cara menambahkan script berikut ke dalam file function.php.

/*
 * Optimasi WooCommerce
 * disable_wc_widgets
 */

add_action('widgets_init', 'remove_wc_widgets');
function remove_wpwc_widgets() {
    unregister_widget('WC_Widget_Products');
    unregister_widget('WC_Widget_Recent_Products');
    unregister_widget('WC_Widget_Featured_Products');
    unregister_widget('WC_Widget_Product_Categories');
    unregister_widget('WC_Widget_Product_Tag_Cloud');
    unregister_widget('WC_Widget_Cart');
    unregister_widget('WC_Widget_Layered_Nav');
    unregister_widget('WC_Widget_Layered_Nav_Filters');
    unregister_widget('WC_Widget_Price_Filter');
    unregister_widget('WC_Widget_Product_Search');
    unregister_widget('WC_Widget_Top_Rated_Products');
    unregister_widget('WC_Widget_Rating_Filter');
    unregister_widget('WC_Widget_Recent_Reviews');
    unregister_widget('WC_Widget_Recently_Viewed');
    unregister_widget('WC_Widget_Best_Sellers');
    unregister_widget('WC_Widget_Onsale');
    unregister_widget('WC_Widget_Random_Products');
}

Oh my… kenapa tidak sekalian saja selektif dan non aktifkan juga widget WooCommerce yang tidak di gunakan, sehingga kode yang di tambahkan adalah seperti ini.

/*
 * Optimasi WooCommerce
 * disable_wp_wc_widgets
 */

add_action('widgets_init', 'remove_wpwc_widgets');
function remove_wpwc_widgets() {
    //wpWidget
    unregister_widget('WP_Widget_Media');
    unregister_widget('WP_Widget_Media_Audio');
    unregister_widget('WP_Widget_Media_Video');
    unregister_widget('WP_Widget_Media_Image');
    unregister_widget('WP_Widget_Media_Gallery');
    unregister_widget('WP_Widget_RSS');
    unregister_widget('WP_Widget_Tag_Cloud');
    unregister_widget('WP_Nav_Menu_Widget');
    unregister_widget('WP_Widget_Recent_Comments');
    unregister_widget('WP_Widget_Calendar');
    unregister_widget('WP_Widget_Text');
    unregister_widget('WP_Widget_Archives');
    unregister_widget('WP_Widget_Meta');
    unregister_widget('WP_Widget_Pages');
    unregister_widget('WP_Widget_Links');
    //wcWidget
    unregister_widget('WC_Widget_Products');
    unregister_widget('WC_Widget_Recent_Products');
    unregister_widget('WC_Widget_Featured_Products');
    unregister_widget('WC_Widget_Product_Categories');
    unregister_widget('WC_Widget_Product_Tag_Cloud');
    unregister_widget('WC_Widget_Cart');
    unregister_widget('WC_Widget_Layered_Nav');
    unregister_widget('WC_Widget_Layered_Nav_Filters');
    unregister_widget('WC_Widget_Price_Filter');
    unregister_widget('WC_Widget_Product_Search');
    unregister_widget('WC_Widget_Top_Rated_Products');
    unregister_widget('WC_Widget_Rating_Filter');
    unregister_widget('WC_Widget_Recent_Reviews');
    unregister_widget('WC_Widget_Recently_Viewed');
    unregister_widget('WC_Widget_Best_Sellers');
    unregister_widget('WC_Widget_Onsale');
    unregister_widget('WC_Widget_Random_Products');
}

Disable style WooCommerce block

Seiring perkembangan WordPress saat ini dengan block editor Gutenbergnya, WooCommerce juga memiliki block yang bisa di gunakan untuk mendesain halaman produk dan halaman WooCommerce lainnya.

Tapi sampai saat ini kami masih menggunakan classic editor khusus untuk membuat listing produk. Maka anda bisa menonaktifkan dulu dengan script berikut.

/*
 * Optimasi WooCommerce
 * disable_wc_block_style
 */

function tkdr_dequeue_wc_block() {
    wp_dequeue_style('wp-block-library');
    wp_dequeue_style('global-styles');
    wp_dequeue_style('wc-block-style');
    wp_dequeue_style('wc-blocks-vendors-style');
    wp_dequeue_style('wc-blocks-style'); 
}
add_action('wp_enqueue_scripts', 'tkdr_dequeue_wc_block', 200);

Mencegah WooCommerce style berjalan di halaman Non WooCommerce

Stylesheet WooCommerce memang hanya spesifik untuk mengatur gaya pada setiap halaman WooCommerce saja. Tapi secara default itu berjalan di setiap halaman dan mempengaruhi kinerja loading toko online anda.

Untuk mencegahnya adalah dengan script berikut yang perlu untuk di tambahkan ke dalam file function.php.

/*
 * Optimasi WooCommerce
 * disable_wc_style_halaman_non_WooCommerce
 */

function tkdr_wc_dequeue_style() {
    if (function_exists('is_woocommerce')) {
        if (!is_woocommerce()) {
            wp_dequeue_style('woocommerce-layout');
            wp_dequeue_style('woocommerce-smallscreen');
            wp_dequeue_style('woocommerce-general');
        }
    }
}
add_action('wp_enqueue_scripts', 'tkdr_wc_dequeue_style');

Mencegah WooCommerce script berjalan di halaman Non WooCommerce

Seperti file stylesheet di atas yang di kustom hanya agar berjalan pada halaman spesifik WooCommerce saja. Script ini akan mengkustom script WooCommerce agar tidak berjalan pada halaman non WooCommerce.

Untuk mencegahnya adalah dengan script berikut yang perlu untuk di tambahkan ke dalam file function.php.

/*
 * Optimasi WooCommerce
 * disable_wc_scripts_halaman_non_WooCommerce
 */

function tkdr_wc_dequeue_script() {
    if (function_exists('is_woocommerce')) {
        if (!is_woocommerce() && !is_cart() && !is_checkout() && !is_account_page()) {
            wp_dequeue_script('wc-add-to-cart');
            wp_dequeue_script('jquery-blockui');
            wp_dequeue_script('jquery-placeholder');
            wp_dequeue_script('woocommerce');
            wp_dequeue_script('jquery-cookie');
            wp_dequeue_script('wc-cart-fragments');
        }
    }
}

Remove WooCommerce generator

Seperti juga WordPress, WooCommerce generator juga memperlihatkan versi WooCommerce yang sedang digunakan. Meskipun tag generator ini di hilangkan ini tidak mempengaruhi SEO atau struktur website eCommerce anda.

Maka hilangkan saja dengan menambahkan script berikut ke dalam file function.php.

/*
 * Optimasi WooCommerce
 * remove_wc_generator
 */

function remove_wc_generator() {
    if (function_exists('is_woocommerce')) {
        if (!is_woocommerce()) {
            remove_action('wp_head', array( $GLOBALS['woocommerce'], 'generator'));
        }
    }
}
add_action('wp_enqueue_scripts', 'remove_wc_generator', 99);

Artikel terkait :