Cara Mengoptimalkan Data Web Inti di Shopify

Ada banyak informasi online tentang cara mengukur Data Web Inti dan apakah skor situs Anda baik atau buruk. Namun hanya ada sedikit saran yang dapat ditindaklanjuti tentang apa yang perlu Anda lakukan untuk melakukan perbaikan, khususnya di Shopify.

Dalam artikel ini, kita akan melihat bagaimana tepatnya Anda dapat meningkatkan skor Data Web Inti di toko Shopify Anda. Kami telah mencoba membuat banyak dari rekomendasi ini dapat ditindaklanjuti tanpa pengembang, tetapi beberapa memerlukan implementasi teknis ahli.

Kami akan menguraikan setiap metrik vital web inti secara bergiliran, menjelaskan faktor apa saja yang memengaruhi kinerjanya, lalu menunjukkan kepada Anda cara meningkatkan setiap metrik CWV di toko Shopify mana pun.

Klik pada judul di bawah ini untuk melompat langsung ke bagian itu:

• Bagaimana Data Web Inti Dihitung Di Shopify
• Cara Meningkatkan LCP Di Shopify
• Cara Meningkatkan CLS Di Shopify
• Cara Meningkatkan FID Di Shopify
• Aplikasi Data Web Inti Shopify

Apa itu Data Web Inti

Mari kita rangkum secara singkat apa itu Data Web Inti.

Data Web Inti adalah kumpulan metrik yang digunakan Google untuk mengukur performa dan pengalaman halaman web bagi pengguna. Untuk setiap metrik, URL ditandai sebagai "Hijau - Baik", "Kuning - Perlu Peningkatan", atau "Merah - Buruk".

Skor Data Web Inti berdampak langsung pada peringkat mesin telusur.

LCP - Cat Konten Terbesar

Berapa lama waktu yang dibutuhkan elemen terbesar di halaman Anda untuk dirender ke layar?

CLS - Pergeseran Tata Letak Kumulatif

Berapa banyak tata letak halaman bergeser saat halaman dimuat?

FID - Penundaan Input Pertama

Berapa lama waktu yang dibutuhkan halaman untuk menjadi responsif terhadap interaksi?

Bagaimana Data Web Inti Dihitung Di Shopify

Penting untuk memahami cara Google menghitung skor Data Web Inti karena hal ini memengaruhi cara melakukan peningkatan yang berarti. Data untuk Data Web Inti berasal dari data CrUX yang mengukur kinerja pengunjung situs web nyata menggunakan browser web Chrome. Ini disebut 'data lapangan'.

Untuk setiap metrik CWV, ada skor rata-rata minimum yang harus Anda capai agar tidak ditandai sebagai 'Buruk'. Ini didasarkan pada skor rata-rata yang dicatat terhadap kelompok halaman. Penting untuk dipahami bahwa situs web Shopify Anda tidak dinilai berdasarkan metrik data vital web inti; URL di situs web Anda adalah.

Saat toko Shopify Anda gagal pada metrik Data Web Inti, Search Console akan menampilkan contoh URL yang terpengaruh oleh masalah tersebut. Ini membantu Anda mempersempit di mana masalahnya dan menerapkan peningkatan target. Sebelum memulai pengoptimalan Core Web Vitals apa pun di toko Shopify Anda, pertama-tama identifikasi area peningkatan mana yang paling berdampak. Jangan buang waktu Anda untuk pekerjaan yang tidak akan menghasilkan hasil yang positif.

Tips Pengoptimalan Metrik Vital Web Inti Shopify

Data vital web inti adalah tentang mengirimkan konten dan sumber daya terpenting Anda secepat mungkin.

Pengoptimalan kecepatan halaman bukanlah hal yang dilakukan satu kali. Organisasi Anda perlu mengadopsi budaya di mana dampak kecepatan halaman diperhitungkan dalam semua pengambilan keputusan. Untuk setiap peningkatan yang Anda pertimbangkan untuk dilakukan pada toko Anda, pertimbangkan kompromi apa yang akan terjadi pada kecepatan halaman.

Cara Meningkatkan LCP di Shopify

LCP mengacu pada elemen terbesar di halaman Anda dan waktu yang dibutuhkan browser untuk memuat dan merender elemen tersebut ke layar. Ini biasanya berupa gambar, tetapi bisa juga berupa elemen teks.

Untuk meningkatkan LCP di toko Shopify, memahami faktor-faktor yang memengaruhi LCP membantu. Ada empat tahap yang dilakukan untuk memuat elemen LCP Anda.

