Panduan Untuk Pengoptimalan Kecepatan Shopify

Salah satu pertimbangan utama bagi pemilik toko Shopify adalah kinerja situs. Kinerja situs web Anda secara langsung memengaruhi kemampuan situs web Anda untuk mengonversi pengguna. Semakin cepat situs Anda, semakin banyak pengguna yang kemungkinan besar akan Anda konversi. Selain itu, jika Anda ingin meningkatkan SEO toko Shopify Anda, kinerja adalah faktor peringkat kecil dalam algoritme Google.

Selain itu, kinerja situs memengaruhi semua inisiatif pemasaran digital Anda yang lain. Baik itu berbayar, email, atau pemasaran sosial, kecepatan situs web Anda akan memengaruhi pengguna dari semua saluran yang berbeda ini. Jika situs Anda menerima cukup banyak lalu lintas dari saluran ini, bahkan hanya sedikit peningkatan kinerja dan dapat menghasilkan peningkatan pendapatan yang nyata.

Peningkatan satu detik dalam kecepatan situs dapat menghasilkan pendapatan +$8.000 untuk situs ini.

Inilah sebabnya mengapa memastikan bahwa situs Shopify Anda berkinerja baik sangat penting untuk keberhasilan toko Anda. Mempercepat situs Shopify Anda tidak hanya dapat meningkatkan pengalaman pengguna Anda, tetapi juga dapat berdampak langsung pada keuntungan Anda.

Pengoptimalan Kecepatan Situs Apa yang Sudah Dimiliki Shopify?

Salah satu bagian bagus tentang Shopify adalah bahwa toko Anda memang dilengkapi dengan beberapa pengoptimalan kecepatan di luar kotak. Secara umum, situs Shopify cukup cepat dibandingkan dengan solusi lain. Ini adalah berita bagus bagi pemilik toko Shopify karena platform ini umumnya lebih cepat daripada platform seperti Magento.

Setelah membuat situs Shopify baru, Anda akan menemukan bahwa fitur kinerja berikut seharusnya sudah diterapkan:

• Leverage Browser Caching : Shopify seharusnya sudah meng-cache sumber daya internal situs Anda secara default. Caching memungkinkan beberapa konten Anda seperti gambar, JavaScript, dan CSS untuk disimpan secara lokal di dalam browser pengguna. Ini berarti mereka tidak perlu mengunduh ulang konten saat melihat sumber yang sama dua kali. Ini dapat mempercepat toko Anda karena pengguna akan dapat melihat beberapa konten situs Anda jauh lebih cepat daripada sebelumnya. Catatan, jika Anda melihat sumber daya pihak ketiga ditandai karena masalah caching, tidak ada yang dapat Anda lakukan untuk menyesuaikan caching secara langsung.
• Memanfaatkan CDN : Shopify menggunakan CDN Cepat. CDN (Content Delivery Network) memungkinkan beberapa konten situs Anda disimpan di server di seluruh Dunia. Ini mengurangi jarak fisik antara pengguna dan konten situs Anda. Mengurangi jarak fisik membantu meningkatkan kinerja situs Anda.

Cara Mengoptimalkan Kecepatan Situs Shopify:

Dengan mengikuti langkah-langkah ini, Anda dapat secara signifikan mempercepat situs Shopify:

• Pilih Tema Shopify yang Ringan
• Kurangi Ukuran Gambar Besar
• Kompres Gambar
• Ganti GIF Dengan Gambar Statis
• Memuat Gambar Malas
• Batasi Aplikasi JavaScript & Shopify Pihak Ketiga
• Migrasikan Kode Pelacakan Ke Google Pengelola Tag
• Jalankan Toko Anda Melalui Google PageSpeed ​​Insights

1. Pilih Tema Shopify yang Ringan (Data Asli)

Memilih tema Shopify yang cepat dapat segera menempatkan situs web Anda di posisi yang bagus dari sudut pandang kinerja. Beberapa tema mungkin datang dengan pengasapan yang tidak perlu, menempatkan situs Anda pada kerugian kinerja. Sebaliknya, tema yang lebih ringan akan menyiapkan situs Anda untuk kinerja yang kuat di masa mendatang.

