Pelajari tiga peluncuran performa web baru dari I/O 2019.
Selama diskusi "Kecepatan dalam Skala Besar" di Google I/O 2019, kami mengumumkan tiga hal yang kami harap akan meningkatkan performa web selama tahun mendatang.
Lighthouse kini mendukung anggaran performa
LightWallet adalah fitur baru di Lighthouse yang menambahkan dukungan untuk anggaran performa. Anggaran performa menetapkan standar untuk performa situs Anda. Yang lebih penting, memungkinkan Anda mengidentifikasi dan memperbaiki regresi performa sebelum dikirim.
LightWallet tersedia di Lighthouse CLI versi terbaru dan hanya memerlukan waktu beberapa menit untuk disiapkan. Petunjuk ini memberikan informasi selengkapnya.
Tidak yakin berapa anggaran yang harus Anda tetapkan? Coba Kalkulator Anggaran Performa eksperimental kami yang dapat menghasilkan konfigurasi anggaran yang kompatibel dengan LightWallet.
Pemuatan lambat gambar dan iframe tingkat browser hadir di web
Halaman web sering kali berisi banyak gambar, yang berkontribusi pada penggunaan data, pembengkakan halaman, dan pemuatan halaman yang lebih lambat. Banyak dari gambar ini berada di luar layar, sehingga mengharuskan pengguna men-scroll untuk melihatnya.
Hingga saat ini, Anda perlu menyelesaikan pemuatan lambat gambar menggunakan library JavaScript, tetapi hal itu mungkin akan segera berubah. Musim panas ini, Chrome akan meluncurkan dukungan
untuk atribut loading yang
menghadirkan pemuatan lambat <img> dan <iframe> standar ke web.
Atribut loading memungkinkan browser menunda pemuatan gambar dan iframe di luar layar hingga pengguna men-scroll di dekatnya. loading mendukung tiga nilai:
lazy: adalah kandidat yang baik untuk pemuatan lambat.eager: bukan kandidat yang baik untuk pemuatan lambat. Langsung dimuat.auto: browser akan menentukan apakah akan melakukan pemuatan 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 di dekatnya" diserahkan kepada browser. Secara umum, kami berharap browser akan mulai mengambil gambar dan konten iframe yang ditangguhkan sedikit sebelum masuk ke area pandang.
Atribut loading diterapkan di balik tanda di Chrome Canary. Anda dapat
mencoba demo ini di Chrome
75+ dengan mengaktifkan tanda about://flags/#enable-lazy-image-loading dan
about://flags/#enable-lazy-frame-loading.
Artikel tentang fitur pemuatan lambat tersedia dengan detail selengkapnya.
Google Fonts kini mendukung font-display 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
Deskriptor font-display memungkinkan Anda memutuskan cara font web akan dirender atau
di-fallback, bergantung pada berapa lama waktu yang diperlukan untuk memuatnya. Fungsi 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 dengan menghostingnya sendiri, tetapi perubahan ini menghilangkan kebutuhan untuk melakukannya.
Dokumentasi Google Fonts telah diperbarui untuk menyertakan font-display dalam penyematan kode default (seperti yang terlihat di bawah). Kami berharap hal ini akan mendorong lebih banyak developer untuk mencoba tambahan yang menarik ini.
Berikut adalah demo di Glitch tentang penggunaan display
dengan beberapa jenis font. Cobalah dengan emulasi jaringan DevTools untuk melihat dampak font-display: swap.
Tonton untuk mengetahui info selengkapnya
Pembahasan kami juga mencakup beberapa studi kasus produksi dalam menggunakan pola performa lanjutan untuk meningkatkan pengalaman pengguna. Situs ini mencakup situs yang memanfaatkan CDN gambar, kompresi Brotli, penayangan JavaScript cerdas, dan pengambilan data untuk mempercepat halaman. Tonton presentasi untuk mempelajari lebih lanjut :)