Pengoptimuman Prestasi Web & Lighthouse · Pelajaran

Pendalaman LCP, FID, CLS

Analisis Largest Contentful Paint (LCP), First Input Delay (FID) dan Cumulative Layout Shift (CLS) secara terperinci, berserta teknik pengoptimumannya.

Pelajaran 2 daripada 412 langkah

Pendalaman LCP, FID, CLS ialah pelajaran Pengoptimuman Prestasi Web & Lighthouse percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pengoptimuman Prestasi Web & Lighthouse, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pengoptimuman Prestasi Web & Lighthouse merangkumi sejumlah 4 pelajaran.

Menyelami Vital Web Teras

Selamat datang ke penerokaan yang lebih mendalam tentang Vital Web Teras! Metrik ini penting untuk memahami dan meningkatkan pengalaman pengguna laman web anda.

Dalam pelajaran ini, kita akan menganalisis Cat Kandungan Terbesar (LCP), Kelewatan Input Pertama (FID) dan Anjakan Reka Letak Terkumpul (CLS). Anda akan mempelajari perkara yang diukur oleh setiap metrik, sebab metrik tersebut penting dan teknik praktikal untuk mengoptimumkannya.

Cat Kandungan Terbesar (LCP)

Cat Kandungan Terbesar (LCP) mengukur masa yang diperlukan untuk elemen kandungan terbesar yang kelihatan dalam ruang pandang dipaparkan. Anggaplah ia sebagai ukuran seberapa pantas pengguna melihat kandungan utama halaman anda.

Skor LCP yang baik ialah 2.5 saat atau kurang.
Sebarang nilai melebihi 4 saat dianggap lemah.

LCP ialah petunjuk utama kelajuan pemuatan yang dirasakan bagi halaman anda.

Apakah yang Dikira untuk LCP?

Tidak semua elemen menyumbang kepada LCP. Biasanya, imej terbesar atau blok teks terbesar yang kelihatan apabila halaman mula-mula dimuatkan ialah elemen LCP. Elemen LCP yang biasa termasuk:

Elemen <img>
Elemen <video> (menggunakan imej poster)
Elemen dengan imej latar belakang yang dimuatkan melalui url()
Elemen teks peringkat blok yang mengandungi nod teks (contohnya, <h1>, <p>)

Mengetahui elemen LCP anda ialah langkah pertama untuk mengoptimumkannya!

Mengoptimumkan LCP: Mempercepat Sumber

Faktor utama bagi LCP ialah seberapa pantas pelayar anda boleh mendapatkan dan memaparkan sumber penting, khususnya imej dan fon. Berikut ialah strategi yang biasa digunakan:

Muatkan awal imej penting: Gunakan <link rel="preload"> untuk memberitahu pelayar supaya mendapatkan sumber berkeutamaan tinggi lebih awal.
Optimumkan imej: Mampatkan imej, gunakan format moden (WebP, AVIF) dan gunakan imej responsif.
Minimumkan sumber yang menyekat pemaparan: Kurangkan atau tangguhkan CSS dan JavaScript yang menghalang halaman daripada dipaparkan dengan pantas.

Mari lihat contoh pemuatan awal imej utama:

<!DOCTYPE html>
<html>
<head>
  <title>LCP Preload Demo</title>
  <!-- Preload the hero image to fetch it early -->
  <link rel="preload" href="https://via.placeholder.com/800x450.webp" as="image">
  <style>
    body { margin: 0; font-family: sans-serif; }
    img { max-width: 100%; height: auto; display: block; }
    h1 { padding: 10px; }
  </style>
</head>
<body>
  <h1>Welcome to Our Site!</h1>
  <!-- The actual image will render faster due to preload -->
  <img src="https://via.placeholder.com/800x450.webp" alt="Important Hero Image" width="800" height="450">
  <p>This image is likely the LCP element. Preloading helps it appear faster.</p>
</body>
</html>

Kelewatan Input Pertama (FID)

First Input Delay (FID) mengukur tempoh dari saat pengguna berinteraksi dengan halaman buat kali pertama (contohnya, mengklik butang atau mengetik pautan) hingga penyemak imbas benar-benar dapat mula memproses interaksi tersebut.

Ukuran ini berkaitan dengan responsif dan kepantasan halaman anda bertindak balas terhadap input pengguna. Ukuran ini tidak mengukur tempoh pelaksanaan pengendali acara, sebaliknya hanya kelewatan sebelum pengendali itu boleh bermula.

Skor FID yang baik ialah 100 milisaat atau kurang.
Sebarang nilai melebihi 300 milisaat dianggap lemah.

Sebab FID Tinggi: Utas Utama Sibuk

FID yang tinggi selalunya bermaksud utas utama penyemak imbas sedang sibuk melakukan kerja lain, biasanya melaksanakan JavaScript, dan tidak dapat bertindak balas terhadap input pengguna dengan segera.

Punca yang lazim termasuk:

Tugas JavaScript yang panjang: Skrip berat yang berjalan untuk tempoh yang lama lalu menyekat utas utama.
Himpunan JavaScript yang besar: Lebih banyak kod bermaksud lebih banyak masa diperlukan untuk menghuraikan, menyusun dan melaksanakannya.
Skrip pihak ketiga: Iklan, analitis atau skrip luaran lain boleh menggunakan banyak masa utas utama.

Mengoptimumkan FID: Membebaskan Utas Utama

Untuk meningkatkan FID, anda perlu mengurangkan tempoh utas utama disekat. Berikut ialah caranya:

