Mempercepat Loading Blog dengan CSS Drive Script Compressor


Kadang para sobat blogger tidak sadar kalau tidak semua pengunjung blog itu memiliki koneksi ‘Dewa’.. Banyak juga pengguna internet hanya mengandalkan koneksi terbatas pada kecepatan 2G atau sekelas dengan internet-an GPRS via ponsel dengan kecepatan rata-rata sekitar 64-128kbps..

Di situ tantangan kita sebagai para blogger untuk mencari celah bagaimana agar para pengguna internet yang koneksi-nya masih belum ‘Dewa’ bisa tetap enjoy saat mengunjungi blog kita. Kalau sobat blogger lain perhatikan, blog saya juga mengalami perubahan drastis dalam hal loading halaman utamanya. Jika dibandingkan yang sekarang, dulu Catatan Daring ini membutuhkan waktu 2 kali lebih lama untuk masuk dan memunculkan semua elemen halaman.

Blog menjadi lebih ‘berat’ untuk dibuka, tentu saja karena terlalu banyak elemen di dalamnya. Oleh karena itu, jangan lupa untuk membuang elemen/widget blog yang kurang perlu, dan periksa lagi, apakah ada script-script yang tercantum, tapi sama sekali tidak terpakai dalam blog.

Kompresi Kode CSS

Salah satu alternatif lain yang dapat membuat proses memunculkan halaman blog menjadi lebih cepat, adalah dengan mengompres CSS script yang ada pada blog. CSS Script adalah script yang mengatur bagaimana tampilan yang ada pada tiap-tiap elemen/widget pada blog, sehingga widget dapat diatur bagaimana warna, ukuran, border, gambar background, dsb.

Kenapa bisa berpengaruh??? Ternyata bagian kosong dalam halaman blog dapat membuat ukuran blog menjadi lebih besar, dengan kata lain proses loading menjadi lebih lambat. Contohnya pada script berikut:

.widget-content-kotak {
     border-top:0px solid #323c47;
     border-bottom:1px solid #323c47;
     border-left:1px solid #323c47;
     border-right:1px solid #323c47;}

Yang dapat dikurangi ukurannya dengan meminimalisasikan script di atas seperti berikut:

.widget-content-kotak{border-top:0px solid #323c47; border-bottom:1px solid #323c47; border-left:1px solid #323c47; border-right:1px solid #323c47;}

Hal ini disebut juga dengan mengompres script. Kalau tidak percaya, coba saja copy dan paste kedua script di atas pada 2 file .txt yang berbeda menggunakan notepad, kemudian save. Hasil yang di dapat sudah pasti bahwa script ke-2 memiliki ukuran file yang lebih kecil.

Biasanya jumlah CSS script pada blog banyak jumlahnya, sehingga apabila semua script itu di kompres dapat mempercepat loading blog hampir 100% lebih cepat.

Nah…! Cara agar kita dapat mengompres kode CSS dengan instan adalah salah satunya dengan menggunakan layanan gratis yang disediakan oleh CSS Drive.

Cukup masuk pada situsnya, dan copy semua kode CSS dalam blog kita, kemudian di-paste pada kotak yang sudah disediakan, dan klik Compress it. Pada opsi pengaturannya juga menyediakan pilihan antara kompres dengan tingkat Light, Normal, dan Super Compact.

Saya sarankan untuk menggunakan light atau normal, karena kalau menggunakan pilihan ke-3, kode akan dibuat terlalu rapat, bisa-bisa sobat blogger kebingungan kalau mau meng-edit kode CSS-nya.. ^^

KODE APA YANG HARUS DI KOMPRES??? Hehe.. jangan khawatir, kalau sobat bingung yang mana kode CSS, copy saja semua kode tepat sesudah kode <!–[CDATA[ sampai dengan kode sebelum ]]–>. Masuk pada ‘Edit HTML’ pada ‘Tata Letak’ Blogger dan gunakan ‘Ctrl+F’ untuk mencari kode tersebut, kemudian tinggal di-cut, kemudian ganti dengan kode yang sudah di kompres.

Jangan lupa untuk ‘Pratinjau’ terlebih dahulu, sebab kadang mengompres dapat membuat script rusak, meskipun itu biasanya terjadi pada Javascript, tidak pada CSS..

Kalau semua sudah dilakukan, dijamin proses loading blog akan terasa meningkat secara drastis..

Untuk langsung mencoba silahkan ke TKP —-> Klik Di Sini <—- Selamat mencoba… ^^

Referensi : Em-Mizan

Advertisements

About nellohl

Just For Fun in Here..!!! are you ok..?? Ready,,,,,,

Posted on December 10, 2010, in Artikel, Info, Tutorial Blog. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: