Prestasi sesebuah laman web bukan sekadar tentang sepantas mana halaman dimuatkan. Walaupun kandungan anda muncul dalam beberapa saat, butang yang lambat bertindak balas atau susun atur yang berubah secara tiba-tiba boleh mengecewakan pelawat dan menjejaskan pengalaman mereka. Jadi, bagaimanakah anda boleh menentukan sama ada laman web anda berprestasi baik? Core Web Vitals ialah metrik prestasi utama Google yang mengukur kelajuan pemuatan, interaktiviti dan kestabilan visual. Dalam panduan ini, anda akan mempelajari tiga metrik Core Web Vitals, ambang yang disyorkan bagi setiap satu, serta alatan yang boleh anda gunakan untuk mengukur dan menambah baik prestasi laman web anda.
Apakah Core Web Vitals?
Core Web Vitals ialah satu set metrik prestasi yang diperkenalkan oleh Google untuk mengukur aspek penting pengalaman pengguna di sesebuah laman web. Metrik ini memberi tumpuan kepada tiga faktor utama: prestasi pemuatan, interaktiviti dan kestabilan visual. Dalam erti kata lain, metrik ini membantu pemilik laman web memahami sepantas mana halaman dimuatkan, selancar mana pengguna boleh berinteraksi dengannya, dan sama ada kandungannya kekal stabil semasa dimuatkan.
Prestasi laman web bukan sahaja tentang sepantas mana sesebuah halaman dibuka. Laman web mungkin memuatkan kandungannya dalam masa yang singkat, tetapi jika pengguna perlu menunggu sebelum dapat mengklik butang atau jika susun atur halaman berubah secara tiba-tiba, pengalaman keseluruhannya masih boleh menjadi buruk. Core Web Vitals membantu mengenal pasti masalah ini dan menyediakan sasaran yang boleh diukur untuk menambah baik prestasi laman web.
Google kini menggunakan tiga metrik Core Web Vitals: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) dan Cumulative Layout Shift (CLS). Setiap metrik mengukur bahagian pengalaman pengguna yang berbeza, jadi penambahbaikan pada salah satu daripadanya tidak semestinya bermakna dua metrik yang lain juga akan bertambah baik.
Mengapakah Core Web Vitals Penting?
Sesebuah laman web harus menyediakan pengalaman yang lancar dan boleh diharap kepada pelawatnya. Apabila halaman mengambil masa terlalu lama untuk dimuatkan, pengguna mungkin meninggalkannya sebelum sempat mendapatkan maklumat yang diperlukan. Begitu juga, jika butang lambat bertindak balas atau elemen halaman bergerak secara tiba-tiba, pelawat mungkin berasa kecewa dan sukar menyelesaikan tugasan mereka.
Core Web Vitals membantu pemilik laman web mengenal pasti isu ini dengan menggunakan data prestasi yang boleh diukur, dan bukannya bergantung semata-mata pada tanggapan peribadi. Sebagai contoh, seorang pembangun mungkin menguji laman web pada komputer berkuasa tinggi dan mendapati ia dimuatkan dengan pantas. Namun, pelawat yang menggunakan peranti mudah alih lama atau sambungan internet yang lebih perlahan mungkin mengalami masa pemuatan yang jauh lebih lama.
Perbezaan ini menjadikan pemantauan prestasi penting. Dengan menganalisis data Core Web Vitals, pembangun dapat mengenal pasti bahagian laman web yang perlu ditambah baik dan menentukan sama ada usaha pengoptimuman mereka menghasilkan keputusan yang dijangkakan.
Core Web Vitals juga berkaitan dengan pengoptimuman enjin carian (SEO). Google menggunakan isyarat pengalaman halaman dalam sistem kedudukannya, tetapi skor Core Web Vitals yang baik tidak menjamin kedudukan yang lebih tinggi. Kandungan yang relevan dan pelbagai faktor lain tetap penting. Oleh itu, usaha menambah baik metrik ini harus dianggap sebagai sebahagian daripada strategi yang lebih luas untuk membina laman web yang berguna, mudah diakses dan boleh diharap.
Apakah Tiga Metrik Core Web Vitals?
Setiap metrik Core Web Vitals memberi tumpuan kepada aspek tertentu prestasi laman web. Memahami cara metrik ini berfungsi memudahkan anda mengenal pasti masalah prestasi dan memilih teknik pengoptimuman yang tepat.
Apakah Largest Contentful Paint (LCP)?
Largest Contentful Paint (LCP) mengukur tempoh masa yang diambil untuk imej atau blok teks terbesar yang kelihatan dalam viewport awal dipaparkan. Metrik ini membantu menganggarkan bila kandungan utama halaman mula kelihatan kepada pengguna.
Sebagai contoh, bayangkan seorang pelawat membuka sebuah artikel blog. Latar belakang halaman dan menu navigasi mungkin muncul hampir serta-merta, tetapi tajuk utama atau imej pilihan mungkin mengambil masa beberapa saat untuk dimuatkan. Dalam situasi ini, pelawat mungkin merasakan halaman masih sedang dimuatkan walaupun sebahagian elemennya sudah kelihatan. Skor LCP yang baik ialah 2.5 saat atau kurang. Jika nilainya antara 2.5 hingga 4 saat, halaman tersebut perlu ditambah baik. Nilai LCP melebihi 4 saat dianggap lemah.
Beberapa faktor boleh mempengaruhi LCP, termasuk masa tindak balas pelayan yang perlahan, imej bersaiz besar, CSS dan JavaScript yang menyekat pemaparan, serta kelewatan dalam menemui kandungan utama.
Untuk menambah baik LCP, pemilik laman web boleh mengambil langkah-langkah berikut:
- Optimumkan imej: Kurangkan saiz fail imej dan gunakan format moden seperti WebP atau AVIF apabila sesuai.
- Tingkatkan masa tindak balas pelayan: Gunakan sumber hosting yang cekap, caching dan rangkaian penghantaran kandungan (CDN) apabila sesuai untuk laman web anda.
- Utamakan kandungan utama: Pastikan pelayar dapat menemui imej penting terus daripada sumber HTML dan utamakan pemuatannya apabila perlu.
- Kurangkan sumber yang menyekat pemaparan: Optimumkan fail CSS dan JavaScript yang menghalang pelayar daripada memaparkan kandungan utama.
- Elakkan lazy-loading pada imej LCP: Jika sesuatu imej berkemungkinan menjadi elemen LCP, melewatkan pemuatannya boleh menyebabkan halaman kelihatan lebih perlahan.
Teknik-teknik ini boleh mengurangkan masa yang dihabiskan oleh pengguna untuk menunggu kandungan utama dipaparkan. Walau bagaimanapun, penyelesaian yang paling berkesan bergantung pada punca kelewatan, jadi adalah penting untuk mengukur prestasi halaman sebelum membuat sebarang perubahan.
Apakah Interaction to Next Paint (INP)?
Interaction to Next Paint (INP) mengukur sejauh mana laman web terasa responsif apabila pengguna berinteraksi dengannya. Metrik ini menilai kelewatan antara interaksi pengguna, seperti mengklik butang atau menekan kekunci, dengan kemas kini visual seterusnya yang dipaparkan oleh pelayar.
Ambil contoh sebuah kedai dalam talian di mana pelawat mengklik butang Tambah ke Troli. Jika pelayar mengambil masa yang ketara untuk mengemas kini troli, pelawat mungkin menyangka butang itu tidak berfungsi lalu mengkliknya sekali lagi. Ini boleh menimbulkan kekeliruan malah mungkin menyebabkan tindakan berganda.
INP membantu mengenal pasti masalah sebegini dengan mengukur tahap responsif halaman sepanjang lawatan pengguna. Tidak seperti First Input Delay (FID), yang hanya mengukur kelewatan sebelum pelayar mula memproses interaksi pertama, INP mengambil kira pengalaman interaksi yang lebih menyeluruh sepanjang hayat sesebuah halaman. Skor INP yang baik ialah 200 milisaat atau kurang. Nilai melebihi 200 milisaat hingga 500 milisaat perlu ditambah baik, manakala nilai melebihi 500 milisaat dianggap lemah.
JavaScript merupakan punca biasa INP yang lemah kerana pelayar mungkin perlu melaksanakan skrip sebelum dapat bertindak balas terhadap input pengguna dan memaparkan kemas kini. Tugasan yang berjalan lama boleh menghalang pelayar daripada memproses interaksi dengan segera.
Untuk menambah baik INP, pembangun boleh menggunakan beberapa teknik:
- Kurangkan JavaScript yang tidak diperlukan: Buang kod yang tidak digunakan dan elakkan memuatkan skrip yang tidak diperlukan untuk halaman semasa.
- Pecahkan tugasan panjang: Bahagikan tugasan JavaScript yang besar kepada tugasan yang lebih kecil supaya pelayar mempunyai lebih banyak peluang untuk memproses interaksi pengguna.
- Optimumkan pengendali peristiwa: Pastikan fungsi berkaitan interaksi semudah dan secekap yang mungkin.
- Elakkan kemas kini DOM yang tidak perlu: Mengemas kini terlalu banyak elemen serentak boleh meningkatkan masa pemaparan dan melewatkan kemas kini visual seterusnya.
- Kurangkan skrip pihak ketiga: Alat analitik, skrip pengiklanan dan perkhidmatan terbenam boleh menggunakan sumber pemprosesan dan menjejaskan tahap responsif.
Menambah baik INP memerlukan lebih daripada sekadar mengurangkan jumlah saiz fail JavaScript. Pembangun juga perlu memahami bila skrip dilaksanakan dan berapa banyak kerja yang perlu dilakukan oleh pelayar selepas sesuatu interaksi.
Apakah Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) mengukur kestabilan visual sesebuah halaman web. Metrik ini memberi tumpuan kepada perubahan tidak dijangka pada kedudukan elemen yang kelihatan semasa halaman sedang dipaparkan.
Sebagai contoh, bayangkan seorang pelawat sedang membaca artikel dan tiba-tiba melihat teks bergerak ke bawah kerana sebuah iklan muncul di atasnya. Jika pelawat itu hendak mengklik sesuatu pautan, pergerakan yang tidak dijangka ini boleh menyebabkan mereka mengklik elemen lain. Perubahan susun atur sebegini boleh menyukarkan penggunaan laman web, terutamanya pada peranti mudah alih yang ruang paparannya terhad. Skor CLS yang baik ialah 0.1 atau kurang. Skor melebihi 0.1 hingga 0.25 perlu ditambah baik, manakala skor melebihi 0.25 dianggap lemah.
Beberapa isu biasa boleh menyebabkan anjakan susun atur yang tidak dijangka. Imej tanpa dimensi yang ditetapkan, iklan yang disisipkan secara dinamik, kandungan yang lewat dimuatkan dan fon web yang mengubah rupa teks semuanya boleh menjejaskan kestabilan visual.
Teknik-teknik berikut boleh membantu menambah baik CLS:
- Tetapkan dimensi imej: Nyatakan lebar dan tinggi imej atau gunakan nisbah aspek CSS untuk menempah ruang yang diperlukan sebelum imej dimuatkan.
- Tempah ruang untuk iklan: Peruntukkan ruang yang mencukupi untuk bekas iklan bagi mengelakkan kandungan di sekelilingnya beralih apabila iklan dipaparkan.
- Elakkan menyisipkan kandungan di atas kandungan sedia ada: Jika elemen baharu perlu dipaparkan, letakkannya di tempat yang tidak akan menggerakkan kandungan yang sedang dilihat oleh pengguna secara tiba-tiba.
- Optimumkan pemuatan fon: Gunakan strategi pemuatan fon yang sesuai dan fon sandaran untuk mengurangkan perubahan tidak dijangka pada susun atur teks.
- Gunakan animasi CSS yang sesuai: Utamakan animasi berasaskan sifat seperti transform dan opacity apabila boleh, berbanding sifat yang menyebabkan perubahan susun atur.
Penting untuk difahami bahawa tidak semua anjakan susun atur memudaratkan. Perubahan yang berlaku secara langsung sebagai tindak balas kepada interaksi pengguna mungkin dijangkakan. CLS memberi tumpuan kepada ketidakstabilan visual yang tidak dijangka dan menggunakan kaedah pemarkahan berdasarkan kesan dan jarak anjakan susun atur.
Apakah Ambang Core Web Vitals yang Disyorkan?
Google menyediakan ambang khusus untuk membantu pemilik laman web menentukan sama ada halaman mereka menawarkan pengalaman pengguna yang baik. Ambang ini membahagikan prestasi kepada tiga kategori: baik, perlu penambahbaikan dan lemah.
Ambang ini membantu pembangun menilai setiap metrik secara berasingan. Walau bagaimanapun, satu ujian sahaja tidak mencukupi untuk menentukan sama ada sesebuah laman web secara konsisten memberikan pengalaman yang baik.
Google mengesyorkan agar Core Web Vitals dinilai pada persentil ke-75 lawatan halaman, dengan keputusan mudah alih dan desktop diambil kira secara berasingan. Ini bermakna sekurang-kurangnya 75% lawatan yang diukur harus mencapai ambang baik bagi setiap metrik.
Sebagai contoh, katakan sebuah laman web mempunyai nilai LCP 2 saat pada persentil ke-75. Ini bermakna 75% lawatan halaman yang diukur mempunyai LCP 2 saat atau kurang, sekali gus memenuhi ambang yang disyorkan.
Sesebuah laman web harus berusaha mencapai ambang baik bagi ketiga-tiga metrik, dan bukannya hanya memberi tumpuan kepada skor terbaiknya.
Apakah Alatan Pengukuran Core Web Vitals?
Core Web Vitals boleh diukur menggunakan beberapa alatan yang disediakan oleh Google. Alatan ini membantu pembangun memahami prestasi sesebuah laman web dan mengenal pasti bahagian yang perlu ditambah baik.
PageSpeed Insights
PageSpeed Insights ialah salah satu alatan yang paling berguna untuk menyemak Core Web Vitals. Ia menyediakan data pengguna sebenar, jika tersedia, serta data makmal yang dikumpulkan melalui ujian simulasi. Ia juga menawarkan cadangan untuk menambah baik prestasi halaman.
Google Search Console
Google Search Console menyertakan laporan Core Web Vitals yang menunjukkan kumpulan halaman yang memberikan pengalaman pengguna yang baik dan yang perlu ditambah baik. Ia menggunakan data dunia sebenar untuk membantu pemilik laman web mengenal pasti isu prestasi merentasi berbilang halaman.
Chrome DevTools dan Lighthouse
Chrome DevTools dan Lighthouse membantu pembangun menguji prestasi halaman dalam persekitaran terkawal. Alatan ini dapat mengenal pasti isu berkaitan pelaksanaan JavaScript, pemuatan imej, anjakan susun atur dan faktor lain yang mempengaruhi Core Web Vitals.
Apakah Perbezaan antara Data Lapangan dan Data Makmal?
Core Web Vitals boleh dinilai menggunakan dua jenis data: data lapangan dan data makmal. Memahami perbezaannya membantu pembangun mentafsir keputusan ujian dan memilih pendekatan yang tepat untuk menambah baik prestasi laman web.
Data Lapangan
Data lapangan dikumpulkan daripada pengguna sebenar semasa mereka melayari sesebuah laman web. Data ini mencerminkan keadaan pelayaran sebenar, termasuk pelbagai peranti, sambungan rangkaian dan interaksi pengguna.
Data ini amat berguna untuk memahami sama ada laman web memenuhi ambang Core Web Vitals yang disyorkan oleh Google dalam situasi dunia sebenar.
Data Makmal
Data makmal dikumpulkan dalam persekitaran ujian terkawal menggunakan alatan seperti Lighthouse. Data ini membantu pembangun menghasilkan semula masalah prestasi dan menyiasat kemungkinan puncanya.
Tidak seperti data lapangan, data makmal tidak mewakili setiap pengalaman pengguna di dunia sebenar. Oleh itu, sesebuah laman web mungkin menerima keputusan yang berbeza daripada ujian makmal dan pengukuran pengguna sebenar.
Cara Menambah Baik Core Web Vitals
Menambah baik Core Web Vitals memerlukan pengenalpastian isu yang menjejaskan kelajuan pemuatan, interaktiviti dan kestabilan visual. Penyelesaian yang tepat bergantung pada metrik mana yang berprestasi lemah.
Tambah Baik Largest Contentful Paint (LCP)
Untuk menambah baik LCP, pembangun harus memberi tumpuan kepada memuatkan elemen kandungan terbesar yang kelihatan secepat mungkin. Antara penambahbaikan biasa termasuk mengoptimumkan imej, memilih perkhidmatan web hosting yang boleh diharap, mengurangkan masa tindak balas pelayan, mendayakan caching dan mengelakkan kelewatan yang tidak perlu dalam memuatkan sumber penting.
Tambah Baik Interaction to Next Paint (INP)
INP boleh ditambah baik dengan mengurangkan tugasan JavaScript yang berjalan lama dan meminimumkan kerja yang tidak perlu pada main thread. Pembangun juga harus mengoptimumkan pengendali peristiwa dan mengelakkan pelayar daripada melakukan terlalu banyak kerja selepas pengguna mengklik, mengetik atau menaip.
Tambah Baik Cumulative Layout Shift (CLS)
Untuk mengurangkan CLS, pembangun harus menempah ruang untuk imej, video, iklan dan elemen lain sebelum ia dimuatkan. Elakkan menyisipkan kandungan baharu di atas kandungan sedia ada secara tiba-tiba, dan gunakan dimensi yang konsisten untuk elemen visual apabila boleh.
Kesimpulan
Core Web Vitals membantu pembangun memahami pengalaman pengguna di sesebuah laman web dari segi prestasi pemuatan, interaktiviti dan kestabilan visual. Dengan mengukur LCP, INP dan CLS, pemilik laman web dapat mengenal pasti isu prestasi dan mengutamakan penambahbaikan yang menjadikan halaman mereka lebih mudah digunakan.
Pemantauan berkala, data pengguna sebenar dan pengoptimuman yang disasarkan dapat membantu laman web mengekalkan keputusan Core Web Vitals yang baik dari semasa ke semasa
Soalan Lazim
1. Apakah perbezaan antara data lapangan dan data makmal?
Data lapangan diperoleh daripada pengguna sebenar yang melawati sesebuah laman web, manakala data makmal dikumpulkan dalam persekitaran ujian terkawal. Data lapangan mencerminkan pengalaman pengguna sebenar, manakala data makmal membantu pembangun menghasilkan semula dan mendiagnosis masalah prestasi.
2. Bagaimanakah saya boleh menambah baik skor Core Web Vitals saya?
Anda boleh menambah baik Core Web Vitals dengan mengoptimumkan imej, mengurangkan JavaScript yang tidak diperlukan, meningkatkan masa tindak balas pelayan, mendayakan caching dan mengelakkan anjakan susun atur yang tidak dijangka.
