Cara Meningkatkan Kinerja Media Dengan Anggaran
Diterbitkan: 2022-03-10Artikel ini telah didukung dengan baik oleh teman-teman terkasih kami di Cloudinary yang membantu komunitas dengan cepat dan mudah membuat, mengelola, dan memberikan pengalaman digital mereka di semua browser, perangkat, dan bandwidth. Terima kasih!
Sarjana Amerika Mason Cooley dengan cekatan menggambarkan fakta kehidupan yang sulit: "Anggaran menghilangkan kesenangan dari uang." Tidak diragukan lagi, media meramaikan situs web, menambah daya tarik, kegembiraan, dan intrik, apalagi bujukan untuk tetap berada di halaman dan sering mengunjunginya kembali. Namun, seperti halnya pengeluaran yang tidak terkendali menjadi pertanda buruk dalam jangka panjang, begitu pula media digital yang tidak dianggarkan menurunkan kinerja situs.
Contoh kasus: pelambatan pemuatan halaman hanya dalam hitungan detik dapat merugikan Amazon $1,6 miliar dalam penjualan tahunan. Dari sekian banyak faktor yang mempengaruhi kecepatan pemuatan halaman, media adalah salah satu faktor yang signifikan. Oleh karena itu kebutuhan mendesak untuk memprioritaskan optimalisasi media. Dengan membelanjakan uang Anda tepat untuk tugas itu dan menganggarkan media Anda, Anda akan menuai penghematan dan manfaat yang signifikan dalam jangka panjang.
Anggaran Kinerja
“Anggaran kinerja adalah '... seperti apa: Anda menetapkan 'anggaran' di halaman Anda dan tidak mengizinkan halaman melebihi itu. Ini mungkin waktu buka yang spesifik, tetapi biasanya percakapan lebih mudah dilakukan saat Anda membagi anggaran ke dalam jumlah permintaan atau ukuran halaman.”
— Tim Kadlec
Anggaran kinerja sebagai mekanisme untuk merencanakan pengalaman web dan mencegah penurunan kinerja dapat terdiri dari tolok ukur berikut:
- Berat halaman keseluruhan,
- Jumlah total permintaan HTTP,
- Waktu pemuatan halaman pada jaringan seluler tertentu,
- Penundaan Input Pertama (FID)
- Cat Contentful Pertama (FCP),
- Pergeseran Tata Letak Kumulatif (CLS),
- Cat Contentful Terbesar (LCP).
Vitaly Friedman memiliki daftar periksa yang sangat baik yang menjelaskan komponen yang mempengaruhi kinerja web bersama dengan tips berguna tentang teknik pengoptimalan. Menjadi akrab dengan komponen tersebut akan memungkinkan Anda untuk menetapkan tujuan kinerja .
Dengan sasaran kinerja yang terdokumentasi dengan jelas, berbagai tim dapat melakukan percakapan yang bermakna tentang penyampaian konten yang optimal. Misalnya, anggaran dapat membantu mereka memutuskan apakah halaman harus berisi lima gambar — atau tiga gambar dan satu video — dan masih tetap dalam batas yang direncanakan.
Namun, memiliki anggaran kinerja sebagai metrik mandiri mungkin tidak banyak membantu. Itu sebabnya kita harus mengkorelasikan kinerja dengan tujuan organisasi.
Performa bisnis
Jika Anda menghabiskan banyak byte pada video dan gambar yang tidak optimal, pengalaman multimedia tidak akan begitu kaya lagi. Sebuah organisasi ada untuk mencapai hasil , seperti menarik orang untuk membeli, mendidik mereka, memotivasi mereka, atau mencari bantuan dan sukarelawan. Siapa pun yang memiliki kehadiran web akan menghargai hubungan antara pengaruh berbagai ukuran kinerja pada metrik bisnis.
WPOStats menyoroti ratusan studi kasus yang menunjukkan bagaimana penurunan kinerja — dari beberapa ratus milidetik hingga detik — dapat mengakibatkan penurunan besar dalam penjualan tahunan. Menggambar hubungan semacam itu sangat membantu melacak pengaruh kinerja pada bisnis dan, pada akhirnya, membangun budaya kinerja untuk organisasi.
Demikian pula, situs yang lambat dapat memiliki dampak dramatis pada konversi. Tantangan berat yang dihadapi bisnis online adalah menemukan keseimbangan yang tepat antara melibatkan audiens sambil tetap berada dalam anggaran kinerja.
Maka tidak mengherankan jika komponen penting untuk keterlibatan audiens adalah media visual yang dioptimalkan , misalnya video menawan yang menjalin cerita tentang produk atau layanan Anda bersama dengan visual yang relevan, menarik, dan menarik.
Menurut ahli saraf MIT, otak kita dapat menyerap dan memahami media visual dalam waktu kurang dari 13 milidetik, sedangkan teks dapat mengambil pembaca rata-rata lebih dari 3,3 menit untuk memahami, sering setelah membaca ulang dan referensi silang tempat lain. Tidak heran jika konten mikrovideo (biasanya hanya berdurasi 10–20 detik) sering kali menghasilkan interaksi dan keuntungan konversi yang besar.
Banding Video
Saat berbelanja online, kami berharap dapat melihat detail gambar produk . Selama bertahun-tahun, saya lebih suka menelusuri produk yang dilengkapi dengan video yang menunjukkan, misalnya, cara menggunakan produk atau mungkin cara merakitnya, atau yang menunjukkan kasus penggunaan di kehidupan nyata.
Terlepas dari pengalaman pribadi saya, banyak penelitian membuktikan pentingnya konten video:
- 96% konsumen menganggap video bermanfaat saat membuat keputusan pembelian online.
- 79% pembeli online lebih suka menonton video untuk mendapatkan informasi tentang suatu produk daripada membaca teks di halaman web.
- Video produk yang tepat dapat meningkatkan konversi lebih dari 80%.
Berbicara tentang pengiriman video di web,
“Rata-rata bobot video meningkat secara dramatis setiap tahun, lebih banyak di seluler daripada di desktop. Dalam beberapa kasus, hal itu mungkin dibenarkan karena perangkat seluler sering kali memiliki layar beresolusi tinggi, tetapi mungkin juga karena kurangnya kemampuan untuk menawarkan ukuran video yang berbeda menggunakan HTML saja. Banyak video besar di web ditempatkan secara manual di halaman pemasaran dan tidak memiliki server media canggih untuk mengirimkan ukuran yang sesuai, jadi saya berharap di masa mendatang kita akan melihat fitur HTML sederhana serupa untuk pengiriman video yang kita lihat di gambar responsif. ”
— Scott Jehl
Sentimen yang sama disampaikan oleh Conviva's Q4 2020 State of Streaming (registration diperlukan), yang mencatat bahwa ponsel mengalami masalah buffering 20% lebih banyak , kegagalan video-start 19% lebih tinggi dan waktu mulai 5% lebih lama daripada perangkat lain.
Selain masalah rendering, pengiriman video juga dapat meningkatkan biaya bandwidth, terutama jika Anda tidak dapat mengirimkan format browser yang optimal. Selain itu, jika Anda tidak menggunakan jaringan pengiriman konten (CDN) atau beberapa CDN untuk memetakan pengguna ke wilayah tepi terdekat untuk mengurangi latensi — praktik yang disebut perutean suboptimal — Anda mungkin memperlambat awal video.
Demikian pula, gambar yang tidak dioptimalkan adalah penyebab utama halaman mengasapi. Menurut Web Almanac, perbedaan byte gambar yang dikirim ke perangkat seluler atau desktop sangat kecil, yang berarti pemborosan bandwidth lebih lanjut untuk perangkat yang tidak benar-benar membutuhkan semua byte tambahan.
Tidak diragukan lagi, berlebihan dengan konten yang menarik namun tidak dioptimalkan akan merugikan tujuan bisnis, dan di situlah seni keseimbangan berperan.
Seni Menyeimbangkan Performa Dengan Konten Media
Meskipun media kaya dapat mempromosikan keterlibatan pengguna, kami perlu menyeimbangkan biaya penyampaiannya dengan kinerja situs web dan sasaran bisnis Anda. Salah satu alternatifnya adalah meng-host dan mengirimkan video melalui pihak ketiga seperti YouTube atau Vimeo.
Meskipun penghematan bandwidth, bagaimanapun, pendekatan itu membutuhkan biaya. Sebagai pemilik konten, Anda tidak dapat membangun pengalaman bermerek yang sepenuhnya disesuaikan , atau menawarkan personalisasi. Dan tentu saja, Anda perlu meng-host dan mengirimkan gambar Anda.
Anda tidak perlu membongkar konten Anda. Ada juga pilihan lain yang tersedia. Pertimbangkan pembenahan sistem Anda untuk pengiriman media yang optimal dengan melakukan hal berikut:
Pahami penggunaan Anda saat ini
Pelajari bobot halaman web Anda dan ukuran aset medianya. Pakar penelitian web Tammy Everts merekomendasikan untuk memastikan bahwa halaman berukuran kurang dari 1 MB untuk seluler dan kurang dari 2 MB untuk yang lainnya. Selain itu, identifikasi sumber daya yang ditampilkan di halaman penting.
Misalnya, dapatkah Anda mengganti paragraf teks dan gambar terkait dengan video pendek? Bagaimana keputusan itu akan memengaruhi tujuan bisnis Anda? Pada tahap ini, Anda mungkin perlu meninjau Pemantauan Pengguna Nyata (RUM) dan Analytics dan mengidentifikasi halaman penting yang mengarah ke tingkat konversi dan keterlibatan yang lebih tinggi.
Selain itu, pastikan untuk melacak secara sintetis Core Web Vitals (CWVs) Google sebagai bagian dari toolkit Anda dengan alat seperti LightHouse. Anda juga dapat mengukur CWV melalui pemantauan pengguna nyata (RUM) seperti CrUX. Karena CWV juga akan menjadi sinyal bagi Google untuk perayap, masuk akal untuk memantau dan mengoptimalkan metrik tersebut: Cat Konten Terbesar (LCP), Penundaan Input Pertama (FID), dan Pergeseran Tata Letak Kumulatif (CLS).
Sajikan format yang tepat
Sajikan gambar atau video dalam format yang paling sesuai dalam hal ukuran dan resolusi untuk perangkat tampilan atau browser. Anda mungkin memerlukan CDN gambar untuk tujuan itu. Atau, buat varian seperti WebM, AVIF, JPEG-XL, HEIC, dll. dan secara selektif menayangkan jenis konten yang tepat berdasarkan header User-Agent dan Accept yang meminta.
Untuk konversi satu kali, Anda dapat mencoba alat seperti Squoosh.app atau avif.io. Praktik terkait adalah mengonversi GIF animasi menjadi video. Untuk wawasan lebih lanjut, lihat artikel Web.dev ini. Ingin mencoba menyiapkan alur kerja untuk menangani publikasi video? Lihat tips hebat di artikel Mengoptimalkan Video Untuk Ukuran Dan Kualitas.
Sajikan dengan ukuran yang tepat
Lebih dari 41% gambar di perangkat seluler berukuran tidak tepat. Jadi, daripada menyajikan lebar tetap, potong gambar dan video Anda agar sesuai dengan ukuran wadah dengan alat seperti Lazysizes. Lebih baik lagi, alat AI yang dapat mendeteksi area minat saat memotong gambar dapat menghemat banyak waktu dan tenaga Anda. Anda juga dapat memanfaatkan pemuatan lambat asli untuk gambar yang berada di paro bawah.
Tambahkan subtitle ke video Anda
Hampir 85% video diputar tanpa suara. Menambahkan subtitel ke dalamnya tidak hanya memberikan pengalaman yang dapat diakses, tetapi juga akan menarik perhatian penonton dan meningkatkan keterlibatan. Namun, menyalin video bisa menjadi pekerjaan yang membosankan; Anda dapat bekerja dengan layanan transkripsi berbasis AI dan meningkatkannya untuk mengotomatiskan alur kerja.
Kirim melalui beberapa CDN
CDN dapat mengurangi latensi last-mile, mempersingkat waktu mulai video, dan berpotensi mengurangi masalah buffering. Menurut sebuah studi oleh Citrix, strategi multi-CDN dapat mengurangi latensi lebih jauh dan menawarkan ketersediaan yang berkelanjutan jika terjadi pemadaman lokal di node tepi CDN.
Alih-alih memanfaatkan beberapa alat rahasia, Anda dapat menjelajahi produk seperti Pengoptimal Media Cloudinary, yang secara efektif dan efisien mengoptimalkan media, memberikan format dan kualitas yang tepat melalui node tepi multi-CDN. Dengan kata lain, Media Optimizer mengoptimalkan kualitas dan ukuran , menyajikan fidelitas visual yang tinggi dalam file kecil.
Render video secara bertahap
Video pratinjau yang diputar otomatis di YouTube telah terbukti meningkatkan waktu tonton video hingga lebih dari 90%. Pemutaran otomatis video memiliki sedikit manfaat dan banyak kekurangan, jadi penting untuk berhati-hati saat menggunakannya dan kapan tidak menggunakannya. Sangat penting untuk memiliki opsi untuk menjeda video seminimal mungkin.
Cara yang baik untuk menyeimbangkan anggaran ukuran halaman adalah dengan menyajikan pratinjau video dan gambar poster buatan AI terlebih dahulu , memuat video lengkap hanya jika pengguna mengklik video. Dengan begitu, Anda dapat menghilangkan unduhan yang tidak perlu dan mempercepat pemuatan halaman.
Atau, muat video pratinjau di awal dan biarkan pemutar memutar otomatis versi lengkapnya. Setelah pratinjau selesai, pemutar memeriksa jenis koneksi perangkat dengan Network Connection API dan, jika pengguna memiliki konektivitas yang baik, menukar sumber dari pratinjau ke video sebenarnya.
Anda dapat memeriksa halaman contoh untuk demo. Berikut tipnya : karena CDN dapat mendeteksi jenis koneksi jaringan dengan lebih andal, kode kualitas produksi Anda dapat memanfaatkan CDN untuk mendeteksi kecepatan jaringan, berdasarkan mana kode klien Anda dapat memuat video berdurasi panjang secara progresif.
Membungkus
Di masa mendatang, berkat kemampuannya yang luar biasa untuk menceritakan kisah dengan cara yang tidak dapat dilakukan kata-kata, media visual akan terus menjadi elemen dominan untuk situs web dan aplikasi seluler. Namun, menentukan konten yang tepat untuk ditayangkan bergantung pada strategi bisnis dan kinerja situs Anda.
“Anggaran kinerja tidak memandu keputusan Anda tentang konten apa yang harus ditampilkan. Sebaliknya, ini tentang bagaimana Anda memilih untuk menampilkan konten itu. Menghapus konten penting sama sekali untuk mengurangi bobot halaman bukanlah strategi kinerja.”
— Tim Kadlec
Itu nasihat yang baik untuk diingat.