WordPress ialah sistem pengurusan kandungan (CMS) paling popular di planet ini, hasil daripada kemudahan penggunaan dan fleksibilitinya. Pilihan penyesuaian WordPress yang kaya membolehkan penerbit mencipta laman web yang sangat menarik minat khalayak mereka.
Namun begitu, meskipun terdapat set ciri CMS yang hebat, masih boleh mewujudkan laman web yang kelihatan hebat tetapi menghadapi kesukaran untuk meningkatkan bilangan khalayak. Walaupun audit kandungan sememangnya dinasihatkan, penerbit harus mempertimbangkan audit teknikal terlebih dahulu untuk memastikan tiada apa-apa yang berlaku di latar belakang laman web mereka yang menghalang jangkauan mereka.
Antara metrik prestasi yang paling penting yang harus mereka ukur ialah Google Core Web Vitals (CWV).
Metrik ini, yang ditukar oleh Google menjadi isyarat kedudukan sejurus selepas pengenalannya pada tahun 2020 , memainkan peranan penting dalam mengukur pengalaman pengguna (UX) halaman web.
CWV merangkumi tiga metrik yang berbeza namun berkaitan:
- Cat Berisi Terbesar (LCP)
- Kelewatan Input Pertama (FID)
- Anjakan Susun Atur Kumulatif (CLS)
Isyarat-isyarat ini masing-masing mengukur kelajuan beban, interaktiviti dan kestabilan visual halaman web yang dirasakan.
Mari kita lihat dengan lebih dekat CWV ini untuk memahami mengapa ia begitu penting, cara mengukurnya dengan tepat dan kemudian mempertimbangkan langkah-langkah yang boleh diambil untuk meningkatkan skornya.
Apakah Metrik Vitals Web Teras?
Tiga Core Web Vitals (CWV) Google menilai kualiti pengalaman pengguna (UX) laman web, memberikan pandangan tentang prestasi halaman web dari segi kelajuan pemuatan, interaktiviti dan kestabilan visual.
- Cat Kandungan Terbesar (LCP): Ini mengukur kelajuan pemuatan laman web dan secara khusus merujuk kepada titik dalam proses pemuatan apabila kandungan utama berkemungkinan telah dimuatkan.
Ambil, sebagai contoh, catatan blog tentang gajet teknologi baharu yang popular. Jika imej utama — mungkin gambar gajet — dan teks pengenalan dimuatkan dengan cepat (dalam masa 2.5 saat ialah ambang yang disyorkan Google untuk LCP), pelawat lebih cenderung untuk kekal, membaca dan terlibat dengan kandungan tersebut.
Sebaliknya, masa pemuatan yang perlahan boleh menyebabkan pelawat meninggalkan halaman, yang boleh mengakibatkan penurunan trafik.
- Kelewatan Input Pertama (FID): Ini mewakili gambaran ringkas tentang sejauh mana responsif halaman web semasa interaksi pengguna pertama, seperti klik pautan atau tekan butang, dengan mengukur masa antara tindakan ini dan bila pelayar boleh mula memproses pengendali peristiwa sebagai tindak balas.
Pertimbangkan butang "Langgan Sekarang". Jika pelawat mengklik butang ini dan mengalami kelewatan sebelum tapak bertindak balas (apa-apa sahaja yang melebihi 100 milisaat dianggap sebagai hasil yang buruk), pelawat mungkin menganggap tapak tersebut tidak responsif, yang membawa kepada pengalaman pengguna yang buruk dan berpotensi kehilangan langganan.
Google sedang bersedia untuk memperkenalkan metrik baharu yang dipanggil Interaksi dengan Next Paint (INP) pada Mac 2024 yang akan menggantikan FID sebagai CWV.
- Anjakan Susun Atur Kumulatif (CLS): Ini mengukur kestabilan visual, atau jumlah anjakan susun atur yang tidak dijangka bagi kandungan yang kelihatan pada halaman web.
Jika laman web berita mempunyai teks, imej atau iklan yang tiba-tiba beralih apabila halaman dimuatkan sepenuhnya, pelawat mungkin kehilangan tempat mereka atau secara tidak sengaja mengklik pada pautan atau butang yang tidak diingini. Ini merupakan pengalaman yang mengecewakan dan mungkin menghalang mereka daripada kembali ke laman web ini.
Sumber: Web.dev - Interaksi dengan Next Paint (INP): Ini menilai keseluruhan daya tindak balas halaman terhadap interaksi pengguna. Ia memantau kependaman semua interaksi tetikus dan papan kekunci sepanjang lawatan pengguna ke halaman web, dengan interaksi terpanjang yang diperhatikan (mengabaikan outlier) membentuk nilai INP akhir.
Mencapai skor INP yang ideal mungkin menimbulkan cabaran disebabkan oleh kepelbagaian yang luas dalam keupayaan peranti. Walau bagaimanapun, masih munasabah bagi penerbit untuk menyasarkan skor INP dalam persentil ke-75 pemuatan halaman, yang dibahagikan merentas peranti mudah alih dan desktop.
Laman web dengan INP pada atau di bawah 200 milisaat dianggap mempunyai daya tindak balas yang baik. Jika INP adalah antara 200 milisaat dan 500 milisaat, maka daya tindak balas tapak memerlukan sedikit usaha. Akhir sekali, jika INP lebih besar daripada 500 milisaat, daya tindak balasnya dianggap lemah.
Sumber: Web.dev
Mengapakah Skor Vitals Web Teras Penting?
Pengguna menuntut kelajuan pemuatan yang pantas, interaktiviti yang lancar dan persekitaran yang stabil secara visual, dan penilaian Core Web Vitals adalah penting untuk membantu penerbit memahami prestasi laman web mereka dalam hal ini.
Google mendapati bahawa kebarangkalian lantunan melonjak sebanyak 32% apabila masa pemuatan halaman meningkat daripada 1 saat kepada 3 saat. Sementara itu, laman berita yang lulus ujian CWV menyaksikan kadar pengabaian sebanyak 22% lebih rendah berbanding laman berita yang gagal.
1. Mempengaruhi Hasil Carian
CWV bertindak sebagai kayu pengukur bagi Google untuk mengukur prestasi sesebuah laman web. Ia memberikan Google pandangan tentang sejauh mana sesebuah laman web melayani pengguna, yang secara langsung memberi kesan kepada kedudukan laman web tersebut dalam hasil carian.
Secara ringkasnya, skor CWV yang lebih baik dapat membantu laman web WordPress muncul lebih tinggi dalam kedudukan carian Google.
2. Tingkatkan Trafik
Laman web dengan CWV yang dioptimumkan boleh menyaksikan peningkatan trafik. Contohnya, laman web panduan kerjaya popular LearnHowToBecome.org telah mengurangkan purata masa muatnya daripada 7 kepada 2.9 saat dan menyaksikan peningkatan trafik bulanannya daripada 500,000 kepada 750,000.
3. Tingkatkan Pendapatan
Pengguna kurang berkemungkinan membaca artikel jika mereka mengalami masa muat yang lama (LCP), tindak balas yang tertangguh terhadap interaksi mereka (FID) atau susun atur yang tidak stabil (CLS). Laman web yang cemerlang dalam ketiga-tiga metrik bukan sahaja menarik perhatian pengguna tetapi juga boleh membawa mereka ke corong penukaran, yang akhirnya memacu lebih banyak pendapatan untuk perniagaan.
Pada dasarnya, metrik CWV bukan sekadar nombor. Ia memberikan pandangan tentang prestasi laman web dari perspektif pengguna, membolehkan jenama tersebut menambah baik bidang yang paling penting bagi pelawat mereka.
Cara Memeriksa Skor Vitals Web Teras Laman WordPress
Memahami cara menyemak skor CWV adalah langkah pertama ke arah meningkatkan prestasi laman web. Terdapat dua cara untuk mengukur skor ini, sama ada secara dalaman menggunakan alatan pihak pertama Google atau dengan bantuan pakar WordPress yang mempunyai pengalaman dalam mengoptimumkan metrik prestasi.
Bagi mereka yang memilih untuk menggunakan kaedah dalaman, adalah penting untuk memahami bahawa pengukuran CWV memerlukan penggunaan campuran data lapangan dan data makmal.
Data lapangan ialah data pengalaman pengguna sebenar, yang dikumpulkan daripada persekitaran dunia sebenar. Data jenis ini memberikan pemahaman yang lebih baik tentang bagaimana pengguna berinteraksi dengan laman web merentasi pelbagai peranti, sambungan dan keadaan dunia sebenar yang lain.
Contohnya, jika pengguna terutamanya mengakses laman WordPress pada peranti mudah alih pada rangkaian 3G, data lapangan boleh mendedahkan isu prestasi yang mungkin tidak muncul dalam persekitaran makmal terkawal.
Sebaliknya, data makmal dijana dalam persekitaran terkawal dan digunakan untuk menyahpepijat isu prestasi. Ia tidak merangkumi spektrum penuh pengalaman pengguna dunia sebenar tetapi memberikan hasil yang boleh dihasilkan semula untuk penyahpepijatan dan pengoptimuman prestasi laman web.
Menggunakan alat seperti Lighthouse dalam persekitaran pembangunan boleh mensimulasikan rangkaian perlahan untuk mengenal pasti kesesakan prestasi.
Semua alatan pembangun popular Google, daripada Google Search Console (GSC) hingga Google Analytics (GA) boleh mengukur skor CWV.
Sumber: Web.dev
Walau bagaimanapun, untuk hari ini, kita akan melihat PageSpeed Insights atas sebab mudah ia merupakan salah satu alat paling mudah dan komprehensif untuk bermula.
Cara Menemui dan Meningkatkan FID dan TBT Dengan PageSpeed Insights
Sehingga ke tahap ini, kita telah membincangkan tentang Kelewatan Input Pertama (FID) sebagai cara untuk mengukur daya tindak balas sesebuah tapak, tetapi dalam bahagian seterusnya, kita sebenarnya akan melihat kedua-dua FID dan Jumlah Masa Sekatan (TBT).
Kedua-duanya merupakan ukuran interaksi pengguna dan mengukur serta mengoptimumkan kedua-duanya boleh memberi hasil positif untuk UX laman web.
1. Apakah TBT dan Bagaimanakah Ia Berbeza Daripada FID
TBT menunjukkan jangka masa di mana laman web terlalu sibuk untuk bertindak balas terhadap interaksi pengguna, seperti klik butang. TBT mengukur jumlah tempoh halaman web "disekat" — yang serupa dengan halaman web yang mengatakan: "Tunggu, saya sibuk" kerana ia memproses tugas lain.
TBT ialah metrik makmal yang digunakan untuk penilaian prestasi semasa fasa pembangunan, manakala FID ialah metrik lapangan yang memberikan pandangan tentang pengalaman pengguna sebenar.
Dalam senario di mana pengguna mengklik butang pada halaman web, FID mengukur kelewatan yang berlaku antara tindakan pengguna tersebut dan respons laman web.
Kedua-dua metrik ini saling berkaitan — jika penerbit berjaya mengoptimumkan TBT semasa ujian, mereka mungkin akan melihat kesan positif terhadap skor FID dalam keadaan dunia sebenar.
2. Cara Mengukur FID dan TBT dengan PageSpeed Insights
Untuk mengukur metrik ini dengan PageSpeed Insights, ikuti langkah berikut:
- Navigasi ke alat PageSpeed Insights
- Analisis halaman web yang dikehendaki
- Tatal untuk mencari skor FID dan TBT tapak
3. Cara Meningkatkan FID dan TBT Laman WordPress
Memperbaiki FID dan TBT melibatkan pengoptimuman daya tindak balas dan interaktiviti tapak. Berikut adalah beberapa petua:
- Memampatkan dan mengoptimumkan kod CSS dan JavaScript: Ini membantu mengurangkan saiz fail dan meningkatkan daya tindak balas laman web. Banyak alat, seperti WPRocket, akan menawarkan tab pengoptimuman fail yang menawarkan untuk memampatkan kod, yang berpotensi membawa kepada peningkatan yang ketara dalam skor FID dan TBT.
- Singkirkan tugasan panjang: Tugasan panjang ialah tugasan yang menyekat thread utama selama 50 milisaat atau lebih. Membahagikan tugasan panjang ini kepada tugasan tak segerak yang lebih kecil boleh membebaskan thread utama dan meningkatkan kedua-dua FID dan TBT.
- Optimumkan pelaksanaan JavaScript: Penghuraian, penyusunan dan pelaksanaan JavaScript boleh menjadi penyumbang utama kepada FID dan TBT yang tinggi. Menangguhkan JavaScript yang tidak digunakan, memuatkan fail besar yang diperlukan secara asinkron, meminimumkan poliisi yang tidak digunakan dan memastikan JavaScript dilaksanakan dengan cekap dapat mengurangkan FID dan TBT.
- Manfaatkan tetapan prestasi tema WordPress: Banyak tema WordPress dilengkapi dengan tetapan prestasi terbina dalam. Manfaatkan sepenuhnya tetapan ini untuk mengoptimumkan laman web.
- Pramuat dan pascamuat aset: Teknik seperti pemuatan malas imej, menangguhkan CSS bukan kritikal, pramuat aset kritikal dan prapengambilan sumber pihak ketiga boleh meningkatkan prestasi TBT dan, seterusnya, menambah baik FID juga.
Petua Profesional: Semasa mengoptimumkan, fokus pada keseluruhan UX dan bukannya skor metrik individu. Pendekatan holistik ini boleh menghasilkan hasil yang lebih baik dalam meningkatkan prestasi tapak.
Meningkatkan skor FID merupakan proses yang kompleks kerana ia berkaitan dengan kod laman web. Oleh itu, perkara pertama yang perlu dilakukan oleh penerbit ialah mengehadkan pelaksanaan JavaScript yang berat dan menghapuskan fail JS yang tidak perlu, membolehkan pelayar bertindak balas dengan cepat terhadap interaksi pengguna.
Dengan menangani isu-isu utama yang mempengaruhi interaktiviti laman WordPress, penerbit boleh meningkatkan FID dan TBT dengan berkesan, sekali gus mempertingkatkan keseluruhan UX dan prestasi.
Cara Menemui dan Meningkatkan LCP dengan PageSpeed Insights
Skor LCP yang lemah bermakna pelawat perlu menunggu lebih lama untuk kandungan dipaparkan, yang biasanya membawa kepada kadar lantunan yang lebih tinggi.
1. Apakah Unsur LCP?
LCP menilai masa yang diperlukan untuk kandungan utama halaman web dimuatkan: lebih cepat kandungan ini muncul pada skrin, lebih baik UX.
Penyumbang utama kepada skor LCP kebanyakannya adalah elemen yang agak besar, seperti elemen imej, elemen video atau elemen dengan imej latar belakang yang dimuatkan melalui fungsi URL.
Selain itu, elemen peringkat blok — seperti tajuk, subtajuk dan jadual, serta elemen berasaskan blok seperti teks — juga memainkan peranan penting dalam membentuk LCP.
2. Cara Mengukur LCP dengan PageSpeed Insights
Untuk mengukur skor LCP, ikuti langkah berikut:
- Navigasi ke Wawasan PageSpeed
- Analisis halaman web yang dikehendaki
- Tatal ke bahagian “Diagnosis isu prestasi”
- Tetapkan “Tunjukkan audit yang berkaitan dengan” kepada LCP
- Pengguna kini boleh melihat Peluang dan Diagnostik yang berkaitan.
Penerbit juga boleh mengenal pasti elemen LCP dalam laporan PageSpeed Insights dengan mencari cadangan elemen Cat Kandungan Terbesar dalam bahagian Diagnostik dan mengembangkannya untuk butiran lanjut.
3. Cara Meningkatkan LCP Laman WordPress
Menambah baik LCP melibatkan beberapa langkah, setiap satunya menyumbang kepada pengalaman laman web yang lebih pantas dan diperkemas. Berikut adalah beberapa strategi utama:
- Optimumkan elemen LCP: Langkah ini bergantung pada sifat elemen LCP. Contohnya, elemen LCP yang merupakan gambar boleh dimampatkan (tanpa menjejaskan kualiti). Penyelesaian lain termasuk pramuat imej atas lipatan dan ruang letak, menayangkan imej responsif menggunakan srcset bergantung pada saiz skrin pengguna dan memastikan tidak memuatkan imej atas lipatan secara lazyload.
- Meningkatkan masa tindak balas pelayan: LCP mengukur masa dari pengguna tiba di halaman sehingga pelayar mereka menerima respons daripada pelayan. Melabur dalam pelan pengehosan web yang berkualiti tinggi, melaksanakan mekanisme caching yang betul pada peringkat pelayan dan pelayar serta beralih kepada platform CMS yang mantap seperti WordPress boleh membantu mengurangkan masa tindak balas pelayan.
- Kurangkan elemen penyekat render: Elemen penyekat render seperti HTML, fon dan CSS adalah fail statik yang diproses oleh pelayar terlebih dahulu sebelum memuatkan kandungan. Sumber penyekat render yang lebih sedikit bermakna pelayar akan menghabiskan lebih sedikit masa untuk memaparkan elemen ini, mempercepatkan masa pemuatan dan meningkatkan skor LCP. Contohnya, penerbit boleh menggunakan fon ringkas untuk halaman web mereka atau pramuat fon web modular.
- Alih keluar pemalam yang tidak digunakan: Laman WordPress boleh menggunakan pemalam untuk mengurus banyak aspek teknikalnya. Walau bagaimanapun, adalah penting untuk hanya menyimpan pemalam dan ciri-cirinya yang menyumbang secara langsung kepada fungsi laman web, sambil mengalih keluar pemalam yang tidak digunakan. Ini boleh mengurangkan kesesakan laman web dan meningkatkan skor LCP.
Petua Profesional: Caching ialah proses yang hebat yang boleh meningkatkan skor LCP dengan ketara. Laksanakan penyelesaian caching yang menyimpan salinan statik halaman web pada peranti pelawat, menghapuskan keperluan untuk memuat turun data yang sama setiap kali mereka melawati laman web tersebut.
Penting untuk difahami bahawa LCP setakat ini merupakan metrik CWV yang paling mencabar untuk diperbaiki. Ini kerana LCP bergantung pada TTFB (Masa ke Bait Pertama), yang bergantung pada seberapa pantas pelayan bertindak balas. Bergantung pada rangka kerja yang digunakan, adalah sukar untuk mengurangkan masa tindak balas pelayan.
Penerbit perlu ingat bahawa margin penambahbaikan boleh berbeza-beza berdasarkan infrastruktur yang mereka gunakan.
Dengan memberi tumpuan kepada pengoptimuman elemen kandungan halaman utama, meningkatkan masa tindak balas pelayan, mengurangkan masa penyekatan JavaScript dan CSS serta berhati-hati dalam penggunaan pemalam, penerbit boleh meningkatkan skor LCP mereka dengan ketara.
Cara Menemui dan Meningkatkan CLS Dengan PageSpeed Insights
Anjakan Susun Atur Kumulatif (CLS) berkisar tentang kestabilan visual, mengukur sebarang perubahan yang tidak dijangka dalam kandungan visual halaman web semasa ia dimuatkan. Halaman web yang tidak stabil secara visual boleh menghakis UX mereka, menyumbang kepada kadar lantunan.
1. Apakah Elemen CLS?
CLS mengukur kestabilan visual, jadi elemen yang menyumbang kepadanya adalah elemen yang berpotensi berubah kedudukan secara tidak dijangka semasa halaman dimuatkan. Ini boleh jadi imej tanpa dimensi tertentu, iklan, benam dan iframe tanpa dimensi tetap.
Pada asasnya, sebarang elemen yang boleh bergerak semasa halaman dimuatkan boleh menjejaskan skor CLS.
2. Cara Mengukur CLS Dengan PageSpeed Insights
Gunakan PageSpeed Insights untuk mengenal pasti dan mengukur CLS halaman web dengan langkah-langkah berikut:
- Navigasi ke Wawasan PageSpeed
- Analisis halaman web yang dikehendaki
- Tatal ke bahagian “Diagnosis isu prestasi”
- Tetapkan “Tunjukkan audit yang berkaitan dengan” kepada CLS
Pendekatan ini membolehkan kita memberi tumpuan kepada elemen yang bertanggungjawab untuk perubahan susun atur, sekali gus menyediakan titik permulaan untuk penambahbaikan.
3. Cara Meningkatkan CLS Laman WordPress
Meningkatkan CLS laman WordPress melibatkan langkah-langkah strategik yang dapat meningkatkan kestabilan visual halaman dengan ketara:
- Edit susun atur elemen: Semak dan laraskan susun atur elemen untuk memastikan ia tidak beralih semasa pemuatan halaman. Langkah ini akan melibatkan penetapan atribut lebar dan tinggi tertentu untuk imej dan video, dan menempah ruang secara statik untuk iklan atau iframe yang dimuatkan secara perlahan dengan menggunakan ruang letak.
- Gunakan CSS Kritikal atau alih keluar CSS yang tidak digunakan: CSS yang tidak digunakan boleh menyumbang kepada anjakan susun atur. Pertimbangkan untuk melaksanakan CSS Kritikal yang hanya mengandungi gaya yang digunakan di bahagian atas halaman atau alih keluar kod CSS yang berlebihan untuk mengelakkan anjakan yang tidak perlu. Menyelitkan gaya yang lebih kecil dan pramuat gaya penting juga akan membantu meningkatkan CLS.
- Elakkan pemalam Slider: Slider boleh mencetuskan anjakan susun atur disebabkan sifat dinamiknya. Jika boleh, elakkannya.
- Gunakan imej dan saiz pembahagian yang betul: Saiz yang tepat dan penggunaan imej responsif dengan nisbah aspek yang sama dapat mengelakkan elemen daripada beralih semasa halaman dimuatkan. Sentiasa nyatakan saiz elemen ini dalam CDN imej (rangkaian penghantaran kandungan).
- Alihkan CSS daripada editor tema kepada style.css tema anak: Memindahkan CSS kepada tema anak boleh membantu mengurangkan perubahan susun atur dengan memastikan gaya dimuatkan dengan betul.
- Gunakan tema dan plugin yang menggunakan animasi transformasi: Alatan ini mempunyai kesan yang kurang terhadap perubahan susun atur berbanding jenis animasi lain.
Dengan membuat pelarasan ini, pemilik laman WordPress boleh mengurangkan skor CLS halaman mereka dengan ketara, yang membawa kepada UX yang lebih stabil dan menyeronokkan.
Petua Profesional: Laksanakan pemuatan malas untuk imej luar skrin. Strategi ini membenarkan imej dimuatkan hanya apabila ia hendak memasuki viewport, sekali gus mencegah perubahan susun atur yang disebabkan oleh imej yang dimuatkan lewat.
Perlu diingat bahawa CLS ialah metrik berpusatkan pengguna yang penting yang mengukur sejauh mana kandungan tapak telah berubah apabila halaman dimuatkan. Semakin rendah skor CLS, semakin baik pengalaman pengguna.
Akhirnya, peningkatan skor CLS memerlukan pendekatan pelbagai serampang. Pemeriksaan berkala dengan alatan seperti PageSpeed Insights, amalan susun atur yang konsisten dan penggunaan tema dan pemalam yang teliti semuanya boleh menyumbang kepada skor CLS yang lebih rendah dan laman web yang lebih stabil dan mesra pengguna.
Kesimpulan
Penerbit yang mengukur Core Web Vitals (CWV) akan berada pada kedudukan yang lebih baik untuk mengoptimumkan pengalaman pengguna tapak mereka.
Pengoptimuman CWV bukan sahaja akan membantu meningkatkan pengalaman pembaca dengan ketara, malah berbuat demikian juga menyumbang kepada SEO. Halaman yang dimuatkan dengan cepat, stabil secara visual dan bertindak balas dengan cepat terhadap input pengguna bukan sahaja menarik kepada pengguna tetapi juga algoritma enjin carian.
Selain mempelajari selok-belok alat seperti PageSpeed Insights, penerbit juga harus memantau trend penerbitan digital , kemas kini algoritma enjin carian dan pandangan pakar dengan teliti untuk memberikan pengalaman membaca bertaraf dunia secara konsisten.
