Teras Web Vitals — Kini Dibina-n pada Chrome

Adakah anda tertanya-tanya apakah nombor ini dalam DevTools?

Awal tahun ini, Google memperkenalkan pratonton dalam penyemak imbas Core Web Vitals dalam DevTools. Artikel ini menyelami lebih mendalam tentang Core Web Vitals (CWV), sebab ia penting dan bagaimana kami boleh menambah baiknya.

Core Web Vitals (CWV) ialah tambahan baharu pada tab prestasi Google Chrome. CWV ialah satu set metrik yang Google gunakan untuk menilai keseluruhan pengalaman pengguna halaman web. Mereka menumpukan pada tiga aspek utama prestasi:

Cat Kandungan Terbesar (LCP)

LCP ialah ukuran seberapa cepat halaman web dimuatkan. LCP yang pantas menunjukkan bahawa pengguna boleh mula berinteraksi dengan cepat dengan kandungan paling penting pada halaman.

Mengikut dokumen:

Untuk memberikan pengalaman pengguna yang baik, tapak harus berusaha untuk mempunyai LCP selama 2.5 saat atau kurang untuk sekurang-kurangnya 75% daripada lawatan halaman.

Amalan Terbaik untuk mengoptimumkan LCP:

• Optimumkan imej dan kecilkan saiz failnya.
• Meminimumkan sumber menyekat pemaparan.
• Manfaatkan cache penyemak imbas.
• Tingkatkan masa respons pelayan.
• Gunakan CDN.
• Ketahui lebih lanjut di sini.

Cat Interaktif (INP)

INP ialah ukuran responsif halaman semasa interaksi seperti mengklik butang atau menaip borang. INP yang pantas menunjukkan bahawa halaman itu responsif dan tidak berasa lembap atau tidak bertindak balas.

Mengikut dokumen:

Untuk memberikan pengalaman pengguna yang baik, tapak web harus berusaha untuk mempunyai Interaksi dengan Cat Seterusnya sebanyak 200 milisaat atau kurang.

Amalan Terbaik untuk Mengoptimumkan INP:

• Meminimumkan masa pelaksanaan JavaScript.
• Elakkan tugas panjang yang menyekat urutan utama.
• Utamakan tugas kritikal dan tangguhkan tugas yang tidak kritikal.
• Optimumkan pengendalian acara dan pemprosesan input.
• Ketahui lebih lanjut di sini.

Anjakan Reka Letak Kumulatif (CLS)

CLS ialah ukuran kestabilan visual halaman, menilai kekerapan elemen beralih secara tidak dijangka selepas halaman dimuatkan. Contoh reka letak yang tidak dijangka boleh didapati di sini.

CLS yang rendah menunjukkan bahawa halaman itu secara visual stabil dan tidak mengalami perubahan reka letak yang tidak dijangka yang boleh mengganggu pengalaman pengguna. Menurut dokumen:

Untuk memberikan pengalaman pengguna yang baik, tapak harus berusaha untuk mendapatkan skor CLS 0.1 atau kurang.

Amalan Terbaik untuk mengoptimumkan CLS:

• Rizab ruang untuk kandungan dinamik.
• Elakkan imej tanpa dimensi tertentu.
• Gunakan paparan fon: tukar fon.
• Meminimumkan anjakan reka letak yang dicetuskan JavaScript.
• Ketahui lebih lanjut di sini.

Mengapakah Core Web Vitals penting?

Pengalaman Pengguna: Pengalaman pengguna yang baik adalah penting untuk kejayaan tapak web. Core Web Vitals secara langsung memberi kesan kepada cara pengguna melihat prestasi dan kebolehgunaan tapak web.

Kedudukan Enjin Carian: Google telah menyatakan bahawa Core Web Vitals ialah faktor kedudukan. Tapak web dengan skor Core Web Vital yang lemah mungkin mempunyai kedudukan yang lebih rendah dalam hasil carian.

Kadar Penukaran: Tapak web yang pantas dan stabil berkemungkinan besar menukar pelawat kepada pelanggan.

Kesimpulan:

Dengan memfokuskan pada menambah baik Core Web Vitals, anda boleh mencipta pengalaman pengguna yang lebih baik, meningkatkan kedudukan enjin carian tapak web anda dan meningkatkan kadar penukaran tapak web anda.

Atas ialah kandungan terperinci Teras Web Vitals — Kini Dibina-n pada Chrome. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!