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:
- Mengenal HTTP Request dan HTTP Response
- Optimasi HTTP Request – Pararel Request
- Optimasi HTTP Request – Minimalisir Request
- 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:
- 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).
- Setelah halaman diterima browser, selanjutnya halaman tersebut dianalisa untuk mengetahui aset apa saja yang diperlukan, misal: file gambar, css, javascript, font, dll.
- 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.
- 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:
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:
- Download file zip dari google font
- 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;
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.
Subscibe Now
Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com
16 Feedback dari pembaca
sangat bermanfaat tapi bagi saya yang baru masih pusing gan dan perlu tuntunan lebih lanjut..saya akan coba mengoptimasi http request pada web saya mudah mudah tidak error
Iya mas, semoga sukses
Untuk penggabungan css atau javascript apakah ada pluginnya pak?
Di WordPress Ada beberapa plugin yang bisa digunakan mas, bisa coba Autoptimize, plugin ini selain menggabung js dan css juga menggunakan sistem cache, tapi hati hati, kita harus punya disk space yang sangat luas (min lebih dari 10 kali size website) jika tidak, website bisa hang dan sulit ditangani
Untuk menggabung bisa bisa menggunakan plugin APH Merge Script atau plugin sejenis
Mantap mas. Paket lengkap. Ijin praktek. Sukses terus mas..
Amin…. Sama sama mas…
Mantap, gan.. lengkap banget artikelnya. Ijin praktek. salam sukses.
Terima kasih, sama sama mas…
hallo mas, saya mau tanya, untuk font itu kan kita download terlebih dahulu ya trus nanti di ekstrak dulu di hosting kita atau langsung ya? thanks
Iya mas bisa dibuat offline seperti itu, namun kelemahannya jika ada update font, kita harus update manual
Terima kasih mas, web saya baru tapi sudah 44 request. Mau coba cara di atas.
Siap masss…
terimakasih infonya ya kak.
Sama sama mas…
min, saya mau nanya, kalau mengurangi ukuran gambar yang akan ditampilkan, apakah termasuk mengurangi jumlah HTTP Request?
misal kan saya ada 5 gambar, ukuran nya rata” 3 MB, trus gambarnya saya perkecil secara manual jadi 100KB, termasuk kah ini dengan mengurangi jumlah HTTP Reqeust?
Tidak mas, jumlah request nya sama, cuman waktu download imagenya jadi lebih cepat dan bandwith jadi berkurang, sehingga kalau bisa dilakukan sebaiknya dilakukan