Hello sobat darsitek dimanapun berada, berjumpa lagi di artikel kali ini dimana saya akan membagikan sebuah postingan tentang bagaimana Menambah Kecepatan Blog atau Website dengan Minify CSS dan JS.
Sebagai webmaster kita harus melalukan banyak hal untuk meningkatkan atau menambah kecepatan website kita yang tentunya akan membuat pengunjung betah dan sering berkunjung. Jadi, mari kita cek seberapa besar grade kecepatan blog atau website kamu.
Sekedar saran untuk tes kecepatan load halaman website jangan pake jaringan seluler karena akan terasa lambat.
Sebisa mungkin grade situs kamu diratain di A. Coba lihat hasil testing situs postikel.com, hanya ada satu grade B dan yang lain A, soalnya tidak semua script website kita harus di maksimalkan selagi itu tidak terlalu berpengaruh pada loading halaman.
Untuk mengecek Pagespeed website kamu bisa kunjungi tools.pingdom.com dan masukkan alamat website kamu secara lengkap (http://namasitus.com) baik menggunakan ssl maupun tidak. Jika mau cek situs kamu dengan lebih akurat sebaiknya kunjungi Google PageSpeed Insights.
Ada beberapa saran atau tips dari saya agar blog atau website kamu bisa lebih cepat terutama untuk kamu yang menggunakan script website buatan sendiri dan hosting murah. Yuk simak selengkapnya.
Aktifkan Chace Website
Aktifkan chace pada skrip website kamu, karena ketika website kamu di buka pertama kali akan mendownload semua file dari gambar, css, javascript, dan lain-lain namun load berikutnya browser akan mengambil sebagian file dari chace tersebut sehingga akan mengurangi waktu dan bandwidth.
Kamu bisa mendaftarkan situs kamu di cloudflare.com (situs ini juga ada yang gratis). Di sana kamu akan di sajikan plugin untuk meningkatkan kecepatan maupun keamanan website seperti halnya ssl juga ada yang gratis. Jika kamu lihat situs postikel, situs tersebut menggunakan ssl gratis dari cloudflare. Untuk tutorial tentang setting cloudflare silahkan kamu googling dulu karena di darsitek belum saya posting.
Gunakan Minify CSS dan Javascript
Ini adalah teknik untuk memaksimalkan loading website dengan Minify CSS dan Javascript. Menggunakan Minify akan membuat request beberapa file css maupun javascript di lakukan hanya dalam sekali request saja, dengan kata lain menggabungkan beberapa file css/javascript dalam satu file dan mengurangi ukuran bitnya.
Untuk menggunakan Minify ikuti langkah-langkah berikut:
1. Download zip Minify Github.
2. Ekstrak zipnya dan ambil saja folder min untuk di upload ke directory hosting kamu. Sebelum upload edit dulu file config.php yang ada pada folder min tersebut lalu cari kode berikut :
$min_documentRoot = ''; //$min_documentRoot = substr(__FILE__, 0, -15); //$min_documentRoot = $_SERVER['SUBDOMAIN_DOCUMENT_ROOT'];
Ubah kode di atas menjadi:
//$min_documentRoot = ''; $min_documentRoot = substr(__FILE__, 0, -15); //$min_documentRoot = $_SERVER['SUBDOMAIN_DOCUMENT_ROOT'];
3. Langkah berikutnya buka file template situs kamu untuk mengganti link javascript dan css. Misalkan kamu menyimpan link CSS di tag <head> dan Javascript di footer dengan beberapa link. Contoh:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="" />
<link rel="stylesheet" href="http://www.namasitus.com/assets/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="http://www.namasitus.com/assets/css/camera.min.css" type="text/css" />
<link rel="stylesheet" href="http://www.namasitus.com/plugins/iCheck/square/blue.css" type="text/css" />
<link rel="stylesheet" href="http://www.namasitus.com/dist/css/style.min.css" type="text/css" />
<title>Title Site</title>
</head>
<body>
<div class="content">
<!-- Konten Situs -->
</div>
<div class="footer"></div>
<script src="http://www.namasitus.com/plugins/jQuery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.namasitus.com/plugins/jQuery/jquery-migrate-1.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.namasitus.com/assets/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.namasitus.com/assets/js/custom.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Contoh diatas kita mempunyai empat link CSS dan empat link Javascript. Untuk meminimalkan jadi satu gunakan
http://www.namasitus.com/min/f=LINK_CSS_atau_JS.
Ganti LINK_CSS_atau_JS dengan daftar link CSS atau JS dan pisahkan dengan koma (,).
Maka hasil minimalnya adalah sebagai berikut:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="" />
<link rel="stylesheet" href="http://www.namasitus.com/min/f=assets/css/bootstrap.min.css,assets/css/camera.min.css,plugins/iCheck/square/blue.css,dist/css/style.min.css" type="text/css" />
<title>Title Site</title>
</head>
<body>
<div class="content">
<!-- Konten Situs -->
</div>
<div class="footer"></div>
<script src="http://www.namasitus.com/min/f=plugins/jQuery/jquery.min.js,plugins/jQuery/jquery-migrate-1.2.1.min.js,assets/js/bootstrap.min.js,assets/js/custom.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Dengan begitu kita link CSS dan JS masing-masing satu link dengan kualitas bit yang minim. Tidak hanya CSS dan Javascript, gambar postingan pun harus melalui tahap compress dulu sebelum kamu upload ke server dan untuk rekomendasi gunakan type gambar JPG/JPEG untuk gambar besar seperti foto.
Perlu di ingat juga urutan link file harus berurutan agar tidak terjadi error, namun kadang sebagian CSS maupun JS terjadi error saat di ikutkan pada link ini sebagai contoh yang saya alami untuk CSS font awesome dan pada JS CKeditor.
Sekian dulu postingan kali ini, silahkan sobat praktekan sendiri karena tanpa mencoba sobat tidak akan pernah tau. Mudah mudahan dapat bermanfaat. Silahkan di share artikel ini jika dirasa bermanfaat 🙂
