Baru di Chrome 77

Chrome 77 sekarang diluncurkan.

Saya Pete LePage. Ayo selami dan lihat apa yang baru untuk developer di Chrome 77.

Largest Contentful Paint (LCP)

Memahami dan mengukur performa situs Anda yang sebenarnya tidaklah mudah. Metrik seperti load, atau DOMContentLoaded, tidak memberi tahu Anda apa yang dilihat pengguna di layar. First Paint, dan First Contentful Paint, hanya merekam awal pengalaman. First Artifactful Paint lebih baik, tetapi rumit, dan terkadang salah.

Largest Contentful Paint API, yang tersedia mulai Chrome 77, melaporkan waktu render elemen konten terbesar yang terlihat di area tampilan dan memungkinkan pengukuran kapan konten utama halaman dimuat.

Untuk mengukur Largest Contentful Paint, Anda harus menggunakan Performance Observer, dan mencari peristiwa largest-contentful-paint.

let lcp;
const po = new PerformanceObserver((eList) => {
  const e = eList.getEntries();
  const last = e[e.length - 1];
  lcp = last.renderTime || last.loadTime;
});

const poOpts = {
  type: 'largest-contentful-paint',
  buffered: true
}
po.observe(poOpts);

Karena halaman sering dimuat secara bertahap, ada kemungkinan bahwa elemen terbesar pada halaman akan berubah. Jadi, Anda sebaiknya hanya melaporkan peristiwa largest-contentful-paint terakhir ke layanan analisis Anda.

addEventListener('visibilitychange', function fn() {
  const visState = document.visibilityState;
  if (lcp && visState === 'hidden') {
    sendToAnalytics({'lcp': lcp});
    removeEventListener('visibilitychange', fn, true);
  }
}, true);

Phil memiliki postingan yang bagus tentang Largest Contentful Paint di web.dev.

Kemampuan formulir baru

Banyak developer mem-build kontrol formulir kustom, baik untuk menyesuaikan tampilan dan nuansa elemen yang ada, atau untuk membuat kontrol baru yang tidak disertakan dalam browser. Biasanya, hal ini memerlukan penggunaan JavaScript dan elemen <input> tersembunyi, tetapi ini bukan solusi yang sempurna.

Dua fitur web baru, yang ditambahkan di Chrome 77, mempermudah pembuatan kontrol formulir kustom, dan menghapus banyak batasan yang ada.

Peristiwa formdata

Peristiwa formdata adalah API level rendah yang memungkinkan kode JavaScript berpartisipasi dalam pengiriman formulir. Untuk menggunakannya, tambahkan pemroses peristiwa formdata ke formulir yang ingin Anda gunakan.

const form = document.querySelector('form');
form.addEventListener('formdata', ({formData}) => {
  formData.append('my-input', myInputValue);
});

Saat pengguna mengklik tombol kirim, formulir akan mengaktifkan peristiwa formdata, yang mencakup objek FormData yang menyimpan semua data yang dikirim. Kemudian, di pengendali peristiwa formdata, Anda dapat mengupdate atau mengubah formdata sebelum dikirimkan.

Elemen kustom yang terkait dengan formulir

Elemen kustom yang terkait dengan formulir membantu menjembatani kesenjangan antara elemen kustom dan kontrol native. Menambahkan properti formAssociated statis akan memberi tahu browser untuk memperlakukan elemen kustom seperti semua elemen formulir lainnya. Anda juga harus menambahkan properti umum yang ditemukan pada elemen input, seperti name, value, dan validity untuk memastikan konsistensi dengan kontrol native.

class MyCounter extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._value = 0;
  }
  ...
}

Lihat Kontrol formulir yang lebih canggih di web.dev untuk semua detailnya.

Pemuatan lambat native

Tidak yakin mengapa saya melewatkan pemuatan lambat native di video terakhir saya. Hasilnya sangat menakjubkan, jadi saya memasukkannya sekarang. Pemuatan lambat adalah teknik yang memungkinkan Anda menunda pemuatan resource yang tidak penting, seperti <img> di luar layar, atau <iframe>, hingga diperlukan, sehingga meningkatkan performa halaman Anda.

Mulai Chrome 76, browser akan menangani pemuatan lambat secara otomatis, tanpa perlu menulis kode pemuatan lambat kustom atau menggunakan library JavaScript terpisah.

Untuk memberi tahu browser bahwa Anda menginginkan gambar, atau iframe dimuat lambat, gunakan atribut loading="lazy". Gambar dan iframe yang berada "di paruh atas" akan dimuat secara normal. Sedangkan yang ada di bawah hanya diambil saat pengguna men-scroll di dekatnya.

<img src="image.jpg" loading="lazy" width="400" height="250" alt="...">

Lihat Pemuatan lambat tingkat browser untuk web di web.dev untuk mengetahui detailnya.

Chrome Dev Summit 2019

Chrome Dev Summit akan diselenggarakan pada 11 dan 12 November.

Konferensi ini merupakan kesempatan besar untuk mempelajari alat dan update terbaru yang akan hadir di platform web, serta mendengar langsung dari tim engineer Chrome.

Acara ini akan di-streaming secara live di channel YouTube kami, atau jika ingin menghadiri secara langsung, Anda dapat meminta undangan di situs Chrome Dev Summit 2019.

Dan banyak lagi!

Ini hanyalah beberapa perubahan di Chrome 77 untuk developer, tentu saja, masih banyak lagi.

Contact Picker API, tersedia sebagai uji coba origin, adalah alat pilih on demand baru yang memungkinkan pengguna memilih entri atau entri dari daftar kontak mereka dan membagikan detail terbatas kontak yang dipilih ke situs.

Dan ada unit pengukuran baru di intl.NumberFormat API.

Bacaan lebih lanjut

Artikel ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan di Chrome 77.

Langganan

Ingin terus mengetahui info terbaru tentang video kami, lalu subscribe ke channel YouTube Developer Chrome kami, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 78 dirilis, saya akan ada di sini untuk memberi tahu Anda -- apa yang baru di Chrome!