Cara Mengoptimalkan Kinerja Web dan Intinya

Kesabaran bukanlah kebajikan bagi pengunjung situs web dan pembeli online. Setiap sepersekian detik penting dalam hal mempertahankan – atau kehilangan – pengunjung di situs web Anda.

Menurut Kissmetrics, waktu buka adalah faktor utama yang menyebabkan pengabaian halaman. Karena rata-rata pengunjung web tidak memiliki kesabaran untuk halaman yang memuat terlalu lama, pengabaian meningkat sebagai persentase dengan setiap detik waktu buka. Hampir 40% pengguna akan meninggalkan halaman setelah 10 detik, catat blog tersebut. Pengguna Internet Seluler mungkin paling frustrasi dengan masalah ini – 73% mencatat bahwa mereka menemukan situs web yang terlalu lambat untuk dimuat.

Masalah pemuatan halaman berdampak langsung pada perilaku belanja pengunjung situs web. Kissmetrics juga mencatat bahwa 79% pembeli yang tidak puas dengan kinerja situs web cenderung tidak membeli dari situs yang sama lagi. Hampir setengah dari konsumen mengharapkan halaman dimuat dalam 2 detik atau kurang, dan penundaan 1 detik akan menurunkan kepuasan pelanggan sebesar 16%.

Konsekuensi dari penundaan ini diterjemahkan ke dalam uang nyata. Raksasa eCommerce Amazon mengungkapkan bahwa perlambatan pemuatan halaman hanya 1 detik akan menelan biaya $1,6 miliar dalam pendapatan penjualan. Demikian pula, Google mencatat bahwa perlambatan hanya empat persepuluh detik dalam hasil pencariannya akan mengakibatkan hilangnya 8 juta pencarian per hari, yang berarti jutaan lebih sedikit dalam iklan online.

Sampai ke Inti Masalah

Faktor penyumbang terbesar yang memengaruhi waktu buka adalah gambar, video, dan grafik. Situs web saat ini menggabungkan lebih banyak visual, dan lebih sedikit teks, untuk menarik pengunjung. Menurut Arsip HTTP, hampir 64% dari berat rata-rata situs web adalah gambar, sementara video menyumbang 8% lainnya.

Karena jenis akun media ini hampir tiga perempat dari ukuran situs web, penting bagi Anda untuk mengelola gambar dan video di situs dengan lebih efisien guna meningkatkan kinerja dan tingkat konversi. Mari kita lihat beberapa langkah yang dapat Anda ambil untuk mengurangi dampak gambar dan video pada kinerja situs web Anda.

Gunakan Format Gambar Modern yang Lebih Efisien

Google telah menambahkan dukungan untuk format gambar WebP ke browser Chrome, dan Microsoft telah melakukan hal yang sama untuk JPEG-XR di sebagian besar browser Internet Explorer dan Edge. Tetapi banyak pengembang masih belum menerima perubahan ini, tetap menggunakan format JPG dan PNG yang sama, daripada memanfaatkan bagaimana format modern dapat mengoptimalkan situs mereka.

Idealnya, Anda harus mengonversi gambar ke WebP dan JPEG-XR bila perlu, dan menyesuaikan kualitas kompresi untuk menyeimbangkan format. Penting juga untuk mendeteksi browser tertentu yang mengakses setiap gambar dan mengirimkan versi gambar yang dioptimalkan ke browser masing-masing. Melakukannya akan memungkinkan Anda memastikan pengguna menerima gambar terbaik, dalam hal kualitas visual dan pengoptimalan ukuran file, tanpa memperlambat situs Anda.

Hilangkan Pengubahan Ukuran Sisi Peramban yang Memboroskan

Pengembang sering menggunakan pengubahan ukuran gambar sisi browser sebagai jalan pintas, daripada mengubah ukuran gambar di sisi server. Meskipun hasil akhirnya terlihat sama persis di browser modern, dampaknya pada bandwidth sangat berbeda. Dengan pengubahan ukuran sisi browser, pengunjung situs web membuang waktu berharga untuk mengunduh gambar besar yang tidak perlu dan Anda membuang bandwidth untuk mengirimkannya kepada mereka.

Untuk browser lama, masalahnya bahkan lebih menonjol karena algoritme pengubahan ukurannya biasanya di bawah standar. Anda perlu memastikan gambar Anda sesuai dengan dimensi situs web yang dibutuhkan. Sebaiknya buat thumbnail yang berbeda dari gambar yang sama daripada mengirimkan gambar besar dan mengandalkan browser untuk mengubah ukurannya. Ada beberapa alat yang tersedia yang dapat membantu dengan ini, seperti pengubah gambar sumber terbuka seperti ImageMagick atau solusi berbasis cloud seperti Cloudinary.

Gunakan Jenis File Gambar yang Benar

JPEG, PNG, dan GIF adalah format file yang paling umum digunakan di situs web saat ini, tetapi masing-masing memiliki peran yang sangat berbeda. Gunakan format yang salah dan Anda membuang waktu pengunjung dan uang Anda sendiri. Kesalahan yang sering terjadi adalah menggunakan PNG untuk mengirimkan foto. Ada kesalahpahaman umum bahwa PNG, sebagai format lossless, akan menghasilkan reproduksi foto setinggi mungkin.

