7 Tema WoooCommerce Tercepat (2023)

Diterbitkan: 2023-06-30
Memuat situs web...

Apakah Anda mencari tema WordPress WooCommerce yang cepat? Kami telah menyusun daftar 7 tema yang dapat Anda gunakan untuk proyek e-niaga berikutnya! Toko online sering kali berarti banyak gambar, teks, video, ulasan, dan gateway pembayaran yang, sayangnya, dapat memengaruhi kinerja. Klien Anda tidak akan menyukai situs WordPress yang lambat dan mungkin enggan untuk menyelesaikan pembelian apa pun jika halaman membutuhkan waktu lama untuk dimuat. Sebenarnya, Portent menjalankan beberapa studi tentang dampak kecepatan situs terhadap tingkat konversi, dan Anda dapat melihat korelasinya pada grafik di bawah ini. Semakin lama halaman dimuat, semakin rendah tingkat konversinya.

Kecepatan halaman dan tingkat konversi - Sumber: Portent
Kecepatan halaman dan tingkat konversi – Sumber: Portent

Pada artikel ini, Anda akan menemukan 7 tema WooCommerce yang dapat Anda gunakan untuk proyek berikutnya. Sebagai bonus – untuk mencegah Anda kehilangan penjualan dan pelanggan – kami membagikan beberapa tips untuk mengoptimalkan situs WooCommerce Anda dan membuat toko online Anda lebih cepat dari sebelumnya.

Mari selami.

7 Tema WordPress Tercepat + Data Uji

Kami telah memilih tema WooCommerce paling populer di pasaran, dan inilah daftar pendek yang kami buat:

  1. Etalase
  2. Astra (+ Pengaya Pro WooCommerce)
  3. Flatsome (+ Pembuat tema UX)
  4. Avada (pembangun Fusion WooCommerce)
  5. Divi (Divi WooCommerceBuilder)
  6. BeTheme (BeBuilder)
  7. The 7 (pembuat halaman Elemen)

Kami telah menjalankan beberapa tes kinerja yang adil untuk setiap tema yang akan membantu Anda memilih.

Mari kita dapatkan datanya!

1. Etalase

Tema gratis yang sangat mendasar yang dikembangkan oleh WooCommerce sendiri. Tema dibangun dan dikelola oleh pengembang inti WooCommerce, yang menghindari masalah kompatibilitas. Opsi penyesuaian terbatas, tetapi jika Anda ingin meluncurkan toko online sederhana, itu berhasil.

Tema etalase - Sumber: WooCommerce
Tema etalase – Sumber: WooCommerce

Hasil performa untuk tema etalase:

  • Skor seluler PageSpeed: 85/100
  • Cat Konten Pertama: 2.1s
  • Cat Konten Terbesar: 1,7 detik
  • Pergeseran Tata Letak Kumulatif: 2,8 detik
  • Indeks Kecepatan: 1,3 detik
  • Waktu Untuk Interaktif: 1,3 detik
  • Total Waktu Pemblokiran: 0 ms
  • Total waktu Pemuatan: 2,1 detik
  • Ukuran halaman total: 990 KB
  • Permintaan HTTP: 18

2.Astra

Astra adalah salah satu tema WordPress WooCommerce terbaik karena kodenya yang ringan, antarmuka yang ramah pengguna, dan ribuan template pemula untuk toko Anda berikutnya. Pengaya premium untuk WooCommerce memungkinkan Anda membuat halaman pembayaran khusus, menambahkan galeri produk canggih, filter, dan pengguliran tak terbatas untuk membuat situs seperti Pinterest.

Tema dan templat Astra untuk WooCommerce - Sumber: Astra
Tema dan templat Astra untuk WooCommerce – Sumber: Astra

Hasil performa untuk tema Astra (dan add-on WooCommerce):

  • Skor seluler PageSpeed: 83/100
  • Cat Konten Pertama: 2.2s
  • Cat Konten Terbesar: 1,7 detik
  • Pergeseran Tata Letak Kumulatif: 2,1 detik
  • Indeks Kecepatan: 1,1 detik
  • Waktu Untuk Interaktif: 1,3 detik
  • Total Waktu Pemblokiran: 0 ms
  • Total waktu Pemuatan: 2,5 detik
  • Ukuran halaman total: 990 KB
  • Permintaan HTTP: 16

3. Datar

Tema WooCommerce penjualan #1 di Themeforest serbaguna dan responsif untuk WooCommerce. Muncul dengan pembuat UX dan beberapa opsi menarik untuk toko online Anda, seperti pencarian langsung, tambahkan ke daftar keinginan, opsi gelembung penjualan, ubah jumlah produk per baris, atau opsi mode katalog jika Anda tidak ingin ditampilkan harga apapun.

Templat Megashop untuk WooCommerce - Sumber: Flatsome
Template Megashop untuk WooCommerce – Sumber: Flatsome

Hasil performa untuk tema Flatsome:

  1. Skor seluler PageSpeed: 81/100
  2. Cat Konten Pertama: 2,5 detik
  3. Cat Konten Terbesar: 1,7 detik
  4. Pergeseran Tata Letak Kumulatif: 1,6 detik
  5. Indeks Kecepatan: 1,3 detik
  6. Waktu Untuk Interaktif: 2,5 detik
  7. Total Waktu Pemblokiran: 0 ms
  8. Total waktu Pemuatan: 2,7 detik
  9. Ukuran halaman total: 997 KB
  10. Permintaan HTTP: 18

4. Avada (+ Pembuat Fusion Woo)

Ini adalah tema penjualan #1 di Envato selama bertahun-tahun, dengan ribuan template yang mudah disesuaikan di perpustakaan. Avada hadir dengan Fusion Builder, memungkinkan Anda membangun situs dari header hingga footer. Ini juga memiliki widget WooCommerce yang kuat yang memungkinkan pengguna membangun toko online yang disesuaikan. Anda juga dapat menggunakan pembuatnya untuk membuat halaman produk dan toko khusus.

Tema Avada dan Woo Builder – Sumber: Themeforest

Hasil kinerja untuk tema Avada:

  • Skor seluler PageSpeed: 78/100
  • Cat Konten Pertama: 2,9 detik
  • Cat Konten Terbesar: 1,8 detik
  • Pergeseran Tata Letak Kumulatif: 1,6 detik
  • Indeks Kecepatan: 1,3 detik
  • Waktu Untuk Interaktif: 2,6 detik
  • Total Waktu Pemblokiran: 0 ms
  • Total waktu pemuatan: 2,8 detik
  • Ukuran halaman total: 998 KB
  • Permintaan HTTP: 17

5. Divi (+ Pembuat Divi WooCommerce)

Divi adalah tema WooCommerce yang kuat berkat pembuat WooCommerce visualnya. Tema Elegan adalah salah satu perusahaan pertama yang menghadirkan WYSIWYG ke WordPress. Janjinya adalah Anda dapat membangun semuanya secara visual menggunakan kerangka kerja Divi tanpa menyentuh satu baris kode pun. Builder dan modul WooCommerce memungkinkan Anda membuat produk kustom dan halaman toko dengan cepat.

Divi dan WooCommerce Builder- Sumber: Elegantthemes.com
Divi dan WooCommerce Builder- Sumber: Elegantthemes.com

Hasil performa untuk tema Divi:

  • Skor seluler PageSpeed: 75/100
  • Cat Konten Pertama: 4.1s
  • Cat Konten Terbesar: 1,5 detik
  • Pergeseran Tata Letak Kumulatif: 2,8 detik
  • Indeks Kecepatan: 2,4 detik
  • Waktu Untuk Interaktif: 1.2s
  • Total Waktu Pemblokiran: 0,1 ms
  • Total waktu Pemuatan: 3,1 detik
  • Ukuran halaman total: 1,2 MB
  • Permintaan HTTP: 19

6. BeTheme (+ BeBuilder)

BeTheme adalah pembuat situs web serbaguna dan tema WordPress terlaris dengan 650+ situs web siap pakai (dengan desain modern). BeBuilder mereka juga kompatibel dengan WooCommerce, dan mereka bahkan meluncurkan pembuat kueri untuk membuat loop dan situs web dinamis. Janjinya adalah Anda dapat membangun situs WooCommerce yang Anda inginkan dan merancang toko serba guna & tata letak produk tunggal yang dapat dikonversi. Anda dapat menggunakan template siap pakai atau membuatnya sendiri.

Pembuat BeTheme WooCommerce - Sumber: themuffingroup.com
Pembuat BeTheme WooCommerce – Sumber: themuffingroup.com

