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.
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".
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%.
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:
Di antaranya soal:
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".
- Buka Unused CSS.
- Masukkan link url atau semua kode CSS template Anda
- 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:
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!"
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%.
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:
Di antaranya soal:
- HTML Compression
- Image Compression.
- JavaScript Compression
- Jangan terlalu banyak menampilkan jumlah post di halaman depan (Home). Google menyaranakan maksimal 10 judul post.
- Gunakan widget dan javascript dari blogger. Namun jika ingin menggunakan javascript dan widget dari pihak ketiga, pastikan penempatannya bagian bawah blog atau dibawah sidebar.
- Kurangi ukuran gambar.
- Jangan gunakan flash, jam, animasi.
- 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
« Prev Post
Next
Next Post »
Next Post »
sudah Saya lakukan mas, dan semuanya bersih. Makasih infonya.
ReplyDeleteTerima kasih artikel dan sarannya di posting ini... akan saya coba untuk meningkatkan kecepatan loading blog yang sudah ada di blog saya...
ReplyDeletesukses selalu mas.... dinantikan updatenya.....
untuk poin yang pertama masih bingung cara menghapusnya,,soalnya setelah saya cek di blog saya banyak yang unused
ReplyDeleteterima kasih gan, ternyata loadingnya banyak dipengaruhi oleh images dan lokasi js.
ReplyDeleteYslow itu apa sih?
ReplyDeletenewbie saya
Benar juga mas. Nah, apakah kode css yang tidak terpakai sebanyak 21% itu tergolong besar mas? Kebetulan loading blog saya pun tergolong cepat.
ReplyDeleteSaya 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
Kalo sudah 1,8 detik sudah OK banget, gak usah diapa-apain lagi, biarin aja....
DeleteSaya mau nambahin mas,
ReplyDeleteMemercepat 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>
bagus gan tipsnya, kebetulan ane masih newbie, hehe
ReplyDeleteMas 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
ReplyDeleteloads time dipengaruhi juga gmbar yang dimuat, jika gambar ukuran besar, otomatis makan waktu lama buat load
DeleteThank you very much
ReplyDeletesaya coba commpres hasilnya dari 23,3 second menjadi 0 second, jos gann
ReplyDeletejasa bangunan jambi
Jos sih... tapi jangan sambil nyepam ya :)
DeleteAne udah ngikutin cara di atas gan, dan hasilnya sekarang jadi 1.9s. Makin seserepetan aja kaya MU jaman Sir Alex
ReplyDeletemantap gan thanks infonya
ReplyDeletemas coba cek kecepatan blog anda di gtmetrix, tidak bisa mas malah ada tulisannya seperti ini analysis error
ReplyDeletemau 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...
ReplyDeleteSaya telah melakukannya, dan semuanya bersih. Terimakasih atas infonya.
ReplyDeleteUntuk minifikasi CSS, Anda juga dapat merujuk ke alat berikut
https://url-decode.com/tool/css-minifier