Meningkatkan prestasi kedai dalam talian anda

Kedai dalam talian anda terdiri daripada pelbagai ciri, seperti kod tema, aplikasi, imej, video, karusel, suapan media sosial dan analisis. Ciri ini boleh meningkatkan pengalaman pelawat dan memperluas keupayaan laman anda.

Walau bagaimanapun, setiap ciri yang ditambah pada kedai dalam talian anda boleh memberikan kesan kepada prestasi kedai. Sesetengah ciri boleh melambatkan laman anda atau mewujudkan tingkah laku luar jangkaan yang menjejaskan pengalaman pengguna.

Prestasi web memfokuskan pada pengoptimuman pengalaman pengguna. Pada masa ini, prestasi web memfokuskan pada tiga bidang utama yang turut dicerminkan dalam Core Web Vitals:

• Kelajuan pemuatan, diukur dengan Largest Contentful Paint (LCP)
• Kestabilan susun atur, diukur dengan Cumulative Layout Shift (CLS)
• Keresponsifan terhadap interaksi pengguna, diukur dengan Interaction to Next Paint (INP)

Mengoptimumkan prestasi web bermakna pelanggan lebih berkemungkinan untuk kekal di laman anda dan membuat penukaran.

Pengoptimuman untuk kedai dalam talian anda

Kedai dalam talian anda mempunyai pengoptimuman web yang terbina dalam. Pengoptimuman web juga terbina dalam pada sebarang ciri baharu. Anda tidak perlu melakukan apa-apa yang khusus untuk memanfaatkan ciri berikut:

• Kedai dalam talian anda dihoskan pada pelayan global yang pantas dan tidak mengehadkan jalur lebar kedai anda. Anda boleh menyemak status kedai Shopify anda di Shopify Status.
• Kedai dalam talian anda mempunyai rangkaian penghantaran kandungan (CDN) yang dijalankan oleh Cloudflare yang memastikan kedai dalam talian anda dimuatkan dengan pantas di seluruh dunia. Anda boleh menyemak status CDN pada halaman status Cloudflare.
• Untuk memastikan masa pemuatan yang pantas, imej dioptimumkan secara automatik menggunakan CDN imej. Jika digabungkan dengan kod tema anda, CDN imej boleh memberikan format imej yang terbaik, yang turut disaiz semula dan dimampatkan untuk mengekalkan saiz fail yang kecil.

Faktor yang memberikan kesan kepada prestasi web

Bagi kedai Shopify, berikut ialah faktor terbesar yang memberikan kesan kepada prestasi web:

• Tema kedai dalam talian anda
• Aplikasi yang telah anda pasang
• Sebarang kod pihak ketiga tambahan yang telah anda tambah secara manual pada kedai anda, termasuk pengurus tag dan tag di dalamnya

Hal ini bermakna anda harus memfokuskan perkara berikut untuk meningkatkan prestasi web anda:

• Gunakan tema yang terkini dan dioptimumkan. Kesemua tema keluarga Horizon dan tema Online Store 2.0 oleh Shopify adalah percuma dan dioptimumkan untuk prestasi web. Selain itu, pelbagai tema pihak ketiga yang lain turut dioptimumkan untuk prestasi web. Anda boleh menyemak data prestasi tema yang terkini.
• Jika tema anda menawarkan peralihan halaman atau animasi lain, maka bandingkan prestasi web anda sebelum dan selepas mengaktifkannya. Animasi boleh melambatkan halaman.
• Elakkan menambah terlalu banyak bahagian pada templat halaman dalam tema anda. Bilangan bahagian yang tinggi pada halaman boleh menurunkan prestasi web.
• Jika anda mempunyai koleksi yang mengandungi jumlah produk yang besar, maka pertimbangkan untuk mengaktifkan penomboran halaman bagi mengehadkan bilangan produk yang dimuatkan pada satu-satu masa.
• Nilaikan aplikasi yang dipasang serta kod pihak ketiga bagi memastikan kesemuanya memberikan nilai yang mencukupi untuk mengimbangi sebarang potensi kemerosotan prestasi.
• Audit pengurus tag anda untuk mengalih keluar mana-mana tag yang tidak digunakan atau bernilai rendah. Ketahui lebih lanjut tentang amalan terbaik untuk tag dan pengurus tag.

Alat ujian

Anda boleh menggunakan alat berikut untuk menyiasat prestasi kedai dalam talian anda:

