Kecepatan dalam skala besar: apa yang baru dalam performa web?

Pelajari tiga peluncuran performa web baru dari I/O 2019.

Katie Hempenius
Katie Hempenius

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, alat ini memudahkan untuk mengidentifikasi dan memperbaiki regresi performa sebelum dikirim.

Laporan LightWallet yang menunjukkan aset mana yang melebihi anggaran ukuran file.

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.

Pemuatan lambat tingkat browser yang menandai konten di luar layar yang dimuat on-demand

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.

Kode penyematan Google Fonts dengan font-display yang disertakan dalam URL sebagai parameter kueri

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 :)