Chrome 77 sekarang diluncurkan.
- Ada cara yang lebih baik untuk melacak performa situs Anda dengan Largest Contentful Paint.
- Formulir mendapatkan sejumlah kemampuan baru.
- Pemuatan lambat native telah tersedia.
- Chrome DevSummit 2019 akan diselenggarakan pada 11-12 November 2019.
- Dan banyak banyak lagi.
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.
- Yang baru di Chrome DevTools (77)
- Penghentian & penghapusan Chrome 77
- Update ChromeStatus.com untuk Chrome 77
- Yang baru di JavaScript di Chrome 77
- Daftar perubahan repositori sumber Chromium
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!