Pelajari tiga peluncuran performa web baru dari I/O 2019.
Selama presentasi "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, pengujian ini memudahkan identifikasi dan memperbaiki regresi performa sebelum dikirimkan.
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 gambar dalam jumlah besar, yang berkontribusi pada penggunaan data, pembesaran halaman, dan pemuatan halaman yang lebih lambat. Banyak gambar ini berada di luar layar, sehingga pengguna harus men-scroll untuk melihatnya.
Hingga saat ini, Anda perlu mengatasi gambar pemuatan lambat menggunakan library JavaScript, tetapi hal itu mungkin akan segera berubah. Musim panas ini, Chrome akan meluncurkan dukungan
untuk atribut loading yang
membawa 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 dimuat secara 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 dekat" diserahkan kepada browser. Secara umum, harapan kami adalah browser akan mulai mengambil gambar yang ditangguhkan dan konten iframe 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.
Penulisan 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
Deskripsi font-display memungkinkan Anda menentukan cara font web dirender atau
fallback, bergantung pada waktu yang diperlukan untuk memuat font. 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 Font telah diperbarui untuk menyertakan font-display dalam penyematan kode default (seperti yang terlihat di bawah). Kami harap hal ini akan mendorong lebih banyak developer untuk mencoba
penambahan yang menarik ini.
Berikut adalah demo di Glitch tentang penggunaan tampilan
dengan beberapa jenis font. Coba dengan emulasi jaringan DevTools untuk melihat dampak font-display: swap.
Tonton untuk mengetahui informasi selengkapnya
Presentasi kami juga membahas beberapa studi kasus produksi tentang penggunaan pola performa lanjutan untuk meningkatkan pengalaman pengguna. Hal ini mencakup situs yang memanfaatkan CDN gambar, kompresi Brotli, penayangan dan pengambilan data JavaScript cerdas untuk mempercepat halaman mereka. Tonton diskusi untuk mempelajari lebih lanjut :)