Untuk memberi Anda gambaran tentang beberapa tema yang berkinerja lebih baik, kami menguji 200+ template yang tersedia di toko Tema Shopify dan mencatat benchmark First Contentful Paint (FCP) dan Time To Interactive (TTI) mereka dari Google PageSpeed ​​Insights. Di bawah ini Anda dapat menemukan tema berkinerja terbaik yang diidentifikasi pengujian kami:

1. Buat Tema (1.1 FCP, 7.8 TTI)
2. Tema Mainan (1.1 FCP, 7.7 TTI)
3. Tema Hangat (1.9 FCP, 7.8 TTI)
4. Tema Ringan (1.1 FCP, 7.8 TTI)
5. Tema Luar Ruang (1.1 FCP, 8.1 TTI)

Tentu saja ini bukan untuk mengatakan bahwa tema berperforma tinggi tidak dapat dibuat lebih lambat atau bahwa ini adalah opsi terbaik untuk situs Anda. Namun, jika pengoptimalan kecepatan adalah yang utama bagi Anda, ini mungkin yang perlu dipertimbangkan untuk dipilih.

2. Kurangi Ukuran Gambar Besar

Mengubah ukuran aset gambar yang besar dapat menjadi salah satu cara terbaik untuk mempercepat situs Shopify. Saat mengevaluasi banyak situs Shopify, kami telah memperhatikan bahwa banyak bisnis memiliki kecenderungan untuk menggunakan banyak gambar. Ini masuk akal karena gambar adalah bahan pokok toko eCommerce. Ini bahkan lebih benar dalam vertikal seperti ritel di mana gambar merupakan kebutuhan untuk menonjolkan produk.

Meskipun gambar adalah cara yang fantastis untuk meningkatkan UX dan branding toko Anda, gambar sering kali disertai dengan kompromi kinerja. File gambar umumnya berukuran jauh lebih besar daripada HTML atau CSS standar. Hasil dari penggunaan gambar dalam jumlah besar pada halaman dapat menjadi bobot halaman yang sangat berat yang membutuhkan waktu lebih lama bagi pengguna untuk mengunduh daripada halaman yang kurang intensif gambar:

Halaman ini menggunakan 173 permintaan gambar dengan ukuran total 14 MB dalam aset gambar

Selain itu, gambar yang tidak dioptimalkan dapat membuat halaman situs Anda menjadi lebih berat. Gambar akan sering diunggah dalam ukuran yang jauh lebih besar daripada "ukuran render" mereka. Ini adalah ukuran yang sebenarnya dilihat pengguna di browser:

Halaman ini berisi ukuran sebenarnya hampir 2x ukuran render

Saat gambar diunggah pada ukuran yang jauh lebih besar daripada ukuran render, hal ini menyebabkan masalah kinerja yang tidak perlu. Ini berarti bahwa pengguna harus mengunduh gambar yang lebih besar daripada yang sebenarnya diperlukan untuk dirender. Hasilnya adalah pengguna harus membuang sumber daya dan data browser tambahan untuk benar-benar melihat kontennya.

Anda dapat menemukan gambar yang lebih besar pada halaman tertentu dengan menggunakan Chrome DevTools. Cukup klik kanan dan pilih "Periksa". Arahkan ke tab "Jaringan" dan segarkan halaman. Ini akan menunjukkan kepada Anda semua sumber daya yang digunakan untuk memuat halaman Anda. Anda kemudian dapat mengurutkan berdasarkan "Ukuran" untuk menemukan aset terbesar.

Jika Anda melihat gambar besar (100+ KB), temukan gambar itu di halaman Anda dan sekali lagi klik kanan dan pilih "Periksa". Melayang di atas tautan gambar akan menunjukkan kepada Anda ukuran render dibandingkan dengan ukuran sebenarnya (intrinsik).

3. Kompres Gambar

Gambar juga dapat tidak dioptimalkan jika tidak dikompresi. Sangat umum untuk melihat toko Shopify di mana tidak ada kompresi yang diterapkan pada gambar yang diunggah yang mengarah ke ukuran gambar yang lebih besar daripada yang diperlukan.