LCP adalah tentang berapa lama browser web melukis/merender elemen terbesar Anda ke halaman. Memuat dan mengecat bukanlah hal yang sama. Bahkan jika elemen LCP Anda dioptimalkan ke ukuran file yang sangat kecil, LCP masih dapat memakan waktu lama karena:

• Penundaan Beban Sumber Daya. Terlalu lama bagi browser untuk mulai mengunduh elemen
• Penundaan Render Elemen. Setelah elemen LCP diunduh oleh browser, perlu waktu terlalu lama untuk merender elemen ke halaman.

Wawasan yang dapat diambil di sini adalah bahwa LCP lebih dari sekadar ukuran file elemen terbesar Anda. Ini adalah waktu yang diperlukan untuk menyelesaikan proses 4 tahap di atas. Untuk meningkatkan skor LCP Anda, fokuskan pada seluruh proses pemuatan dan rendering elemen LCP Anda.

Cara Menemukan Elemen LCP Di Semua Halaman Shopify

Untuk meningkatkan LCP, Anda perlu mengetahui elemen mana pada halaman yang merupakan LCP. Ini mudah di Shopify. Cukup buka PageSpeed ​​Insights dan analisis URL yang Anda perlukan untuk menemukan LCP. Setelah laporan selesai, gulir ke bawah dan lihat di bagian 'Diagnostik'. Akan ada baris yang disebut 'Elemen Cat Konten Terbesar'. Perluas ini untuk melihat detail tentang elemen apa yang merupakan LCP di halaman ini.

Jangan Lazyload Elemen LCP

Pemuatan malas adalah metode yang digunakan untuk hanya memuat elemen saat terlihat di viewport. Ini membantu memuat konten paruh atas lebih cepat. Anda tidak boleh malas memuat elemen LCP Anda karena ini akan menunda seberapa cepat browser mulai mengunduh elemen tersebut.

Di toko Shopify, elemen LCP pada halaman produk biasanya akan menjadi gambar produk utama. Atau pada postingan blog, elemen LCP mungkin berupa gambar header blog. Beberapa tema Shopify akan secara otomatis menambahkan pemuatan malas ke setiap gambar, bahkan yang muncul di paro atas. Tinjau setiap template Shopify Anda dan cari tahu apa itu elemen LCP. Jika muncul di paro atas, pastikan atribut di bawah tidak disertakan pada tag HTML:

memuat = "malas"

Pramuat Elemen LCP

Anda dapat menggunakan rel=”preload” untuk memberi tahu browser web agar mengunduh sumber daya tertentu sesegera mungkin. Dengan menerapkan rel=”preload” pada elemen LCP Anda, browser akan memprioritaskan memuat sumber daya tersebut ke dalam halaman.

Anda dapat melakukannya sendiri dengan mengedit kode tema Anda. Untuk pengembang tema Shopify, ada filter yang dapat ditambahkan ke template cair Shopify yang akan menampilkan tag preload.

Gunakan Gambar Nextgen

Format gambar baru seperti WebP berukuran lebih kecil daripada format tradisional seperti JPG dan PNG. Jika elemen LCP Anda berupa gambar, menggunakan format gambar Nextgen akan mempercepat waktu pengunduhan. Jika memungkinkan, gunakan gambar WebP, tetapi ingatlah untuk menyertakan fallback untuk browser lawas yang tidak mendukung gambar generasi berikutnya.

Tema Shopify baru akan secara otomatis mengonversi gambar Anda menjadi WebP dan menyajikannya ke browser yang sesuai.

Pastikan Elemen LCP Disertakan Dalam Respons HTML Awal

Kurangi 'Penundaan pemuatan sumber daya' dengan memastikan elemen LCP Anda dikirimkan dalam respons HTML awal. Jika elemen LCP dimuat ke halaman oleh sumber daya eksternal (seperti skrip JS), browser akan membutuhkan waktu lebih lama untuk mulai mengunduh elemen LCP.

Apakah ini memengaruhi toko Shopify Anda akan bergantung pada tema toko yang Anda gunakan. Cara cepat untuk mengujinya adalah dengan mencari tahu apa elemen LCP Anda, lalu lihat halaman dengan JS dimatikan. Jika elemen LCP tidak ditampilkan di halaman HTML, itu berarti elemen tersebut tidak dikirimkan dalam respons HTML awal.

Hilangkan Render-Blocking Resources

