Memperkenalkan Alat Analisis Gambar Uji Kecepatan Situs Web

Masukkan Tes Kecepatan Situs Web, alat gratis dan sederhana yang memanfaatkan kecerdasan gambar (Cloudinary) kami untuk memungkinkan Anda mengukur, mendiagnosis, dan (yang terpenting) berkomunikasi tentang kinerja gambar situs web mana pun. Lebih baik lagi, itu dibangun di atas, dan terintegrasi dalam, WebPagetest Pat Meenan.

Tertarik? Baca terus!

Apa Fungsinya?

Mari kita mulai dengan melihat apa yang dilakukan Tes Kecepatan Situs Web secara spesifik. Kita akan mulai dengan memberinya URL — katakanlah, nytimes.photos — dan menekan “Analisis.”

Tes membutuhkan waktu satu atau dua menit untuk dijalankan dan mengembalikan halaman yang penuh dengan hasil.

Ukur Kinerja Keseluruhan

Di bagian paling atas dari hasil ini, Anda akan menemukan dua informasi terpenting dalam keseluruhan laporan: nilai huruf , yang mencoba menangkap semua keputusan baik dan buruk laman dan menguranginya menjadi satu metrik sederhana, dan perbandingan berat gambar yang menunjukkan kepada Anda, secara kuantitatif, biaya dari semua keputusan itu. Lebih lanjut tentang nilai huruf dalam satu menit. Pertama, saya ingin membahas bagaimana tes menghitung "biaya".

Untuk menghitung biaya, alat tersebut harus memiliki semacam dasar yang optimal untuk diukur. Itu harus bisa mengatakan, “Inilah yang bisa Anda lakukan dengan gambar Anda, tapi — oops! — inilah yang Anda lakukan, dan inilah yang dapat Anda selamatkan.” Membangun garis dasar itu adalah masalah yang sulit karena gambarnya rumit dan kualitasnya subjektif. Untungnya, Cloudinary telah menghabiskan waktu bertahun-tahun untuk membangun seperangkat alat yang dimaksudkan untuk mengkodekan gambar secara optimal dan otomatis untuk pengiriman di web. Tes Kecepatan Situs Web menggunakan alat tersebut — yang hingga saat ini telah digunakan untuk membuat gambar berkinerja baik — dan mengubahnya menjadi sesuatu yang dapat mengukur kinerja gambar . Dingin!

Oke, jadi begitulah cara tes menghitung biaya. Bagaimana dengan nilai huruf?

Ketika saya pertama kali mulai menjalankan tes, saya tidak mengerti mengapa beberapa situs web yang gambarnya urutan besarnya (atau dua!) lebih besar dari garis dasar masih mendapatkan B, sementara situs web lain, yang total berat gambarnya "hanya" 1,5 atau 2 kali lebih berat dari baseline mungkin mendapatkan C atau D.

Jawabannya adalah bahwa nilai huruf mencerminkan berapa banyak kesalahan peluang untuk perbaikan halaman berisi, tetapi tidak begitu peduli dengan besarnya kesalahan tersebut. Katakanlah Anda telah ahli membuat halaman yang penuh dengan lusinan gambar yang dioptimalkan dengan baik, dan kemudian rekan Anda yang buruk, Chad, datang dan menjatuhkan sebuah foto stok 6 MB tepat di header. Chad adalah yang terburuk, tetapi satu keputusan buruk pada halaman yang penuh dengan keputusan bagus tidak akan berdampak signifikan pada nilai keseluruhan Anda — bahkan jika itu merusak total berat halaman Anda.

Di sisi lain, katakanlah Anda memiliki halaman yang menyajikan campuran gambar yang terlalu kecil atau terlalu dikompresi untuk dipadukan dengan gambar besar yang membengkak. Berat halaman totalnya mungkin tidak terlalu buruk — tetapi masalahnya endemik. Dengan demikian, ia akan mendapatkan nilai yang mengerikan di samping bobot totalnya yang tampak terhormat.

Alat ini menyediakan dua metrik karena metrik melakukan dua pekerjaan yang berbeda. Perbandingan berat menghitung byte, dan nilai menghitung masalah. Perhatikan keduanya!