Dengan menggunakan kompresi, Anda dapat memastikan bahwa aset gambar Anda memiliki ukuran file yang jauh lebih kecil daripada gambar aslinya. Ukuran file yang lebih kecil akan memungkinkan browser memuat konten situs web Anda lebih cepat.

Dalam hal kompresi gambar, kami lebih suka menggunakan kombinasi dari dua metode ini:

• Aplikasi Shopify: Beberapa aplikasi akan secara otomatis mengompresi gambar saat diunggah. Kami memiliki pengalaman yang baik dengan Crush.pics.
• Optimizilla: Ini memungkinkan Anda untuk mengompresi aset gambar besar secara manual sebelum mengunggah ke situs Anda.

4. Ganti GIF Dengan Gambar Statis

Tren tak terbantahkan yang kami lihat dengan toko Shopify yang lebih lambat adalah pemanfaatan GIF. GIF bisa sangat berharga karena memberikan pengalaman yang lebih interaktif bagi pengguna. Sekali lagi, ini dapat membantu meningkatkan situs Anda dari perspektif UX dan merek.

Namun, aset GIF sangat besar. Menggunakan bahkan hanya satu GIF pada halaman dapat meningkatkan ukurannya secara dramatis:

Aset GIF tunggal ini berjumlah 2,8 MB

Kami telah melihat contoh di mana hanya menggunakan dua atau tiga GIF telah menyumbang 10MB+ dari satu halaman. File-file ini secara signifikan menambah berat halaman, jadi kami sarankan untuk mencoba menggantinya dengan gambar statis jika memungkinkan. Ini dapat menghasilkan penghematan sumber daya yang signifikan dan peningkatan pengoptimalan kecepatan Shopify.

5. Memuat Gambar Malas

Saat menjalankan daftar situs Shopify kami melalui PageSpeed ​​Insights, salah satu rekomendasi paling umum yang kami temukan adalah "Tunda gambar di luar layar". Ini merupakan indikasi bahwa semua aset gambar situs dimuat sekaligus:

Karena banyak situs Shopify menggunakan banyak gambar, melihat pemuatan lambat masuk akal dalam banyak kasus. Ini dapat mempercepat situs web Shopify Anda karena semua gambar situs Anda tidak akan dimuat sekaligus, hanya saat pengguna menggulir halaman ke bawah.

Jika Anda tertarik untuk menerapkan pemuatan lambat, Shopify memiliki dokumentasi bantuan yang cukup bagus seputar ini. Kami telah mencapai kesuksesan terbaik untuk klien kami dengan bekerja sama dengan pengembang kami untuk mengimplementasikan perpustakaan lazysizes.

6. Batasi Aplikasi JavaScript & Shopify Pihak Ketiga

Toko Shopify menggunakan sejumlah besar aplikasi dan sumber daya pihak ketiga. Hal ini mengakibatkan banyaknya permintaan yang harus dibuat oleh browser

Mirip dengan plugin WordPress, Shopify memiliki "Aplikasi" yang dengan mudah memungkinkan pemilik situs untuk menambahkan fungsionalitas ke situs web mereka tanpa memerlukan latar belakang pengembang. Aplikasi adalah cara fantastis untuk meningkatkan kemampuan situs Anda. Hal yang sama berlaku untuk skrip pihak ketiga tambahan.

Namun, ingat bahwa penambahan ini datang dengan biaya kinerja.

Setiap kali Anda menambahkan aplikasi atau skrip ke situs web Anda, ini menambah jumlah total permintaan yang dibuat situs Anda. Selain itu, ukuran skrip ini harus dipertimbangkan. Terlalu banyak aplikasi atau kode pihak ketiga dapat menurunkan kinerja toko Shopify Anda.

Contoh toko Shopify yang menggunakan banyak kode pelacakan pihak ketiga

Karena sumber daya ini dapat merusak kinerja situs, penting untuk meninjau semua kode pelacakan, Aplikasi Shopify, dan sumber daya pihak ketiga lainnya yang Anda gunakan secara berkala. Kami merasa terbantu untuk melakukan percakapan yang jujur ​​dengan tim pemasaran dan pengembangan Anda. Mengajukan lima pertanyaan berikut tentang setiap sumber daya dapat membantu untuk membuat keputusan tentangnya:

1. Seberapa sering kita benar-benar menggunakan fitur ini?
2. Apakah ini "harus dimiliki" atau "bagus untuk dimiliki"?
3. Apakah ada opsi yang lebih ringan yang bisa kita gunakan?
4. Apakah manfaat yang kita dapatkan dari ini sepadan dengan pertukaran kinerja?
5. Apakah ada metrik yang dapat kami rujuk untuk melihat seberapa sering fitur ini digunakan oleh pengguna kami?

Tentu jawaban dari pertanyaan-pertanyaan tersebut tentunya akan berbeda-beda berdasarkan toko dan model bisnis Anda. Misalnya, fitur obrolan mungkin penting untuk beberapa toko tetapi tidak penting untuk yang lain. Setelah menjawab pertanyaan-pertanyaan ini, kami menyarankan untuk bekerja dengan tim pengembangan Anda untuk mencari tahu elemen mana yang dapat dihapus dengan aman.

Tidak yakin harus mulai dari mana? Berikut adalah beberapa kode pihak ketiga yang kami temukan digunakan oleh toko Shopify yang cenderung memiliki dampak lebih besar pada kinerja:

• Jeruk Keberuntungan
• sumo
• Penjaga
• ZenDesk
• Melayang
• PayPal
• Klaviyo
• Rahasia
• Yotpo

Tentu saja, kami tidak menganjurkan teknologi ini. Namun, jika Anda tahu Anda menggunakan salah satunya, ada baiknya untuk menyadari bahwa itu mungkin berdampak pada kinerja toko Shopify Anda. Jika pengujian Anda menunjukkan bahwa ini dapat menyebabkan masalah, pertimbangkan untuk menghapus atau menggantinya untuk mempercepat situs Shopify Anda.

7. Migrasikan Kode Pelacakan Ke Google Pengelola Tag

Google Pengelola Tag adalah solusi yang memungkinkan Anda menambahkan dan menghapus tag dengan mudah dari situs web Anda tanpa harus menyentuh kodenya. Ini adalah cara yang fantastis untuk mengelola semua kode pelacakan situs web Anda di satu tempat. Selain itu, salah satu hal hebat tentang Google Pengelola Tag adalah semua kode dimuat secara tidak sinkron. Artinya, kode yang dimuat melalui Google Pengelola Tag tidak akan memblokir perenderan konten situs Anda. Ini berarti Anda dapat mempertimbangkan untuk melakukan “migrasi tag” untuk memindahkan beberapa kode pelacakan Anda ke Google Pengelola Tag. Anda dapat melakukannya dengan melakukan langkah-langkah berikut:

1. Tambahkan Google Pengelola Tag ke toko Shopify Anda
2. Navigasikan ke Tag > Baru dan cari tag bawaan di “Jenis Tag” yang Anda gunakan di Shopify.
3. Terapkan tag ini di Google Pengelola Tag
4. Jika Anda tidak menemukan tag bawaan, Anda dapat memilih "HTML Khusus" dan menambahkan tag Anda
5. Atur pemicu Anda dengan benar. Sering kali ini diatur ke "Semua Halaman"
6. Publikasikan perubahan Google Pengelola Tag Anda
7. Navigasikan kembali ke Shopify dan hapus aplikasi apa pun yang Anda tambahkan melalui Google Pengelola Tag
8. Navigasikan ke toko Anda dan uji apakah tag baru Anda berfungsi dengan benar. Anda dapat melakukannya menggunakan mode "Pratinjau" Google Pengelola Tag

Pertimbangkan untuk memindahkan piksel pelacakan seperti Google Analytics, Hotjar, Facebook, dan kode pihak ketiga lainnya ke Google Pengelola Tag.

8. Jalankan Toko Anda Melalui Google PageSpeed ​​Insights

Google PageSpeed ​​Insights adalah alat pengujian kecepatan situs Google. Ini menganalisis situs Anda dan memberikan metrik tentang bagaimana kinerja situs Anda serta rekomendasi tentang bagaimana Anda dapat meningkatkan kecepatan situs Anda. Untuk menjalankan pengujian, cukup navigasikan ke alat dan masuk ke halaman yang data kinerjanya ingin Anda lihat. Anda akan melihat sesuatu seperti tangkapan layar berikut:

