7 Kesalahan yang Membuat Website Menjadi “Lemot”

website lemot

Seperti kita tahu bahwa kecepatan adalah salah satu faktor penting pada sebuah website. Website yang baik dituntut tidak hanya memiliki tampilan yang user-friendly, tetapi juga cepat ketika diakses. Kecepatan website dapat berpengaruh langsung pada tingkat bouncing, konversi, pendapatan, kepuasan pengguna, SEO (secara eksplisit dalam Google Page Rank, dan secara tidak langsung pada popularitas website).

Selain itu, website yang ‘lemot’ tidak disukai oleh pengunjung, mereka akan mencari website lain yang lebih cepat menampilkan informasi yang mereka butuhkan. Berikut adalah 7 kesalahan umum yang dapat membuat website menjadi lambat dan tips bagaimana menghindari atau memperbaikinya.

1. Terlalu banyak HTTP request

Ini merupakan penyumbang terbesar dari masalah kinerja sebagian besar halaman web. Ada banyak teknik WPO (Web Performance Optimization) yang paling efektif untuk mengatasi masalah ini, meskipun dengan dalam cara yang sangat berbeda. Berikut adalah beberapa solusinya:

Gabungkan scripts dan stylesheets

Caranya cukup dengan menggabungkan beberapa script file menjadi satu. Masukkan isi dari .css file berikutnya menjadi satu gabungan stylesheets. Ada biaya pemeliharaan untuk melakukan hal ini secara manual, tetapi ada banyak solusi otomatis yang berlimpah.

Gabungkan gambar dengan teknik sprites

CSS spriting merupakan teknik klasik masih cukup efektif untuk digunakan, yaitu dengan menempatkan banyak gambar (semua grafis, tema, atau navigasi) menjadi satu file gambar tunggal yang besar. Kemudian gunakan CSS untuk mengatur posisi yang tepat dan selektif menampilkan hanya bagian yang sesuai dari gambar sprite di setiap tempat di mana sebuah gambar diperlukan. Jadi, kita tidak menggunakan puluhan file gambar, tetapi hanya dengan satu file gambar.

Gunakan sedikit gambar

Terlalu banyak gambar dalam sebuah halaman bisa menjadi masalah serius. Solusinya adalah mengganti file gambar dengan CSS (misalnya untuk background colors, borders, tombol, hover effect dan styled text), atau bahkan inline bisa menggunakan “data URLs” untuk gambar yang lebih kecil.

2. Minimal Client-side Processing

Banyak situs terkadang lupa untuk memanfaatkan kemampuan client, tetapi membebankan semua pekerjaan ke server. Salah satu contoh sederhana adalah bentuk validasi. Posting form data ke server, memvalidasinya disitu, dan mengirimkan kembali pesan error (apalagi seluruh halaman) adalah sangat tidak efisien.

Validasi pada client

Sebaliknya, validasi user input dari dalam halaman. Untuk alasan keamanan, aplikasi web harus memakai dasi pada sisi server; aturan #1 dari keamanan web adalah kawasan input tidak dapat dipercaya. Jadi, validasi pada client untuk alasan performa dan UX, dan validasi pada server untuk alasan keamanan.

Gunakan web standars dan MVC separation

Menggunakan web standars adalah sangat penting untuk menciptakan maintainable, accessible, future-proof websites. Cara ini merupakan dasar yang baik untuk memaksimalkan performa. Penggunaan modern web standars mendorong untuk pemisahan content (HTML), styling (CSS), and behavior (JavaScript).

Push presentation code pada client tier

Selain contoh form validasi telah disebutkan sebelumnya, banyak skenario call lainnya untuk melakukan lebih banyak hal pada client. Kita bisa melakukan push raw data dari server ke client (misalnya dalam JSON format), kemudian gunakan JavaScript dan CSS untuk membuat tampilan grafis, charts, dan visualisasi yang bagus di browser.

Hanya dengan melakukan push data, kita bisa menghemat server CPU, mempersingkat waktu tunggu, dan memanfaatkan sumber daya yang tersedia untuk setiap client.

Manfaatkan teknik Ajax

Hanya dengan membutuhkan bagian kecil dari halaman untuk mengubah dalam merespon tindakan pengguna, kita dapat membuat situs atau aplikasi web yang lebih responsif dan efisien. Ada pendekatan yang berbeda (misalnya fetching HTML vs script vs data).

3. Jumlah parallel request sedikit

Fetch script, parse dan mengeksekusinya, kemudian fetch satu yang lainnya. Setelah itu download beberapa gambar dari server yang sama, menggunakan semua koneksi yang tersedia. Kemudian ketika di download, fetch beberapa lagi lainnya. Apakah terlihat efisien? Jawabnya tidak.

Ada hal-hal yang dapat kita lakukan pada HTML untuk memungkinkan semua browser agar membuat banyak request sekaligus, yang memiliki dampak besar pada latency.

Gunakan browser-appropriate domain sharding

Beberapa browser lama seperti IE 7 memiliki keuntungan dari “domain sharding”, yaitu sebuah teknik untuk membagi resources pada beberapa domain, sehingga dapat meningkatkan waktu memuat halaman dan visibility mesin pencari. Ketika beberapa domain yang digunakan, browser dapat men-download lebih banyak sumber daya secara bersamaan, sehingga menghasilkan pengalaman pengguna yang lebih cepat.

Aktifkan keep-alive

Keep-alive adalah sebuah metode yang memungkinkan penggunaan koneksi TCP yang sama untuk komunikasi HTTP tanpa membuka koneksi baru untuk setiap request baru. Sederhananya, ini adalah komunikasi antar web server dan web browser “kita bisa mengambil lebih dari satu file pada satu waktu”.

4. Kurang memaksimalkan browser cache/penyimpanan lokal

Ada tiga masalah yang sulit dalam ilmu komputer, yaitu cachig, naming, dan of-by-one errors. Seperti kita tahu bahwa website akan lebih cepat dibuka ketika memuat aset dari local cache.

Gunakan header yang tepat

Mengatur cache headers untuk aset statis, terutama yang merujuk ke lebih dari satu halaman adalah cara yang bagus untuk meningkatkan performa. Sejak penghapusan client caches jelas tidak mungkin, cara untuk menangani update untuk cache konten adalah dengan filename revving (mengubah nama aset dan memperbarui referensi).

Ini adalah teknik lain yang memiliki biaya pemeliharaan yang tinggi jika kita melakukannya secara manual, tapi dengan otomatisasi (misalnya menggunakan script) membuat lebih praktis. Gunakan “Expires” header untuk pendekatan ini. Untuk konten yang sering di update, gunakan header “Last-Modified”, untuk trigger conditional “If-Modified-Since” requests dari browser. Conditional requests jelas lebih lambat dari pencarian cache lokal, tapi masih jauh lebih baik daripada full round-trip.

Manfaatkan penyimpanan lokal

Sebuah senjata baru dalam WPO adalah penyimpanan lokal HTML5. Untuk browser yang mendukung HTML5, memungkinkan lebih banyak penyimpanan secara eksplisit pada client daripada cookies, dan tidak seperti cookies, penyimpanan lokal tidak membebani setiap request.

5. Widget pihak ketiga

Widget pihak ketiga selain dapat membantu memudahkan pekerjaan kita, tetapi juga dapat berpengaruh pada kinerja website.

Hindari widget pihak ketiga!

Pikirkan baik-baik, jangan menggunakan widget yang tidak terlalu dibutuhkan. Gunakan hanya widget yang hanya benar-benar penting.

Gunakan fitur async

Opsi kedua adalah gunakan widget yang mendukung asynchronous, sehingga tidak akan terlalu membebani kinerja website.

6. Terlalu banyak byte

Sama seperti “Terlalu banyak HTTP request”, ini juga merupakan masalah serius dalam kinerja website. Tapi ada banyak cara untuk membuat response dengan request yang lebih kecil.

Kompresi

Salah satu solusi yang dapat kita gunakan adalah dengan kompresi gzip. Proses dekompresi pada client secara khusus dikerdilkan untuk mengurangi latency, dengan jumlah byte yang melewati kabel lebih sedikit. Pada sisi server, pre-compressing static resources membantu mengurangi CPU overhead. Solusi server-side seperti Apache’s mod_deflate membuat itu menjadi mudah untuk mengkompres dynamic content dan memastikan konten yang telah dikompres hanya dikirimkan ke client yang dapat menangani hal tersebut (ditunjukkan oleh request header seperti “Accept-Encoding: gzip, deflate”).

Teknik lainnya termasuk:

  • Optimasi gambar
  • JavaScript dan CSS minification
  • Penggunaan kembali Client-tier code
  • Pagination
  • Ajax
  • Cookie-less domains

7. Tidak menggunakan Global Network

Salah satu kesalahan yang umum terjadi adalah mengabaikan faktor geografi. Jika situs kita memiliki host di data center NYC, ada perbedaan besar dalam latency untuk pengguna di Boston dibandingkan pengguna di California (apalagi di Asia). Melayani konten dari tepi adalah tugas dari CDN. Gunakan penyedia layanan cloud untuk mendistribusikan konten kita ke banyak lokasi, sehingga pengunjung dapat mengakses dari server terdekat.

Itulah 7 faktor yang dapat membuat website menjadi “lemot” dan bagaimana cara mengatasinya.

Leave a Reply

Your email address will not be published. Required fields are marked *