Cara mempercepat loading website ini menjadi hal yang wajib bagi para pemilik website atau pemilik aplikasi, karena merupakan salah satu cara agar visitor atau pengunjung nyaman mengakses halaman-halaman website yang ada. Dengan begitu, maka tujuan dari website itu peluangnya akan semakin besar dan akan mengurangi bounce rate.
Misalnya, jika tujuan website itu untuk menjual barang atau jasa, maka dengan kecepatan akses websitenya yang cepat pengunjung mudah mengakses setiap halaman per halaman website. Jika baru masuk saja websitenya sulit diakses atau loadingnya lama, sudah dipastikan pengunjung akan berpindah ke website lain.
Kali ini saya akan menjelaskan cara mengoptimasi kecepatan website berdasarkan pengalaman saya dan beberapa sumber.
1. Minimize HTTP Request
Lamanya pemrosesan suatu page website paling banyak ada di sisi client atau browser. Dari seluruh proses menampilkan halaman website, 80% adalah waktu dimana semua asset di download oleh browser request melalui protokol HTTP. Untuk yang belum tau apa itu HTTP? Bisa cek penjelasan lengkapnya di Wikipedia.
Jadi untuk mempercepat memuat halaman perlu sekali optimize semua komponen atau asset suatu halaman website. Seperti gambar, flash (kalo memang masih ada yang pake), scripts, stylesheet dan lainnya.
Salah satu cara untuk optimize komponen yaitu men-simplify halaman website atau dibuat sederhana. Tapi bagaimana mengoptimalkan design tampilan yang menarik tapi tetap load page cepat.
Beberapa cara untuk meminimal HTTP Request yang mungkin perlu Kamu coba:
a. Gabungkan file asset
Contohnya menggabungkan beberapa file javascript atau CSS ke dalam satu file, jadi dalam satu file berisi banyak fungsi atau bahkan beberapa library.
b. Gunakan tehnik CSS Sprite
Ini adalah salah satu cara optimize css delivery yaitu dengan menggunakan satu image file untuk beberapa tampilan sekaligus, dengan hanya membedakan kordinat saja menggunakan fungsi CSS. Kamu bisa lihat best practice nya disini W3School.
c. Image Map
Menggabungkan beberapa gambar menjadi satu gambar. Image map hanya berfungsi jika gambar bersebelahan di suatu halaman, seperti navigasi. Menentukan kordinat gambar bisa jadi membosankan dan rawan kesalahan. Tapi menggunakan teknik ini untuk navigasi juga sudah tidak disarankan. Contohnya bisa Kamu liat disini W3[dot]org
2. Gunakan Content Delivery Network (CDN)
CDN (Content Delivery Network) adalah jaringan server yang berada di setiap wilayah di dunia dengan tujuan mempercepat tersampaikannya data dari server ke client. Salah satu faktor lambatnya suatu data sampai ke pengguna yaitu jarak. Semakin jauh jarak antara server dan client maka semakin lama juga waktu yang diperlukan sebuah data diterima pengguna.
Dalam hal ini asset suatu aplikasi atau website berada di server origin, kemudian dengan system CDN asset tersebut akan di share ke tiap-tiap edge server seperti gambar diatas yang letaknya menyebar di berbagai negara di dunia misalnya seperti Singapure, Jepang atau Australia.
CDN meningkatkan kecepatan pengiriman data yang diperlukan pengguna karena sistemnya mencari lokasi terdekat dari pengguna berada. Misalnya, pengguna ingin mengakses website tentang Travel Agency di Bali. Sedangkan pengguna mengakses website ada di New York, maka cara kerjanya yaitu pengguna mengakses website Indonesia tapi melalui CDN yang ada di Amerika, dan akses website akan lebih cepat tersampaikan karena resource masih ada di CDN atau data center Amerika.
Menurut saya ini akan sangat efektif jika memang visitor sudah banyak sekali dan pengguna berasal dari berbagai negara didunia.
3. Pasang Cache Control Header
Ada dua metode yang perlu diperhatikan dalam pengaturan cache yaitu:
a. Untuk halaman Statis
Cache tidak perlu diatur menggunakan expire, maksudnya biarkan cache nya berjalan sepanjang waktu. Contohnya untuk halaman-halaman yang sifatnya jarang di update seperti halaman About, Kontak, Ketentuan Privacy dan sejenisnya.
b. Untuk halaman Dinamis
Gunakan “Cache-Control” pada HEADER untuk disesuaikan dengan komponen ataupun data tertentu yang sifatnya terus berganti atau diupdate.
Cache paling banyak diimplementasi untuk komponen seperti Image atau sejenisnya. Tapi alangkah baiknya jika cache ini di implementasi juga untuk komponen lain seperti stylesheet, script dan lainnya.
Browser memasang cache untuk mempercepat halaman web dari sisi client. Ada juga dari sisi server untuk membuat cache melalui header HTTP response untuk mengkomunikasikan ke browser berapa lama cache itu bekerja
4. Letakkan Stylesheets di bagian atas
Menurut salah satu sumber dari developer yang bekerja di Yahoo, mereke mengatakan bahwa file stylesheets yang diletakkan di bagian tag HEAD bisa mempercepat tampilnya komponen di suatu halaman web. Ini karena memasukkan stylesheet ke tag HEAD membuat render halaman web secara bertahap.
Peletakan stylesheets di bagian bawah halaman akan mencegah rendering bertahap yang mana ini berkaitan dengan cara kerja browser sendiri yang hampir semua seperti itu termasuk Internet Explorer. Browser akan memblokir rendering ketika stylesheet berubah yang kemungkinan akan menyebabkan stuck dan pengguna akan melihat blank putih.
5. Letakkan Scripts di bagian bawah
Masalah yang disebabkan oleh scripts adalah memblokir unduhan secara paralel. Spesifikasi HTTP/1.1 menyarankan bahwa browser mengunduh tidak lebih dari dua komponen secara paralel per host. Jadi, dalam hal ini pengguna bisa saja melakukan lebih dari dua unduhan yang terjadi secara paralel pada browser dan menampilkan gambar dari beberapa host pada suatu halaman web. Saat skrip sedang diunduh, browser tidak akan memulai unduhan lain, bahkan pada host yang berbeda.
Dalam beberapa kasus, tidak mudah untuk memindahkan scripts ke bagian bawah halama. Contohnya, document.write untuk menyisipkan komponen ke bagian konten halaman, scripts tidak dapat ditempelkan ke elemen bagian bawah halaman dari script walaupun ada cara untuk mengatasi kasus tersebut.
Baca Juga: Daftar Web Hosting Terbaik Indonesia, Ada Kode Promo Hostingnya Juga
6. Minify Javascript dan CSS
Minification yaitu tehnik menghapus karakter yang tidak diperlukan dari sekumpulan kode fungsi untuk mengurangi ukuran file dan akan meningkatkan kecepatan memuat data. Menghapus karakter seperti komentar, spasi yang tidak diperlukan, baris baru dan tab, jadi biasanya source code akan menjadi satu baris panjang saja.
Dalam kode javascript tehnik ini akan sangat berpengaruh dan meningkatkan kinerja waktu respon lebih cepat karena ukuran file yang kecil. Ada banyak sekali website tools yang menyediakan fungsi minify source code untuk javascript atau CSS, ketikan saja di Google dengan keyword “minify online” contohnya seperti Toptal.
7. Lebih baik menggunakan Javascript dan CSS External
Ketika sebuah source code seperti javascript atau CSS di pasang disebuah halaman web, ada beberapa macam cara pemasangan yaitu penulisan secara inline, internal atau external.
Contoh CSS secara inline:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Contoh CSS secara Internal:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Penulisan CSS secara External
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Untuk mengoptimalkan memuat data pada halaman web disarankan menggunakan cara External dengan file source code terpisah sama halnya dengan kode javascript dan yang lainnya.