Optimasi HTTP Request Untuk Mempercepat Loading Website

Pada kesempatan kali ini kita akan membahas tentang optimasi HTTP request, sehingga dapat mempercepat akses website kita. Hal ini penting karena ternyata HTTP request dapat mempengaruhi kecepatan akses suatu website secara signifikan.

Daftar Isi:

1. Mengenal HTTP Request dan HTTP Response
2. Optimasi HTTP Request – Pararel Request
3. Optimasi HTTP Request – Minimalisir  Request
4. Optimasi HTTP Request – Tunda (Deffer)  Request + Demo

I. HTTP Request dan HTTP Response

HTTP Request adalah istilah dimana browser meminta web server (hosting) untuk mengirimkan content suatu website, sedangkan HTTP Response merupakan proses dimana web server mengirim content tersebut ke browser. HTTP sendiri merupakan protokol (jalur) yang digunakan browser untuk berkomunikasi dengan web server.

Agar memiliki gambaran bagaimana data sebuah website ditransfer dari server hosting ke browser kita, perhatikan ilustrasi berikut:

Penjelasan gambar:

1. Pertama kali, browser merequest halaman (www.google.com), maka jalan yang ditempuh adalah nomor 1 s.d 7. Proses tesebut kita sebut sebagai request (permintaan).
2. Setelah halaman diterima browser, selanjutnya halaman tersebut dianalisa untuk mengetahui aset apa saja yang diperlukan, misal: file gambar, css, javascript, font, dll.
3. Aset tersebut kemudian di minta lagi ke web server, dengan kembali menempuh jalan nomor 1 s.d 7, jika aset disimpan pada domain yang sama (www.google.com), maka proses Resolve Domain (nomor 2 dan 3) dilewati.
4. Begitu seterusnya hingga semua aset didownload dan website siap ditampilkan.

Mengetahui jumlah  request yang terjadi

Untuk mengetahui banyaknya request yang terjadi, sobat dapat menggunakan tool yang beralamat di  https://tools.pingdom.com, misal kita tes halaman depan Kompas.com:

Ternyata… terjadi  ratusan request, banyak ya…, ternyata hal ini sudah menjadi hal  umum mengingat pada web modern yang berkembang saat  ini, banyak sekali aset yang  disertakan untuk mendukung fungsionalitas web tersebut.

Nah masalahnya, versi terakhir HTTP yaitu 1.1 yang direlease tahun 1997, hanya dapat menjalankan 2 request secara pararel dan berurutan, artinya  request berikutnya tidak akan dikerjakan sebelum request yang pertama selesai, kebayangkan betapa panjangnya jalan yang ditempuh hanya untuk membuka sebuah website.

Meskipun saat ini sudah mulai dikembangkan HTTP 2 dimana request dapat di jalankan secara pararel artinya request dapat dilakukan untuk banyak  aset sekaligus, tidak harus dua-dua, namun hal ini belum sepenuhnya diterapkan.

Untuk itu, kita perlu untuk meng optimasi HTTP request sehingga dapat mempercepat akses website kita.

II. Optimasi HTTP request – Pararel Request

Sejak HTTP 1.1 (yang kita gunakan saat ini), terdapat standar baru yaitu browser dapat langsung mendownload request sebanyak 2 kali sekaligus pada URL yang sama.

Misal, kita memiliki 2 file CSS, 2 image dan 2 javascript. Jika kita menempatkan semua file tersebut pada suatu server yang sama, misal server kita, maka proses download akan berlangsung sebanyak  3x seperti gambar berikut:

Sedangkan jika kita menempatkan aset tersebut ke domain berbeda, maka proses download akan lebih cepat, seperti ilustrasi gambar berikut:

Untuk itu salah satu cara agar user dapat lebih cepat mendownload asset yang diperlukan adalah menempatkan asset tersebut ke domain berbeda, misal menggunakan CDN.

Berapa banyak domain yang direkomendasikan? menurut team dari Yahoo, sebaiknya dikisaran 2 s.d 4 domain, karena jika lebih dari itu, justru akan memperberat kinerja  browser yang hal ini tidak sebanding dengan benefit yang diperoleh.

III. Optimasi HTTP Request – Minimalisir  Request

Mengurangi Request = Mempercepat akses website

