Tips meringankan loading blog = Mengurangi css & html

Kamis, 03 Februari 2011
Berikut tips mengurangi css dan html di template xml yang dapat sedikit membantu mengurangi beban blog saat loading.

Perhatian

  1. Pada tutorial ini saya menggunakan template xml minima white.
  2. silahkan back-up template (Download full template) sebelum melakukan tips berikut.
Proses
[...] setelah berada di laman edit Html [...]

cari dan hapus code html ini:


/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#333" value="#333333">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#58a" value="#5588aa">
   <Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#666" value="#666666">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#999" value="#999999">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#c60" value="#cc6600">
   <Variable name="bordercolor" description="Border Color"
             type="color" default="#ccc" value="#cccccc">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#999" value="#999999">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#666" value="#666666">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#999" value="#999999">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
   <Variable name="headerfont" description="Sidebar Title Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
   <Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
   <Variable name="descriptionfont" description="Blog Description Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
   <Variable name="postfooterfont" description="Post Footer Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
   <Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="Side where text ends in blog language"
             type="automatic" default="right" value="right">
*/
Hapus semua tanda berikut:
-----------------------------------------------
Kode css untuk widget profil, hapus jika tidak di perlukan

/* Profile 
----------------------------------------------- */
.profile-img { 
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 4px;
  border: 1px solid $bordercolor;
}

.profile-data {
  margin:0;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  color: $sidebarcolor;
  font-weight: bold;
  line-height: 1.6em;
}

.profile-datablock { 
  margin:.5em 0 .5em;
}

.profile-textblock { 
  margin: 0.5em 0;
  line-height: 1.6em;
}

.profile-link { 
  font: $postfooterfont;
  text-transform: uppercase;
  letter-spacing: .1em;
}

Hapus juga code ini:


body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }
Kemudian ganti kode css diatas dengan kode di bawah ini:

body {
  background:#fff;
  margin:0 auto;
  color:#000;
  font:75% Georgia "Times New Roman", Times,Serif;letter-spacing:0.2px;line-height:12px}

Hapus juga kode yang berawalan $, kemudian tetapkan kode value/jenisnya, contoh:
$bgcolor, $textcolor, $linkcolor, $visitedlinkcolor, $bordercolor, $startSide, $endSide, $bodyfont

Ganti $....color dengan kode warna html, misalnya untuk warna hitam #000000 atau dapat di persingkat menjadi #000, kemudian ganti juga kode $startSide dengan value left dan $endSide dengan value right

Terahir untuk jenis font, yang biasanya di tandai dengan $bodyfont, $descriptionfont, $postfooterfont ganti dengan jenis font yang sobat anggap menarik, contoh:
'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif'
Untuk Demo sudah saya terapkan pada template ini.

26 komentar (Tips meringankan loading blog = Mengurangi css & html)

