Pengoptimalan Kecepatan Toko Shopify: Panduan Lengkap

Penundaan satu detik dalam waktu buka halaman merugikan toko e-niaga sebesar 7% konversi. Kecepatan toko Shopify bukanlah suatu kemewahan—ini adalah hubungan langsung dengan pendapatan. Panduan ini mengungkap enam penyebab terbesar memperlambat toko Anda dan menunjukkan cara memperbaikinya.

Mengapa kecepatan toko Shopify penting untuk penjualan

Google menerbitkan penelitian yang menunjukkan bahwa penundaan pemuatan halaman selama 100 milidetik dapat menyebabkan penurunan konversi sebesar 1%. Untuk toko yang menghasilkan pendapatan bulanan $50.000, itu berarti $500 hilang setiap sepersepuluh detik tambahan. Kecepatan mempengaruhi lebih dari sekedar pengalaman pengguna; ini adalah faktor peringkat inti untuk Google Penelusuran.

Pedagang Shopify menghadapi tantangan unik. Tidak seperti situs yang dihosting sendiri di mana Anda mengontrol setiap aset, Anda membangun platform bersama yang menampung jutaan toko. Tema, aplikasi, dan skrip pihak ketiga Anda semuanya bersaing untuk mendapatkan bandwidth. Toko yang kurang dioptimalkan dapat terasa lamban meskipun infrastruktur Shopify berkelas dunia.

Penyimpanan yang lambat juga merusak kepercayaan. Pengguna mengharapkan pembayaran terasa instan. Halaman pembayaran yang tersendat menandakan adanya risiko, terutama di perangkat seluler. Peningkatan kecepatan sering kali berkorelasi dengan lebih rendahnya pengabaian keranjang dan nilai seumur hidup pelanggan yang lebih tinggi.

Cara mengukur kecepatan toko Shopify Anda

Sebelum Anda dapat memperbaiki kecepatan, Anda memerlukan data. Kebanyakan pedagang menebak apa yang salah. Metrik yang tepat memberi tahu Anda di mana tepatnya Anda harus fokus.

Wawasan Kecepatan Laman Google

Mulai di sini. Kunjungipagespeed.web.devdan masukkan URL toko Shopify Anda. PageSpeed ​​Insights mengukur pengalaman pengguna di dunia nyata (data lapangan) dan kinerja lab. Ini memberikan skor dari 0–100 dan menandai masalah tertentu.

Fokus pada bagian "Core Web Vitals" terlebih dahulu. Ketiga metrik ini berdampak langsung pada pengalaman pengguna dan peringkat pencarian. Skor di atas 90 sangat bagus; di atas 50 dapat diterima; di bawah 50 memerlukan tindakan segera.

Uji beranda dan halaman produk Anda. Halaman beranda dan halaman koleksi sering kali dimuat secara berbeda dari halaman produk individual karena jumlah gambar dan skrip aplikasi.

Laporan Kecepatan Toko Online bawaan Shopify

Masuk ke admin Shopify Anda dan navigasikan ke Saluran Penjualan > Toko Online > Tema. Klik "Buka tema Anda saat ini" dan cari "Kecepatan Toko Online". Laporan ini menunjukkan tren kinerja dan mengidentifikasi aplikasi yang memperlambat toko Anda.

Laporan kecepatan didukung oleh data pengguna sebenarnya dari pengunjung Anda yang sebenarnya. Ini lebih akurat untuk audiens spesifik dan pola lalu lintas Anda dibandingkan pengujian laboratorium. Periksa setiap bulan untuk melacak kemajuan.

GTmetrix dan WebPageTest

GTmetrix dan WebPageTest menyediakan diagram air terjun yang menunjukkan urutan pemuatan setiap sumber daya di halaman Anda. Mereka mengungkapkan skrip mana yang memblokir rendering dan aset mana yang membuang bandwidth.

Gunakan ini untuk mendalami aset lambat tertentu. Misalnya, jika Anda melihat skrip aplikasi dimuat sebelum gambar produk, itu adalah perbaikan prioritas. Alat-alat ini lebih teknis tetapi layak dipelajari bagi pedagang yang mengelola toko dengan pendapatan lebih dari $100rb/bulan.

Enam penyebab terbesar lambatnya toko Shopify

