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:
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
File CSS setelah diperkecil
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:
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:
.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;
}
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}
.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>
.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>
.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:
No comments:
Post a Comment