Dari penjelasan sebelumnya kita ketahui bahwa  ternyata banyak sekali request yang terjadi ketika user mengakses website kita, dengan memangkas banyaknya waktu request, maka secara otomatis akan mempercepat loading website kita.

Beberapa optimasi HTTP request yang terkait jumlah request:

1  Resolve DNS

Resolve DNS ini merupakan proses untuk mengubah nama domain menjadi alamat IP.

Proses ini berisiko memakan waktu lama tergantung server DNS yang digunakan dan pengaturan DNS cache pada ISP, yang jelas  semakin sedikit jumlah Resolve DNS, semakin cepat waktu request.

Resolve DNS terjadi ketika request terjadi pada alamat domain yang berbeda, misal kita memiliki 4  file CSS, 3  file pertama berada di domain kita sendiri, sedangkan yang keempat berasal dari www.google.com, maka: resolve DNS terjadi dua kali yaitu pada domain kita (fille CSS pertama) dan pada www.google.com

Dari mana kita tahu banyaknya resolve DNS?

Kita dapat menghitung banyaknya resolve DNS dengan menghitung banyaknya aset website kita yang bersumber dari domain lain, selain domain kita, tools yang dapat digunakan  sama seperti sebelumnya yaitu https://tools.pingdom.com  bagian File Request

Terkait optimasi HTTP request, proses resolve DNS ini HANYA dapat kita perkecil  jumlahnya, tidak dapat mempercepatnya, karena hal tersebut diluar kontrol kita.

Memperkecil  jumlah  resolve DNS sejalan dengan teknik Pararel Request yang telah kita bahas sebelumnya. Untuk melakukannya, satu satunya jalan adalah kita pindah resource dari satu server ke server lain sehingga jumlahnya kecil, misal  kita pindah file Javascript, CSS, GoogleFont, dll ke server kita.

2  Menggabungkan File Javascript dan CSS

Menggabungkan file CSS dan Javasctipt menjadi satu. Jika kita memiliki banyak file CSS dan Javascript, maka sebaiknya kita gabungkan menjadi satu, penggabungan ini dapat dilakukan dengan cara manual atau membuat script  sendiri untuk meng-otomasi proses penggabungan.

Kita tidak dapat menggabungkan file javascript dan css yang tidak berada di server kita, misal javascript dari facebook dan Google Analytic, kecuali kita download script tersebut. Sehingga lakukan sebisanya saja.

Jika sobat penggunkan wordpress dapat menggunakan berbagai plugin yang tersedia seperti MinQueue, namun  pada blog ini saya mengembangkan plugin sendiri – APH Merge Scripts -, karena plugin yang ada belum sesuai dengan keinginan.

3  Cache Content

Dengan cache maka browser tidak perlu melakukan request ke web server melainkan langsung mengambil dari file cache. untuk menerapkan cache ini, perlu mengatur konfigurasi server, jika menggunakan Apache, maka kita cukup mengedit file .htaccess nya dengan menambahkan:

#Reformat ETAG
FileETag MTime Size

#Cache-control Header - HTTP 1.1

	#Cache 1 Minggu
	<FilesMatch ".(html|htm)$">
		Header set Cache-control "max-age:604800"
	
	#Cache 3 Bulan
	<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
		Header set Cache-Control "max-age=5184000"
	
	#Cache 1 Bulan
	<FilesMatch ".(js|css)$">
		Header set Cache-Control "max-age=2592000"
	
#Expires Header - HTTP 1.0

	ExpiresActive on
	ExpiresDefault "access"
	ExpiresByType image/gif "access plus 3 month"
	ExpiresByType image/png "access plus 3 month"
	ExpiresByType image/jpg "access plus 3 month"
	ExpiresByType image/jpeg "access plus 3 month"
	ExpiresByType video/mp4 "access plus 3 month"
	ExpiresByType video/webm "access plus 3 month"
	ExpiresByType text/html "modification plus 1 weeks"
	ExpiresByType text/css "access plus 1 month"
	ExpiresByType text/javascript "access plus 1 month"
	ExpiresByType application/javascript "access plus 1 month"

Perhatikan bahwa kode sebelah bawah kita gunakan untuk mengantisipasi jika server kita masih menggunakan HTTP versi 1.0, jika yakin sudah menggunakan versi 1.1, maka cukup gunakan script atas saja.

