13.4.15
29
Meringkas | Kompres Data Element Kode CSS, HTML Dan JavaScript
Cara Memperkecil Ukuran File CSS - Setiap file yang Anda tambahkan secara langsung dalam area Template, seperti kode CSS, HTML, jQuery dan JavaScript, maka semakin bertambah pula baris dan kolom pada susunan struktur element HTML secara keseluruhan dalam Template Blog Anda. Resikonya waktu yang dibutuhkan browser untuk membuka halaman Anda akan bertambah, sehingga terjadi apa yang banyak dikeluhkan pengunjung dengan istilah "Loading Blog Berat".

Lalu bagaimana cara memperkecil ukuran file tersebut, namun tidak merusak bentuk tampilan yang diatur oleh masing-masing element tersebut?. Memperkecil ukuran file bukan dengan menghapus beberapa kode didalamnya, sehingga banyak sahabat yang menghapus beberapa widget yang menurut mereka dapat membuat loading blog menjadi berat, padahal widget itu sangat dibutuhkan untuk membuat tampilan blog semakin menarik, apakah perlu kita HAPUS..?

Jika widget itu dapat membuat tampilan blog Anda menjadi menarik dan cantik, mengapa harus dihapus.! cukup perkecil ukuran file kode yang mangatur widget tersebut, untuk melakukannya kita mulai dengan element CSS. Contoh file CSS dalam Template selalu terkonsep dengan struktur susunan seperti ini:

CSS input



.span {
  position:absolute !important;
  width:100%;
  overflow:hidden;
  display:block;
  content:"";
  background-color: #39f;
  color:#111;
  font-family:"arial",georgia,sans-serif;
}

div .content {
  width:320px;
  height:186px;
  border-radius:10px;
  border:red 2px solid;
  font:bold italic medium Georgia;
  padding:10px 15px;
  color:#fff;
  background:#333;
}