Anda dapat mengembalikan sejumlah data yang baik dan itu bisa sangat luar biasa. Mari kita bahas poin data utama yang kita lihat:

• First Contentful Paint: Berapa lama waktu yang dibutuhkan untuk merender bit pertama konten. Ini penting untuk menunjukkan kepada pengguna bahwa konten mulai dimuat.
• Time To Interactive: Berapa lama waktu yang dibutuhkan halaman untuk pertama kali menjadi interaktif bagi pengguna.

Umumnya, kita akan melihat kedua metrik tersebut terlebih dahulu untuk mendapatkan gambaran tentang bagaimana halaman tertentu dimuat. Ini dapat memberikan data tolok ukur hebat yang kemudian dapat Anda kembali dan ukur ulang untuk melihat apakah peningkatan kecepatan situs Anda berdampak.

Tes Kinerja Toko Shopify (Data Asli)

Satu hal yang mungkin ingin Anda ketahui adalah bagaimana toko Anda dibandingkan dengan situs Shopify lainnya. Untuk memberi Anda titik referensi, kami melakukan analisis pada beberapa toko Shopify paling terkemuka untuk membandingkan kinerja mereka.

Metodologi:

Untuk mengumpulkan data ini, kami mengukur kinerja beranda dari 400+ situs Shopify. Kami mengumpulkan poin data seperti First Contentful Paint, Time to Interactive, Page Size, Image Size dan Total Requests. Semua data kinerja adalah untuk situs versi seluler. Kami kemudian membandingkan 20% halaman teratas dan terbawah berdasarkan skor Google PageSpeed.

20% teratas:

• Cat Contentful Pertama: 2,78 detik
• Waktu Untuk Interaktif: 8,98 detik
• Ukuran Halaman Total: 2,01 MB
• Total Aset Gambar: 1,11 MB
• Permintaan: 72

Rata-rata:

• Cat Contentful Pertama: 3,8 detik
• Waktu Untuk Interaktif: 22,1 detik
• Ukuran Halaman Total: 4,41 MB
• Total Aset Gambar: 2,1 MB
• Permintaan: 171

20% terbawah:

• Cat Contentful Pertama: 5,89 detik
• Waktu Untuk Interaktif: 30,37 detik
• Ukuran Halaman Total: 5,54 MB
• Total Aset Gambar: 2,59 MB
• Permintaan: 235

Sumber daya tambahan

Selain itu, jika Anda mencari beberapa cara tambahan untuk meningkatkan kinerja situs Shopify Anda, sumber daya di bawah ini akan membantu. Kami telah mengumpulkan alat dan sumber kecepatan situs favorit kami yang dapat digunakan untuk meningkatkan kinerja di situs Shopify dan situs dengan sistem manajemen konten lainnya.

Alat Pengujian Kecepatan Halaman:

1. Pingdom
2. Wawasan Kecepatan Halaman Google
3. WebPageTest.org
4. Alat Pengembang Chrome
5. Mercusuar Google
6. Pikirkan Dengan Google

Pengoptimalan Gambar:

• Optimasi
• naksir.pics

Baca selengkapnya:

• Mengoptimalkan Kecepatan Situs Dengan Alat Pengembang Chrome
• Panduan Utama Untuk Kecepatan Situs

Jika Anda ingin mengoptimalkan kecepatan toko Shopify Anda, ini bisa menjadi penyesuaian yang bagus untuk dilakukan. Meningkatkan pengoptimalan gambar, mengurangi permintaan, dan menerapkan pemuatan lambat dapat menjadi cara yang bagus untuk memastikan situs Anda dimuat lebih cepat. Semoga hasilnya adalah kinerja yang lebih tinggi yang meningkatkan pengalaman pengguna untuk semua saluran digital Anda. Jika Anda ingin meningkatkan kinerja situs atau SEO toko Shopify Anda, Anda dapat mempelajari lebih lanjut tentang layanan SEO Shopify kami.