1. Gambar yang tidak dioptimalkan

Gambar menyumbang 50–70% dari bobot halaman toko Shopify pada umumnya. Foto produk yang tidak dikompresi dari kamera dapat berukuran 3–5 MB. Mengunggah langsung ke Shopify tanpa pengoptimalan akan mematikan kinerja.

Shopify secara otomatis menyajikan gambar melalui CDN-nya dan membuat varian responsif, tetapi tidak melakukan kompresi. Gambar 4000x3000px yang ditampilkan dengan lebar 500px masih memuat resolusi penuh, lalu browser mengubah ukurannya.

Format gambar modern seperti WebP berukuran 25–35% lebih kecil dari JPG dengan kualitas yang sama. Kebanyakan pedagang tidak menggunakannya. Dikombinasikan dengan pemuatan lambat (dibahas di bawah), gambar yang dioptimalkan sering kali merupakan keuntungan terbesar.

2. Terlalu banyak aplikasi pihak ketiga (terutama yang menginjeksi skrip)

Rata-rata toko Shopify menjalankan 20–30 aplikasi. Setiap aplikasi dapat memasukkan JavaScript ke etalase Anda. Lebih banyak skrip berarti pemuatan halaman lebih lambat, lebih banyak kerja CPU, dan metrik Core Web Vitals lebih lama.

Beberapa aplikasi tidak dapat dihindari. Pemroses pembayaran, pengambilan email, ulasan—ini menambah nilai. Namun banyak pedagang memasang aplikasi tanpa mengaudit apakah aplikasi tersebut benar-benar digunakan.

Penyebab terburuknya adalah aplikasi pemasaran yang melacak perilaku pengguna, program loyalitas, dan alat personalisasi visual. Ini mengunduh bundel JavaScript yang berat di setiap halaman. Satu aplikasi ulasan dengan kode buruk dapat menambahkan 300 md ke LCP (Largest Contentful Paint) Anda.

3. Tema yang membengkak atau kodenya buruk

Tema Shopify Anda adalah fondasinya. Beberapa tema menggabungkan jQuery, kerangka kerja CSS yang tidak digunakan, dan perpustakaan yang ketinggalan jaman. Tema berusia 10 tahun mungkin memuat dependensi yang tidak lagi memiliki tujuan apa pun.

Tema premium berbayar sering kali memiliki lebih banyak kelebihan dibandingkan tema gratis yang ringan. Mereka bertujuan untuk melakukan segalanya, yang berarti memuat kode untuk fitur yang tidak Anda gunakan. Lapisan penyesuaian menambah bobot.

Masalah tema umum: font khusus yang tidak digunakan, gambar base64 sebaris di CSS, beberapa versi Bootstrap, dan pustaka utilitas duplikat. Audit kode tema Anda untuk mengidentifikasi bobot mati.

4. Paket JavaScript berukuran besar dan skrip pemblokiran render

Eksekusi JavaScript itu mahal. Saat JavaScript tema Anda berjalan, browser tidak dapat melukis halaman tersebut. Jika skrip Anda besar atau urutannya buruk, halaman Anda terasa terhenti bagi pengunjung.

Skrip pihak ketiga dari aplikasi sering kali dimuat secara serempak, artinya skrip tersebut memblokir yang lainnya. Manajer skrip asli Shopify mengizinkan pemuatan asinkron, tetapi banyak aplikasi tidak mengikuti pola tersebut.

Banyak toko memuat piksel pelacakan, analitik, widget obrolan, dan skrip pengoptimalan konversi sebelum halaman menjadi interaktif. Ini dapat menambah 2–3 detik ke Time to Interactive (TTI).

5. Tidak ada pemuatan lambat pada gambar paruh bawah

Setiap gambar di halaman produk Anda langsung dimuat, meskipun pengunjung tidak pernah menggulir ke bawah. Hal ini membuang bandwidth pada gambar yang tidak akan pernah mereka lihat.

Pemuatan lambat menunda pemuatan gambar hingga pengguna akan menggulir hingga terlihat. Dikombinasikan dengan pengoptimalan gambar, hal ini dapat memangkas waktu buka halaman awal Anda sebesar 30–50%.

Tema Shopify yang dibuat dalam tiga tahun terakhir sering kali memiliki pemuatan lambat. Tema lama tidak. Ini adalah kemenangan cepat jika tema Anda mendukungloading="lazy"atribut.

