Menguasai INP: Cara Memanfaatkan visibilitas konten untuk Meningkatkan Responsif

Ingin tahu rahasia halaman web responsif, UX lebih lancar, dan skor INP bagus?

Ini pekerjaan rendering yang efisien.

Hal ini biasanya dicapai dengan mengontrol rendering konten di luar layar, membebaskan browser dari menjalankan tugas yang tidak segera diperlukan selama pemuatan halaman awal.

Pada baris berikut, Anda akan mempelajari cara memanfaatkan properti CSS visibilitas konten untuk meningkatkan kinerja situs Anda secara signifikan, meningkatkan Data Web Inti, dan meningkatkan pengalaman pengguna.

Baca terus.

Mengukur Responsif dengan Interaksi terhadap Cat Berikutnya (INP)

90% waktu pengguna di suatu halaman dihabiskan setelah halaman dimuat.

Dengan kata lain, sama pentingnya dengan menginvestasikan upaya untuk mempercepat pemuatan laman awal, perilaku situs web Anda setelah pengguna mulai berinteraksi dengannya juga sama pentingnya.

Apakah ini bermasalah? Apakah ini memberikan pengguliran yang mulus? Apakah responsif?

Semua jawaban tersembunyi di balik skor INP Anda.

Interaksi ke Next Paint adalah metrik kinerja yang berpusat pada pengguna dan penerus First Input Delay, yang digunakan untuk mengevaluasi responsivitas halaman web. Ini secara khusus mengukur waktu yang diperlukan halaman web untuk merespons masukan pengguna secara visual.

Kata kuncinya di sini adalah “secara visual”.

Tidak ada yang mengharapkan semua interaksi Anda dilakukan dalam beberapa milidetik. Itu tidak mungkin. Yang perlu Anda lakukan untuk mendapatkan skor INP dan Data Web Inti yang baik adalah memberikan umpan balik visual langsung terhadap tindakan pengunjung di situs web Anda.

Kembali ke awal artikel kami, memastikan bahwa browser dapat merender halaman Anda secara efisien adalah cara pasti untuk mencapai skor luar biasa dan pengalaman dunia nyata.

Dan dua faktor penting yang sangat memengaruhi kecepatan rendering Anda adalah thread utama dan ukuran DOM Anda.

Peran Thread Utama dan Ukuran DOM

Mari kita lakukan sedikit pembenahan sebelum mempelajari teknisnya.

Skor INP Anda bergantung pada seberapa cepat browser mengembalikan umpan balik visual kepada pengguna setelah berinteraksi dengan situs web Anda.

Agar browser dapat dengan cepat menerima, memproses, dan menyajikan umpan balik, thread utamanya harus dikeluarkan dari tugas-tugas yang sudah berjalan lama.

Beberapa penyebab terbesarnya adalah sumber daya JavaScript yang berat dan, yang terakhir, ukuran DOM yang besar.

Inilah prosesnya. Sekarang, mari kita mengungkap setiap bagiannya.

Benang Utama

Thread utama adalah thread utama eksekusi yang menangani sebagian besar tugas penting yang terkait dengan rendering halaman web, termasuk:

• HTML, penguraian CSS
• Eksekusi JavaScript
• konstruksi Model Objek Dokumen (DOM)
• menambahkan gaya yang dihitung
• menghasilkan pohon tata letak
• membuat catatan cat

Jika suatu tugas membutuhkan waktu lebih dari 50 md untuk dieksekusi, itu dianggap sebagai tugas yang panjang . Hal ini terutama terjadi karena file JavaScript yang berjalan berat atau ukuran DOM yang besar.

Anda harus tahu bahwa thread utama hanya dapat menjalankan satu tugas dalam satu waktu. Jadi, semakin lama tugas dilakukan, tampilan situs web Anda akan semakin lamban.

Mengapa?

Bayangkan Anda memiliki halaman web dengan fitur interaktif, seperti visualisasi data yang kompleks atau antarmuka pengguna yang dinamis. Pengguna memicu suatu tindakan, misalnya dengan mengeklik tombol, yang memulai komputasi JavaScript yang berat (dibutuhkan waktu lebih dari 50 md untuk dijalankan).