• Laporan Prestasi Web: Laporan Prestasi Web Shopify menggunakan Core Web Vitals untuk mengukur cara pengguna sebenar mengalami kedai dalam talian anda.
• PageSpeed Insights: Anda boleh menjalankan laporan anda sendiri menggunakan PageSpeed Insights Google untuk melihat metrik yang lebih terperinci bagi halaman dalam kedai anda.

Memahami cadangan prestasi pihak ketiga

Alat pengimbasan prestasi pihak ketiga mungkin mencadangkan perubahan untuk meningkatkan kelajuan kedai anda. Walau bagaimanapun, banyak cadangan ini yang telah pun dilaksanakan oleh Shopify atau tidak terpakai kepada kedai Shopify.

Pengoptimuman yang telah pun disertakan dalam Shopify

Kedai Shopify anda menyertakan pengoptimuman prestasi yang berikut secara automatik:

Rangkaian Penghantaran Kandungan (CDN): Shopify menyediakan CDN bertaraf dunia tanpa caj tambahan, bagi memastikan prestasi global yang pantas. Semua aset disajikan menggunakan HTTP/2 yang mengurangkan overhed berbanding dengan protokol lama.

Pencachean pelayar: Shopify menetapkan pencachean pelayar bagi sumber yang boleh dicache kepada satu tahun, tempoh maksimum yang mungkin. Ini bermakna bahawa pelawat berulang ke kedai anda akan mengalami masa pemuatan yang lebih pantas.

Pemampatan Gzip: Shopify menggunakan pemampatan gzip pada CSS, JavaScript, dokumen dan halaman untuk mengurangkan penggunaan jalur lebar dan meningkatkan masa pemuatan. Keep-alive juga didayakan untuk berbilang perolehan fail.

Pengoptimuman imej: Shopify memampatkan imej JPG secara automatik menggunakan algoritma lanjutan, yang mengimbangi antara pemampatan dan daya tarikan visual. Imej lazimnya disajikan dalam format WebP untuk pemampatan yang lebih baik dan pemuatan yang lebih pantas.

Pengecilan fail: Shopify mengecilkan fail CSS dan JavaScript secara automatik apabila fail tersebut diminta oleh laman kedai anda, dengan mengurangkan saiz fail tanpa menjejaskan kefungsian.

Apabila cadangan pihak ketiga tidak terpakai

Alat pengimbasan pihak ketiga mungkin mencadangkan perubahan yang tidak berkaitan dengan kedai Shopify:

• Konfigurasi tahap pelayan: Cadangan berkenaan persediaan pelayan, pengepala HTTP atau dasar pencachean telah pun dioptimumkan oleh infrastruktur Shopify.
• Pelaksanaan CDN: Cadangan untuk menambahkan CDN adalah tidak perlu memandangkan Shopify menyertakan CDN berprestasi tinggi secara lalai.
• Tetapan pemampatan: Cadangan berkenaan pendayaan pemampatan telah pun dilaksanakan di seluruh platform Shopify.

Bertindak terhadap cadangan yang berkaitan

Fokus pada cadangan yang berkaitan dengan kandungan dan ciri khusus kedai anda:

• Pengoptimuman imej: Pastikan imej yang anda muat naik adalah bersaiz wajar dan menggunakan format yang disyorkan.
• Penilaian aplikasi: Pertimbangkan sama ada aplikasi yang dipasang memberikan nilai yang mencukupi untuk mengimbangi sebarang kesan prestasi.
• Pengoptimuman tema: Pilih tema yang dioptimumkan untuk prestasi dan hadkan bilangan bahagian pada templat halaman.

Penyelesaian masalah halaman yang lambat dimuatkan

Jika kedai anda lambat dimuatkan, ikuti langkah ini untuk mengenal pasti dan menyelesaikan isu tersebut:

Langkah 1: Sahkan isu tersebut

1. Uji kelajuan memuatkan kedai anda sendiri daripada pelbagai peranti dan sambungan Internet.
2. Minta orang lain menguji kedai anda untuk mengesahkan hal ini bukan isu tempatan dengan sambungan Internet anda.
3. Gunakan alat pengujian seperti PageSpeed Insights untuk mendapatkan metrik prestasi yang khusus.

Langkah 2: Kenal pasti punca

Periksa aplikasi yang berlebihan: Terlalu banyak aplikasi yang memuatkan aset pada laman kedai anda boleh melambatkan prestasi. Semak aplikasi yang telah dipasang oleh anda dan alih keluar aplikasi yang tidak penting untuk jualan.