Pecahkan tugas yang panjang: Bahagikan operasi JavaScript yang besar kepada bahagian kecil yang tak segerak.
Tangguhkan atau laksanakan JS secara tak segerak: Gunakan atribut defer atau async untuk skrip yang tidak penting bagi pemaparan awal.
Kurangkan muatan JavaScript: Kecilkan, lakukan tree-shaking dan pecahkan kod dalam himpunan JavaScript anda.
Gunakan Pekerja Web: Pindahkan tugas yang memerlukan pengiraan intensif ke utas latar belakang supaya utas utama kekal lapang.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) mengukur kestabilan visual sesebuah halaman. Ukuran ini mengira jumlah perubahan reka letak yang tidak dijangka sepanjang hayat halaman.

Perubahan yang tidak dijangka berlaku apabila kedudukan mula sesuatu elemen yang kelihatan berubah dari satu bingkai yang dipaparkan ke bingkai seterusnya. Keadaan ini boleh sangat mengecewakan pengguna!

Skor CLS yang baik ialah 0.1 atau kurang.
Sebarang nilai melebihi 0.25 dianggap lemah.

Punca Lazim CLS

Perubahan reka letak sering berlaku apabila kandungan dimuatkan atau berubah secara dinamik tanpa ruang diperuntukkan terlebih dahulu. Punca utama termasuk:

Imej atau video tanpa dimensi: Penyemak imbas tidak mengetahui jumlah ruang yang perlu diperuntukkan sehingga media dimuatkan.
Kandungan yang disuntik secara dinamik: Iklan, sepanduk atau widget yang muncul selepas halaman mula dipaparkan.
Fon Web yang menyebabkan FOIT/FOUT: Fon yang dimuatkan lewat boleh menyebabkan teks disusun semula atau hilang lalu muncul kembali.
Tindakan yang menunggu respons rangkaian: Kandungan yang berubah selepas panggilan API selesai.

Mengoptimumkan CLS: Reka Letak Stabil

Mencegah CLS bergantung pada usaha memperuntukkan ruang dan memastikan elemen tidak bergerak tanpa dijangka. Berikut ialah beberapa tekniknya:

Tentukan dimensi imej/video: Sentiasa gunakan atribut width dan height, atau CSS aspect-ratio.
Peruntukkan ruang untuk iklan/sisipan: Gunakan CSS min-height atau elemen pemegang tempat.
Elakkan menyisipkan kandungan di atas kandungan sedia ada: Terutamanya selepas halaman dipaparkan buat kali pertama.
Pramuat fon dan gunakan font-display: Gunakan font-display: optional atau swap untuk mengurus kelakuan pemuatan fon.

Berikut ialah contoh cara menetapkan dimensi imej dapat mencegah CLS:

<!DOCTYPE html>
<html>
<head>
  <title>CLS Prevention Demo</title>
  <style>
    body { font-family: sans-serif; }
    .container { width: 300px; margin: 20px auto; border: 1px solid #ccc; padding: 10px; }
    img { max-width: 100%; height: auto; display: block; margin-bottom: 10px; }
  </style>
</head>
<body>
  <div class="container">
    <p>This content is stable.</p>
    <!-- Image with specified width and height prevents layout shift -->
    <img src="https://via.placeholder.com/300x200" alt="Placeholder" width="300" height="200">
    <p>The content below the image does not jump around.</p>
  </div>
</body>
</html>

Semakan Metrik Teras Web

Mari uji pemahaman anda tentang Metrik Teras Web dan teknik pengoptimumannya.

Jawab dalam pelajaran interaktif

Ulang Kaji: LCP, FID, CLS

Anda telah berjaya mendalami Metrik Teras Web!

LCP (Largest Contentful Paint): Mengukur kelajuan pemuatan yang dirasai pengguna dengan memfokuskan pada elemen kandungan terbesar. Optimumkan dengan pramuat, mengoptimumkan imej dan mengurangkan masa respons pelayan.
FID (First Input Delay): Mengukur kebolehinteraktifan dengan memfokuskan pada kelewatan sebelum penyemak imbas bertindak balas terhadap input pengguna. Optimumkan dengan meminimumkan dan memecahkan tugas JavaScript.
CLS (Cumulative Layout Shift): Mengukur kestabilan visual. Optimumkan dengan memperuntukkan ruang untuk kandungan dinamik, menentukan dimensi imej dan mengurus pemuatan fon.

Dengan memahami dan menambah baik metrik ini, anda membantu menghasilkan pengalaman pengguna yang jauh lebih baik!

Percuma untuk bermula

Pelajari Pengoptimuman Prestasi Web & Lighthouse dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pendalaman LCP, FID, CLS” percuma?

Ya — teks penuh “Pendalaman LCP, FID, CLS” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pengoptimuman Prestasi Web & Lighthouse, tingkat taraf kepada CoddyKit PRO. Kursus Pengoptimuman Prestasi Web & Lighthouse merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pendalaman LCP, FID, CLS”?

Analisis Largest Contentful Paint (LCP), First Input Delay (FID) dan Cumulative Layout Shift (CLS) secara terperinci, berserta teknik pengoptimumannya. Anda berlatih Pengoptimuman Prestasi Web & Lighthouse menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pengoptimuman Prestasi Web & Lighthouse?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pengoptimuman Prestasi Web & Lighthouse di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Pendalaman LCP, FID, CLS” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pengoptimuman Prestasi Web & Lighthouse ini?

Ya. Setiap pelajaran Pengoptimuman Prestasi Web & Lighthouse menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Pengoptimuman Prestasi Web & Lighthouse