Pelajari tiga peluncuran performa web baru dari I/O 2019.
Dalam pembicaraan"Speed at Scale" di Google I/O 2019, kami mengumumkan tiga hal yang kami harapkan akan meningkatkan kinerja web selama tahun depan.
Lighthouse kini mendukung Penganggaran Performa
LightWallet adalah fitur baru di Lighthouse yang menambahkan dukungan untuk anggaran performa. Anggaran performa menetapkan standar performa situs Anda. Lebih penting lagi, hal ini memudahkan mengidentifikasi dan memperbaiki regresi performa sebelum diluncurkan.
LightWallet tersedia di versi terbaru CLI Lighthouse dan hanya memerlukan waktu beberapa menit untuk menyiapkannya. Petunjuk ini memberikan informasi selengkapnya.
Belum yakin berapa seharusnya anggaran Anda? Coba Kalkulator Anggaran Performa eksperimental kami yang dapat membuat konfigurasi anggaran yang kompatibel dengan LightWallet.
Gambar tingkat browser dan pemuatan lambat iframe muncul di web
Halaman web sering kali berisi gambar dalam jumlah besar, yang berkontribusi terhadap penggunaan data, penggembungan halaman, dan pemuatan halaman yang lebih lambat. Banyak dari gambar ini berada di luar layar, sehingga pengguna harus men-scroll agar dapat melihatnya.
Sampai saat ini, Anda harus mengatasi gambar pemuatan lambat menggunakan library
JavaScript, tetapi hal tersebut mungkin akan segera berubah. Musim panas ini, Chrome akan meluncurkan dukungan
untuk atribut pemuatan yang
menghadirkan pemuatan lambat <img> dan <iframe> standar ke web.
Atribut loading memungkinkan browser menunda pemuatan gambar di luar layar dan
iframe hingga pengguna men-scroll di dekatnya. loading mendukung tiga nilai:
lazy: merupakan kandidat yang baik untuk pemuatan lambat.eager: bukan kandidat yang baik untuk pemuatan lambat. Langsung dimuat.auto: browser akan menentukan apakah akan dimuat dengan lambat atau tidak.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
Heuristik yang tepat untuk "saat pengguna men-scroll dekat" diserahkan ke browser. Secara umum, kami berharap browser akan mulai mengambil gambar dan konten iframe yang ditangguhkan sedikit sebelum masuk ke area pandang.
Atribut loading diimplementasikan di belakang flag di Chrome Canary. Anda dapat
mencoba demo ini di Chrome
75+ dengan tanda about://flags/#enable-lazy-image-loading dan
about://flags/#enable-lazy-frame-loading diaktifkan.
Penulisan tentang fitur pemuatan lambat tersedia dengan detail lebih lanjut.
Google Fonts kini mendukung tampilan font sebagai parameter kueri
Kami mengumumkan bahwa dukungan untuk font-display kini tersedia dalam produksi untuk semua Google Fonts melalui parameter string kueri tampilan:
https://fonts.googleapis.com/css?family=Lobster&display=swap
Deskripsi font-display memungkinkan Anda menentukan cara font web Anda dirender atau
diganti, bergantung pada waktu yang diperlukan untuk memuat font web. Class ini mendukung sejumlah
nilai termasuk auto, block, swap, fallback, dan optional.
Sebelumnya, satu-satunya cara untuk menentukan font-display untuk font web dari Google Fonts adalah menghosting sendiri font-nya, tetapi dengan perubahan ini, Anda tidak perlu melakukannya.
Dokumentasi
Google Fonts
telah diperbarui untuk menyertakan font-display dalam sematan kode default (seperti yang tampak
di bawah ini). Kami harap hal ini akan mendorong lebih banyak developer untuk mencoba penambahan
yang menarik ini.
Berikut adalah demo tentang Glitch dalam menggunakan tampilan
dengan beberapa jenis font. Cobalah dengan emulasi jaringan
DevTools
untuk melihat dampak font-display: swap.
Tonton untuk video lainnya
Diskusi kita juga membahas beberapa studi kasus produksi tentang penggunaan pola performa tingkat lanjut untuk meningkatkan pengalaman pengguna. Situs ini mencakup situs yang memanfaatkan CDN gambar, kompresi Brotli, penayangan dan pengambilan data JavaScript cerdas untuk mempercepat halaman mereka. Tonton pembicaraan untuk mempelajari lebih lanjut :)