Advertisement
  1. Web Design
  2. Workflow
Webdesign

Langkah-Langkah Terbaik untuk Meningkatkan Performa Website

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Tak perlu dipungkiri lagi: website dengan performa yang baik memiliki engagement, retensi dan juga konversi yang tinggi dari pengunjung. Mengingat bagaimana pengguna bisa berubah-ubah, ditambah juga dengan fakta bahwa pengunaan perangkat mobile cukup signifikan pada masa ini, tidak pernah sebelumnya kecepatan suatu website diperhitungkan. Pada artikel ini saya akan menyorot cara-cara dimana Anda bisa meningkatkan performa website kalian.

Thumbnail dari Photodune.net


Meningkatkan Performa Sebuah Website

Performa sebuah website dan dampaknya, telah didokumentasikan dengan baik selama beberapa lama. Pada tahun 2007 Amazon melaporkan bahwa setiap peningkatan 100 ms (millisecond) pada waktu pemuatan situs Amazon.com, maka penjualan mereka berkurang 1%. Google juga melaporkan hasil yang sama di tahun 2006 pada produk mereka Google Maps.  Google menemukan bahwa dengan mengurangi ukuran dari halaman mereka dari 100KB menjadi 80KB, traffic mereka naik 10% pada minggu pertama dan 25% pada minggu berikutnya.

Jelas bahwa mengamati performa website merupakan keharusan dan tidak boleh diabaikan sebagai bagian dari alur kerja desain website kita.

Increase web speed performance infographic
Infografis diatas oleh strangeloopnetworks.com menggambarkan pengaruh performa suatu website terhadap pengguna.

Anda mungkin sudah menggunakan beberapa teknik yang akan dibahas hari ini, sementara yang lain mungkin belum. Meskipun Anda bisa menggunakan teknik-teknik pada sisi server untuk mempercepat website, artikel ini akan lebih fokus pada cara kita meningkatkan performa dari sisi front end. Let's jump in..


Meminimilkan HTTP Requests

Salah satu dari aspek penting untuk meningkatkan performa website adalah meminimilkan jumlah arus akses yang harus dilakukan browser ke server. Setiap file yang termasuk di dalam sebuah website (seperti CSS, JavaScript atau gambar) semua perlu didownload ke browser. Dengan meminimilkan requests ini Anda akan mempercepat halaman secara signifikan. Jika Anda memasukan file CSS secara terpisah untuk beberapa bagian maka Anda akan mengerti bahwa akan lebih menguntungkan untuk memuat semua CSS dalam satu file stylesheet, seperti halnya JavaScript dan resources lainnya.

Cara anda menyertakan file-file ke website juga bisa punya efek yang drastis. Contohnya, jika Anda saat ini menyertakan CSS anda seperti ini:

maka anda perlu mempertimbangkan cara ini:

Dengan cara ini anda memungkinkan file CSS di download secara parallel dengan resources lainnya, sehingga menghasilkan load time halaman yang lebih cepat.


Memperkecil HTML, CSS, & JavaScript

Untuk memahami kode yang kita tulis, kita terkadang memformatnya dengan cara agar kita bisa mudah membacanya, dengan kata lain formatnya lebih human-friendly. Lihatlah contoh kode di bawah ini:

Untuk memahami kode yang kita tulis, kita terkadang memformatnya dengan cara agar kita bisa mudah membacanya, dengan kata lain formatnya lebih human-friendly. Lihatlah contoh kode di bawah ini:

Sayangnya, meskipun mungkin lebih mudah dibaca, versi human-friendly ini memiliki banyak karakter yang tidak diperlukan. Ini tidak terlalu berdampak jika hanya seperti contoh di atas, namun, jika ini adalah situs dengan skala yang besar dengan ribuan baris kode, maka akan merugikan performa website kita.

Karakter yang tidak perlu dapat mencakup spasi, komen, dan karakter baris baru. Karakter-karakter ini bisa dihapus tanpa mempengaruhi performa kode dan dengan menghapus ini kita mengurangi ukuran file kode kita, begitu juga dengan jumlah data yang perlu didownload oleh browser.

Anda bisa mengecilkan HTML, CSS & JavaScript. Jika Anda belum melakukan ini maka anda perlu berpikir untuk itu sekarang. Untungnya untuk kita ada banyak tools secara online yang dapat membantu mengecilkan dan mengembalikan kode kita seperti YUI compressor.


Mengoptimalkan Gambar

Salah satu asset yang sangat memakan performa yang perlu didownload oleh  browser adalah gambar, menyebabkan beberapa situs menjadi sangat lambat. Sebisa mungkin cobalah menggunakan CSS untuk menghasilkan grafis dan bukan gambar. Ini bisa lebih baik untuk elemen seperti button, tapi pada beberapa kasus CSS mungkin tidak dapat digunakan untuk menciptakan desain seperti foto, atau grafis dekoratif yang mendetail. Jika demikian maka ada beberapa trik lain yang bisa kita coba.

