ThemesCorners
Blog
12 menit bacaoleh ThemesCorners

Checklist Performa WooCommerce — Jadikan Toko Anda Dua Kali Lebih Cepat

Daftar tanpa basa-basi tentang perubahan yang benar-benar menggerakkan Core Web Vitals WooCommerce — diurutkan berdasarkan dampak, bukan clickbait.

Sebagian besar artikel "kecepatan WooCommerce" adalah campuran saran cargo-cult dan "pasang saja WP Rocket". Daftar di bawah adalah yang benar-benar kami lakukan, dalam urutan kami melakukannya, saat klien bilang toko mereka lambat. Angka berasal dari audit nyata di sekitar 40 toko selama 18 bulan terakhir.

0. Ukur dulu

Jalankan Lighthouse pada tiga halaman:

  • Beranda
  • Satu halaman produk (best-seller Anda)
  • Keranjang

Catat LCP, INP, CLS, dan Total Blocking Time. Tanpa angka ini Anda tidak bisa tahu apakah aksi-aksi berikut membantu.

1. Pindahkan keranjang dan checkout ke blok WooCommerce (≈ 30% peningkatan LCP)

Cart dan checkout berbasis shortcode lama sudah ditulis ulang sebagai blok bertahun-tahun lalu, tapi sangat banyak toko yang belum bermigrasi. Versi blok membuang banyak jQuery, defer script non-kritis, dan mengurangi TTFB di checkout sekitar 200ms di benchmark kami.

// di functions.php tema Anda — default di instalasi baru
add_filter('woocommerce_use_blocks_cart_checkout', '__return_true');

Lalu di admin: Halaman → Cart → ganti konten dari [woocommerce_cart] ke Cart block. Sama untuk Checkout.

2. Optimalkan gambar produk saat upload (≈ 20% peningkatan LCP di halaman produk)

Gambar produk adalah elemen LCP di 80% halaman produk. Kalau Anda upload PNG 4000×4000, bahkan resize otomatis WP tidak menyelamatkan Anda karena srcset mereferensikan original untuk high-DPI.

Kombo yang kami pakai:

  • Upload tidak lebih besar dari 2000×2000.
  • Paksa AVIF + WebP saat upload (ShortPixel atau Imagify, lewat filter wp_handle_upload).
  • Set lebar gambar maksimal ke 1600 di Pengaturan → Media.
  • Lazy-load semuanya kecuali gambar LCP. WordPress sudah otomatis sejak 5.5 — tapi gambar LCP butuh fetchpriority="high", yang sebagian besar tema tidak set. Tema blok yang ikut standar WP saat ini melakukannya. Tema lama berbasis shortcode sering tidak.

3. Ganti ?add-to-cart= dengan endpoint AJAX (≈ 1.5s perceived speed)

Param query lama ?add-to-cart=123 memicu reload halaman penuh. Endpoint AJAX yang ditambahkan di WC 8 membiarkan pengguna tetap di halaman produk dan menampilkan mini-cart slide-in. Aktif default di toko baru tapi nonaktif di banyak yang lama:

WooCommerce → Settings → Products → AJAX add to cart on archives

Ini salah satu perubahan ber-dampak tertinggi dengan effort terendah.

4. Matikan cart fragment di halaman non-cart (≈ 200ms TTFB)

Script wc-cart-fragments melakukan panggilan AJAX setiap halaman dimuat hanya untuk update jumlah mini-cart. Kalau mini-cart hanya terlihat di halaman tertentu, Anda dapat melewatkan script di tempat lain:

add_action('wp_enqueue_scripts', function () {
    if (! is_woocommerce() && ! is_cart()) {
        wp_dequeue_script('wc-cart-fragments');
    }
}, 11);

5. Pakai object caching (≈ 40% reduksi query)

WooCommerce membuat ratusan query database per halaman di toko sibuk. Redis atau Memcached menyimpannya di memory. Di managed host (Kinsta, WP Engine, Pressable) sudah aktif default; di VPS mentah Anda pasang sendiri:

sudo apt install redis-server php8.4-redis
wp plugin install redis-cache --activate
wp redis enable

Verifikasi di WooCommerce → Status → Tools → Redis status.

