Inti H5 Page CLS Pengoptimuman adalah untuk memastikan susun atur yang stabil dan mengelakkan anjakan apabila elemen dimuatkan. Masalah biasa termasuk imej yang tidak diselesaikan, penyusunan semula fon, pop-up pengiklanan, dan lain-lain. Isu CLS yang tinggi dapat dikenalpasti melalui devtools Chrome, rumah api dan alat rum. 1. Tinggalkan ruang untuk gambar dan video; 2. Gunakan font-paparan: swap untuk mengurangkan penyusunan semula fon; 3. Kelewatan memuatkan iklan dan rizab tempat simpanan; 4. Elakkan memasukkan ketulan besar kandungan selepas memuatkan. Anda boleh terus memantau dan mengoptimumkan hasil dengan bantuan pandangan PagesPeed, plug-in Chrome dan mata yang dikebumikan di hadapan.

Inti pengoptimuman CLS halaman H5 adalah: Buat susun atur halaman sebagai stabil yang mungkin dan elakkan anjakan secara tiba -tiba. Terutama apabila pengguna mudah alih meleret untuk melayari, jika kandungan tiba -tiba "melompat", ia bukan sahaja akan mempunyai pengalaman yang buruk, tetapi juga mempengaruhi penarafan prestasi.

Apa itu CLS? Mengapa penting?

Peralihan susun atur kumulatif adalah metrik yang digunakan oleh Google untuk mengukur kestabilan visual halaman. Ringkasnya, ia adalah sejauh mana kedudukan elemen berubah secara tidak disangka -sangka semasa proses pemuatan halaman. Semakin tinggi nilai, semakin "menggoncang" halaman dan semakin buruk pengalaman pengguna.

Dalam halaman H5, masalah biasa termasuk susun atur selepas imej dimuatkan, pemuatan fon menyebabkan penyusunan semula teks, dan penyisipan secara tiba-tiba iklan atau pop timbul. Masalah ini akan meningkatkan nilai CLS dengan ketara dan menjejaskan skor halaman.

Bagaimana mengenal pasti masalah CLS yang tinggi?

Untuk mengoptimumkan CLS, anda mesti terlebih dahulu dapat menemuinya dengan tepat. Terdapat beberapa cara untuk:

• Panel Prestasi Chrome Devtools : Secara langsung melihat rekod CLD dan anda dapat melihat masa dan kesan setiap acara offset susun atur.
• Laporan Mercusuar : Jalankan audit rumah api dan jelas akan memberikan skor CLS dan cadangan peningkatan.
• Pemantauan Pengguna Sebenar (RUM) : Gunakan alat seperti Sentry dan Datadog untuk mengumpul data CLS pengguna dalam talian, yang lebih dekat dengan adegan sebenar.

Sebaik sahaja anda mendapati bahawa CLS terlalu tinggi, anda boleh mencari sebab tertentu.

Kaedah pengoptimuman biasa

1. Buat ruang untuk gambar dan video

Saiz yang tidak ditentukan sebelum imej yang dimuatkan akan menyebabkan rendering itu dibuang semula selepas rendering selesai. Penyelesaiannya adalah mudah: Tambah atribut lebar dan ketinggian ke tag IMG, atau tetapkan nisbah aspek tetap dengan CSS.

 <img src = "contoh.jpg" width = "300" ketinggian = "200" alt = "rajah contoh">

Jika ia adalah reka bentuk yang responsif, anda boleh menggunakan aspect-ratio untuk mengekalkan skala:

 img {
  Lebar: 100%;
  aspek nisbah: 3/2;
}

2. Elakkan menyusun semula disebabkan oleh fon

Fon web dimuatkan perlahan -lahan, dan penyemak imbas boleh mula -mula membuat fon lalai dan menggantikannya selepas fon tersuai dimuatkan, menyebabkan lompatan teks. Anda boleh menggunakan font-display: swap untuk mengurangkan kesan ini:

 @font-face {
  font-family: 'customfont';
  src: url ('customfont.woff2') format ('woff2');
  Font-diname: swap;
}

Walaupun swap akan menukar fon sekali, ia tidak akan menghalang rendering, dan pengalaman keseluruhan akan menjadi lebih lancar.

3. AD/Embed kandungan kelewatan Memuatkan dan Rizab Pemegang Sedang

Iklan, iframes dan kandungan lain sering dimuatkan secara dinamik, yang boleh mengganggu susun atur asal. Terdapat dua penyelesaian:

• Menempah kawasan kosong dengan ketinggian tetap sebelum memuatkan
• Gunakan pemerhati persimpangan untuk melambatkan pemuatan dan meminta sumber apabila pengguna akan melihatnya

Contohnya:

 <div class = "ad-placeholder" style = "Height: 200px;"> </div>

Kemudian dengar di JS dan masukkan Viewport sebelum memuatkan kandungan iklan.

4. Jangan masukkan potongan kandungan besar setelah halaman dimuatkan

Sebagai contoh, beberapa tingkap pop-up dan butang terapung dimasukkan hanya selepas DOM dimuatkan, yang boleh menyebabkan susun atur guncangan. Cadangan:

• Tulis struktur terlebih dahulu, gunakan CSS untuk mengawal paparan dan sembunyikannya
• Atau pastikan aliran kandungan utama tidak terjejas semasa memasukkan

Pemantauan yang dibantu dan berterusan alat

Sebagai tambahan kepada pengoptimuman manual, beberapa alat juga boleh digunakan untuk mengotomatisasi pengesanan dan pembaikan:

• PagesPeed Insights : Menyediakan Cadangan Pengoptimuman Berkaitan CLS
• Web Vitals Chrome Plugin : Lihat halaman CLS Nilai dalam masa nyata
• Pelaporan titik depan : kerap mengumpul data CLS dari sisi pengguna, yang memudahkan penjejakan jangka panjang

Mengoptimumkan CLS bukan transaksi satu kali, tetapi proses peningkatan berterusan. Setiap kali ciri baru dilancarkan, sebaiknya dijalankan Lighthouse untuk menyemaknya.

Pada dasarnya semua ini tidak rumit tetapi mudah diabaikan.

Atas ialah kandungan terperinci Mengoptimumkan Peralihan Layout Kumulatif H5 (CLS). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!