March 1, 2015

Cara Mempercepat Loading Blog: Hapus CSS yang Tidak Digunakan

March 1, 2015

Cara menghapus kode CSS yang tidak terpakai secara otomatis untuk mempercepat loading blog.

blog cepat loading
SALAH satu cara mempercepat loading time blog adalah dengan menghapus kode-kode CSS yang tidak digunakan atau tidak terpakai di template.

Apa itu CSS? Kita tanya Wikipedia aja deh. Katanya, CSS itu singkatan dari Cascading Style Sheet (CSS). CSS merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. (Cascading Style Sheets; CSS defines how HTML elements are to be displayed).

Di template blog, kode-kode CSS yang menentukan "hitam-putih" tampilan blog kita itu ada di antara kode <b:skin> dan </b:skin>. Semua kode yang ada di situ, itulah kode CSS.

Agar loding time blog kita bagus, idealnya di bawah empat detik saja (silakan cek kecepatan loading blog Anda di GT Metrix), salah caranya adalah dengan memastikan tidak ada kode CSS yang "useless", tidak berguna, di dalam template, hanya memberatkan loading.

Salah satu tools online yang bisa kita gunakan adalah Unused CSS. Dari namanya saja sudah jelas, situs itu akan mengecek "CSS yang tidak terpakai".
  1. Buka Unused CSS.
  2. Masukkan link url atau semua kode CSS template Anda
  3. Klik tombol yang ada dan tunggu hasil dan rekomendasinya.
CB sendiri sudah mengeceknya. Hasilnya, bersih! Semua kode CSS di template CB digunakan, tidak ada yang tidak terpakai, sehingga tak perlu bersih-bersih lagi:

kode css terpakai

Kompres CSS

Selain menghapus kode CSS yang tidak dipakai, cara lain untuk mempercepat loading time blog adalah mengkompress kode tersebut (CSS Compresse).

Kita bisa gunakan CSS Drive untuk melakukan kompres:

1. Buka situs CSS Drive
2. Copas saja semua kode antara kode <b:skin> dan </b:skin>
3. Klik "Compress It!"
3. Akan terbuka halaman baru berisi CSS yang telah di kompresi.

CB sendiri sudah melakukan kompress ini, namun 'gak CB pakai. Soalnya 'ga terlalu ngaruh. Secara blog CB ini sudah bagus loading timenya, di bawah empat detik. Cuma "keganggu" sama Google Adsense doang. Lagian, bedanya css asli dan hasil kompress cuma dikit, hanya 6%.

hasil komprs kode css

WARNING!
Langkah kompress css hendaknya dilakukan setelah Anda memutuskan tidak akan lagi memodifikasi blog. Soalnya, nanti kode-kode tersebut "rapat" dan akan sulit menemukan kode yang akan diubah.

Masih banyak cara lain untuk mempercepat loading blog, selain menghapus kode CSS yang tidak dipakai, seperi rekomendasi GT Metrik:

rekomendasi gt metrik

Di antaranya soal:
  1. HTML Compression
  2. Image Compression. 
  3. JavaScript Compression
Untuk pemula, daripada blognya error, cukup dengan langkah sebagai berikut dulu:
  1. Jangan terlalu banyak menampilkan jumlah post di halaman depan (Home). Google  menyaranakan maksimal 10 judul post.
  2. Gunakan widget dan javascript dari blogger. Namun jika ingin menggunakan javascript dan widget dari pihak ketiga, pastikan penempatannya bagian bawah blog atau dibawah sidebar.
  3. Kurangi ukuran gambar.
  4. Jangan gunakan flash, jam, animasi.
  5. Jangan memasang widget hit counter (statistik pengunjung), alexa rank, dll. yang hanya akan membenani loading blog.