Diagnosis Masalah Khusus

Sekarang setelah kita mengetahui kinerja keseluruhan dari seluruh laman, saatnya untuk menyelami, melihat gambar individual dan mendiagnosis masalah tertentu .

Setiap gambar pada halaman yang diuji mendapatkan laporan mini kecilnya sendiri.

Ini menunjukkan kepada Anda apa yang Anda lakukan (bagaimana gambar Anda berukuran dan dikodekan) dan apa yang seharusnya Anda lakukan (sebagai gantinya, format, dimensi, dan ukuran file terkompresi secara optimal yang dapat Anda kirimkan). Kami kembali disajikan dengan dua metrik ringkasan besar: nilai huruf dan persentase penghematan potensial. Namun untuk benar-benar memahami metrik tersebut, kita harus menekan "Lihat selengkapnya".

Ada banyak hal yang terjadi di bagian laporan yang diperluas. Itu dibagi menjadi tiga panel. Mari kita uraikan masing-masing, dari kiri ke kanan.

Pertama, ada panel "Current", yang menjelaskan detail tentang gambar seperti yang ada di halaman. Di sinilah kita sampai ke akar dari semua nilai huruf yang ditugaskan di tingkat laporan yang lebih tinggi. Saya menulis secara umum tentang "kesalahan" sebelumnya; di tab "Saat Ini", kita dapat melihat kesalahan spesifik yang sebenarnya diperiksa oleh Tes Kecepatan Situs Web. Tiga yang pertama diperhitungkan dalam nilai Anda:

• Format . Apakah format gambar cocok dengan isinya? Misalnya, apakah kita menggunakan GIF untuk logo kita padahal seharusnya kita menggunakan PNG? Apakah JPEG ini telah dikompresi lebih baik sebagai WebP?
• cocok . Apakah dimensi intrinsik gambar cocok untuk tata letak dan layar? Misalnya, jika gambar muncul pada 100 px pada layar 2×, kita harus mengirim sesuatu yang mendekati gambar dengan lebar 200 piksel. Apakah kita?
• Kompresi . Apakah pengaturan kualitas gambar menghasilkan keseimbangan yang baik antara kualitas visual dan ukuran file?

Ketiga faktor itulah yang paling diperhatikan oleh tes. Di bawahnya, Anda akan melihat tiga lainnya, yang sebenarnya tidak memperhitungkan tingkat gambar tetapi disediakan untuk menyoroti masalah umum dan khusus yang mungkin memerlukan perhatian khusus:

• Ruang warna . Apakah gambar dikodekan dalam ruang warna yang wajar untuk web, seperti sRGB?
• Kedalaman warna . Apakah kita menggunakan jumlah bit per piksel yang tepat untuk mengkodekan nilai warna? Misalnya, gambar sRGB harus selalu dikodekan dengan 8-bit per piksel.
• Metadata . Apakah kami menjaga data meta yang disematkan seminimal mungkin? Pembaca, saya telah melihat gambar 20 KB dibebani dengan 100 KB meta data tak terlihat. Bersinar!

Setelah membagikan nilai, tes menjelaskannya dan memberi tahu kita apa yang bisa dilakukan dengan lebih baik. Misalnya, gambar nytimes.photos di atas terlalu besar untuk tata letak; JPEG adalah pilihan yang masuk akal, tetapi kami dapat menggunakan WebP; dan kami benar- benar harus memutar kompresi.

Apa yang lebih baik daripada diberitahu tentang suatu masalah? Dikasih resep cara memperbaikinya. Dan apa yang lebih baik dari itu? Diberikan solusi yang sudah jadi di atas piring metaforis! Jadi, ke panel berikutnya, "Gambar yang Dioptimalkan."

Di sini, kita dapat melihat (dan mengunduh!) gambar yang dioptimalkan dengan baik yang dihasilkan dan diukur oleh alat tersebut. Kami mendapatkan deskripsi terperinci tentang pengaturan yang digunakan untuk mengkodekannya dan beberapa informasi menarik tentang konten sebenarnya dari gambar, yang telah ditemukan oleh Cloudinary selama ini.

