Kompres Code CSS Untuk Mempercepat Loading Blog, karena para pengunjung sering komplain dan paling males jika menemui blog yang loadingnya minta ampun beratnya, dimana efek buruknya yaitu, jangan berharap para pengunjung akan kembali lagi ke blog kita. contohnya gak jauh-jauh, blog saya ini juga tergolong berat, tp karana kebantu oleh cache jadi mending'lah gak berat-berat amat, tapi menurut saya masih perlu di kompres lagi. hihihi...
Setelah kemarin saya membahas tentang Cara Mempercepat Loading Blog dengan CSS External , dimana pada cara tersebut, kode CSS kita buat file.css dan mengupload ke webhosting, Nah kali ini ada cara yang lebih mudah dan lebih praktis, yaitu kita mengkompres kode CSS dengan aplikasi online. Cara yang sudah saya praktekan sebelumnya yaitu mengkompres CSS dengan CSS Compressor.
Penting!!
Untuk jaga-jaga selalu backUp dulu template sobat, agar bila nanti sobat mengalami masalah, bisa sobat upload kembali backup templatenya. Ok....
Berikut langkah-langkahnya:
Untuk pada cara pertama ini adalah cara yang umumnya sering kita/para blogger lakukan.
Untuk melihat/membandingkan hasilnya, terlebih dahulu, untuk mengeceknya silahkan cek di Speed Test
atau di http://gtmetrix.com Kemudian blok dan POTONG semua kode CSS dari setelah kode <b:skin><![CDATA[ sampai pada kode sebelum ]]></b:skin>
Bila sobat kurang jelas dengan penjelasan diatas perhatikan ini:
<b:skin><![CDATA[
. . . . .KODE-KODE CSS. . . . .
]]></b:skin>
Buka situs CSS compressor disini
Setting pengaturannya seperti berikut:
Compression mode = pilih 'Normal'
Comment handling = pilih 'Don't strip any comments'
Pastekan kode CSS yang telah di potong tadi pada kotak kosong
Kemudian klik Compress-It
Selanjutnya copy hasil kompresan tadi dan tempatkan pada template kamu diantara kode
<b:skin><![CDATA[
Pastekan disini kode CSS yang telah di kompres tadi
]]></b:skin>
Terakhir klik Simpan
Tugas sobat selanjutnya yaitu membandingkan berat blog sebelum dan setelah dikompres.
Triknya juga gak jauh-jauh dari cara yang pertama, cuma cara kedua ini lebih galak dari yang sebelumnya, (kata simbah gitu) Ckckckk
Karena memang caranya yang agak rumit, apalagi melihat kode CSS yang sudah kita kompres, pasti gak ada koma, titik dan spasinya. Pastinya membuat bingung kalo kita mau edit kodenya.
Tapi bila sobat berminat untuk mengkompres kode CSS biar makin maknyus, silahkan ikuti langkah-langkahnya berikut ini:
Caranya perhatikan kembali langkah pada cara yang pertama, yaitu:
Blok dan POTONG semua kode CSS dari setelah kode
<b:skin><![CDATA[ sampai pada kode sebelum ]]></b:skin>
Buka situs CSS compressor disini
Settingnganya rubah seperti berikut:
Compression mode = pilih 'Super Compact'
Comment handling = pilih 'Strip all any comments'
Kemudian tempatkan hasil kompresannya diantara kode
<b:skin><![CDATA[
Pastekan disini kode CSS yang telah di kompres tadi
]]></b:skin>
kemudian potong kembali pada kode diantara kode
<body>
Bla. . . . .bla. . . . .bla. . . . . Bla . . . . .
</body>
Selanjutnya buka halaman berikut dan kompres kode tersebut disini HTML Optimizer
Copy dan pastekan kode hasil kompresan tadi diantara kode <body> dan </body>
Terakhir klik Simpan
Lalu klik Optimize Now.
Setelah kemarin saya membahas tentang Cara Mempercepat Loading Blog dengan CSS External , dimana pada cara tersebut, kode CSS kita buat file.css dan mengupload ke webhosting, Nah kali ini ada cara yang lebih mudah dan lebih praktis, yaitu kita mengkompres kode CSS dengan aplikasi online. Cara yang sudah saya praktekan sebelumnya yaitu mengkompres CSS dengan CSS Compressor.
Penting!!
Untuk jaga-jaga selalu backUp dulu template sobat, agar bila nanti sobat mengalami masalah, bisa sobat upload kembali backup templatenya. Ok....
Berikut langkah-langkahnya:
- Seperti biasa, Login ke akun blogger sobat
- Masuk Rancangan/Layout
- Pilih Edit HTML
- Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
1. Kompres kode CSS pada umumnya (standart)
Untuk pada cara pertama ini adalah cara yang umumnya sering kita/para blogger lakukan.
Untuk melihat/membandingkan hasilnya, terlebih dahulu, untuk mengeceknya silahkan cek di Speed Test
atau di http://gtmetrix.com Kemudian blok dan POTONG semua kode CSS dari setelah kode <b:skin><![CDATA[ sampai pada kode sebelum ]]></b:skin>
Bila sobat kurang jelas dengan penjelasan diatas perhatikan ini:
<b:skin><![CDATA[
. . . . .KODE-KODE CSS. . . . .
]]></b:skin>
Buka situs CSS compressor disini
Setting pengaturannya seperti berikut:
Compression mode = pilih 'Normal'
Comment handling = pilih 'Don't strip any comments'
Pastekan kode CSS yang telah di potong tadi pada kotak kosong
Kemudian klik Compress-It
Selanjutnya copy hasil kompresan tadi dan tempatkan pada template kamu diantara kode
<b:skin><![CDATA[
Pastekan disini kode CSS yang telah di kompres tadi
]]></b:skin>
Terakhir klik Simpan
Tugas sobat selanjutnya yaitu membandingkan berat blog sebelum dan setelah dikompres.
2. Cara Kompress Kode CSS Kedua (ini jurus dari mbah saya) dan juga Kompres pada Kode HTML
Triknya juga gak jauh-jauh dari cara yang pertama, cuma cara kedua ini lebih galak dari yang sebelumnya, (kata simbah gitu) Ckckckk
Karena memang caranya yang agak rumit, apalagi melihat kode CSS yang sudah kita kompres, pasti gak ada koma, titik dan spasinya. Pastinya membuat bingung kalo kita mau edit kodenya.
Tapi bila sobat berminat untuk mengkompres kode CSS biar makin maknyus, silahkan ikuti langkah-langkahnya berikut ini:
Caranya perhatikan kembali langkah pada cara yang pertama, yaitu:
Blok dan POTONG semua kode CSS dari setelah kode
<b:skin><![CDATA[ sampai pada kode sebelum ]]></b:skin>
Buka situs CSS compressor disini
Settingnganya rubah seperti berikut:
Compression mode = pilih 'Super Compact'
Comment handling = pilih 'Strip all any comments'
Kemudian tempatkan hasil kompresannya diantara kode
<b:skin><![CDATA[
Pastekan disini kode CSS yang telah di kompres tadi
]]></b:skin>
kemudian potong kembali pada kode diantara kode
<body>
Bla. . . . .bla. . . . .bla. . . . . Bla . . . . .
</body>
Selanjutnya buka halaman berikut dan kompres kode tersebut disini HTML Optimizer
Copy dan pastekan kode hasil kompresan tadi diantara kode <body> dan </body>
Terakhir klik Simpan
3.compress Image
untuk menggunakannya anda bisa ikuti langkah dibawah ini:- Siapkan gambar yang akan di optimize.
- Klik Browse dan pilih gambar yang akan di optimiskan
Lalu klik Optimize Now.
- Pada halaman selanjutnya klik Download to your Computer.
Untuk langkah mengoptimiskan image Sobat tinggal Klik kanan pada image pilh Optimize Image As.., Kemudian atur lebar dan tingginya, Lalu klik Optimize. Ok selesai
Setelah gambar di optimize, baru upload pada postingan Sobat.
Untuk cara kedua harap lebih berhati-hati dalam mempraktekannya, karena kode CSS/HTML setelah dikompres benar-benar akan membuat kita pusing membacanya, hohoho karena memang tanpa spasi.
Oke, tugas sobat selanjutnya yaitu membandingkan hasil dari sebelum dan sesudah dikompres.
Untuk cara diatas sudah saya terapkan pada blog saya ini. Dan hasil nya gak berat2 amat sih blog jadinya tidak mengalami masalah alias lancar!! Dan akhirnya begitulah kiranya Cara Kompres CSS,/Html?image Untuk Mempercepat Loading Blog yang saya lakukan.
4.widget/gadget
5.Tampilan posting halaman utama blogPada halaman utama (homepage), jumlah posting atau artikel yang ditampilkan juga mempengaruhi loading blog. Apabila posting/artikel yang ditampilkan terlalu banyak, maka waktu loading pun akanbertambah. Tampilkan artikel-artikel pada halaman utama dengan jumlah yang sewajarnya, misalnya 5. Untuk mengesetnya, buka dashboard >> Design/Rancangan >> klik 'edit' pada badan blog post >> tulis jumlah/angka posting yang ingin ditampilkan.
0 komentar:
Posting Komentar
silahkan tinggalkan komentar