Hasil performa untuk tema BeTheme:

  • Skor seluler PageSpeed: 72/100
  • Cat Konten Pertama: 4.1s
  • Cat Konten Terbesar: 3,9 detik
  • Pergeseran Tata Letak Kumulatif: 2,8 detik
  • Indeks Kecepatan: 1,9 detik
  • Waktu Untuk Interaktif: 1,7 detik
  • Total Waktu Pemblokiran: 0,5 ms
  • Total waktu Pemuatan: 3,6 detik
  • Ukuran halaman total: 1,3 MB
  • Permintaan HTTP: 21

7. The7

Ini adalah tema Elementor penjualan #1 yang menawarkan banyak penyesuaian untuk WooCommerce. The7 memiliki 60+ situs boneka prebuilt dengan templat eksklusif yang dapat membantu meluncurkan toko online dengan mudah. Anda dapat membuat template yang menarik untuk etalase, halaman dan daftar produk, pembayaran, keranjang, dan lainnya dengan Pembuat Tema WooCommerce yang canggih. Puncaknya adalah Anda dapat dengan mudah memodifikasi halaman WooCommerce apa pun dan menambahkan filter lanjutan untuk meningkatkan pengalaman pengguna.

7 - Sumber: the7.io
7 – Sumber: the7.io

Hasil performa untuk tema The7:

  • Skor seluler PageSpeed: 70/100
  • Cat Konten Pertama: 4,4 detik
  • Cat Konten Terbesar: 4,3 detik
  • Pergeseran Tata Letak Kumulatif: 2,9 detik
  • Indeks Kecepatan: 1,2 detik
  • Waktu Untuk Interaktif: 1,5 detik
  • Total Waktu Pemblokiran: 0 ms
  • Total waktu Pemuatan: 4,1 detik
  • Ukuran halaman total: 1,5 MB
  • Permintaan HTTP: 25

Tabel Rangkuman Hasil Kinerja

Di bawah ini kami merangkum hasil kinerja untuk setiap tema WooCommerce. Kami menggunakan “skor seluler PageSpeed” global Lighthouse untuk menentukan peringkat mereka.

Skor seluler PageSpeed Total waktu Pemuatan Cat Konten Terbesar   Cat Konten Pertama

Etalase
85/100 2,1 dtk 1,7 dtk 2,1 dtk
Astra 83/100 2,5 dtk 1,7 dtk 2,2 dtk
Datar 81/100 2,7 dtk 1,7 dtk 2,5 dtk
Avada 78/100 2,8 dtk 1,8 dtk 2,9 dtk
Divi 75/100 3,1 dtk 1,5 dtk 4,1 dtk
BeTheme 72/100 3,6 dtk 3,9 dtk 4,1 dtk
The7 70/100 4,1 dtk 4,3 dtk 4,4 dtk

Takeaway utama:

  • Tidak ada tema yang berwarna merah di ponsel, semuanya berada di antara oranye dan hijau terkait kinerja global.
  • Etalase, Astra, dan Flatsome tampaknya menjadi 3 teratas tercepat.
  • The7 tampaknya menjadi "paling lambat" yang masuk akal dengan semua penyesuaian lanjutan yang tersedia. Performanya masih dapat diterima, dan di bagian terakhir, kami akan menunjukkan cara menghijaukan semua KPI!

Bagaimana Kami Menguji Tema

Pemilihan didasarkan pada popularitas, jumlah unduhan atau penjualan yang tinggi, templat perpustakaan, dan tinjauan kualitas. Tes kinerja dilakukan dengan menggunakan alat kinerja berikut:

  • Wawasan PageSpeed
  • GTmetrix

Kedua alat tersebut didukung oleh Lighthouse. Mereka menganalisis kinerja dan pengalaman pengguna situs web Anda. Berikut adalah 10 KPI yang kami gunakan dalam pengujian kami – diukur di perangkat seluler :

Dari Wawasan PageSpeed:

  • Skor seluler PageSpeed
  • Cat Konten Pertama
  • Cat Konten Terbesar
  • Pergeseran Tata Letak Kumulatif
  • Indeks Kecepatan
  • Saatnya Interaktif
  • Total Waktu Pemblokiran

Dari GTmetrix:

  • Total waktu Pemuatan
  • permintaan HTTP
  • Ukuran halaman keseluruhan

Kemudian, kami memilih 7 tema yang mendefinisikan dirinya ramah WooCommerce karena dilengkapi dengan add-on atau kustomisasi khusus yang terkait dengan toko online: kustomisasi halaman produk atau proses checkout, galeri lanjutan, halaman akun pribadi, dll.

Situs Uji