Meskipun ini umumnya benar, ini juga merupakan pengoptimalan yang tidak perlu. Penting untuk diingat format gambar apa yang harus digunakan untuk konten yang ditampilkan. PNG harus digunakan untuk gambar yang dihasilkan komputer (bagan, logo, dll.) atau ketika Anda membutuhkan transparansi dalam gambar Anda (hamparan gambar); JPEG saat Anda menampilkan foto yang diambil; dan GIF saat animasi diperlukan (Ajax memuat animasi, dll.).

Jangan Gunakan Ukuran Gambar Tunggal Di Semua Media Pengiriman

Situs web Anda dilihat di banyak perangkat berbeda, terutama karena ponsel cerdas, tablet, dan jam tangan pintar telah menjadi pilihan konsumen. Seringkali pengembang menawarkan gambar yang sama di semua resolusi perangkat, menggunakan pengubahan ukuran sisi klien untuk gambar. Gambar mungkin terlihat bagus, tetapi pengunjung membuang waktu memuat gambar besar yang tidak perlu ke perangkat mereka dan Anda membayar untuk penggunaan bandwidth yang berlebihan.

Ini sangat tidak adil bagi pengguna 3G dan pengguna roaming yang membayar ekstra besar untuk mengunduh gambar ekstra resolusi tinggi yang tidak berguna. Untuk menghindari masalah ini, Anda harus mengidentifikasi perangkat seluler pengunjung dan resolusinya menggunakan agen pengguna mereka. Dengan resolusi yang benar di tangan, ambil gambar yang paling pas dari server Anda. Ini mengharuskan Anda menyediakan satu set thumbnail untuk setiap gambar asli Anda. Ada paket Javascript luar biasa yang tersedia yang akan mengotomatiskan proses ini.

Manfaatkan Desain Responsif

Setiap perangkat yang digunakan pengunjung untuk mengakses situs Anda memiliki resolusi yang berbeda. Markup situs web harus menyesuaikan diri agar terlihat sempurna di semua perangkat yang berbeda dan dalam berbagai resolusi, kepadatan piksel, dan orientasi perangkat seluler. Mengelola, memanipulasi, dan mengirimkan gambar, adalah salah satu tantangan utama desain responsif yang dihadapi pengembang web.

Karena tantangan ini, banyak situs web dibuat dengan gambar resolusi tertinggi yang mungkin diperlukan dan hanya diperkecil dari sisi klien tergantung pada titik henti sementara. Proses ini tidak efisien dan merusak kinerja. Tetapi ada opsi, seperti alat open source Responsive Breakpoints, yang dapat membantu Anda menghasilkan semua ukuran gambar yang Anda perlukan, serta kode HTML yang sesuai.

Memanfaatkan Jaringan Pengiriman Konten (CDN)

CDNS biasanya memiliki server yang ditempatkan secara strategis di seluruh dunia untuk mempersingkat waktu bolak-balik konten. CDN memungkinkan gambar disajikan lebih cepat kepada pengguna dan mengurangi kemungkinan mogok, meningkatkan kinerja SEO, dan meningkatkan pengalaman pengguna. Saat Anda memilih CDN, Anda perlu mempertimbangkan tingkat cakupan globalnya, tingkat caching, kemampuan untuk menjalankan operasi logis di edge, waktu respons rata-rata, dan metrik lainnya, seperti waktu pembatalan rata-rata.

Dampak Perubahan

Dengan menerapkan praktik terbaik ini, Anda benar-benar dapat membuat perbedaan dalam pengalaman pengguna, mendorong pengunjung untuk tinggal lebih lama, menjelajah lebih banyak, terlibat, dan melakukan pembelian. Pertimbangkan hasil dari perusahaan-perusahaan ini:

Apartment List, sumber online yang membantu individu mencari perumahan sewa, mendapati dirinya berurusan dengan berbagai format dan resolusi gambar yang berbeda saat mengambil umpan data gambar dari berbagai komunitas apartemen yang ditampilkan di situsnya. Dengan mengubah semua gambar ini menjadi gambar yang optimal untuk presentasi di perangkat seluler dengan berbagai ukuran, serta desktop, serta memanfaatkan teknik desain responsif, perusahaan melihat peningkatan hampir 20% dalam tingkat konversinya.

KartRocket, platform e-commerce berbasis SaaS yang menawarkan ekosistem e-commerce transparan dan lengkap yang membantu UKM membuat toko online dengan cepat dan mudah, diperlukan untuk menemukan cara untuk memastikan kualitas gambar tanpa memengaruhi waktu buka atau kinerja situs untuknya. klien. Ini memanfaatkan alat untuk mengontrol gambar secara dinamis, sehingga dioptimalkan untuk gambar mini kecil, gambar spanduk besar, dan gambar produk utama. Pendekatan ini memungkinkan KartRocket mencapai peningkatan 100x dalam waktu respons untuk pemuatan gambar.

Garis bawah

Ketika waktu adalah uang, pemilik situs web tidak mampu untuk tidak mengambil semua langkah yang diperlukan untuk meningkatkan pengalaman pengunjung mereka. Bahkan penundaan sepersekian detik dalam memuat halaman dapat menyebabkan hilangnya pendapatan dan kepercayaan dari pihak konsumen.

Mempertimbangkan bahwa gambar dan video adalah babi bandwidth terbesar di sebagian besar situs web, Anda perlu memperhatikan desain web dan format gambar Anda dengan serius, kemudian mengambil langkah-langkah yang diperlukan untuk memastikan bahwa media dioptimalkan sehingga situs Anda – belum lagi pendapatan dan persepsi pelanggan – tidak menderita sebagai hasilnya.