Tips Jitu Mengoptimalkan Kecepatan Website Dinamis Hingga 50%
Almafazi - Kecepatan sebuah website tentu sangat penting untuk meningkatkan kualitas dari website itu sendiri. Kecepatan sebuah web sangat mempengaruhi banyak hal seperti akses dari client, tentu client atau user menginginkan informasi yang cepat diakses, pengoptimalan kecepatan suatu website juga berpengaruh terhadap SEO, Google tentu lebih memilih website yang mempunyai performa yang optimal yang sewaktu di-crawl oleh robot google, website tersebut cepat merespon sehingga tidak ragu Google akan menaikkan peringkat website kita di Search Engine miliknya.
Manfaat Loading Web atau Blog yang Cepat
Banyak sekali manfaat yang akan kita dapatkan, tidak hanya kepuasan pengunjung yang kita dapatkan, bahkan manfaat ini juga dirasakan bagi para pemilik web yang menggunakan web-nya sebagai ladang mencari uang. Berikut detail manfaat memiliki web dengan kecepatan loading yang tinggi:- Meningkatkan ranking SEO (Google ingin yang terbaik)
- Menigkatkan UX (User Experience), memerikan kesan yang baik bagi pengunjung. Hal ini sangat penting jika pengunjung anda adalah calon pembeli produk.
- Meringankan beban bandwidth, semakin optimal maka akan mengurangi jumlah distribusi konten.
- Meringankan bagi pengunjung dengan koneksi lambat.
- Yang terakhir, anda juga membenci web yang lambat kan?
Dari Aberdeen Group, Penundaan 1 detik pada saat membuka halaman, akan menyebabkan:
- 11% lebih sedikit pengunjung akan kabur
- 16% penurunan kepuasan pengunjung
- Kehilangan sekitar 7% konversi
Walmart juga demikian, mengalami peningkatan 2% untuk setiap peningkatan 1 detik.
Sebuah studi dari Akamai menemukan bahwa:
- 47% pengunjung mengharapkan web dengan kecepatan 2 detik.
- 40% akan meninggalkan web dengan kecepatan 3 detik keatas.
- 52% dari pembeli online mengatakan kecepatan web adalah yang membuat mereka tetap setia.
1. HTTP Compression
Ya, pertama adalah HTTP Compression, Saat seseorang mengakses sebuah situs, ada beberapa request atau permintaan yang dikirmkan ke server. Permintaan ini berisikan elemen-elemen website antara lain file gambar, video, .swf, .js, .css, query database yang kemudian dikirimkan ke browser untuk di render sehingga bisa terlihat dalam bentuk website yang utuh.
Pengiriman file ke browser membutuhkan waktu yang berbeda-beda tergantung daripada ukuran/size file tersebut. Semakin besar ukuran file, semakin lama waktu yang dibutuhkan sampai halaman website siap untuk dirender.Http Compression merupakan cara mempercepat website dengan mengkompres semua elemen website yang direquest kemudan dikirimkan ke browser. Dengan metode ini, ukuran setiap file dapat diperkecil sampai setengah dari ukuran asli, sehingga mengurangi bandwidth yang dibutuhkan dan mempercepat proses pengiriman.
Jika webserver yang digunakan adalah Apache, maka anda bisa menggunakan Mod_deflate untuk melakukan Http Compression. Pastikan Mod_deflate sudah aktif di server hosting anda, berikut adalah contoh penerapan Http Compression menggunakan Mod_deflate dan .htaccess.
Kompresi menggunakan mod_deflate :
Caranya adalah, dengan menambahkan kode berikut pada file .htaccess di direktori root domain kita.
# compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript# atau kompress berdasarkan ekstensi file: <files *.html *.php *.css> SetOutputFilter DEFLATE </files>
Kompresi menggunakan mod_gzip :
Caranya adalah dengan menambahkan kode berikut:
<?php ob_start( 'ob_gzhandler' ); ?>
atau
<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
ob_start("ob_gzhandler");
}
else {
ob_start();
}
?>
Tambahkan kode tersebut di bagian paling atas header.php. Contoh:
<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')
{ob_start("ob_gzhandler");}
else {ob_start();}
?>
<!-- bagian paling atas header.php -->
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
</html>
Kemudian bisa dicek apakah Http Compression sudah berjalan atau tidak, anda bisa menggunakan whatsmyip.org. Masukkan alamat website anda kemudian enter. Gambar di bawah menunjukkan jika Http Compression sudah berjalan.
Jika hasil tes menunjukkan Http Compression tidak berjalan, maka anda bisa menanyakan ke pihak hosting apakah Mod_deflate sudah aktif atau tidak, dan minta agar diaktifkan.
2. Browser Caching
Menggunakan browser cache merupakan cara yang efektif untuk mengoptimalisasi kecepatan website, khusunya untuk repeat-visitor. Browser memiliki kemampuan untuk menyimpan data halaman website di harddisk komputer, sehingga saat user mengunjungi kembali halaman website tersebut, browser akan menampilkan cache terakhir yang tersimpan dan tidak perlu mendownload file web ke server, sehingga loading website akan menjadi super cepat.
Namun, browser membutuhkan ijin untuk menyimpan cache website, disinilah peran kita sebagai web developer untuk melakukan seting dan memberikan ijin tersebut.
Untuk mengaktifkan browser cache, bisa dilakukan melalui file .htaccess atau HTML.
Mengaktifkan Browser cache melalui HTML:
Tempatkan code di bawah ini di antara tag head
<META HTTP-EQUIV=”EXPIRES” CONTENT=”Mon, 28 Jul 2018 11:12:01 GMT”>
Meta tag di atas memberitahukan kepada browser bahwa halaman bersangkutan valid sampai tanggal 28 juli 2018. Sampai tanggal tersebut tercapai, browser akan menggunakan cache yang tersimpan untuk melayani permintaan pengguna.
Mengaktifkan Browser Cache menggunakan .htaccess:
# Leverage Browser Caching
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
<IfModule mod_headers.c>
<filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
Header set Cache-Control "max-age=2678400, public"
</filesmatch>
<filesmatch "\.(html|htm)$">
Header set Cache-Control "max-age=7200, private, must-revalidate"
</filesmatch>
<filesmatch "\.(pdf)$">
Header set Cache-Control "max-age=86400, public"
</filesmatch>
<filesmatch "\.(js)$">
Header set Cache-Control "max-age=2678400, private"
</filesmatch>
3. Minify .JS, .CSS, .HTML
Ide dari Mininify adalah menghapus whitespace (spasi, enter, tab), sehingga script dalam file tersebut menjadi lebih pendek dan mengurangi size/ukuran file tersebut.
Melakukan penghapusan whitespace secara manual memang pekerjaan yang membutuhkan waktu dan membosankan, oleh karena itu, saya sangat menyarankan menggunakan tool atau alat bantu.
Anda bisa menggunakan Addon Google Pagespeed Insight untuk mengukur kecepatan website – disarankan menggunakan browser google chrome.
Pertama buka dulu halaman website yang ingin diukur kecepantanya kemudian klik kanan dan pilih inspect element atau tekan tombol f12 kemudian klik tab PageSpeed, dalam kasus ini saya menggunakan browser google chrome.
Seperti terlihat pada gambar di atas, klik tombol Start Analyzing untuk memulai pengecekan kecepatan, pada hasil tes akan muncul file script yang perlu di-minify (jika ada). Klik Minify Javascript yang ada di sebelah kiri halaman untuk melihat file Javascript yang perlu di-minify, begitu juga dengan file CSS dan Html. Di sebelah kanan masing-masing file yang perlu di-minify ada link dengan anchor text See optimized content yang mengarah ke halaman script yang sudah di-minfy, Anda bisa klik link tersebut, copy semua text yang terlihat di layar dan mengganti isi file script bersangkutan.
Namun, dalam penerapanya seringkali terjadi penundaan perenderan halaman website karena harus menunggu hingga file CSS dan atau Javascript tertentu selesai di-load, hal ini lah yang disebut dengan istilah render-blocking.
Mengatasi render-blocking CSS
Untuk mengatasi render-blocking CSS sebenarnya cukup mudah, ide mengatasi masalah ini adalah memindahkan tempat dimana file CSS dipanggi/diload. Pada umumnya, file CSS di panggil di dalam tag head, kita pindahkan dan tempatkan pemanggilan CSS di bagian paling bawah halaman yaitu footer.
Dengan begini, file CSS akan di load setelah semua isi dari halaman selesai di-load, serta akan mengatasi render-blocking CSS.
Mengatasi render-blocking Javascript
Render-blocking Javascript dapat diatasi menggunakan atribut defer. Atribut defer memungkinkan browser untuk merender halaman website sambil mendownload script dan menunda pengeksekusian script tersebut sampai seluruh halaman selesai dirender. Dengan begini, pengguna dapat melihat isi website lebih cepat.
Contoh Penerapan:
<script src="jsfile.js" defer="defer"></script>
Yap, itulah 5 cara yang saya lakukan untuk mempercepat loading website agar lebih cepat. terimakasih.
referensi: http://www.wayanbaliweb.com, http://www.nyekrip.com, https://lifeblogid.com
Melakukan penghapusan whitespace secara manual memang pekerjaan yang membutuhkan waktu dan membosankan, oleh karena itu, saya sangat menyarankan menggunakan tool atau alat bantu.
Anda bisa menggunakan Addon Google Pagespeed Insight untuk mengukur kecepatan website – disarankan menggunakan browser google chrome.
Seperti terlihat pada gambar di atas, klik tombol Start Analyzing untuk memulai pengecekan kecepatan, pada hasil tes akan muncul file script yang perlu di-minify (jika ada). Klik Minify Javascript yang ada di sebelah kiri halaman untuk melihat file Javascript yang perlu di-minify, begitu juga dengan file CSS dan Html. Di sebelah kanan masing-masing file yang perlu di-minify ada link dengan anchor text See optimized content yang mengarah ke halaman script yang sudah di-minfy, Anda bisa klik link tersebut, copy semua text yang terlihat di layar dan mengganti isi file script bersangkutan.
Kita juga bisa menggunakan tool online seperti jscompress.com, willpeavy.com/minifier/ dan masih banyak yang lain, tinggal search di google. Caranya cukup mudah, kita tinggal pastekan skrip kita ke text area yang sudah disediakan dan klik submit, maka skrip hasil minify bisa kita gunakan .
4. Gunakan Content Delivery Network (CDN)
Content Delivery Network, atau Content Distribution Network, atau biasa disingkat dengan CDN, adalah jaringan server yang terletak di berbagai belahan dunia yang berfungsi sebagai klien pengirim berkas-berkas kepada klien pengguna. Masing-masing server tersebut memiliki berkas yang sama persis dengan server lainnya, sehingga bisa dikatakan setiap server adalah cerminan dari server lainnya. Salah satu cara yang paling efektif untuk mempercepat sebuah website adalah dengan menggunakan CDN. Hal ini telah banyak dijelaskan dan direkomendasikan oleh para pengembang web di seluruh dunia.
Ketika klien mengunduh suatu halaman web, maka klien akan mengirimkan http request ke server yang dituju, dan kemudian server tersebut akan meresponnya dengan mengirimkan berkas-berkas yang diunduh. Kecepatan unduh tersebut tergantung dari beberapa faktor, salah satunya adalah jarak antara server dengan klien. Semakin jauh jarak server dari klien, maka semakin lama pula respon pengiriman. Begitu pula sebaliknya, semakin dekat jarak antara server ke klien, maka semakin cepat lah waktu unduh halaman web tersebut.
Fungsi CDN (Content Delivery Network) dalam hal ini adalah meminimalisir waktu unduh yang dibutuhkan oleh klien, karena CDN sendiri adalah jaringan server yang terletak di berbagai belahan dunia, oleh karena itu server yang terdekat dengan klien akan diprioritaskan untuk mengirimkan berkas yang diminta.
Sebagai contoh, seseorang yang berada di jakarta sedang membuka suatu web/blog yang dihosting di sever USA. Bila web/blog tersebut tidak menggunakan CDN, maka waktu unduh halaman web tergantung dari jarak antara jakarta – USA. Sementara itu, bila web/blog tersebut menggunakan CDN untuk menghosting berkas-berkasnya, maka server CDN yang terdekat dengan klien (contoh: berada di singapura) yang akan melayani pengiriman berkas yang diminta, sehingga waktu yang dibutuhkan akan semakin pendek.
Target pengguna CDN (Content Delivery Network)
Secara umum, CDN diperuntukkan bagi pemilik web/blog dengan target pengunjung dari berbagai belahan dunia, karena akses kunjungan dari wilayah manapun dapat dipersingkat melalui server CDN terdekat. Namun bagi pemilik web/blog dengan target pengunjung hanya di wilayah tertentu, akan lebih hemat dan praktis bila menyewa server hosting di wilayah itu saja.
CDN (Content Delivery Network) yang ada biasanya berupa jasa layanan seperti halnya webhosting. Kebanyakan CDN tersebut adalah berbayar, seperti contohnya akamai, maxcdn, atau instantcdn. Walaupun ada beberapa juga yang gratis seperti halnya cloudflare dan coralcdn, namun tentu saja yang berbayar jauh lebih baik.
Fungsi CDN (Content Delivery Network) dalam hal ini adalah meminimalisir waktu unduh yang dibutuhkan oleh klien, karena CDN sendiri adalah jaringan server yang terletak di berbagai belahan dunia, oleh karena itu server yang terdekat dengan klien akan diprioritaskan untuk mengirimkan berkas yang diminta.
Sebagai contoh, seseorang yang berada di jakarta sedang membuka suatu web/blog yang dihosting di sever USA. Bila web/blog tersebut tidak menggunakan CDN, maka waktu unduh halaman web tergantung dari jarak antara jakarta – USA. Sementara itu, bila web/blog tersebut menggunakan CDN untuk menghosting berkas-berkasnya, maka server CDN yang terdekat dengan klien (contoh: berada di singapura) yang akan melayani pengiriman berkas yang diminta, sehingga waktu yang dibutuhkan akan semakin pendek.
Target pengguna CDN (Content Delivery Network)
Secara umum, CDN diperuntukkan bagi pemilik web/blog dengan target pengunjung dari berbagai belahan dunia, karena akses kunjungan dari wilayah manapun dapat dipersingkat melalui server CDN terdekat. Namun bagi pemilik web/blog dengan target pengunjung hanya di wilayah tertentu, akan lebih hemat dan praktis bila menyewa server hosting di wilayah itu saja.
CDN (Content Delivery Network) yang ada biasanya berupa jasa layanan seperti halnya webhosting. Kebanyakan CDN tersebut adalah berbayar, seperti contohnya akamai, maxcdn, atau instantcdn. Walaupun ada beberapa juga yang gratis seperti halnya cloudflare dan coralcdn, namun tentu saja yang berbayar jauh lebih baik.
5. Atasi Render-Blocking CSS dan Javascript
Sebagian besar website yang beredar di internet bisa dipastikan menggunakan file CSS dan javascript untuk mempercantik tampilan website dan meningkatkan kemampuan website dalam melayani pengguna.Namun, dalam penerapanya seringkali terjadi penundaan perenderan halaman website karena harus menunggu hingga file CSS dan atau Javascript tertentu selesai di-load, hal ini lah yang disebut dengan istilah render-blocking.
Mengatasi render-blocking CSS
Untuk mengatasi render-blocking CSS sebenarnya cukup mudah, ide mengatasi masalah ini adalah memindahkan tempat dimana file CSS dipanggi/diload. Pada umumnya, file CSS di panggil di dalam tag head, kita pindahkan dan tempatkan pemanggilan CSS di bagian paling bawah halaman yaitu footer.
Dengan begini, file CSS akan di load setelah semua isi dari halaman selesai di-load, serta akan mengatasi render-blocking CSS.
Mengatasi render-blocking Javascript
Render-blocking Javascript dapat diatasi menggunakan atribut defer. Atribut defer memungkinkan browser untuk merender halaman website sambil mendownload script dan menunda pengeksekusian script tersebut sampai seluruh halaman selesai dirender. Dengan begini, pengguna dapat melihat isi website lebih cepat.
Contoh Penerapan:
<script src="jsfile.js" defer="defer"></script>
Yap, itulah 5 cara yang saya lakukan untuk mempercepat loading website agar lebih cepat. terimakasih.
referensi: http://www.wayanbaliweb.com, http://www.nyekrip.com, https://lifeblogid.com
0 comments