Saran 'Hilangkan sumber daya pemblokiran render' telah ada sejak lama. Tapi apa sebenarnya artinya? Beberapa sumber seperti skrip dan stylesheet memblokir halaman web dari perenderan. Ketika browser menemukan sumber daya, itu akan berhenti mengunduh halaman, dan sebagai gantinya mengunduh dan menjalankan sumber daya itu. Ini menunda rendering halaman untuk pengguna.

Laporan mercusuar akan menunjukkan kepada Anda sumber daya pemblokiran render untuk halaman mana pun. Jadi, Anda perlu mengetahui skrip dan stylesheet mana yang memblokir perenderan, lalu mengoptimalkan cara penyampaiannya.

Hilangkan Render Blocking JS

Pertama, Anda perlu memahami dua atribut yang disebut defer dan async. Atribut HTML ini dapat dilampirkan ke skrip eksternal dan memberi tahu browser kapan harus mengunduh/mengeksekusi sumber daya.

Jadi dengan menerapkan async atau tunda ke skrip JS Anda, Anda dapat meminimalkan dampaknya pada perenderan halaman. Shopify tidak akan menyinkronkan atau menunda skrip Anda secara otomatis, jadi Anda harus masuk ke template cairan tema dan menambahkan sendiri atributnya. Namun berhati-hatilah saat melakukan proses ini karena Anda perlu mempertimbangkan apa dampak penangguhan skrip terhadap fungsionalitas toko Anda.

Anda juga akan menemukan bahwa aplikasi dan plugin yang Anda instal di toko Shopify Anda akan menampilkan skrip JS pemblokiran render. Anda dapat mengidentifikasi ini melalui laporan Lighthouse. Berikan pertimbangan yang cermat untuk setiap aplikasi yang Anda pasang di toko Anda dan pikirkan potensi dampaknya pada kecepatan halaman. Beberapa pedagang bahkan tidak menyadari bahwa aplikasi yang tidak digunakan masih terpasang di toko dan memengaruhi kecepatan halaman. Saat Anda mencopot pemasangan aplikasi, pastikan aplikasi tersebut tidak meninggalkan kode warisan apa pun di tema Anda.

Hilangkan Render Blocking CSS Stylesheets

Untuk menghilangkan CSS yang memblokir perenderan, Anda harus menyisipkan gaya penting yang diperlukan untuk merender konten paruh atas. Tidaklah efisien untuk mengunduh seluruh lembar gaya Anda segera untuk setiap pengunjung karena sebagian besar CSS tidak akan digunakan.

Solusinya adalah menyejajarkan CSS penting yang diperlukan untuk merender bagian paro atas laman Anda dengan menyertakannya dalam tag gaya di head . Kemudian tambahkan kode di bawah ini ke dari theme.liquid.js Anda untuk memuat stylesheet utama Anda secara asinkron.

 <link rel="alternate stylesheet" href="slow.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">

Sebelum merilis ini ke toko langsung Anda, bereksperimenlah dengan tema pengujian untuk memvalidasi bahwa halaman Anda masih terlihat benar secara visual.

Cara Meningkatkan CLS Di Shopify

CLS adalah tentang seberapa banyak tata letak halaman bergeser saat halaman dimuat. Penyebabnya biasanya adalah gambar yang memindahkan konten saat dimuat dan dirender.

Tambahkan Atribut Lebar dan Tinggi ke Gambar Anda

Solusi CLS termudah adalah memastikan tag img Anda menampilkan atribut lebar dan tinggi yang eksplisit. Atribut ini diterapkan ke HTML gambar dan memberi tahu browser lebar dan tinggi gambar. Dengan informasi ini, browser dapat menghitung rasio aspek dan dimensi gambar, serta mencadangkan ruang yang diperlukan untuk gambar tersebut. Ini menghentikan tata letak agar tidak bergeser saat gambar ditambahkan ke halaman.

Untuk melakukan ini pada gambar di toko Shopify Anda sendiri, masuk dan buka bagian tema. Dan masuk ke 'Edit Kode' untuk tema Anda. Kemudian temukan cuplikan kode di dalam template cair Anda yang menampilkan gambar dan tambahkan cuplikan berikut ke tag img.

 height="{{img.height}}" width="{{img.width}}

Lihatlah templat cair yang Anda gunakan untuk beranda, koleksi, produk, dan blog Shopify Anda dan pastikan tag img merujuk atribut lebar dan tinggi.

Optimalkan Font Anda

