Melihat Keadaan Gambar Progresif Dan Persepsi Pengguna

“Gambar Progresif” adalah topik hangat akhir-akhir ini. Kami sering menemukan artikel yang menjelaskan teknik tentang cara menghindari ruang kosong tempat gambar akan dimuat. Medium dan Facebook adalah contoh situs web dan aplikasi seluler yang menerapkan pola ini.

Saya baru-baru ini menulis tentang berbagai cara untuk menggunakan SVG sebagai placeholder, dan Kalender Kinerja PerfPlanet tahun ini menyertakan dua posting yang menjelaskan lebih lanjut SQIP, sebuah teknik berdasarkan SVG yang kabur: Pemuatan Gambar Progresif menggunakan Intersection Observer dan SQIP dan SQIP — Vektor Tidak Jelas untuk Pratinjau Performan.

Ketika saya pertama kali mendokumentasikan teknik pemuatan gambar Medium, saya lebih tertarik untuk merekayasa balik teknik mereka. Saya telah melihat efek browsing Medium pada koneksi dalam penerbangan yang lambat. Saya pikir merender gambar kecil lebih awal, memuat lambat dan transisi ke versi final adalah ide yang bagus.

Kami berasumsi bahwa teknik ini meningkatkan kinerja yang dirasakan pengguna . Render cepat mengalahkan rendering lambat. Menempatkan sesuatu di layar pengguna lebih awal, meskipun itu bukan konten akhir.

Apakah kita yakin tentang ini?

Melalui beberapa komentar di Reddit, saya menemukan banyak pendapat yang mendalam (dan negatif). Berikut adalah dua di antaranya:

“Saya benci situs web yang menampilkan versi gambar buram sebelum yang terakhir dimuat. Ini bermain dengan mataku. Saya harus membuang muka dan mengintip untuk melihat apakah itu selesai sebelum saya bisa membaca. Saya berharap ada cara untuk menonaktifkan fungsi ini."
— rocky1138, Berita Peretas

“Bagaimana orang sampai pada kesimpulan bahwa menampilkan versi informasi rendah dari gambar yang akan dimuat sebagai placeholder menghasilkan beban yang dirasakan lebih cepat? Bagi saya semua efek ini hanya terlihat sampah dan mengganggu, tanpa manfaat sama sekali — tentu saja bukan persepsi kecepatan. Bukannya aku bisa mengerti apa sebenarnya gambar itu sebelum dimuat sepenuhnya, dengan placeholder kami yang tidak mewah."
— dwb, Berita Peretas

Mencoba Menemukan Studi Tentang Persepsi Pengguna

Saya ingin menemukan beberapa penelitian ilmiah yang dapat mendukung bahwa teknik memuat gambar ini (atau tidak) bermanfaat. Ini terbukti menjadi tantangan. Saya tidak dapat menemukan penelitian yang membuktikan bahwa menampilkan sesuatu seperti gambar mini buram sebelum gambar dimuat meningkatkan persepsi pengguna. Lalu saya memikirkan JPEG progresif.

Kembali Ke Dasar: JPEG Progresif

Dengan cara tertentu, kami memiliki "teknik pemuatan gambar progresif" serupa yang didukung ke dalam gambar untuk waktu yang lama. JPEG progresif adalah contoh yang baik.

JPEG progresif telah diusulkan sebagai praktik yang baik untuk gambar, terutama untuk situs yang digunakan dalam jaringan yang lambat. Ann Robson menulis sebuah posting yang mendorong Progressive JPEG, sekarang lima tahun yang lalu, di mana dia merangkum mengapa mereka lebih unggul:

“JPEG progresif lebih baik karena lebih cepat. Tampil lebih cepat berarti lebih cepat, dan kecepatan yang dirasakan lebih penting daripada kecepatan sebenarnya . Bahkan jika kami serakah tentang apa yang kami coba berikan, JPEG progresif memberi kami sebanyak mungkin sesegera mungkin."

JPEG progresif mengkodekan gambar menjadi beberapa pemindaian. Pemindaian pertama menghasilkan gambar penuh dalam kualitas rendah, dan disempurnakan saat lebih banyak pindaian dirender. Alternatifnya adalah mode baseline JPEG di mana gambar didekodekan dari atas ke bawah.

Sebagai catatan tambahan, pengkodean JPEG dapat dikustomisasi menggunakan skrip pemindaian yang berbeda. Ini dapat digunakan untuk membuat gambar yang dikodekan dalam mode hibrid antara baseline dan progresif.

