Cara Meningkatkan Kecepatan Akses Website

  • 4 min read
  • Jul 12, 2022
cara-meningkatkan-kecepatan-website-etalastok-blog.com

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.

banner

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

Gunakan 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.

etalastok.com-cara-kerja-dns
Sumber Image: cloudkul[dot]com

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.

Cloud Hosting Indonesia

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.

Post Terkait :

6 thoughts on “Cara Meningkatkan Kecepatan Akses Website

  1. Hi there to all, for the reason that I am genuinely keen of reading this website’s post to be updated on a regular basis. It carries pleasant stuff.

  2. This is really interesting, You’re a very skilled blogger. I’ve joined your feed and look forward to seeking more of your magnificent post. Also, I’ve shared your site in my social networks!

    1. Thank you for sharing this article, I really appreciate it. keep following me to receive other interesting and useful articles. 🙂

    1. thank you very much. I will work even harder to create useful content. I have prepared this content for the next part. so wait and watch the next article. 🙂

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.