// File CSS setelah diperkecil...
.span {position:absolute !important;width:100%;overflow:hidden;display:block;content:"";background-color: #39f;color:#111;font-family:"arial",georgia,sans-serif}
div .content {width:320px;height:186px;border-radius:10px;border:red 2px solid;font:bold italic medium Georgia;padding:10px 15px;color:#fff;background:#333}


Ukuran file CSS diatas tersusun dalam 2 baris perintah dengan 18 kolom, dan lihat setelah file diringkas atau diperkecil. Sekarang kita ambil sebuah widget dari » 2 Desain Tampilan Blockquote Info pada artikel saya sebelumnya, untuk mempermudah bagaimana cara memperkecil ukuran kodenya, saya akan tampilkan susunan CSS untuk membuat tampilan "Blockquote Skew".

File CSS susunan default
<style type='text/css'>
.skew-quote {max-width: 650px;font-family: 'PT Serif',serif;font-style: italic}
.skew-quote p {
  position: relative;margin: 0 10px;padding: 15px 0;
  font: italic 18px/24px 'PT Serif',serif;
  border-top: 4px double #8c8c8c;
  border-bottom: 1px solid #8c8c8c}

.skew-quote p:after {
  content: '';position: absolute;
  bottom: -9px;left: 42px;width: 15px;height: 15px;
  background: #333;border-left: 2px solid #8c8c8c;
  border-bottom: 1px solid #8c8c8c;
  transform: skew(45deg) rotate(-45deg)}

.skew-quote footer:before {content:'\201C';font:700 25px/normal serif;margin:6px}
.skew-quote footer {font-size: 14px;line-height: 20px;margin:8px 0 0 12%}
</style>
<blockquote class='skew-quote'>
   <p>Tulis Teks Anda Disini...</p>
       <footer>By. Devy Indriyani</footer>
</blockquote>


File CSS setelah diperkecil
<style type='text/css'>
.skew-quote{max-width:650px;font-family:'PT Serif',serif;font-style:italic}
.skew-quote p{position:relative;margin:0 10px;padding:15px 0;font:italic 18px/24px 'PT Serif',serif;border-top:4px double #8c8c8c;border-bottom:1px solid #8c8c8c}
.skew-quote p:after{content:"'';position:absolute;bottom:-9px;left:42px;width:15px;height:15px;background:#333;border-left:2px solid #8c8c8c;border-bottom:1px solid #8c8c8c;transform:skew(45deg) rotate(-45deg)}
.skew-quote footer:before{content:'\201C';font:700 25px/normal serif;margin:6px}
.skew-quote footer{font-size: 14px;line-height:20px;margin:8px 0 0 12%}
</style>
<blockquote class='skew-quote'>
   <p>Tulis Teks Anda Disini...</p>
       <footer>By. Devy Indriyani</footer>
</blockquote>


Tampilan widget tidak ada yang berubah, tidak ada yang rusak karena yang barusan Anda lakukan adalah membuang semua lekukan dalam setiap susunan CSS, menghapus tanda penutup disetiap akhir kode, sehingga dimensi ukurannya menjadi ringkas (sebaris). Untuk melihat hasilnya, silahkan COPY kedua file tersebut, tampilan widget sama bentuk namun widget mana yang lebih cepat terbuka, File CSS susunan default atau Ukuran file CSS setelah diperkecil, jika Anda sudah merasakan perbedaannya, maka lakukan hal yang sama pada semua susunan struktur kode HTML dalam Template Anda. Tanpa menghapus widget yang menurut Anda memberatkan loading blog, biarkan widget itu tampil disana, namun loading blog akan tetap cepat terbuka (fast loading).

Blog yang cepat terbuka akan membuat pengunjung betah bertamu diblog Anda, dan google sangat menyukai tampilan blog dengan kesederhanaan, terutama terhadap kecepatan muat halaman pada blog tersebut. Jadi jangan biarkan pengunjung menunggu terlalu lama untuk melihat halaman Anda, percepat loading blog Anda, namun tetap selalu setarakan dengan tehnik-tehnik SEO dengan memahami beberapa hal seperti dibawah ini:

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Memperkecil Ukuran File CSS
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

29 komentar

  1. dulu saya menyukai widget ikan karena sesuai tema blog, karena alasan bikin lola, akhirnya saya hapus, nanti saya coba lagi edit-edit sesuai petunjuk diatas

    BalasHapus
    Balasan
    1. jika widget itu dibentuk dengan perintah js, maka posisi penempatan widget sangat penting untuk menunjung loading blog, tempatkan dibawah halaman, atau footer page, lalu perkecil ukuran CSS dan javascriptnya. tanpa menghapus widget itu loading blog Anda akan tetap terjaga kecepatannya.

      Hapus
  2. sip nih biar makin wuss wuss loading blognya :D

    BalasHapus
  3. Oh gitu toh caranya. Makasih ya Mbak :)

    BalasHapus
    Balasan
    1. yakin neh sudah paham caranya, hehe..!!
      jika sudah OK, lakukan hal yang sama pada kode js dan HTML, sebagai awal coba buka template blog Anda, centang semua expand widget (tanda panah) dan lihat berapa jumlah nomor yang tertulis diakhir kode struktur HTML Template Anda, jika disana tertulis misal 53456, maka coba ubah angka tersebut menjadi 40036, dengan cara memperkecil semua ukuran file data element kode CSS, js dan HTML.

      dan tutup PC Anda, login kembali, pasti kecepatan loading blog akan semakin dahsyat, super cepat.

      Hapus
    2. kalau centang satu-satu kelamaan, praktisnya copy templatenya kemudian paste, pasti tanda panahnya kebuka semua...

      Hapus
  4. Saya juga kalau memperkecil css manual seperti itu, pernah pakai alat tapi malah jadi rusak, hehehe...

    BalasHapus
    Balasan
    1. kalau pakai tool sebenarnya bukan membuat tampilan blog menjadi berantakan, karena tugasnya alat tersebut hanyalah memperkecil, padahal tidak semua elemen kode bisa kita perkecil sesuka hati, jadinya ya berantakan karena kode setelah diparse ke alat untuk diperkecil menjadi tumpang tindih.

      lebih baik manual sih, walau lama tetapi hasilnya memuaskan.

      Hapus
    2. pake css compressor pasti gak ada masalah.
      http://www.cssdrive.com/index.php/main/csscompressor/

      Hapus
  5. Cara ini memang masih lebih ok ya mbak walaupun sedikit agak capek dan ribet tapi dari pada harus pakai tools online yang malah bikin tampilan blog jadi amburadul....

    BalasHapus
    Balasan
    1. jauh lebih baik mas, karena kita sendiri yang akan mengatur element-element mana yang kudu diperkecil ukurannya, daripada tool otomatis, yang file tidak kita inginkan untuk diringkas akan ikut terkompres juga, akhirnya tampilan blog menjadi berantakan dan rusak.

      Hapus
  6. lah emang bisa dikompres ya .. @-)

    BalasHapus
  7. Mengcompress CSS hanya menghilangkan code spasi saja ya.., saya pernah mengaplikasikan pada template, Tapi cuma menghilangkan beberapa Kb saja...Awalnya saya takut kalo kode widget JS tidak ada yang berfungsi karena di compress. ternyata tidak berpengaruh sama sekali dengan Javascriptnya... (o)

    BalasHapus
    Balasan
    1. menghilangkan spasi dan tanda ( ; ) disetiap akhir kode, sehingga kode menjadi sebaris, walupun element CSS notebandnya lebih kecil dibanding js, tetapi dengan meringkas semua susunan kode CSS akan membantu membuat loading blog menjadi cepat.

      kalau js tergantung pada area letak, jika perintahnya untuk tag <body>, maka bisa kita satukan semua perintah js dalam satu susuan kode script, namun tidak berlaku untuk js yang diapi oelh tag kondisional.

      Hapus
  8. saya check di google kecepatan blog saya baru 80 % belum 100 % perlu tips seperti ini

    BalasHapus
  9. Numpang tanya ya mbak, di beberapa file css yang pernah saya dapat di internet dan saya gunakan di situs saya, kalau dibuka di code editor malah sepertinya file css tersebut tertulis cuma satu baris yang panjang banget sampai saya sempet bikin kopi dulu sambil scroll halaman kesamping. :-) Pertanyaannya, apakah itu juga mempengaruhi kecepatan download halaman? (menjadi semakin cepat) Terima kasih sebelumnya, mohon petunjuknya.

    BalasHapus
    Balasan
    1. Menuliskan CSS akan jauh lebih baik jika seperti itu mas, satu baris sekalipun itu kode yang panjang, namun dalam menuliskan pada beberapa Template, tidak selalu sempurna jika CSS digabungkan dengan susunan sebaris seperti itu, jika satu perintah objek, baiknya ya sebaris, dan jangan ditumpuk untuk melanjutkan pada perintah objek yang lain, karena fungsinya akan menjadi berbeda.

      untuk mempercepat waktu download, biasanya dituliskan seperti itu mas. tetapi file CSS jika dialihkan untuk didownload, lebih baiknya di buat menjadi data php (menjadi file data), begitu mas.

      Hapus
    2. Oh gitu... Jelas deh. Makasih ya mbak. Sori telat replynya. :-d

      Hapus
  10. kudu di tongrongin lama-lama nih biar paham.

    BalasHapus
  11. Baca berulang nih biar ngerti.

    salam,
    http://alrisblog.wordpress.com

    BalasHapus
  12. memang harus banyak belajar css saat ini biar bisa utak-atik blog juga

    BalasHapus
  13. Ternyata ada alternatif cara, ketimbang main hapus aja. Jadi masih bisa pasang widget..

    BalasHapus
  14. ada es cendol gak ya?tipsnya oke2 :)

    BalasHapus
    Balasan
    1. mau pesan berapa mas. saya sekalian jualan klepon dalam bentuk css yang udah dirampingkan. heeee

      Hapus
  15. terima kasih telah berbagi info.....
    artikelnya sangat bermamfaat.....
    salam kenal san salam sukses..

    BalasHapus
  16. yang jelas merapatkan css itu sangat perlu dilakukan untuk mempercepat loading blog. selain itu susunan juga bisa lebih rapi dengan tidak banyak memakan tempat.

    BalasHapus
  17. hadeuuuuuuh?? [-(
    baca2 blog orang pinter gene,
    jadi tambah puyeng @-)...... wakakakaaaa =p~

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK