Mempercepat Loading Website Dengan Kompresi Javascript Dan CSS

Mempercepat loading website dengan kompresi Javascript
dan CSS
Posted in Web Developer - 7 Comments
Makin kecil suatu file makin cepat file itu di load oleh browser. Makin sedikit request HTTP
yang harus dilakukan makin cepat suatu page ditampilkan. Itulah 2 rules atau aturan dalam
perhitungan kecepatan suatu website ditampilkan di browser. Saat ini web 2.0 serta beberapa
framework dan CMS menggunakan beberapa file Javascript dan CSS. Sehingga diperlukan
lebih dari satu kali HTTP request untuk tiap CSS dan Javascript. Hal ini tentu memperlambat
browser dalam menampilkan halaman website. Ada beberapa teknik yang dapat mencegah
masalah ini. Beberapa cara tersebut adalah:
1. Menggunakan google minify, merupakan script PHP yang mampu mengkombinasikan

beberapa file CSS dan Javascript menjadi 1 file yang cukup dipanggil sekali. Cara
penggunaannya
Sebelum menggunakan Google Minify:
2. <html>
3. <head>
4. <title>Example Page</title>
5. <link rel="stylesheet" type="text/css"
href="css/example.css" />
href="css/monkeys.css" />
href="foo/bar/baz.css" />
8. <script type="text/javascript"
src="js/prototype.js"></script>
9. <script type="text/javascript" src="js/example.js"></script>
10. </head>
11. <body>
12. <p>
13. Blah.
14. </p>
15. </body>
</html>
Setelah menggunakan Google Minify
<html>
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css"
href="minify.php?files=css/example.css,css/monkeys.css,foo/bar/b
az.css" />
<script type="text/javascript"
src="minify.php?files=js/prototype.js,js/example.js"></script>
</head>
<body>
<p>
Blah.
</p>
</body>
</html>
Hasil HTML dari kode diatas adalah 1 CSS dan 1 Javascript. Hasil kombinasi dan
kompresi file CSS dan Javascript akan di cache dan langsung dipanggil sehingga lebih
cepat dari sebelumnya. Cara kerja kompresinya hampir sama dengan teknik kompresi
lain yaitu dengan mengurangi whitespace dan comment yang tidak diperlukan.
Hasilnya file lebih kecil, request lebih sedikit dan akhirnya browser menampilkan
website lebih cepat. Untuk keterangan lebih lanjut bisa di lihat di URL
http://code.google.com/p/minify/
16. Javascript Packer, teknik ini akan mengkompress javascript menjadi file. Teknik ini
mengkompres file javascript menjadi 3 kali lebih kecil atau lebih. Dengan demikian
file javascript akan lebih cepat di load dari sebelumnya. Penggunaannya cukup
dengan membuka URL http://dean.edwards.name/packer/ kemudian copy paste kode
Javascript anda pada field yang tersedia. Setelah di kompress website tersebut akan
memberikan output code yang dapat anda copy paste lg pada file javascript milik
anda.
Kedua teknik diatas bisa digabungkan yaitu dengan cara Javascript dipacker terlebih dahulu
dengan teknik no 2 kemudian beberapa file javascript di combine jadi satu dengan teknik
pertama. Kombinasi teknik ini belum saya coba tapi menurut saya harusnya tidak akan
bermasalah. Kalo ada masalah bisa sharing , biar bisa kita cari solusi yang lebih baik lagi.
Popularity: 14% [?]

Mempercepat Loading Website Dengan Kompresi Javascript Dan CSS

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Mempercepat Loading Website Dengan Kompresi Javascript Dan CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

Mempercepat loading website dengan kompresi Javascript

1. Menggunakan google minify, merupakan script PHP yang mampu mengkombinasikan

Setelah menggunakan Google Minify

Popularity: 14% [?]

Anda mungkin juga menyukai