optimize images for the web
Dengan memformat dan mengkompresi gambar secara benar tanpa kehilangan tampilan atau kualitas visual Anda bisa mengurangi data yang perlu didownload, sehingga menghasilkan gambar yang optimal untuk dioptimalkan.

Sprites

Jika anda telah mendesain dalam waktu yang lama, saya yakin bahwa Anda pernah menggunakan sprites. Tapi jika anda baru memulai, maka inilah gambaran singkat tentang sprite.

Sebelumnya sudah dijelaskan bahwa kunci untuk mempercepat website adalah meminimalisir jumlah http request. Setiap gambar yang dimiliki pada website Anda memerlukan satu http request ke server. Biasanya, browser bisa melakukan beberapa permintaan (ke domain yang sama) secara bersamaan, itulah kenapa terbentuk suatu bentuk antrian. Dengan menggabungkan beberapa gambar menjadi satu gambar kita bisa mengurangi jumlah requests.

Kekurangan dari membuat sprites adalah cukup sulit untuk kita menciptakannya. Tapi ada banyak alat online yang bisa digunakan untuk membuat sprites. Salah satu yang saya gunakan (yang mengurangi banyak waktu selama 6 bulan terakhir) adalah SpritePad. Dengan SpritePad Anda bisa dengan mudah hanya dengan cara drag & drop gambar Anda dan mereka akan langsung membuatnya menjadi sprite dengan format PNG + kode CSS nya. Keren bukan?


Diatas contoh dari gambar sprite yang digunakan oleh website Facebook dan Google.

Losslessly Compressing Images

Jika Anda, sebagai contoh, memiliki banyak bentuk gallery fotografi, atau banyak foto yang ada di website yang Anda bangun maka mungkin tidak mudah dan praktis membuatnya menjadi sprite. Disinilah dimana kita perlu melakukan ‘kompresi gambar’. Dengan memformat dan mengkompresi gambar secara baik kita bisa menghemat banyak byte data.

Seringkali ketika kita menyimpan gambar dengan software seperti Fireworks atau Photoshop file yang dihasilkan mengandung data tambahan, termasuk data warna yang mungkin tidak dipakai dan bahkan data meta. Dengan mengkompresi gambar tanpa menghilangkan tampilan gambar atau kualitas visual Anda bisa menyimpan data yang perlu didownload. Layanan Yahoo seperti smush.it adalah salah satu alat yang baik untuk melakukan ini. Hanya dengan unggah gambar yang ingin Anda ‘smush’ dan smush.it akan mengkompresi gambar anda.

Data URIs

Cara lain untuk mengurangi jumlah http request dari gambar adalah membuatnya menjadi data uris. Data URIs bisa dideskripsikan sebagai

Mengenkripsi kedua gambar dan font menjadi data string yang dapat langsung diintegrasikan ke markup dan stylesheet Anda

Kami membuat tutorial mengenai topik tersebut diawal bulan ini dengan The What, Why and How of Data URIs in Web Design. Cek dan klik lebih lanjut untuk tahu lebih dalam. Sekedar catatan bahwa metode ini perlu digunakan secara bijak dan kadang mungkin tidak terlalu menguntungkan dan bisa digunakan secara praktis.

Menyiapkan Gambar yang sudah di Scale

Gambar harus disediakan dalam bentuk ukuran aslinya sebisa mungkin. Contohnya, Anda tidak boleh mengubah ukuran gambar menggunakan CSS kecuali Anda memiliki beberapa gambar yang sama dan gambar tersebut setidaknya cocok dengan ukuran aslinya. Jika tidak Anda perlu menggunakan sesuatu seperti Photoshop untuk mengubah ukuran gambar Anda, hasilnya kita bisa menghemat beberapa byte.

Tentu, ini tidak berlaku untuk gambar yang berubah-berubah (pada desain responsif) yang mungkin bisa lebih besar daripada yang ditampilkan di layar kecil.

Serve scaled images for the web

Pastikan bahwa gambar Anda telah di scale pada ukuran yang tepat dengan menggunakan alat seperti Photoshop daripada harus menggunakan CSS.

Anda juga dapat menghapus detail secara langsung.

dConstruct blurred images

Contoh diatas diambil dari arsip website dConstruct. Pada sebuah teknik optimisasi yang dibahas di blog Jeremy Keith dengan menggaburkan beberapa bagian yang tidak penting pada tiap foto. Dengan cara seperti itu, Dia mengurangi data gambar yang dibutuhkan, membagi ukuran file hampir menjadi setengahnya. Kehilangan kualitas secara detail bisa diabaikan, demi performa yang lebih baik.


Caching

40-60% jumlah dari pengunjung harian website Anda dating dengan cache yang kosong. Membuat halaman website anda cepat bagi pengunjung yang baru pertama kali adalah kunci untuk user experience yang baik.