4  Mengubah gambar menjadi base64

Dengan mengubah gambar menjadi base64, maka gambar akan di load seperti kode HTML biasa, dan menariknya gambar ini bisa di cache. Gambar apa yang perlu diubah menjadi base64? jawabnya, gambar yang jarang sekali berubah, misa: logo, favicon, preloader, dll.

Untuk mengubah image menjadi base64 dapat dilakukan dengan dua cara:

• Menggunakan online tool, seperti pada  https://www.base64-image.de/
• Menggunakan script sendiri, misal, dengan php dapat menggunakan fungsi base64_encode, contoh:

  <?php
  $image		= 'https://jagowebdev.com/images/logo.png';
  $content	= file_get_contents($image);
  $base_64	= base64_encode($content);
  $src		= 'data:'.mime_content_type($image).';base64,'.$content;
  echo '<img src="'.$src.'">';
  ?>

  Contoh Hasil:

  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAPklEQVQYlX3MMQ4AIAgDwMrQ/z+RdzA5YIIC0qnJpV2qihKSXmQwM8t8W14ne7hacGuHfwZABovz1kjKYAA22nkdxmizCCkAAAAASUVORK5CYII="/>
  

• Selain pada HTML <img>, gambar berformat base64 ini dapat diterapkan pada CSS pada property background, contoh:

  Contoh

5  Gunakan CSS Sprite

Yang dimaksud dengan CSS sprite ini adalah kita menggabungkan beberapa gambar untuk digunakan di berbagai background, misal background untuk tombol pada kondisi biasa, hover, dan disabled, sehingga Request yang terjadi hanya satu kali.

Jika background kita pisah menjadi beberapa file, maka akan banyak terjadi request yang artinya akan terjadi rute panjang seperti yang telah disebutkan diatas.

Contoh Sederhana CSS Sprite, kita buat gambar seperti ini:

Selanjutnya kita buat link dengan background gambar tersebut:

<a href="#" id="print_doc">Print</a> <a href="#" id="save_excel">Simpan</a>

Kode CSS nya:

#save_excel, #save_excel:hover, #print_doc, #print_doc:hover  {
  background:url(images/icons.png) 0 -32px no-repeat;
  padding: 12px 0 0 37px;
  font-variant:small-caps;
  font-size:16px;
}
#save_excel:hover {
  background:url(images/icons.png)  no-repeat;
}
#print_doc, #print_doc:hover  {
  background:url(images/icons.png) 0 -33px no-repeat;
}
#print_doc:hover {
  background:url(images/icons.png) 0 0 no-repeat;
}

Hasil:

Print Simpan

Dari contoh diatas kita hanya menggeser-geser background (menggunakan property background) sesuai kebutuhan.

6  Optimasi Penggunaan Google Font

Salah satu komponen penting website kita adalah tipografi (huruf) dimana saat ini yang paling populer adalah google font yang bisa jadi penggunaannya tidak terelakkan lagi.

Terkait dengan optimasi website, penggunaan google font akan (1) mendownload font dari google, (2) mendownload file css.

Hal ini akan menambah request dan karena kita menggunakan url eksternal (yaitu google) maka tidak akan mungkin bisa mengatur cachenya.

Untuk itu yang perlu kita lakukan adalah mendownload font dan file css nya, kemudian menyimpannya di server lokal, disamping mengurangi request, kode CSS nya juga dapat kita kompres dan gabungkan dengan kode css lain

Caranya:

1. Download file zip dari google font

   

2. Buka dan simpan file CSS nya di server kita, jangan lupa, sebelum disimpan, terlebih dahulu ubah lokasi font nya sesuai dengan lokasi tempat kita menyimpan file font yang kita download tadi

   

   Code CSS

   

IV. Optimasi HTTP Request – Tunda (Deffer) Request

Bagaimana menunda request dapat mempercepat waktu aset website?

Cara kerja browser adalah pertama kali meload dan memparse dokumen HTML, kemudian mengidentifikasi asset apa saja yang perlu di download.

Nah menunda request disini maksudnya, setelah dokumen HTML selesai diload dan semua aset sudah didownload, kita tambahkan aset lain yang diperlukan.

Kenapa kita perlu melakukan demikian? karena ukuran kecepatan sebuah website ditentukan dari waktu yang diperlukan untuk meload kode HTML hingga selesai termasuk mendownload aset yang ada.