Demikian Cara Mempercepat Loading Blog, khsusunya soal menghapus kode CSS yang Tidak Digunakan. Good Luck! (http://contohblognih.blogspot.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

19 comments on Cara Mempercepat Loading Blog: Hapus CSS yang Tidak Digunakan

  1. sudah Saya lakukan mas, dan semuanya bersih. Makasih infonya.

    ReplyDelete
  2. Terima kasih artikel dan sarannya di posting ini... akan saya coba untuk meningkatkan kecepatan loading blog yang sudah ada di blog saya...
    sukses selalu mas.... dinantikan updatenya.....

    ReplyDelete
  3. untuk poin yang pertama masih bingung cara menghapusnya,,soalnya setelah saya cek di blog saya banyak yang unused

    ReplyDelete
  4. terima kasih gan, ternyata loadingnya banyak dipengaruhi oleh images dan lokasi js.

    ReplyDelete
  5. Yslow itu apa sih?
    newbie saya

    ReplyDelete
  6. Benar juga mas. Nah, apakah kode css yang tidak terpakai sebanyak 21% itu tergolong besar mas? Kebetulan loading blog saya pun tergolong cepat.

    Saya dilema loh hahaha.. Loading blog tergolong cepat, saya cek barusan 1,890 detik. Kalo di kompres takutnya kesusahan nyari beberapa kode yang dibutuhkan suatu saat nanti. === >>>> Apalagi ada credit link dari si pemilik template. ini yang bikin mumet.

    Ada solusi untuk saya mas? Mohon dijawab mas :D

    ReplyDelete
    Replies
    1. Kalo sudah 1,8 detik sudah OK banget, gak usah diapa-apain lagi, biarin aja....

      Delete
  7. Saya mau nambahin mas,
    Memercepat loading blog dengan menghilangkan widget.css. :)

    1. Cari kode:
    <b:skin><![CDATA[

    2. Block semua kode css di bawah kode poin nomor 1 sampai kode ini:
    ]]><![CDATA[]]><![CDATA[*/]]></b:skin>

    4. Di bawah kode poin nomor 3 tambahkan kode ini:
    <style type='text/css'> Letakkan kode css yang ada di notepad tadi di sini </style>

    :) Sekedar info, widget.css merupakan kode bawaan blogspot sendiri yang dapat dihilangkan karena tidak terlalu berfungsi.

    Ada lagi mas tambahannya,
    Memercepat loading blog dengan menghilangkan widget.js

    1. Cari kode </body>

    2. Ganti kode tersebut dengan kode ini:
    <!--</body>--></body>

    ReplyDelete
  8. bagus gan tipsnya, kebetulan ane masih newbie, hehe

    ReplyDelete
  9. Mas Cb , Blog saya loadnya ampe 12 second . saya dah coba nyari solusi tapi ga ketemu solusi yang oke .Kalau benerin load blog disini berapa ya kira - kira

    ReplyDelete
    Replies
    1. loads time dipengaruhi juga gmbar yang dimuat, jika gambar ukuran besar, otomatis makan waktu lama buat load

      Delete
  10. saya coba commpres hasilnya dari 23,3 second menjadi 0 second, jos gann
    jasa bangunan jambi

    ReplyDelete
    Replies
    1. Jos sih... tapi jangan sambil nyepam ya :)

      Delete
  11. Ane udah ngikutin cara di atas gan, dan hasilnya sekarang jadi 1.9s. Makin seserepetan aja kaya MU jaman Sir Alex

    ReplyDelete
  12. mas coba cek kecepatan blog anda di gtmetrix, tidak bisa mas malah ada tulisannya seperti ini analysis error

    ReplyDelete
  13. mau di kompress, tapi takutnya nanti utak atik lagi html nya, mau di hapus, tapi takut ngefek ke tampilan blog saya.. ya begini gan kalau belum paham benar css... hehe.. btw.. saya coba hapus aja gan...

    ReplyDelete
  14. Saya telah melakukannya, dan semuanya bersih. Terimakasih atas infonya.
    Untuk minifikasi CSS, Anda juga dapat merujuk ke alat berikut
    https://url-decode.com/tool/css-minifier

    ReplyDelete

Contact Form

Name

Email *

Message *