6. Caching CDN hilang atau salah dikonfigurasi

Shopify menyajikan gambar melalui CDN-nya secara global, dan ini luar biasa. Namun header cache dan kebijakan cache browser dapat salah dikonfigurasi.

Beberapa toko tidak menyetel header cache pada aset, sehingga memaksa browser untuk memvalidasi ulang atau mendownload ulang file statis pada setiap kunjungan. Yang lain menetapkan masa pakai cache terlalu pendek (misalnya, 1 hari, bukan 30 hari).

Caching yang salah dikonfigurasi tidak akan muncul di PageSpeed ​​Insights, namun pengunjung berulang akan melihat penalti kinerja. Periksa pengaturan cache tema Anda dan pastikan CDN Shopify dikonfigurasi dengan benar.

Cara mempercepat toko Shopify Anda — perbaikan yang dapat ditindaklanjuti

Pengoptimalan gambar

Mulailah dengan audit gambar massal. Unduh gambar produk Anda dan jalankantinypng.comatau ImageOptim. Anda akan melihat berapa banyak bobot yang dapat dikurangi tanpa kehilangan kualitas.

Untuk Shopify, praktik terbaiknya adalah mengunggah gambar dengan lebar tidak lebih dari 2000–2500 piksel. CDN Shopify mengubah ukurannya secara otomatis untuk seluler dan desktop. Hindari mengunggah gambar 6000 piksel "untuk berjaga-jaga".

Pertimbangkan untuk menggunakan aplikasi pengoptimalan gambar khusus jika Anda memiliki ratusan produk. Aplikasi seperti Crush.pics atau Image Optimizer mengotomatiskan kompresi di seluruh katalog Anda. Mereka sering kali membayar sendiri penghematan bandwidth dalam beberapa minggu.

Terapkan pemuatan lambat untuk gambar paruh bawah. Sebagian besar tema Shopify modern mendukung hal ini secara asli. Jika milik Anda tidak, tambahkanloading="lazy"atribut ke gambar produk dalam kode tema Anda.

Audit aplikasi

Cantumkan setiap aplikasi yang telah Anda instal. Periksa masing-masing dan tanyakan: Apakah saya aktif menggunakan ini? Apakah ini memenuhi tujuan bisnis saya?

Copot pemasangan apa pun yang tidak Anda gunakan. Lalu, untuk aplikasi aktif Anda, periksa dampaknya di laporan kecepatan Shopify. Aplikasi dengan dampak tingkat milidetik (di bawah 50 md) biasanya baik-baik saja. Aplikasi yang menambahkan 200ms+ patut dipertimbangkan kembali.

Jika suatu aplikasi penting tetapi lambat, hubungi pengembangnya. Banyak pembuat aplikasi dapat mengoptimalkan pengiriman skrip atau memberikan alternatif pemuatan asinkron. Terkadang perubahan pengaturan secara signifikan meningkatkan kinerja.

Pengoptimalan tema

Audit kode tema Anda. Sebagian besar toko Shopify dapat mengakses file temanya melalui Admin > Tema > Tindakan > Edit kode. Carilah kembung:

• Kerangka kerja CSS atau pustaka utilitas yang tidak digunakan
• Font khusus tidak benar-benar ditampilkan di halaman mana pun
• JavaScript sebaris yang dapat ditunda
• Beberapa versi perpustakaan yang sama (jQuery, Bootstrap, dll.)
• Polyfill usang untuk browser lama yang tidak lagi Anda dukung

Jika tema Anda lebih tua dari 3 tahun, pertimbangkan untuk meningkatkan ke tema Shopify modern. Tema baru dibuat dengan mempertimbangkan kinerja dan menggunakan standar web saat ini. Biayanya sepadan jika tema Anda saat ini memperlambat penjualan.

JavaScript dan CSS

Tunda JavaScript yang tidak kritis. Editor Skrip Shopify memungkinkan Anda menandai skrip sebagai async atau penundaan. Ini mencegah mereka memblokir cat halaman.

Perkecil dan gabungkan file CSS jika memungkinkan. Banyak file CSS berarti banyak permintaan HTTP. Sebagian besar pembuat tema modern sudah melakukan hal ini, namun tema khusus terkadang tidak.