Kami membangun situs WooCommerce yang realistis untuk setiap tema. Dalam semua kasus, beranda memiliki spanduk pahlawan dengan tombol, 1 ajakan bertindak, 4 ikon dengan teks, 3 ulasan pelanggan, 1 iklan, dan 12 produk. Tentu saja, kami menggunakan gambar dan produk yang sama untuk setiap pengujian, kami hanya menukar tema di antara putaran pengujian.

Contoh situs WooCommerce yang dibangun dengan Astra - Sumber: WP Rocket
Contoh situs WooCommerce yang dibangun dengan Astra – Sumber: WP Rocket

Kami melakukan penginstalan baru untuk setiap tema dan menggunakan server yang sama untuk pengujian kecepatan setiap tema (server ada di London).

️ Penafian : Tes kinerja tersebut telah dijalankan di server yang berbasis di London, dan kami membuat sendiri setiap halaman e-niaga. Hasil yang kami sajikan adalah dari pengalaman kami sendiri, dan hasilnya mungkin berbeda sesuai dengan proyek Anda.

Berikan Peningkatan Performa Ekstra dengan WP Rocket

WP Rocket adalah salah satu plugin caching terbaik untuk mengoptimalkan tema WooCommerce apa pun, termasuk yang ada di daftar kami. Performa toko online dan skor Data Web Inti Anda akan meningkat drastis setelah aktivasi.

Untuk memahami dampak WP Rocket pada kecepatan, mari kita lihat aksinya dengan the7, yang merupakan salah satu tema terlengkap yang kami uji dalam hal fitur dan penyesuaian.

Di bawah ini adalah masalah kinerja yang ditandai oleh Lighthouse, tercantum di bawah tab “Peluang”:

Rekomendasi Lighthouse untuk situs WooCommerce saya yang dibuat dengan the7 - Sumber: PageSpeed ​​Insights
Rekomendasi Lighthouse untuk situs WooCommerce saya yang dibuat dengan the7 – Sumber: PageSpeed ​​Insights

Lighthouse menyarankan untuk menggunakan caching, mengaktifkan kompresi teks, mengurangi CSS/JS yang tidak digunakan, dan menunda gambar di luar layar (pengoptimalan gambar dengan pemuatan lambat).

Setelah menggunakan WP Rocket di situs pengujian, kami melihat bahwa masalah kami dipindahkan ke bagian "audit yang lulus":

Situs uji The7 - lulus audit dengan WP Rocket - Sumber: PageSpeed ​​Insights
Situs uji ke-7 – lulus audit dengan WP Rocket – Sumber: PageSpeed ​​Insights

Tapi masih ada lagi yang akan datang. Semua KPI kinerja kami meningkat berkat WP Rocket, termasuk skor seluler di PageSpeed ​​Insights. Skor kinerja mendapat 99/100.

Situs uji The7 mendapat skor 99/100 dengan WP Rocket - Sumber: PageSpeed ​​Insights
Situs uji The7 mendapat skor 99/100 dengan WP Rocket – Sumber: PageSpeed ​​Insights

WP Rocket juga meningkatkan skor Core Web Vitals (semuanya berwarna hijau) dan mengurangi total waktu pemuatan (dari 4,1 detik menjadi 1,9 detik). Itu juga mengurangi ukuran halaman dan jumlah permintaan HTTP, seperti yang Anda lihat pada tabel kami di bawah ini:

KPI kinerja Skor The7 (tanpa WP Rocket) Skor The7 (dengan WP Rocket)
Skor seluler PageSpeed 70/100 99/100
Cat Konten Pertama 4,4 detik 1,7 detik
Cat Konten Terbesar* 4,3 detik 1,7 detik
Pergeseran Tata Letak Kumulatif* 2,9 detik 0 detik
Indeks Kecepatan 1,2 2 detik
Saatnya Interaktif 1,5 detik 1 detik
Total Waktu Pemblokiran 0 md 0 mdtk
Total waktu Pemuatan 4.1 detik 1,9 detik
Ukuran halaman keseluruhan 1,5 MB 680KB
permintaan HTTP 25 8

* Data Web Inti

Berikut adalah lebih banyak tip tentang menguji dan meningkatkan skor kinerja Lighthouse di WordPress.

Untuk mengatasi semua peringatan PageSpeed ​​Insights dan meningkatkan performa, kami menggunakan fitur WP Rocket berikut:

  • Kompresi teks dan caching – kedua fitur diaktifkan secara otomatis tepat setelah aktivasi plugin. Anda tidak perlu melakukan apapun.