Semak imej besar: Halaman dengan banyak imej berkualiti tinggi mungkin lambat dimuatkan. Optimumkan imej anda atau kurangkan bilangan yang dipaparkan. Ketahui lebih lanjut tentang saiz imej yang disyorkan.

Kenal pasti skrip yang lambat: Jika laman anda tergendala sebagai halaman kosong sebelum dimuatkan sekaligus, gunakan alat pembangun pelayar anda untuk mengenal pasti skrip yang lambat dimuatkan. Hubungi pembangun aplikasi atau tema untuk mendapatkan penyelesaian.

Langkah 3: Ambil tindakan

Alih keluar aplikasi yang tidak perlu: Menyahpasang aplikasi tidak mengalih keluar kodnya secara automatik daripada tema anda. Anda mungkin perlu menghubungi pembangun aplikasi untuk arahan pengalihan keluar yang lengkap.

Optimumkan imej: Gunakan format fail yang sesuai (JPG untuk foto, PNG untuk grafik yang mempunyai ketelusan) dan ubah saiz imej untuk sepadan dengan saiz paparannya.

Nilaikan prestasi tema: Pertimbangkan untuk menukar kepada tema yang dioptimumkan prestasinya jika tema semasa anda menyebabkan kelambatan yang ketara.

Dapatkan sokongan berkaitan dengan prestasi kedai dalam talian

Jika anda menggunakan tema percuma daripada Shopify, Sokongan Shopify mungkin dapat membantu anda dengan peningkatan prestasi asas.

Jika anda menggunakan tema pihak ketiga dan memerlukan bantuan, maka anda mesti menghubungi pembangun tema anda, mengupah pakar prestasi web Shopify atau mengupah Rakan Kongsi Shopify bagi prestasi dan kelajuan laman. Ketahui lebih lanjut tentang mengupah Rakan Kongsi Shopify.

Jika masalah prestasi anda berpunca daripada aplikasi, maka anda boleh menghubungi pembangun aplikasi anda.

Jika anda mempunyai pasukan pembangun atau rakan kongsi agensi, maka anda juga boleh menghubungi mereka untuk mendapatkan bantuan selanjutnya.

Maklumat teknikal dan sumber untuk penyelesaian masalah

Jika anda seorang pembangun yang ingin meningkatkan prestasi untuk laman kedai, tema atau aplikasi Shopify, maka anda boleh menyemak sumber yang berikut untuk setiap Core Web Vital. Ketahui lebih lanjut tentang amalan terbaik prestasi untuk Tema Shopify.

Kelajuan memuatkan

Largest Contentful Paint (LCP) mengukur kelajuan memuatkan berdasarkan kepantasan elemen terbesar pada skrin menjadi boleh dilihat. Masa ke bait pertama (TTFB) dan catan kandungan pertama (FCP) ialah metrik sokongan yang membantu anda lebih memahami dari mana punca utama masalah tersebut datang. Anda boleh mengetahui lebih lanjut tentang menyahpepijat punca biasa bagi memuatkan secara lambat dalam laman kedai Liquid Shopify.

Kestabilan visual

Peralihan Reka Letak Terkumpul (CLS) mengukur kestabilan visual berdasarkan seberapa banyak kandungan beralih ke sana ke mari tanpa dijangka semasa memuatkan. Untuk mendalami penyahpepijatan CLS, baca Cara untuk mengoptimumkan Peralihan Reka Letak Terkumpul (CLS) pada laman Shopify.

Keterinteraktifan

Interaksi ke Catan Seterusnya (INP) mengukur keterinteraktifan berdasarkan tempoh masa yang diambil oleh halaman untuk menjadi responsif kepada kebanyakan tindakan pengguna. Sebagai contoh, tindakan pengguna seperti mengklik pautan atau butang.

Jika anda mengalami INP yang buruk, kemungkinan besar anda mempunyai terlalu banyak JavaScript dalam kedai anda sama ada daripada kod tema, kod aplikasi atau kod pengurus teg/pihak ketiga. Usahakan pembersihan bagi kod yang paling banyak mendatangkan isu. Ketahui lebih lanjut tentang 3 cara untuk mencari kod JavaScript yang paling banyak mendatangkan isu bagi pemuatan halaman. Jika anda masih menghadapi isu dengan INP, ketahui lebih lanjut bersama sumber pada web.dev.