Meningkatkan Page Speed Blog dengan Merapikan CSS ~ Baiklah, kita sambung lagi artikel yang sebelumnya yaitu "Mempercepat Loading Blog yang Lambat". Dengan membaca dan mempraktikkan isi artikel pada kali ini, Insya Allah akan ada perubahan kecepatan loading blog. Tentunya perubahan dalam hal loading blog akan bertambah cepat.

Page Speed menggambarkan seberapa cepat blog kita dimuat ketika diakses oleh pengunjung. Semakin tinggi Page Speed suatu blog, maka semakin cepat website/blog tersebut dimuat (loading). Karena salah satu penentu kecepatan blog adalah kode CSS (baca disini), maka kali ini saya akan mencoba memaparkan beberapa pengaruh dan permasalahan dari kode CSS terhadap kecepatan muat suatu website/blog.

Minify CSS

Minify CSS atau Memadatkan kode CSS ini memiliki banyak manfaat antara lain :

1. Menghemat banyak byte data dari suatu website/blog
2. Mempercepat proses download, parsing, dan waktu eksekusi
3. Mengurangi latency atau lambatnya jaringan
4. Beban browser menjadi lebih ringan dalam menampilkan suatu website/blog

Dengan melakukan compress CSS ini, maka akan mengurangi jumlah karakter yang tidak terpakai, sehingga dapat mengurangi ukuran/size dari blog/website. Dampaknya akan terasa karena dapat menyusutkan ukuran CSS yang semua besar menjadi lebih kecil (meskipun biasanya ukuran hanya turun beberapa kilobyte saja).

Lalu, bagaimana cara untuk mengecilkan ukuran css? Sangat mudah, dan simpel sekali. Beberapa tools online tersedia secara bebas untuk mengecilkan css (compress css) dan sobat bisa menemukannya di google, tetapi kalau sobat ingin lebih cepat silakan gunakan tools css compressor & beautifier buatan saya. Penggunaannya sangat mudah, sobat hanya perlu copy kode CSS sobat lalu pastekan pada kolom dan klik Compress CSS, kemudian copy lagi CSS yang sudah dikompress di kolom tersebut lalu pindahkan lagi ke dalam template.

Sebagai contoh adalah sebagai berikut :

<style>
/* sidebarnya */

#sidebar-slide-main {
  width:100%;
  display:block;
}

#sidebar1 {
  width:50%;
  float:left;
  padding:5px;
}

#sidebar2 {
  width:50%;
  float:right;
  padding:5px;
}

#sidex1 h2,
#sidex2 h2 {
  position:relative;
  margin:0 0 5px;
}

#sidex1 h2 {
  background-color:#0070b0;
  text-align:center;
  font-size:150%;
  font-weight:bold;
  color:white;
  padding:10px;
}

#sidex2 h2 {
  background-color:#0070b0;
  text-align:center;
  font-size:150%;
  font-weight:bold;
  color:white;
  padding:10px;
}

#sidex2 h2:after {
  content:"";
  width:0;
  height:0;
  position:absolute;
  top:100%;
  left:50%;
  border-width:10px;
  border-style:solid;
  border-color:#0070b0 transparent transparent transparent;
  display:block;
}

#sidex1 h2:after {
  content:"";
  width:0;
  height:0;
  position:absolute;
  top:100%;
  left:50%;
  border-width:10px;
  border-style:solid;
  border-color:#0070b0 transparent transparent transparent;
  display:block;
}

#sidex1 .widget {
  padding:0;
  list-style:none;
}

#sidex1 .widget-content {
  margin:0 auto;
  overflow:auto;
  list-style:none;
}

#sidex1 ul li a:hover {
  color:#AD3000;
  list-style:none;
}

#sidex2 .widget {
  padding:0;
  list-style:none;
}

#sidex2 .widget-content {
  margin:0 auto;
  overflow:auto;
  list-style:none;
}

#sidex2 ul li a:hover {
  color:#AD3000;
  list-style:none;
}

/* slidenya */

#sidebar-slide {
  display:block;
}

#sidebar-slide-content {
  background-color:#eee;
  height:auto;
  overflow:auto;
  margin:0;
  padding:0;
  color:#333;
  display:none;
}

