Meningkatkan Kecepatan Website dengan Minify CSS dan JS

Rabu, 15 Februari 2017 18:56 Jhoel Rocher - Website

Hello sobat Postikel.com, jumpa lagi di artikel kali ini dimana saya akan membagikan sebuah postingan tentang bagaimana Meningkatkan Kecepatan Website dengan Minify CSS dan JS.

Sebagai webmaster kita harus melalukan banyak hal untuk meningkatkan kecepatan website kita yang tentunya akan membuat pengunjung betah dan sering berkunjung tentunya. Jadi, mari kita cek seberapa besar grade kecepatan website kamu.

Sekedar saran untuk tes kecepatan load halaman website jangan pake jaringan seluler karena Lambat Cuy.. laugh. Sebisa mungkin grade situs kamu ratain di A hehehe coba lihat hasil testing situs ini, hanya ada satu grade B yang lain A, soalnya tidak semua skrip website kita harus di maksimalkan selagi itu tidak terlalu berpengaru pada loading halaman.

Postikel Page Speed Result

Untuk mengecek Pagespeed website kamu bisa kunjungi tools.pingdom.com dan masukkan alamat website kamu secara lengkap (http://namasitus.com). Jika mau cek situs kamu dengan lebih akurat sebaiknya kunjungi Google PageSpeed Insights.

Ada beberapa saran atau tips dari saya agar website kamu bisa lebih cepat terutama untuk kamu yang menggunakan skrip website buatan sendiri dan hosting murah :D. Yuk di baca.

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, dll namun load berikutnya browser akan mengambil sebagian file dari chace tersebut sehingga akan mengurangi waktu dan bandwidh.

Kamu bisa mendaftarkan situs kamu di cloudflare.com (gratisan juga bisa). Di sana kamu akan di sajikan plugin untuk meningkatkan kecepatan maupun keamanan website seperti halnya ssl juga ada gratis lagi. Jika kamu liat postikel ini menggunakan ssl gratis dari cloutflare :V. Untuk tutorial tentang setting cloudflare silahkan kamu googling dulu karena di postikel belum di 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 langka berikut :

1. Download zip Minify Github.

2. Ekstrak zipnya dan ambil saja molder min untuk di upload ke directory hosting kamu. Sebelum upload edit dlu 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 adalah buka file template situs kamu untuk mengganti link javascrip dan css. Misalkan kamu menyimpan link CSS di tag <head> dan Javascript di foother 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 tersebut kita mempunyai empat link CSS dan Empat link Javascrip. 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 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 postinganpun harus melalui Compress dulu sebelum kamu upload ke server dan rekomentasi gunakan type gambar JPG 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 sebagi contoh yang saya alami untuk CSS font awesome dan pada JS Ckeeditor.

Sekian dulu postingan kali ini, mudah mudahan dapat bermanfaat.


Bagikan Artikel

Baca Juga
Belum ada komentar! Jadilah yang pertama berkomentar di sini.

Tambah Komentar

Terbaru

Populer

Komentar