Hal ini secara otomatis menimbulkan beberapa tantangan terhadap kinerja dan respons situs Anda:

1. Perhitungan yang panjang ini memblokir thread, mencegahnya melakukan tugas lain seperti menangani input pengguna, merender pembaruan, atau menjalankan skrip lain.
2. Saat komputasi sedang berlangsung, pengguna mungkin mencoba berinteraksi dengan bagian lain halaman - menggulir, mengklik tombol lain, atau mengetik di kolom input. Namun, tindakan ini tidak akan segera diproses, dan halaman akan tampak terhenti atau tidak responsif.
3. Jika interaksi pengguna seharusnya memicu perubahan visual (seperti menyorot tombol saat diklik), masukan ini akan ditunda hingga tugas yang sudah berjalan lama selesai.

Singkatnya, sangat penting untuk memindahkan tugas dari thread utama, dan kami mengetahui setidaknya 7 cara untuk melakukan ini.

DOM (Model Objek Dokumen)

Salah satu tugas thread utama adalah mengurai HTML.

Artinya browser mengubah data (markup HTML) menjadi DOM.

DOM mewakili struktur halaman sebagai pohon objek yang digunakan browser untuk merender konten di layar.

DOM yang lebih besar biasanya berarti lebih banyak node (elemen, teks, komentar, dll.) untuk dikelola oleh browser.

Jika Anda memiliki ukuran DOM yang besar, thread utama memiliki lebih banyak pekerjaan yang harus dilakukan. Dibutuhkan waktu lebih lama untuk mengurai HTML menjadi DOM, menerapkan gaya CSS, menata letak halaman, dan merender ulang bagian halaman ketika terjadi perubahan (seperti melalui manipulasi JavaScript).

Pohon DOM yang besar juga dapat memperlambat interaksi laman karena setiap interaksi pengguna (seperti mengeklik, menggulir, dan mengetik) sering kali mengharuskan browser menghitung ulang gaya dan tata letak bagian DOM.

Jadi, aturan praktis yang baik adalah halaman harus memilikiukuran DOM hingga 1400 node.

Salah satu cara untuk meningkatkan efisiensi thread utama dan mengurangi dampak DOM yang besar adalah dengan mengontrol rendering konten di luar layar.

Dan properti CSS ini dapat membantu Anda melakukannya…

Memanfaatkanvisibilitas kontenuntuk Peningkatan Rendering

Properti CSS visibilitas konten adalah tambahan inovatif pada kotak peralatan pengoptimalan kinerja web.

Properti ini, khususnya dalam pengaturan otomatisnya, memainkan peran penting dalam meningkatkan efisiensi rendering halaman web. Atribut content-visibility: auto memberi tahu browser bahwa ia dapat melewati penghitungan rendering dan tata letak untuk suatu elemen hingga diperlukan, yang biasanya terjadi saat elemen memasuki area pandang.

Saat diterapkan, visibilitas konten: otomatis memungkinkan browser mengoptimalkan beban kerja rendering. Dengan menunda rendering konten yang tidak terlihat, visibilitas konten secara signifikan mengurangi waktu muat awal dan mengurangi beban kerja di thread utama, sehingga menghasilkan kecepatan rendering yang lebih cepat dan peningkatan respons halaman web.

Contoh praktis di mana visibilitas konten: kilau otomatis adalah dalam mengoptimalkan Interaksi ke Cat Berikutnya.

Misalnya, dalam postingan blog dengan banyak komentar atau situs berita yang sudah lama bergulir, penerapan visibilitas konten: otomatis pada setiap komentar atau artikel berita yang tidak langsung terlihat akan memastikan bahwa browser tetap responsif terhadap interaksi pengguna dan memuat konten yang terlihat dengan cepat.

Berikut cara sederhana untuk menerapkannya:

Namun, perlu Anda ketahui bahwa ini bukanlah solusi universal. Anda harus mendekati visibilitas konten dengan seimbang, menguji pengaruhnya di berbagai perangkat dan browser untuk memastikan kinerja yang konsisten dan menghindari perubahan tata letak atau masalah aksesibilitas yang tidak terduga.

Visibilitas Konten dalam Tindakan

