Meningkatkan Page Speed Blog dengan Merapikan CSS

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 :

Menghemat banyak byte data dari suatu website/blog
Mempercepat proses download, parsing, dan waktu eksekusi
Mengurangi latency atau lambatnya jaringan
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 :

#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 :

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

Meningkatkan Page Speed Blog dengan Merapikan CSS

Chord yang Digunakan 0

Meningkatkan Page Speed Blog dengan Merapikan CSS

Minify CSS

Fitur Lagu