WP Rocket menerapkan caching dan kompresi teks secara otomatis - Sumber: WP Rocket
WP Rocket menerapkan caching dan kompresi teks secara otomatis – Sumber: WP Rocket

Anda juga dapat mengatur opsi Anda sendiri dari tab cache lanjutan di admin WordPress:

Caching dan fitur pengoptimalan lanjutan - Sumber: WP Rocket
Caching dan fitur pengoptimalan lanjutan – Sumber: WP Rocket
Ingin mempelajari lebih lanjut tentang caching halaman di WooCommerce? Baca 7 tips kami untuk mempelajari cara menerapkan caching di situs WooCommerce
  • Pengoptimalan kode CSS – dari tab pengoptimalan file , kami memilih tombol pengoptimalan pengiriman CSS (menggunakan opsi hapus CSS yang tidak digunakan ). Kami juga memperkecil dan menggabungkan kode CSS untuk membantu browser mengunduh dan memproses file ini lebih cepat.
Optimalisasi CSS - Sumber: WP Rocket
Optimalisasi CSS – Sumber: WP Rocket
  • Pengoptimalan kode JavaScript – dari tab pengoptimalan file , ada juga beberapa opsi untuk mengoptimalkan JavaScript situs WordPress Anda. Dalam kasus kami, kami mengecilkan file JS, memuat JS ditangguhkan, dan menunda eksekusi JS:
Optimasi JS - Sumber: WP Rocket
Optimasi JS – Sumber: WP Rocket
  • Lazyload – untuk menunda gambar di luar layar (dan memprioritaskan pemuatan gambar yang terletak di viewport):
Fitur LazyLoad untuk gambar, iframe, dan video - Sumber: WP Rocket
Fitur LazyLoad untuk gambar, iframe, dan video – Sumber: WP Rocket

Apa Tema WooCommerce Terbaik Untuk Anda?

Meskipun kami tidak dapat memberi saran tentang tema tertentu karena sangat bergantung pada desain dan spesifikasi teknis Anda, berikut adalah beberapa saran:

  • Jika Anda memerlukan toko online sederhana dengan tampilan dan nuansa WooCommerce secara default, tanpa desain atau opsi lanjutan, gunakan Storefront.
  • Jika Anda seorang freelancer yang mencari tema dengan banyak demo yang dapat Anda tunjukkan kepada klien Anda untuk berbagai industri, maka Divi, BeTheme, dan the7 mungkin pilihan terbaik Anda.
  • Jika Anda adalah pengguna kuat Elementor , maka Astra dan The7 mungkin pilihan terbaik Anda.
  • Jika Anda ingin menggunakan WPBakery Page Builder , tema 7 adalah caranya.
  • Jika Anda berencana mengunggah ribuan produk, tema ringan seperti Astra atau OceanWP mungkin lebih bijak. Keduanya hadir dengan fitur WooCommerce canggih sehingga Anda dapat membuat toko sendiri dalam hitungan menit.
  • Jika Anda perlu membuat tata letak produk tunggal dan halaman toko Anda sendiri dan menambahkan data dinamis ke situs web Anda , ambil tema yang berfungsi baik dengan pembuat WooCommerce lainnya.
  • Jika Anda ingin mendapatkan tema dari Themeforest, pilih Avada, yang telah menjadi #1 di Themeforest selama bertahun-tahun.
  • Jika Anda ragu-ragu antara dua tema , periksa demo mereka dan ingat untuk melihatnya di beberapa perangkat. Banyak penjualan terjadi di ponsel!

Terakhir, rekomendasi terakhir kami adalah memilih tema yang aman dengan pembaruan terkini, dukungan cepat, dokumentasi akurat, dan tutorial mendalam. Anda juga dapat memeriksa beberapa YouTuber populer yang mengulas semua tema tersebut dan merekam layar mereka saat mereka membangun toko online dari awal.

Membungkus

Sekarang, Anda dapat memilih tema WooCommerce yang tepat untuk proyek Anda berikutnya!

Apa pun tema yang Anda pilih, WP Rocket adalah cara termudah untuk meningkatkan kecepatan situs WordPress Anda, mengoptimalkan Core Web Vitals, dan memperbaiki audit kinerja di PageSpeed ​​Insights. Selain itu, Anda tidak mengambil risiko apa pun dengan jaminan uang kembali 30 hari.