1 Asset yang dapat ditunda request nya

Dari semua aset yang ada, yang dapat (yang aman) kita tunda adalah gambar dan javascript. Tapi, tidak semua file javascript dapat kita tunda, karena dependency antar script (terutama ketergantungan pada jQuery) bisa menyebabkan salah satu script error.

Script yang layak untuk kita tunda adalah script terkait tombol social media, seperti facebook, twitter, dan google plus serta google analytic, karena semua aset ini sangat memberatkan, disamping ukurannya besar, banyak sekali script turunan yang juga diload.

2 Menunda Request (Deffer) Image

Optimasi HTTP request dapat dilakukan dengan  menunda load image, caranya: pertama kali, load dummy image, image ini bisa diload melalui url atau menggunakan base64, sebisa mungkin gunakan image base64 karena tidak perlu ada tambahan request.

Selanjutnya pada element img tersebut tambahkan attribute tertentu, misal data-src yang berisi alamat asli dari image yang ingin kita tampilkan.

Contoh:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="image/gambar-asli.png"/>

kode tersebut akan menampilkan image 1px x 1px (tidak kelihatan)

Selanjutnya, dengan javascript, kita cari semua element HTML img dan kita ubah nilai atribut src nya sesuai dengan gambar asli yang ingin kita load.

Contoh kode javascript:

// Load Images
function init() {
	var loader_class = 'img-preloader',
		$imgDefer = $('img.' + loader_class);
	
	if ($imgDefer.length == 0)
		return false;
	
	var default_src = "img/default.jpg",
		load_default;
	
	
	$imgDefer.each(function() 
	{
		var $img_loader = $(this),
			src = $img_loader.attr('data-src');
			
		if (src != '')
		{
			$('<img>').attr('src', src).load(function(data) {
				$img_loader.attr('src', src).removeClass(loader_class).hide().fadeIn('fast');
				$(this).remove();
			}).error(function(e)
			{
				$('<img>').attr('src', default_src).load(function(data) {
					$img_loader.attr('src', default_src).removeClass(loader_class).hide().fadeIn('fast');
					$(this).remove();
				});
			})
		} else {
			$('<img>').attr('src', default_src).load(function(data) {
				$img_loader.attr('src', default_src).removeClass(loader_class).hide().fadeIn('fast');
				$(this).remove();
			});
		}
	})
}

// Cross browser for onload event
if (window.addEventListener)
	window.addEventListener("load", init);
else if (window.attachEvent)
	window.attachEvent("onload", init);
else 
	window.onload = init;

DEMO (Responsive) DOWNLOAD

3 Menunda Request (Deffer)  Javascript

Optimasi HTTP request juga dapat dilakukan dengan menunda load file javascript, caranya, kita cukup menambahkan kode javascript yang akan menambahkan tag <script><script> pada header setelah dokumen HTML selesai di load:

function defferJs() {

	// Google
	elm_google = document.createElement("script");
	elm_google.src = 'https://apis.google.com/js/platform.js';
	document.body.appendChild(elm_google);
	
	// Twitter
	elm_twitter = document.createElement("script");
	elm_twitter.src = 'http://platform.twitter.com/widgets.js';
	document.body.appendChild(elm_twitter);
	
	// Linkedin
	elm_linkedin = document.createElement("script");
	elm_linkedin.src = 'http://platform.linkedin.com/in.js';
	document.body.appendChild(elm_linkedin);
	
	// Facebook
	(function(d, s, id) {
		var js, fjs = d.getElementsByTagName(s)[0];
		if (d.getElementById(id)) return;
		js = d.createElement(s); js.id = id;
		js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
		fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));
}
if (window.addEventListener)
	window.addEventListener("load", defferJs, false);
else if (window.attachEvent)
	window.attachEvent("onload", defferJs);
else 
	window.onload = defferJs;

V. Penutup

Optimasi HTTP request merupakan salah satu hal penting dilakukan untuk meningkatkan performa website secara signifikan, namun demikian kita tetap harus hati hati karena bisa jadi yang kita lakukan malah memperberat resource server / client atau membuat script menjadi error.

Demikian pembahasan mengenai optimasi HTTP request untuk mempercepat akses website, semoga bermanfaat.