Hapus CSS yang tidak digunakan. Alat seperti PurgeCSS dapat mengidentifikasi aturan CSS yang tidak pernah diterapkan pada laman Anda dan menghapusnya. Ini saja dapat mengurangi ukuran bundel CSS sebesar 40–60%.

Pemuatan lambat

Aktifkan pemuatan lambat untuk semua gambar paruh bawah. Pada halaman produk Shopify pada umumnya, ini mencakup produk terkait, ulasan, dan bagian footer.

Tambahkan atribut HTML:<img src="..." loading="lazy">. Browser modern menangani sisanya secara otomatis. Untuk gambar di bagian khusus, Anda mungkin memerlukan pustaka pemuatan lambat JavaScript sepertilozad.js.

Uji di ponsel. Pengunjung di jaringan yang lambat mungkin melihat ruang kosong jika gambar dimuat terlalu lambat. Seimbangkan pemuatan lambat dengan pramuat agresif untuk gambar paruh atas.

CDN dan cache

Pastikan CDN Shopify aktif untuk gambar Anda. Di admin Shopify Anda, semua gambar harus disajikancdn.shopify.com. Jika Anda melihat URL domain khusus, Anda mungkin memiliki konfigurasi yang sudah usang.

Setel header cache di file konfigurasi tema Anda. Rekomendasi Shopify biasanya 30 hari untuk aset berversi, 1 hari untuk CSS/JS, dan 5 menit untuk HTML. Hal ini memastikan pengunjung berulang memuat dari cache alih-alih mengunduh ulang.

Jika Anda menggunakan Cloudflare, konfigurasikan untuk menyimpan cache aset statis secara agresif. Kebijakan cache yang bertentangan menimbulkan penalti kecepatan—tetapkan aturan yang jelas dan uji dengan sesi browser baru setelah melakukan perubahan.

Vital Web Inti Shopify: LCP, CLS, dan INP menjelaskan

Data Web Inti Google adalah tiga metrik yang secara langsung memengaruhi peringkat penelusuran dan skor pengalaman pengguna Anda. Shopify secara khusus menampilkan ini dalam laporan kecepatan.

LCP (Cat Berisi Terbesar)mengukur waktu hingga blok teks atau gambar terbesar memasuki area pandang. Target: di bawah 2,5 detik. Sebagian besar masalah kelambatan Shopify bermanifestasi sebagai LCP yang buruk. Gambar yang tidak dioptimalkan, skrip yang memblokir render, dan sumber daya pihak ketiga yang lambat semuanya memperluas LCP.

CLS (Pergeseran Tata Letak Kumulatif)mengukur pergerakan elemen halaman yang tidak terduga saat dimuat. Target: di bawah 0,1. Masalah klasik CLS adalah gambar dimuat tanpa ruang yang disediakan, menyebabkan teks melompat ke bawah. Atau widget obrolan muncul di tengah halaman dan menggeser segalanya. CLS jarang memperlambat kinerja yang dirasakan tetapi merusak pengalaman pengguna dan SEO.

INP (Interaksi ke Cat Berikutnya)mengukur daya tanggap—seberapa cepat laman merespons klik atau ketukan pengguna. Target: di bawah 200 milidetik. Eksekusi JavaScript yang berat, pendengar peristiwa yang tidak dioptimalkan, dan elemen interaktif dengan kode yang buruk merugikan INP.

Toko Shopify biasanya mengalami kesulitan paling besar dengan LCP (biasanya gambar atau aplikasi lambat), diikuti oleh CLS (pergeseran tata letak dari konten yang dimuat dengan lambat). Untuk meningkatkan ketiganya: mengoptimalkan gambar terlebih dahulu (dampak LCP terbesar), menyediakan ruang untuk konten dinamis (memperbaiki CLS), dan mengaudit waktu eksekusi JavaScript (meningkatkan INP).

Kapan harus menyewa pengembang Shopify untuk pengoptimalan kecepatan

Anda sendiri dapat mengoptimalkan banyak hal. Namun beberapa masalah memerlukan keahlian pengembang. Berikut tiga tanda sudah waktunya untuk memberikan bantuan:

Skor PageSpeed Anda tidak akan melebihi 50bahkan setelah menghapus aplikasi dan mengoptimalkan gambar. Ini biasanya berarti tema atau aplikasi inti Anda memerlukan perbaikan tingkat kode. Pengembang dapat mengidentifikasi kemacetan dalam kode tema, mengoptimalkan urutan render, dan menerapkan strategi caching tingkat lanjut yang tidak dapat Anda lakukan di admin.

LCP Anda lebih dari 4 detik dan Anda tidak dapat mengidentifikasi alasannya.Diagram air terjun dari GTmetrix menunjukkan masalahnya—tetapi untuk memperbaikinya mungkin memerlukan JavaScript khusus, modifikasi tema, atau menegosiasikan pemuatan asinkron dengan vendor aplikasi. Pengembang tahu tuas mana yang harus ditarik.

Anda membayar ribuan iklan setiap bulan dan setiap konversi berarti.Dalam skala besar, peningkatan 0,5 detik dapat menghasilkan ribuan pendapatan tambahan. Pengoptimalan DIY menghasilkan 80% keuntungan. 20% terakhir memerlukan rekayasa kinerja profesional.

Devmerx berspesialisasi dalam pengoptimalan kecepatan Shopify. Kami mengaudit toko Anda, mengidentifikasi hambatan yang sebenarnya, dan menerapkan perbaikan yang mendorong Core Web Vitals Anda menjadi ramah lingkungan. Lihat kamiLayanan Shopifyataupesan audit kecepatan gratisuntuk melihat apa yang mungkin untuk toko Anda.

Pertanyaan yang sering diajukan

Apakah tema Shopify memengaruhi kecepatan halaman?

Ya, secara signifikan. Tema Anda menyumbang 30–60% waktu buka halaman bergantung pada tema yang Anda gunakan dan seberapa disesuaikannya tema tersebut. Tema modern yang dikodekan dengan baik dimuat dalam 1–2 detik. Tema yang membengkak dan ketinggalan jaman mungkin memerlukan waktu 3–4 detik sebelum menambahkan aplikasi atau gambar. Jika Anda berusia di bawah 50 tahun di PageSpeed ​​dan aplikasi Anda dioptimalkan, kemungkinan besar masalahnya adalah tema Anda.

Berapa banyak aplikasi Shopify yang terlalu banyak?

Tidak ada angka ajaib. Sebagian besar toko berfungsi dengan baik dengan 15–25 aplikasi. Dampaknya bergantung pada apa yang dilakukan aplikasi dan cara kodenya. Satu aplikasi dengan kode yang buruk dapat merugikan lebih dari lima aplikasi yang dioptimalkan dengan baik. Audit berdasarkan dampak kinerja, bukan hitungan—gunakan laporan kecepatan Shopify untuk melihat aplikasi mana yang menambahkan milidetik paling banyak.

Apakah menghapus aplikasi akan segera meningkatkan skor saya?

Biasanya ya, tapi tidak selalu terlihat. PageSpeed ​​Insights mungkin tidak menunjukkan lompatan 10 poin setelah menghapus satu aplikasi. Namun pengunjung Anda yang sebenarnya akan merasakan perbedaannya. Halaman ditampilkan lebih cepat, tombol merespons lebih cepat, dan pengguna menganggap toko Anda lebih modern. Berikan waktu 24–48 jam setelah menghapus aplikasi sebelum menjalankan kembali pengujian.

Apa tema Shopify gratis tercepat?

Tema Fajar resmi Shopify secara konsisten termasuk yang tercepat. Ringan, dibuat berdasarkan standar web saat ini, dan mendapat skor 85+ di PageSpeed ​​untuk sebagian besar toko. Tema cepat gratis lainnya termasuk Prestige dan Refresh. Tema tercepat yang tidak cocok dengan merek Anda tidak ada gunanya—pilih tema yang sesuai dengan tujuan desain Anda, lalu optimalkan.

Pengoptimalan kecepatan adalah salah satu investasi ROI tertinggi yang dapat dilakukan pedagang Shopify. Mulailah dengan keuntungan gratis—kompresi gambar, audit aplikasi, pemuatan lambat—dan ukur dampaknya. Jika Anda mencapai langit-langit,pesan audit kecepatan gratisdengan tim Devmerx dan kami akan menunjukkan kepada Anda apa sebenarnya yang menghambat toko Anda.