Karena real estat terbatas dan kepentingan relatif, panel terakhir terselip dari layar. Jadi, tekan chevron kecil dan lihat, "Format Alternatif."

Tes ini mengkodekan gambar Anda dalam setiap format yang memungkinkan, untuk menentukan mana yang terbaik. Jika format "terbaik" adalah WebP atau JPEG-XR, maka Anda mungkin memerlukan sumber daya mundur JPEG atau PNG, untuk browser yang tidak mendukung. Anda dapat melihat, mengunduh, dan membaca detail tentang versi alternatif tersebut di panel ini.

Dari Diagnosis Hingga Perawatan

Untuk semua kecuali situs web terkecil dan paling statis, menggunakan Tes Kecepatan Situs Web sebagai semacam "Simpan untuk web" yang rumit seperti ini tidak akan terlalu praktis. Anda perlu mencari cara untuk memperbaiki masalah yang ditemukan alat ini dengan cara yang lebih sistematis . Bagaimana Anda akan melakukannya akan sangat bervariasi tergantung pada alur kerja Anda dan pada masalah yang Anda pecahkan. Untuk mengatasi masalah kompresi, mungkin Anda dapat mulai menggunakan atau bahkan mengotomatiskan GUI kompresi yang sangat baik seperti ImageOptim, ImageAlpha dan Squash, atau membongkar terminal Anda dan mulai membuat skrip ImageMagick. Untuk masalah kecocokan, Anda mungkin perlu melakukan sesuatu tentang gambar responsif situs web Anda. Dan jika alat menunjukkan kepada Anda bahwa Anda kehilangan potensi keuntungan besar dari format yang lebih baru seperti WebP, hal terbaik yang harus dilakukan adalah mulai mengadopsinya — pastikan untuk menggunakan pengalihan jenis sisi server atau dalam markup, jadi bahwa Anda tidak mengirim format baru ke browser yang tidak mendukung.

Jika mengotomatisasi semua ini sendiri terdengar seperti pekerjaan yang luar biasa, ya! Dan ada sejumlah layanan hosting gambar yang dengan senang hati akan mengotomatiskan pekerjaan itu, untuk Anda.

Oke, sekarang kita telah mengikuti tur metrik yang disediakan alat, masalah yang ditemukan, dan solusi yang ditawarkan, saya ingin meluangkan waktu sebentar untuk membahas aspek penting (dan praktis) tentang bagaimana itu benar-benar berfungsi.

Tes Kecepatan Situs Web Dibangun Di Atas WebPagetest

Apa yang sebenarnya dilakukan Tes Kecepatan Situs Web selama satu atau dua menit setelah Anda mengklik "Analisis Gambar"? Sebagian besar, tidak ada ! Tes Kecepatan Situs Web segera menyerahkan URL yang dimaksud ke alat yang berbeda: WebPagetest Patrick Meenan yang sangat diperlukan. Tes Kecepatan Situs Web kemudian duduk dan menunggu WebPagetest melakukan semua kerja keras memuat dan mengukur halaman dan isinya.

Hanya setelah API WebPagetest mengembalikan serangkaian hasil, Tes Kecepatan Situs Web dapat menyisir hasil tersebut untuk gambar dan mulai bekerja mengompresi ulang, mengukur, dan menilainya.

Dengan kata lain, Tes Kecepatan Situs Web berdiri di atas bahu WebPagetest dan tidak dapat beroperasi tanpanya. Jadi, sangat menyenangkan, untuk sedikitnya, ketika Patrick setuju untuk mengintegrasikan Tes Kecepatan Situs Web langsung ke WebPagetest!

WebPagetest memiliki tab baru di bilah navigasinya: “Analyze Images.” Klik dan kumpulan hasil WebPagetest saat ini akan dikirim ke Tes Kecepatan Situs Web untuk analisis gambar lebih lanjut. Ini luar biasa, karena dua alasan.

Pertama, ini berarti bahwa, jika Anda sudah menggunakan WebPagetest, maka Tes Kecepatan Situs Web hanya dengan sekali klik. (Dan setelah Anda bekerja dengan hasil WebPagetest yang ada, Tes Kecepatan Situs Web bekerja lebih cepat.)

Kedua, Anda dapat mengirim hasil WebPagetest apa pun ke Tes Kecepatan Situs Web. WebPagetest adalah alat yang matang dan penuh fitur. Ini menawarkan sejumlah besar pengaturan berguna yang tidak tersedia saat Anda memulai tes langsung dari webspeedtest.cloudinary.com. Misalnya, saat Anda memasukkan URL ke dalam kotak besar di webspeedtest.cloudinary.com, laman diuji menggunakan satu lingkungan penjelajahan default: Google Chrome, dengan area pandang 1366 × 784 dan device-pixel-ratio 1x . Tidak mungkin mendapatkan gambaran lengkap tentang kinerja gambar responsif halaman dari satu lingkungan itu. Jika halaman yang diuji tidak memperkecil ukuran gambar agar sesuai dengan tampilan resolusi rendah yang lebih kecil, atau memperbesarnya agar terlihat tajam di layar 5K raksasa, maka kami kehilangan peluang kinerja dan UX yang luar biasa — peluang yang lingkungan penjelajahan default tunggalnya tidak dapat diungkapkan. Bukankah lebih baik menguji halaman kami di berbagai perangkat?

Dengan memulai dari pagestest.org dan menjalankan beberapa pengujian di lingkungan yang berbeda, baik menggunakan menu tarik-turun "Browser" (nyaman) atau skrip (kuat), kita dapat melakukan hal itu.

Perbedaan besar dalam hasil dari pengujian yang dijalankan di lingkungan yang berbeda merupakan indikasi bahwa halaman yang diuji tidak melakukan apa pun dengan gambar responsif, dan mungkin memang seharusnya demikian.

Mudah-mudahan, iterasi Pengujian Kecepatan Situs Web di masa mendatang akan menerapkan pengujian gambar responsif yang lebih cerdas, sehingga masalah lintas perangkat semacam ini dapat ditangkap dan disorot setelah satu pengujian. Namun, untuk saat ini, integrasi di WebPagetest menyediakan titik akses yang memungkinkan Anda menyelesaikan hal yang sama dengan sedikit kerja ekstra.

Untuk Siapa?

Saya telah menulis sebagian besar artikel ini dengan asumsi bahwa Anda, pembaca, sedang menguji situs web Anda sendiri dan mencari masalah yang dapat Anda pecahkan.

Memang, itulah tujuan utama alat ini: membantu pengembang membangun situs web yang lebih baik. Ini menyoroti masalah spesifik dan menawarkan solusi konkret.

Saya pikir tes ini juga akan berguna sebagai alat untuk berkomunikasi dengan dan meyakinkan pemangku kepentingan. Sekali lagi, pengoptimalan gambar adalah salah satu hal terbaik yang dapat dilakukan siapa pun untuk kinerja halaman; itu juga cukup rumit. Tes Kecepatan Situs Web unggul dalam mengurangi segudang detail seluk beluk menjadi metrik yang mudah dicerna — dan kemudian secara progresif mengungkapkan detail teknis sesuai kebutuhan. Hal ini memungkinkan laporan Uji Kecepatan Situs Web untuk dipahami oleh berbagai pembaca, dengan tingkat keahlian teknis yang sangat berbeda. Jadi, apakah Anda menggunakannya untuk menunjukkan kepada klien bahwa halaman mereka berpotensi memuat dua atau tiga kali lebih cepat, atau Anda menggunakannya sendiri untuk memahami dampak potensial dari subsampling chroma 4:2:0, Tes Kecepatan Situs Web ada untuk membantu.

Ruang Untuk Perbaikan

Tes Kecepatan Situs Web sedang dalam pengembangan aktif, dan ini baru rilis pertama. Kami memiliki beberapa ide tentang ke mana harus mengambilnya dari sini. Saya telah menyebutkan pengujian yang lebih baik untuk gambar responsif. Tombol "Unduh semua" juga sedang dikerjakan. Jika Anda memiliki ide sendiri (atau jika Anda menemukan bug), kami ingin mendengarnya.

Terakhir, jika Anda entah bagaimana telah membaca sejauh ini tanpa mencoba Tes Kecepatan Situs Web sendiri, periksalah!