Tuesday, January 27, 2015

Tutorial Mempercepat Load Web/Blog



Cara Compress Script CSS Untuk Mempercepat Load Web/Blog

Tutorial Mempercepat Load Web/Blog
Kecepatan Load Blog

 

Apa hubungan CSS dengan load time (waktu memuat web/blog)? Yang paling sederhana, ukuran file CSS menentukan berapa banyak bagian yang harus dibaca oleh browser. Semakin besar ukuran file, tentu saja bahasa perintahnya semakin banyak, dengan demikian 'waktu baca' yang dibutuhkan oleh browser semakin panjang. Anda dapat menggunakan website/blog speed test tool di blog ini untuk mengetahui kecepatan loading blog anda.
Setelah ganti template beberapa waktu yang lalu, masalah loading blog yang cenderung lebih lama daripada template yangsebelumnya muncul. Tentu saja hal ini berefek tidak baik. Yang pertama efeknya adalah ketidaknyamanan pengunjung. Terlebih lagi apabila muncul ketidaksabaran dan  kemudian diwujudkan dalam aksi "Tutup aja aaaaah, males gw, lo-la bangeeetzz!". Yang kedua, Google saat ini telah melakukan penalti bagi website/blog yang memiliki waktu load yang terlalu lama. Walhasil, peringkat dalam indeks pencarian bisa turun, dengan kata lain SEO lemah.
Salah satu usaha yang saya lakukan adalah dengan mengkompres gambar PNG dengan PngGauntlet. Hasilnya lumayan untuk mengurangi besar gambar tanpa mengurangi kualitasnya. Selain itu, dilakukan pula  beberapa langkah lain, salah satunya: melakukan perampingan CSS. Mudah-mudahan saat ini loadtime sudah berkurang meskipun belum maksimal (mudah-mudahan ga kelamaan ya).
Kembali ke CSS. File CSS adalah seluruh isi aturan style CSS yang ada di dalam template HTML, XML, maupun yang lainnya. Seluruh aturan tersebut kemudian dirangkum menjadi satu sebagai sebuah file yang dibaca oleh browser. Nah, pada bagian ini, ada banyak aturan tidak perlu yang bisa kita hapus agar tidak mengambil space karena semakin banyak space semakin besar ukuran file.
Lalu bagaimana cara mengurangi ukuran file CSS ?


Compress CSS
Compress CSS


1. Tutorial Editing CSS Secara Manual.
Ada beberapa contoh editing CSS secara manual berikut ini:
Misalnya aturan editing CSS secara manual dibagian header-wrapper,

    #header-wrapper {
    background: url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;
    height: 150px;
    margin-top: padding: 0px 0px 0px 0px;
    text-align: center;
    border: 1px solid #000;
    }

Contoh tersebut diatas ialah pengaturan script CSS secara standar, dimaksudkan supaya browser bisa membaca script CSS dengan baik dan terurut. Tetapi sekarang ini, hampir semua browser sudah mempunyai kecepatan dan kemampuan baca script yang terbilang tinggi (kita ingat siapa yang sekarang masih menggunakan IE 6 yang kuno itu?). Contoh melakukan compress pada ruang-ruang diatas ialah dengan cara:

    #header-wrapper{background:url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;height:150px;margin-top:padding:0px 0px 0px 0px;text-align:center;border:1px solid #000;}

Di contoh styling berikut:

    {Margin-top: 15px;
    Margin-right: 10px;
    Margin-bottom: 15px;
    Margin-left: 15px; }

Style margin diatas bisa kita kecilkan dengan menggunakan kode script CSS short-hand dan akan mengurangi spacenya:

    {Margin:15px 10px;}

Disebabkan oleh nilai angka margin pada script CSS pada bagian atas dan bawah sama dan nilai angka kanan dan kiri sama, kita bisa memperkecil dengan cara seperti di atas, dimana 15px mewakili ukuran atas-bawah dan 10px mewakili kanan-kiri. Jika semua nilai margin sama, misalnya 15px, kita tinggal tuliskan: {margin:10px}. Perhatikan bahwa semua aturan nilai dimulai dari atas dan berjalan searah jarum jam: atas, kanan, bawah, dan kiri.

2. Layanan Situs-situs Penyedia Tool Kompres CSS Secara Online
Anda bisa menggunakan beberapa tool layanan kompresi CSS, Silahkan kunjungi:
-CSS Drive Gallery
-CSS Compressor
-Online CSS Optimiser/Optimizer
-Minify CSS
-CSSTidy Online
Atau anda dapat mencari situs lainnya melalui googling dengan keyword "css compression tool".

Langkah-langkah editing CSS:
a. Copy semua script CSS dari template HTML/XML.
b. Kemudian masuk ke situs layanan kompresi CSS yang anda pilih, paste semua kode tersebut dan klik 'compress', 'optimize', dan lains ebagainya.
c. Tunggu beberapa saat dan hasilnya akan keluar lengkap dengan hasil ukuran file terakhir setelah kompresi dan perbandingannya. Perbedaan yang kecil sekalipun akan sangat berpengaruh terhadap berkurangnya loadtime halaman.
d. Download backup template terlebih dahulu pada halaman edit HTML.
e. Hapus bagian dimana anda mengkopi aturanCSS tadi dan masukkan hasil kompresi ke bagian tersebut.
f. Preview dan jika tidak ada masalah lagi, save.
Clue:
Seluruh code CSS terletak di bagian head. Lebih tepatnya, semua code CSS pengatur tampilan terletak di antara <b:skin> dan ]]></b:skin>.
Pilih jenis/opsi kompresi 'standard'  atau sejenisnya pada tool kompresi CSS yang anda gunakan.
Semoga bermanfaat dan Good luck.

sumber : _buka-rahasia.blogspot.com/2011/03/percepat-loading-blog-dengan.html

Artikel Terkait

Tutorial Mempercepat Load Web/Blog
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

2 komentar

March 13, 2015 at 1:53 PM delete

Mengapa kami baru menemukan di blog ini, sungguh sayang sekali karena selalu ada artikel yang menarik dan berkualis seperti ini? salam sukses

Reply
avatar