Font web mewah yang Anda muat dari tempat-tempat seperti font Google dapat menyebabkan masalah CLS karena masalah yang disebut FOUS (flash of unstyled text). Di sinilah browser web awalnya memuat font fallback, dan kemudian ketika font web utama dimuat, teks dirender ulang menyebabkan pergeseran tata letak.

Kurangi Ketergantungan pada Font Web Pihak Ketiga Pertama-tama, coba dan kurangi ketergantungan Anda pada font web pihak ketiga. Saat Anda mengimpor font web, hanya impor jenis font yang Anda perlukan. Jangan mengimpor bobot dan gaya font yang berbeda jika tidak pernah digunakan karena ini akan menggembungkan ukuran file font.

Pramuat Font Font web terkadang dimuat dari dalam stylesheet. Ini menunda seberapa cepat browser dapat mulai mengunduh font. Sebaliknya, pramuat file font Anda di dari toko Anda. Ini akan memberitahu browser untuk memuat file font sebagai prioritas tinggi.

Gunakan font-display:optional Font-display adalah properti CSS yang memberi tahu browser apa yang harus dilakukan jika tampilan font belum diunduh dalam waktu 100 md. Browser awalnya akan memuat font fallback dan jika font kustom belum selesai diunduh dalam 100 md, browser akan mempertahankan font fallback yang dirender di halaman. Ini mengurangi risiko pemuatan font khusus yang terlambat dan menyebabkan pergeseran tata letak.

Cara Meningkatkan FID Di Shopify

Dalam pengalaman kami, FID adalah metrik Vital Web Inti yang paling tidak umum yang kami lihat memengaruhi toko Shopify. Pikirkan FID sebagai cara untuk mengukur seberapa responsif suatu halaman selama pemuatan. Tidak ada yang lebih membuat pengguna frustrasi selain mengklik/mengetuk dan tidak ada yang terjadi.

FID mirip dengan metrik lain yang disebut Total Blocking Time (TBT). TBT mengukur waktu antara saat halaman mulai dirender (First Contentful Paint atau FCP) dan saat halaman menjadi responsif (Time to Interactive atau TTI).

TBT disebabkan oleh 'tugas panjang' yang memblokir utas utama dari pemrosesan. Utas utama adalah tempat browser memproses semua yang diperlukan untuk memuat halaman. Jika tugas panjang memblokir utas utama dari pemrosesan, itu menunda seberapa cepat halaman menjadi interaktif bagi pengguna.

Apa Perbedaan Antara FID dan TBT

Perbedaan utama antara FID dan TBT adalah FID didasarkan pada data lapangan (data dari pengguna sebenarnya yang telah mengunjungi toko Shopify Anda). Sedangkan TBT dapat diukur di laboratorium dan dihitung dengan menjalankan pengujian di lingkungan yang dibuat-buat dengan kondisi jaringan yang ditentukan.

Karena Anda tidak dapat mengukur FID saat menguji halaman Anda sendiri, sebaiknya ukur TBT.

Untuk meningkatkan FID, Anda perlu mempercepat seberapa cepat toko Shopify Anda merespons interaksi pertama pengguna. Ini dilakukan dengan membuat halaman Shopify Anda dimuat seefisien mungkin. Fokus pada tiga area ini:

Kurangi Dampak Kode Pihak Ketiga

Seperti semua metrik web vitals inti, JavaScript pihak ketiga sering menjadi penyebab masalah. Pihak ketiga mana pun yang memblokir utas utama selama lebih dari 250 md akan ditandai dalam laporan Lighthouse. Jalankan halaman Anda melalui Lighthouse untuk mengidentifikasi skrip pihak ketiga mana yang menyebabkan masalah. Kemudian putuskan mana yang dapat diatur ke asinkron atau tunda.

Kurangi Waktu Eksekusi JavaScript

Waktu yang dibutuhkan JavaScript Anda untuk mengeksekusi juga penting. Pertama-tama, jalankan halaman Anda melalui Lighthouse dan identifikasi skrip mana yang membutuhkan waktu paling lama untuk dieksekusi. Lighthouse akan menandai semua skrip yang memerlukan waktu lebih dari 2 detik.

Gunakan Pemisahan Kode Daripada mengirimkan semua kode JavaScript Anda dalam satu file, pisahkan kode Anda menjadi bagian yang lebih kecil dan hanya kirimkan kode yang diperlukan untuk halaman itu. Ini tidak mudah dan memerlukan dukungan dari pengembang yang mengelola kode Anda. Anda akan menemukan ini jauh lebih mudah jika diintegrasikan ke dalam pengembangan tema Shopify Anda di awal proyek.

Perkecil dan Kompres Kode Anda Saat Anda memperkecil kode, Anda menghapus spasi dan komentar yang tidak perlu. Ini mengurangi ukuran file tetapi mempercepat seberapa cepat browser dapat mengeksekusi kode. Salah satu hal hebat tentang Shopify adalah sebagian besar theme js diperkecil secara otomatis.

Seperti minifikasi, mengompresi js Anda mengurangi ukuran file dan mempercepat seberapa cepat browser web dapat mengeksekusi kode.

Minimalkan Pekerjaan Thread

Utas utama melakukan semua pekerjaan memproses dan menghitung cara membuat halaman. Saat utas utama ditempati oleh tugas-tugas intensif, TBT Anda akan menjadi lebih buruk. Ini sebagian besar tergantung pada seberapa kuat tema Shopify Anda. Tema murah yang dibangun oleh pengembang yang buruk tidak akan dimuat seefisien yang dikembangkan oleh pakar Shopify.

Bagaimana Anda bisa meminimalkan pekerjaan utas di toko Shopify Anda? Seperti disebutkan di atas, jauh lebih mudah jika ini diintegrasikan ke dalam tema Anda sejak awal. Kami merekomendasikan untuk membeli tema Shopify premium dengan ulasan bagus. Atau jika Anda sedang membangun toko Shopify Anda sendiri, pastikan Anda bekerja dengan pengembang ahli Shopify yang dapat memastikan tema Anda dioptimalkan untuk meminimalkan pekerjaan thread.

Cara Mengukur Performa Data Web Inti

Sekarang Anda memahami cara meningkatkan Data Web Inti di toko Shopify Anda, selanjutnya Anda perlu mengetahui cara mengukur kemajuan Data Web Inti Anda.

Search Console

Cara tercepat untuk melihat performa toko Shopify Anda saat ini untuk Data Web Inti adalah melalui Search Console. Buka laporan Data Web Inti dari menu sebelah kiri untuk mendapatkan data tentang performa situs Anda saat ini. Ini akan mencakup perincian di mana Anda memiliki masalah Core Web Vitals dan menunjukkan kepada Anda contoh URL yang terpengaruh.

Wawasan Pagespeed/Lighthouse

Wawasan kecepatan halaman adalah alat Google gratis yang memungkinkan Anda mengukur kecepatan halaman dari halaman mana pun. Jalankan URL Shopify Anda melalui alat untuk mendapatkan perincian mendetail tentang kinerja Anda bersama dengan tindakan yang disarankan untuk mencapai skor yang lebih tinggi.

Laporan CRUX

CrUX adalah kumpulan data kecepatan/kinerja Google sendiri untuk jutaan halaman nyata. Anda dapat mengakses data CrUX untuk toko Shopify Anda sendiri dengan menggunakan Dasbor Google CrUX Data Studio. Dasbor memberikan perincian mendalam tentang performa situs Anda di seluruh metrik Data Web Inti selama 16 bulan terakhir.

Apa Arti Semua Ketentuan CWV Itu?

Saat Anda mulai melihat Core Web Vitals, Anda akan menemukan banyak terminologi yang rumit, berikut artinya:

Data Web Inti Aplikasi Shopify

Ada banyak aplikasi shopify yang mengklaim dapat meningkatkan skor Data Web Inti. Beberapa aplikasi ini efektif dan memberikan peningkatan kinerja. Meskipun ini dapat meningkatkan skor Data Web Inti Anda, tidak ada jaminan bahwa Anda akan melihat efek apa pun. Ini karena skor Data Web Inti unik untuk setiap toko Shopify. Jika skor Data Web Inti toko Anda buruk karena masalah tema tertentu, aplikasi mungkin tidak akan membuat perbedaan apa pun.

Jika Anda ingin mengambil rute aplikasi, kami sarankan untuk menguji coba aplikasi dan mengamati pengaruhnya terhadap kinerja. Berikut adalah beberapa aplikasi yang disarankan untuk dicoba:

• https://apps.shopify.com/core-web-vitals-booster
• https://apps.shopify.com/page-speed-optimizer
• https://apps.shopify.com/swift

Jika Anda memerlukan saran atau dukungan dengan bisnis e-niaga Anda, hubungi tim kami dan kami akan dengan senang hati membantu.