.sidebar-slide-button {
  position:relative;
  cursor:pointer;
  text-shadow:1px 1px 2px #000;
  padding:7px 15px;
  background-color:#0070b0;
  color:white;
  text-align:center;
}

.sidebar-slide-button:hover {
  background-color:green;
  color:white;
}

@media only screen and (max-width:490px) {
  #sidebar1,
  #sidebar2 {
    width:100%float:none;
    margin:0 auto;
  }
}

</style>

Menjadi sebagai berikut :

<style>
#sidebar-slide-main{width:100%;display:block}#sidebar1{width:50%;float:left;padding:5px}#sidebar2{width:50%;float:right;padding:5px}#sidex1 h2,#sidex2 h2{position:relative;margin:0 0 5px}#sidex1 h2{background-color:#0070b0;text-align:center;font-size:150%;font-weight:bold;color:white;padding:10px}#sidex2 h2{background-color:#0070b0;text-align:center;font-size:150%;font-weight:bold;color:white;padding:10px}#sidex2 h2:after{content:"";width:0;height:0;position:absolute;top:100%;left:50%;border-width:10px;border-style:solid;border-color:#0070b0 transparent transparent transparent;display:block}#sidex1 h2:after{content:"";width:0;height:0;position:absolute;top:100%;left:50%;border-width:10px;border-style:solid;border-color:#0070b0 transparent transparent transparent;display:block}#sidex1 .widget{padding:0;list-style:none}#sidex1 .widget-content{margin:0 auto;overflow:auto;list-style:none}#sidex1 ul li a:hover{color:#AD3000;list-style:none}#sidex2 .widget{padding:0;list-style:none}#sidex2 .widget-content{margin:0 auto;overflow:auto;list-style:none}#sidex2 ul li a:hover{color:#AD3000;list-style:none}#sidebar-slide{display:block}#sidebar-slide-content{background-color:#eee;height:auto;overflow:auto;margin:0;padding:0;color:#333;display:none}.sidebar-slide-button{position:relative;cursor:pointer;text-shadow:1px 1px 2px #000;padding:7px 15px;background-color:#0070b0;color:white;text-align:center}.sidebar-slide-button:hover{background-color:green;color:white}@media only screen and (max-width:490px){#sidebar1,#sidebar2{width:100%float:none;margin:0 auto}}</style>

Put CSS in the Document Head

Setelah sebelumnya sobat telah berhasil melakukan kompres terhadap kode CSS, langkah berikutnya adalah meletakkan kode CSS dengan benar. Bagaimana caranya? Sangat mudah. Dari analisis saya terhadap result pengujian kecepatan loading blog di GTmetrix, saya menyimpulkan bahwa blog yang loadingnya cepat adalah yang menempatkan kode-kode CSS di antara kode <head> --kode CSS disini-- </head>. Baik ditempatkan di atas ]]></b:skin> maupun begini <style> --Kode CSS disini-- </style> bagi yang sudah menghilangkan kode ]]></b:skin> seperti saya :p

Combine Image Using CSS Sprites

Saya sebenarnya tidak begitu memahami coding kode CSS Sprites. Jadi, sebelumnya saya mohon maaf sekali apabila materi yang satu ini saya tidak begitu menguasai.

Oke, mengkombinasikan gambar menggunakan CSS Sprites bertujuan untuk mengurangi total permintaan dari server (minimize request size) sehingga berakibat pada ringannya loading suatu website/blog. Karena dengan menggunakan CSS Sprites, berarti kita akan menggunakan jumlah gambar yang minimal untuk lebih dari satu kondisi pemanggilan gambar tersebut. Untuk penjelasan mengenai CSS Sprites akan saya lanjutkan di artikel "Meminimalkan Request Size dengan CSS Sprites" karena penjelasan yang satu ini cukup panjang bila digabungkan dengan artikel ini.

Cukup sekian dulu tutorial untuk Meningkatkan Page Speed Blog dengan Merapikan CSS, silakan simak ke artikel cara meningkatkan page speed selanjutnya yaitu dengan Minify Javascript, Minify HTML, Leverage Browser Caching, serta Minimize Request Size.