Website

Meningkatkan Performa Website – Menggunakan Gambar Progressive JPEG

Meningkatkan Performa Website - Menggunakan Gambar Progressive JPEG

Pengenalan

Salah satu tugas yang krusial dalam optimasi website yang sering dilupakan oleh sebagian orang adalah gambar. Dalam salah satu tutorial sebelumnya, kita sudah mempelajari bagaimana cara meningkatkan performa website secara efektif dengan menggunakan teknik serving scaled images. Kali ini, kita akan lanjut ke step selanjutnya dan mempelajari bagaimana cara mengoptimasi gambar JPEG baseline menjadi progressive.

Apa beda antara gambar JPEG baseline dan progressive?

Secara umum, gambar JPEG di-load dari atas ke bawah dan itu disebut gambar baseline. Pada gambar JPEG progressive, gambar ditampilkan langsung sambil me-load bagian data. Artinya, gambar akan terlihat seperti berkotak-kotak, hingga sampai ter-load dengan sempurna. Contoh gambar berikut ini akan mengilustrasikan cara kerjanya.

Siklus loading gambar JPEG baseline:

Baseline-JPEG-image-load-cycle

Siklus loading gambar JPEG progressive:

Progressive-JPEG-image-load-cycle

Bagaimana gambar JPEG progressive bisa meningkatkan performa website?

Agar mendapatkan hasil visual yang baik, gambar JPEG progressive biasanya berukuran 2% s/d 10% lebih kecil daripada gambar baseline, sehingga bila menggunakan progressive Anda akan mampu mendapatkan loading dan performa yang lebih cepat. Permintaan Anda (request) ke server akan lebih singkat dan lebih efisien, yang juga akan mengurangi pengunaan resource Anda seperti bandwidth, diskspace, dll. Ini sangat efisien jika Anda meletakkan website Anda di layanan hosting gratis atau shared hosting.
Website dengan gambar JPEG baseline yang banyak akan, bila pindah ke kompresi gambar JPEG, akan mendapatkan banyak keuntungan. Selain itu, yang bisa dipastikan adalah pengunjung yang mengakses webste Anda melalui perangkat mobile atau dengan koneksi internet yang lambat akan mendapatkan pengalaman visual yang lebih baik dan tentunya dengan waktu load yang jauh lebih cepat bila Anda menggunakan gambar JPEG progressive.

PENTING! Beberapa browser (misalnya Internet Explorer yang dibuat sebelum adanya Windows 7) tidak mendukung penggunaan gambar JPEG progressive. Namun, versi setelahnya sudah mendukung.

Yang Anda butuhkan

Sebelum memulai panduan ini, yang Anda butuhkan adalah:

  • Akses FTP

Langkah 1 – Analisa Website Anda

Untuk menemukan gambar JPEG baseline yang bisa digantikan dengan progressive, kita akan menggunakan tool WebPageTest.org. Tool ini sangat bermanfaat, karena Anda akan bisa mendapatkan versi progressive dari gambar baseline tanpa harus menggunakan bantuan tool tambahan.

Berikut ini adalah hasil Performance Review setelah analisa test dilakukan:

0/100-progressive-JPEG-image-score

Langkah 2 – Download gambar JPEG progressive

Ada banyak variasi tool yang bisa Anda gunakan untuk meng-convert gambar JPEG baseline ke progressive, antara lain:

Opsi 1 – Kompres JPEG baseline ke tipe progressive menggunakan WebPageTest.org

Setelah mendapatkan daftar gambar yang ingin diganti, masuk ke bagian Details dan klik View All Images.

view-all-images-section

Bagian tersebut akan menampilkan seluruh gambar di halaman Anda. Klik Analyze JPEG di setiap gambar yang terdapat pada Langkah 1 di tutorial ini dan scroll ke bawah.

view-all-images-section

Anda akan melihat ada Quality 85 Image dari gambar asli Anda. Simpan semua Quality 85 Image ke komputer Anda dan lanjutkan langkah selanjutnya. Kami sangat merekomendasikan agar Anda menyimpan gambar dengan nama yang sama seperti yang asli, agar proses penggantian akan jauh lebih mudah dan cepat.

Opsi 2 – Mengkonversi gambar JPEG baseline ke progressive dengan Optimizilla

Jika Anda berencana untuk meng-upload banyak gambar ke website Anda, atau jika website Anda belum di-upload, Anda bisa menggunakan Optimizilla untuk mengkonversi gambar JPEG baseline Anda ke progressive. Dengan menggunakan tool ini, Anda bisa mengoptimasi hingga 20 gambar dan merampingkannya dengan algoritma kompresi ke Quality 85 atau lebih kecil.

Optimizilla image optimization process from baseline to progressive jpeg

PENTING! Bila Anda memilih kurang dari 85, hasil gambar akan kurang baik. Pilih kualitasnya dengan hati-hati.

Opsi 3 – Mengoptimasi gambar dengan plugin CMS

Jika Anda memiliki blog WordPress, Anda bisa dengan mudah mengoptimasi gambar JPEG baseline menggunakan WP Smush. Cek tutorial ini untuk instruksi lebih detail mengenai cara menggunakan WP Smush.

Langkah 3 – Mengganti gambar yang lama

PENTING! Pastikan Anda mem-backup website atau gambar yang ingin Anda ganti.

Dengan menggunakan File Manager atau aplikasi FTP, temukan gambar di Langkah 1. Hapus dan ganti gambar tersebut dengan gambar Quality 85 yang sudah kita buat di Langkah 2. Sekali lagi, mohon pastikan gambar tersebut sudah memiliki nama yang sama agar Anda terhindar dari error 404 atau masalah loading lainnya.

Langkah 4 – Mengecek perubahan

Setelah seluruh gambar di-upload, bersihkan cache browser Anda dan buka website Anda untuk melihat perubahannya. Anda juga bisa mengunakan mode private browser pada website. Setelah itu, Anda bisa menganalisa website Anda dengan menggunakan WebPageTest.org untuk memeriksa apakah semuanya sudah berjalan sesuai yang Anda inginkan atau belum. Berikut ini adalah kira-kira hasil yang akan Anda lihat di bagian Details:

100/100-progressive-JPEG-image-score

Kesimpulan

Dalam panduan ini, kita telah mempelajari bagaimana cara meningkatkan kecepatan website Anda dengan menggunakan gambar JPEG progressive, tanpa perlu menggunakan baseline. Semakin lancar pengalaman visual dan semakin kecil ukuran, akan membuat Anda dan pengunjung website Anda senang. Selain itu, penggunaan resource juga menjadi lebih rendah, serta membantu meningkatkan SEo dan performa website. Pada dasarnya ini adalah kondisi yang sama-sama menguntungkan untuk semua orang. Win-win solution!

Add Comment

Click here to post a comment

Gabung bersama ratusan ribu pelanggan di seluruh dunia

dan dapatkan tutorial baru langsung di email Anda

Please wait...

Abone olduğunuz için teşekkürler!

Dapatkan harga hemat!

Web Hosting Gratis Domain mulai dari

Rp.10.275
/bln