Posting Komentar
  1. Rizky2009 » Februari 02, 2011 1:16 PM | permalink

    sebagian kayaknya belum tak hapus sob, ok deh habisa BW2 kalau masih ada waktu lang tak oprek blog q, makasih sob

  2. Tihang karas » Februari 02, 2011 4:58 PM | permalink

    he he... sama-sama kang

  3. alkatro » Februari 02, 2011 5:36 PM | permalink

    layak untuk dicoba, thanks sharenya :)

    maaf ane bengong sebentar disini kawan (5 menit lagi) templatenya kereeeeeeeen banged.. mangtabs

  4. Tihang karas » Februari 02, 2011 6:09 PM | permalink

    he he, ada-ada aja...

  5. sichandra » Februari 02, 2011 6:59 PM | permalink

    wah mantap nih ilmunya buat ringanin blog saya yg beraaat banget , hehehe

    saya salut buat blog ini , tampilannya bagus dan sangat ringan :D

  6. Teras Info » Februari 02, 2011 8:54 PM | permalink

    mantabs tipsnya, kawan...
    bisa dicoba nih, biar blog saya tambah enteng..he.he..

  7. Bilbul » Februari 02, 2011 10:37 PM | permalink

    Tips manteb kang, bisa nambah wawasan saya. Tapi belum berani saya untuk menghapus-hapus kode.

    Mampir kalu bersedia dan jangan lupa komentnya mas
    http://bilbulsama.blogspot.com/

  8. Majalah Masjid Kita » Februari 02, 2011 11:19 PM | permalink

    harus saya praktikkan ini.. sayangnya saya masih kurang menguasai php, wp dsb nya.. self hosting :( mohon bimbingannya mas.. terimakasih :)

  9. secangkir teh dan sekerat roti » Februari 03, 2011 12:02 AM | permalink

    ini cepat kalo loadignnya.. :)

  10. Tihang karas » Februari 03, 2011 7:47 AM | permalink

    sichandra »
    mungkin template ini yang sobat maksud:
    http://deconstructioncode.blogspot.com/

    Majalah Masjid Kita »
    maaf, sayapun belum atau bahkan tidak mengerti tentang php, wp apalagi self hosting, jusru saya ingin belajar dengan siapapun yang bersedia termasuk sobat.

  11. Putrie » Februari 03, 2011 11:25 AM | permalink

    Siap praktek,,Gan!!

  12. Tomo » Februari 03, 2011 8:22 PM | permalink

    balasan
    load berat repot juga

  13. Tihang karas » Februari 03, 2011 8:32 PM | permalink

    asal tahan nunggunnya, mungkin gak masalah :D

  14. CoRE-XP » Februari 03, 2011 11:38 PM | permalink

    di blogspot masih rada2 nggak berani sob
    coba bisa di oofline kan ya

  15. Tihang karas » Februari 04, 2011 2:13 AM | permalink

    yoii... pasti lebih ok.

  16. Erdien » Februari 04, 2011 11:30 PM | permalink

    Wow... bahasanya bikin ane puyeng hehehe... Harus smedi dulu neh buat belajarnya.

    Salam!

  17. Majalah Masjid Kita » Februari 07, 2011 10:58 PM | permalink

    selalu saja ada yang bermanfaat jika bertandang ke sini.. saya harap suatu saat nanti masnya memposting tips dan triks yang berkenaan dengan wp selfhosting... karena saya masih bener2 buta akan hal satu ini :(

  18. sejuta ebook » Februari 09, 2011 11:03 AM | permalink

    kagak mudeng Sob.. pengin buanget bisa bahasa pemrograman tapi kayaknya Ssussah buanggggget

  19. Ba'i » Februari 09, 2011 11:11 AM | permalink

    mumet q pak :doh

  20. Tihang karas » Maret 14, 2011 5:44 AM | permalink

    @Bai
    sama, setelah saya ngetik posting diatas, saya langsung minum obat :D

  21. Rawins » April 04, 2011 2:06 PM | permalink

    udah aku coba malah berantakan...
    heheh dasar otakku katro.
    nice share bos...

  22. Tihang karas » April 04, 2011 10:59 PM | permalink

    Intinya cuma meminimalisir & memindahkan aja bro...

  23. sejuta-ebook » April 08, 2011 4:17 PM | permalink

    kagak mudeng Bosss

  24. idblogku » Juli 19, 2011 12:21 PM | permalink

    ;) Mantap sob tutornya Mempercepat Loading Blog Dengan CSS Compressor

    Happy Blogging

  25. Endy » Agustus 29, 2011 9:58 PM | permalink

    mank yg g k'pake msti d'hpus..tz klo bs cssx mesti d'persingkat, atau mungkin dengan bahasa yg tidak saya kenal dinamakan css shorthand...
    nice info mas..makasih..

  26. Tihang » Agustus 30, 2011 12:06 AM | permalink

    sip. biar enteng loadingnya

Back to form

Mohon berkomentar sesuai topik posting di atas !