Teknik progresif seperti Blur-up, SQIP menyerupai JPEG progresif dari sudut pandang persepsi pengguna. Browser membuat gambar berkualitas rendah terlebih dahulu dan menggantinya dengan gambar akhir saat dimuat.

Menariknya, sebagian besar gambar JPEG menggunakan mode baseline. Menurut beberapa sumber, JPEG progresif mewakili paling banyak 7% dari semua JPEG. Jika kita tampaknya setuju bahwa teknik ini meningkatkan kinerja yang dirasakan pengguna, mengapa JPEG progresif tidak digunakan lebih luas daripada JPEG dasar?

Pembelajaran

Saya hanya dapat menemukan penelitian yang disebut “Progressive Image Rendering - Good or Evil?”, yang mencoba menjelaskan topik ini.

“Ketika, seperti halnya metode JPEG Progresif, rendering gambar adalah proses dua tahap di mana gambar yang awalnya kasar berubah menjadi fokus yang tajam, kelancaran kognitif terhambat, dan otak harus bekerja sedikit lebih keras untuk memahami apa yang sedang ditampilkan. .”

Menurut penelitian, pengguna merasa lebih sulit untuk memproses JPEG progresif, meskipun pada pandangan pertama kami akan berpikir pengalamannya lebih baik.

Saya baru-baru ini menyebutkan penelitian ini dalam percakapan tentang LQIP (Low-Quality Image Placeholder). Segera, saya mendapat beberapa jawaban yang mempertanyakan ketelitian penelitian:

Banyak orang mempertanyakan validitas penelitian itu. Ini bertentangan dengan semua yang kami asumsikan tentang manfaat rendering progresif dan belum ada yang datang dengan studi ke-2 dengan temuan serupa. Kami membutuhkan lebih banyak data.

— Tobias Baldauf (@tbaldauf) 9 Desember 2017

Penelitian ini sangat terbatas dan kontroversial. Data skala besar untuk membuktikan atau menyangkal, penting untuk menarik kesimpulan apa pun

— Yoav Weiss (@yoavweiss) 9 Desember 2017

Sejauh ini, kami memiliki satu studi yang diterima dengan skeptisisme. Apa lagi yang kita punya? Bisakah kita menggunakan alat yang ada untuk mengukur kinerja yang dirasakan sebagai proxy?

Mengukur Waktu Muat yang Dirasakan

Bayangkan dua strip film hipotetis ini direkam dari sebuah situs:

Kesepakatan umum adalah bahwa pengguna akan melihat bahwa Versi B memuat lebih cepat daripada Versi A. Ini karena bagian halaman yang dirender lebih awal daripada di Versi A.

Dalam beberapa hal, situasinya mirip dengan gambar progresif, tetapi pada skala yang lebih besar. Konten parsial sedini mungkin, meskipun bukan yang terakhir.

Waktu buka halaman 1,2 detik memberi tahu kami bagian dari cerita, tetapi tidak menjelaskan apa yang dilihat pengguna selama waktu itu. Saat ini kami menggunakan metrik seperti Indeks Kecepatan untuk mengevaluasi seberapa cepat halaman dimuat. Indeks Kecepatan mengukur area halaman yang belum selesai secara visual. Ini dilakukan pada beberapa tangkapan layar yang diambil secara berkala. Semakin rendah angkanya, semakin baik.

Jika kita memikirkan teknik pemuatan gambar progresif, bagaimana Indeks Kecepatan akan bervariasi saat gambar dimuat? Apakah area tersebut akan dianggap “selesai secara visual” jika kita menggunakan placeholder berkualitas rendah?

Awalnya, Indeks Kecepatan mengukur kemajuan dengan membandingkan jarak histogram, satu per setiap warna primer (merah, hijau, biru). Ini disebut Selisih Histogram Rata-rata. Tujuannya adalah untuk mencegah perubahan seperti reflow, di mana semua elemen pada halaman digeser beberapa piksel, agar tidak berdampak besar pada penghitungan. Untuk informasi selengkapnya tentang algoritme, baca bagian Mengukur Kemajuan Visual pada dokumen Indeks Kecepatan.

Saya memutuskan untuk mencoba Webpagetest terhadap halaman yang menampilkan placeholder berkualitas rendah (lihat laporan di WebPageTest):

Kita dapat melihat bahwa antara 8 dan 10 detik gambar dimuat. Placeholder buram meningkatkan persentase kelengkapan visual dari 75% menjadi 83%. Memuat gambar akhir mengambilnya dari 83% menjadi 93%.