Baik Web browser dan juga server memungkinkan untuk melakukan caching. Cache ini menyimpan request-request sebelumnya pada browser atau server; request seperti gambar, halaman web, file CSS/JS dan data lain seperti cookies. Dengan menyimpan hal tersebut maka kita bisa mengurangi penggunaan bandwith dan juga meningkatkan performa website kita.

Caching paling baik digunakan pada asset yang jarang berubah, seperti contohnya file CSS dan JavaScript. Anda bisa mengatur tanggal expired kapan asset harus berubah, memberi tahu browser atau server untuk menarik data asset baru secara efektif. Baca lebih lanjut tentang praktik terbaik untuk memanfaatkan caching di Google Developers.


Menunda Pemanggilan JavaScript

Untuk sebuah halaman web ditampilkan kepada pengguna secara utuh, browser perlu untuk mengunduh semua file terkait. File JavaScript tidak boleh dimuat di head dari dokumen HTML, namun di bawah dari halaman(walaupun ini tidak mengurangi jumlah bytes yang perlu didownload oleh browser), ini akan membuat halaman web ditampilkan terlebih dahulu sebelum JavaScript telah selesai dimuat.

Jika Anda meletakannya di head dari dokumen maka browser akan menunggu untuk JavaScript dimuat terlebih dahulu sebelum halaman ditampilkan. File JavaScript Anda seharusnya dimasukan sebelum tag penutup body.


Mencegah Adanya Bad Requests

Apa itu bad request? Sebagai contoh, sebuah link yang rusak pada website anda sama dengan sebuah bad request. Bad request bisa diklasifikasikan sebagai segala hal yang akan menghasilkan error 404/410; setiap request yang tidak menghasilkan apa-apa.

404 sadface - avoid bad requests

Ramiro Galan’s ‘404 Sadface’ mengilustrasikan contoh bad request.

Tidak dapat dipungkiri bahwa website Anda akan berubah, dipindahkan atau diperbaharui. Hal ini dapat membuat link lama menjadi tidak mempunyai tujuan yang benar. Walaupun request ini tidak menyebabkan data apapun didownload, hal ini masih tergolong resource yang terbuang sia-sia karena browser harus melakukan request terlebih dahulu. Jika anda berpikir bahwa Anda memiliki bad request pada website anda maka anda perlu memperbaikinya segera kesalahannya. Google Webmaster tools adalah salah satu alat bantu yang bermanfaat untuk mencari tahu apakah website anda memiliki link yang rusak.


Content Delivery Networks

Setelah anda melakukan semua perubahan pada situs Anda yang bisa membuat peluang situs Anda menjadi lebih cepat maka sudah saatnya kita juga mengecek server yang kita gunakan. Secara tradisional server akan menyimpan situs Anda dan menyajikannya sesuai dengan lokasi pengguna mengaksesnya. Waktu yang dibutuhkan pengguna saat pertama kali mengakses situs sampai dengan waktu server meresponnya bisa beragam sesuai dengan dimana lokasi si pengguna.

Content Delivery Networks (CDN) bekerja sedikit berbeda. Daripada hanya menyimpan satu duplikat situs anda, CDN membuat banyak duplikat pada server yang berbeda-beda di seluruh dunia.

cdn
Sumber Gambar dari Wikipedia

Ketika pengguna mengirimkan permintaan kepada server tersebut mereka akan mengirimkannya dari server manapun yang paling dekat dengan pengguna. Sehingga ini mempercepat pengiriman konten kepada pengguna. Ini merupakan suatu bonus tapi ini hanya boleh dilakukan jika Anda telah menggunakan metode yang lainnya juga.


Google Page Speed

Google memiliki alat yang cocok bagi kita untuk memantau performa dari berbagai factor yang telah kita bahas hari ini. Jika anda belum pernah mencoba PageSpeed Insight maka anda harus mencobanya. Terlebih lagi mereka memiliki kumpulan dokumentasi dan contoh yang lengkap yang bisa membantu memantau dan meningkatkan performa website Anda. Google mendeskripsikannya sebagai:

PageSpeed Insights menganalisa konten dari halaman web, lalu membuat saran-saran untuk membuat halaman tersebut menjadi lebih cepat. Mengurangi waktu muat sebuah halaman dapat mengurangi bounce rates dan juga meningkatkan conversion rates.


Kesimpulan

Saya harap Anda belajar beberapa hal tentang mengoptimasi kecepatan website dan bagaimana cara untuk mengimplementasikan beberapa metode ke dalam projek Anda. Dengan mempraktikan apa yang telah kita bahas Anda akan mendorong pengunjung untuk terus kembali, tetap berada di situs Anda dan menikmati pengalaman browsing yang menyenangkan di website Anda.

Intinya adalah: dengan mempercepat situs Anda, Anda tidak hanya berkontribusi pada pengalaman pengguna yang lebih baik bagi pengguna Anda, namun pengalaman pengguna yang lebih baik untuk web!


Bacaan Lebih Lanjut

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.