6. Defer JS non-esensial (≈ 50% reduksi TBT)

Stack WooCommerce: Stripe, Klaviyo, Google Tag Manager, Hotjar, widget chat, pop-up email, plugin review. Masing-masing menambah 50–200ms TBT. Solusinya bukan menghapus — tim marketing akan memberontak — tapi men-defer mereka setelah LCP:

add_filter('script_loader_tag', function ($tag, $handle) {
    $defer = ['klaviyo', 'hotjar', 'gtm-js', 'tawk', 'crisp'];
    foreach ($defer as $h) {
        if (str_contains($handle, $h)) {
            return str_replace(' src=', ' defer src=', $tag);
        }
    }
    return $tag;
}, 10, 2);

Khusus widget chat, gunakan pola requestIdleCallback — muat widget hanya saat browser idle.

7. Rapikan admin AJAX WooCommerce

Admin WC mem-polling admin-ajax.php untuk update stok, jumlah order, dan data Marketing Hub. Di toko dengan banyak admin konkuren, ini dapat memberatkan database. Matikan Marketing Hub di toko yang tidak memakainya:

add_filter('woocommerce_admin_features', function ($features) {
    return array_diff($features, ['marketing']);
});

8. Pakai CDN — tapi hati-hati dengan cart

Tier gratis Cloudflare menangani 90% situs WooCommerce. Atur page rule untuk bypass cache pada:

  • /cart/*
  • /checkout/*
  • /my-account/*
  • /wp-admin/*
  • URL apa pun dengan add-to-cart di query string

Kalau Anda melewatkan ini, akan muncul bug terkenal "semua orang melihat keranjang yang sama".

9. Pindahkan laporan berat dari DB utama

Tabel WooCommerce Analytics (wc_order_stats, wc_order_product_lookup) cepat bloat. Setelah musim liburan pertama Anda, query analytics dapat mengunci tabel orders selama beberapa detik. Solusi:

  • Termudah: Jadwalkan regenerasi analytics di luar jam sibuk.
  • Lebih baik: Pindahkan analytics ke read replica.
  • Terbaik: Matikan WC Analytics dan gunakan tool khusus seperti Glew atau Polar Analytics yang menarik dari API.

10. Audit tema dan template Anda

Tema adalah variabel terbesar. Tema WooCommerce yang mengirim setiap block produk di setiap halaman bahkan saat halaman tersebut adalah blog post akan menjatuhkan skor Anda. Uji dalam urutan: child theme dari tema cepat → tema lebih cepat → child kustom dari Storefront → tema kustom yang sudah diaudit.

Tema kami mengirim di bawah 50KB CSS default dan lazy-load semua JS spesifik WC. Kalau Anda mulai dari nol, itu baseline yang dapat dibela.

Yang JANGAN dilakukan

  • Jangan pasang tiga plugin caching. Mereka konflik. Pilih satu (WP Rocket, LiteSpeed Cache, atau W3 Total Cache) dan tune dengan teliti.
  • Jangan matikan cart fragments global di toko yang menampilkan jumlah keranjang di header. Anda akan kehilangan update.
  • Jangan lazy-load gambar LCP. Itu merusak fetchpriority dan memperlambat.
  • Jangan repot dengan plugin "optimasi gambar" yang kompres ke JPG. AVIF/WebP menang di setiap tes yang kami jalankan.

Ekspektasi realistis

Mengikuti sepuluh langkah, di toko WooCommerce tipikal dengan 500 produk dan 5k order per bulan, kami biasanya melihat:

  • LCP: dari 4.2s ke 1.9s
  • INP: dari 380ms ke 110ms
  • CLS: dari 0.18 ke 0.04
  • Lighthouse mobile: dari 38 ke 87

Anda tidak akan menyentuh 100. Siapa pun yang bilang dapat 100 di toko WooCommerce nyata dengan pixel marketing dan widget chat sedang berbohong, atau menguji dengan throttling network ke "fast 4G" — Google mengukur di 4G lambat.

87 sudah cukup untuk lulus Core Web Vitals. Lulus Core Web Vitals, kembalikan conversion rate Anda, lanjutkan bisnis.

Artikel terkait