Kami melihat bahwa placeholder berkontribusi pada kelengkapan visual halaman yang diukur dengan Indeks Kecepatan. Kami juga dapat mengamati bahwa placeholder tidak dihitung sebagai area yang sepenuhnya lengkap secara visual.

Indeks Kecepatan bukan satu-satunya metrik yang dapat kita gunakan untuk mengukur seberapa cepat halaman kita dirender. Alat Pengembang Chrome menyertakan opsi untuk melakukan audit Kinerja. Buka Audits → Perform an audit → Check 'Performance' → Run audit .

Menjalankan audit menghasilkan laporan seperti ini:

Salah satu metrik yang dilaporkan adalah "Indeks Kecepatan Perseptual". Dalam run ini nilainya adalah 4,245 . Tapi apa sebenarnya arti istilah ini? Apakah sama dengan "Indeks Kecepatan" Webpagetest?

Pendekatan Indeks Kecepatan untuk mengukur kesamaan piksel, juga disebut "Perbedaan Histogram Rata-rata", memiliki beberapa kelemahan. MHD tidak menangkap persepsi visual tentang bentuk, warna, atau kesamaan objek.

Dalam kebanyakan kasus, ini tidak akan membuat perbedaan besar saat menjalankan evaluasi kelengkapan visual. Dalam praktiknya, Indeks Kecepatan serta Indeks Kecepatan Perseptual memiliki korelasi yang tinggi:

“Dalam studi empiris skala besar yang kami lakukan (menggunakan 500+ video halaman web seluler teratas Alexa yang dikumpulkan melalui WebPagetest), kami menemukan bahwa SI dan PSI berkorelasi linier (tepatnya pada 0,91).” — Perceptual Speed ​​Index (PSI) untuk Mengukur Performa Web Paruh Atas

Indeks Kecepatan Perseptual

Menurut dokumentasi Lighthouse Google, Perceptual Speed ​​Index dihitung menggunakan modul node yang disebut Speedline. Paket ini menghitung indeks kecepatan perseptual, berdasarkan prinsip yang sama dengan indeks kecepatan asli, tetapi menghitung progres visual antar bingkai menggunakan SSIM, bukan jarak histogram .

SSIM (Structural Similarity) digunakan untuk mengukur kemiripan antara dua gambar. Metode ini mencoba memodelkan bagaimana manusia memandang gambar, dan menangkap kesamaan bentuk, warna, dan objek. SSIM memiliki aplikasi menarik lainnya: Salah satunya adalah mengoptimalkan pengaturan kompresi gambar, seperti cjpeg-dssim yang memilih tingkat kompresi JPEG tertinggi dan menghasilkan gambar dengan SSIM yang cukup dekat.

Di bawah ini Anda dapat melihat skor Image SSIM JS untuk gambar SVG yang dibuat menggunakan Primitive. Semakin banyak bentuk yang kita gunakan, semakin dekat dengan gambar aslinya (SSIM = 1).

Alternatif terbaru untuk SSIM adalah butteraugli (digunakan oleh Guetzli, Google's Perceptually Guided JPEG Encoder) dan SSIMULACRA (digunakan oleh Cloudinary).

Kesimpulan

Tidak ada cara sederhana untuk mensintesis persepsi pengguna tentang pemuatan gambar dari waktu ke waktu. Kami didorong oleh firasat bahwa tampil lebih awal lebih baik, meskipun itu bukan konten akhir, meskipun beberapa pengguna akan tidak setuju.

Sebagai pengembang, kita perlu mengukur kinerja . Ini satu-satunya cara kami dapat menetapkan target untuk meningkatkannya, dan mengetahui kapan kami tidak memenuhi anggaran kinerja. Keuntungan bertaruh pada pemuatan gambar progresif adalah kita dapat mengukurnya dengan alat yang didasarkan pada persepsi pengguna. Mereka memberi kami skor, mereka dapat direproduksi dan terukur. Mereka cocok dengan alur kerja dan alat kami, dan akan tetap ada.

Sebagai pengembang web, kita harus lebih peduli dengan pengalaman memuat situs web yang kita bangun. Sangat bagus bahwa kami sekarang memiliki alat seperti WebPageTest dan Lighthouse yang dapat membantu kami dengan mudah mengukur efek penggunaan teknik pemuatan gambar progresif. Tidak ada lagi alasan!