Selama webinar kami dengan Google tentang “Mengoptimalkan INP”, kami berkesempatan untuk menunjukkan dampak visibilitas konten dan bagaimana NitroPack menerapkannya.

Kami mengidentifikasi akar penyebab INP yang buruk menggunakan beberapa alat – ekstensi Web Vitals, Chrome DevTools, dan Performance profiler.

Dalam prosesnya, kami menemukan bahwa penyebab utama yang menyebabkan skor INP 272 md adalah dua peristiwa “Hitung ulang gaya” yang membutuhkan waktu 69,87 md untuk diproses dan memengaruhi 1139 elemen.

Mengaktifkan NitroPack di situs web, layanan kami secara otomatis mendeteksi elemen yang akan mendapat manfaat dari visibilitas konten: auto . Setelah pengaturan cepat, kami berhasil mengurangi waktu render tugas yang panjang dan jumlah elemen yang terpengaruh lebih dari dua kali lipat:

Selain itu, skor INP meningkat dari “perlu perbaikan” menjadi “baik.”

Buktikan situs web Anda di masa depan dan teruskan INP dengan autopilot. Dapatkan NitroPack sekarang →

Tips Tambahan Optimasi INP

Tidak diragukan lagi, visibilitas konten menawarkan peningkatan kinerja yang besar dengan sedikit usaha.

Namun, dalam beberapa kasus, Anda mungkin memerlukan kekuatan performa ekstra untuk menjamin respons yang lancar dan skor INP yang baik. Jika hal tersebut terjadi, berikut beberapa strategi optimasi INP lain yang dapat Anda manfaatkan:

1. Hasilkan ke thread utama

Seperti yang sudah Anda ketahui, kinerja situs Anda sangat bergantung pada seberapa sibuk thread utama. Menyerah pada thread utama mengacu pada praktik yang dengan sengaja memecah tugas-tugas yang sudah berjalan lama menjadi bagian-bagian yang lebih kecil dan dapat dikelola untuk menghindari pemblokiran thread utama untuk waktu yang lama.

Hal ini dapat dicapai dengan menggunakan fungsi hasil seperti:

• penjadwal.hasil()
• setWaktu habis
• permintaanAnimationFrame
• permintaanIdleCallback

2. Kurangi ukuran DOM Anda

Penyebab kedua dari responsivitas adalah ukuran DOM. Memiliki DOM yang besar dapat menghambat passing INP secara signifikan. Untuk mencegah hal ini, sangat penting untuk meminimalkan ukurannya atau, lebih khusus lagi, membatasi kedalaman DOM Anda.

Tujuan ini dapat dicapai melalui berbagai strategi:

• Hindari plugin dan tema yang kodenya buruk.
• Batasi penggunaan JavaScript untuk membuat node DOM.
• Pilihlah alternatif selain pembuat halaman yang dikenal menghasilkan HTML berlebihan.
• Pertimbangkan untuk membagi situs web satu halaman menjadi beberapa halaman.
• Hindari menyembunyikan elemen yang tidak perlu dengan properti CSS display: none.
  

3. Hindari interaksi yang tumpang tindih

Interaksi tumpang tindih terjadi ketika pengguna terlibat dengan elemen halaman lain sebelum rendering interaksi pertama selesai. Hal ini sering terjadi selama pengetikan cepat di bidang formulir, di mana beberapa penekanan tombol terjadi dengan cepat.

Untuk mengoptimalkannya, pertimbangkan:

• Menerapkan debouncing pada input untuk mengurangi frekuensi panggilan balik acara.
• Memanfaatkan AbortController untuk membatalkan permintaan pengambilan yang sedang berlangsung, mencegah kelebihan thread utama dari callback pengambilan yang berlebihan.
  

Bungkus

Ingat – INP adalah tentang memungkinkan browser untuk melukis layar berikutnya secepat mungkin.

Pengguna ingin mengetahui bahwa tindakan mereka sedang diproses dan ada sesuatu yang terjadi di latar belakang.

Dan memadukan kemampuan browser seperti visibilitas konten dengan solusi kinerja web yang kuat seperti NitroPack berarti Anda mencakup seluruh aspek pengalaman pengguna – mulai dari pemuatan awal hingga penelusuran seluruh halaman Anda.

Uji NitroPack gratis →