Selamat Datang di Blog Orang IT. Tahukah anda bahwa kode CSS , HTML dan javascript merupakan kode yang pasti ada didalam template blogger meski jumlahnya bisa diminimalkan tetapi ada cara lain untuk mengoptimalkannya yakni dengan mengcompress ukuran CSS dan HTMLnya
Tidak semua jenis template blogspot menggunakan CSS dan HTML yang telah dicompress terlebih itu adalah buatan pihak ketiga yang memang tidak melakukan pengoptimalan, ada sebagian creator yang mengabaikan hal ini karena dianggap standar kecepatan template sudah sesuai harapan mereka tanpa peduli ukuran size HTML
Padahal CSS HTML Javascript menyumbang ukuran puluhan kilobyte saat proses pemuatan
Tujuan melakukan compress terhadap script css , html dan javascript ini sendiri untuk memaksimalkan kecepatan loading blog agar fast loading, googlethink sendiri mematok batas kecepatan waktu 3 detik sebagai slowly (sangat lambat) dan kurang dari 1 detik sebagai excellent sisanya blog yang dimuat 1-2.5 detik dianggap rata-rata
Beberapa creator menghapus semua javascript dan menyisakan satu untuk menu dropdwon tapi itu tidak cukup , masih ada cara compress yang bisa dicoba untuk membuatnya lebih cepat.
Blog yang fast loading (dibaca cepat) sangat disukai oleh pengunjung dan semakin cepat suatu blog maka semakin kecil pula peluang untuk kehilangan traffic organik
Melakukan compress pada css sebenarnya tidak menyebabkan error pada template jadi anda tidak perlu khawatir , fungsi pengompresan CSS hanya untuk mengurangi garis spasi yang terlalu banyak memakan line/garis pada template blog
Sederhanaya mari kita lihat perbedaan antara kedua CSS berikut
Kode CSS yang belum di compress
#searchfs.open {
-webkit-transform: translate(0px, 0px) scale(1, 1);
-moz-transform: translate(0px, 0px) scale(1, 1);
-o-transform: translate(0px, 0px) scale(1, 1);
-ms-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1);
opacity: 1;
z-index: 9999;
}
#searchfs input[type=”search”] {
position: absolute;
top: 50%;
left: 0;
margin-top: -51px;
width: 70%;
margin-left: 15%;
color: rgb(255, 255, 255);
background: transparent;
border: 1px solid rgba(255, 255, 255, .8);
border-radius: 5px;
font-size: 40px;
text-align: center;
outline: none;
padding: 10px;
}
Kode CSS setelah compress
#searchfs.open{-webkit-transform:translate(0px,0px) scale(1,1);-moz-transform:translate(0px,0px) scale(1,1);-o-transform:translate(0px,0px) scale(1,1);-ms-transform:translate(0px,0px) scale(1,1);transform:translate(0px,0px) scale(1,1);opacity:1;z-index:9999}#searchfs input[type=”search”]{position:absolute;top:50%;left:0;margin-top:-51px;width:70%;margin-left:15%;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.8);border-radius:5px;font-size:40px;text-align:center;outline:0;padding:10px}
Terlihatkan bedanya ? yah garis text css yang sebelumnya memanjang kebawah kini berubah menjadi singkat horizontal dengan satu line saja
Begitu juga dengan kode HTML yang sangat panjang akan memakan banyak ruang area pada file template yang digunakan , sehingga dibutuhkan usaha untuk mengcompress kode template secara keseluruhan untuk memaksimalkan kecepatan loading blog agar memenuhi standar penilaian google
Pada postingan kali ini Blog Orang IT akan menjelaskan secara singkat bagaimana melakukan compress css , html dan javascript dengan benar , bisa langsung anda praktekkan dalam template
Cara mengcompress html css js
Ada banyak layanan online yang bisa anda gunakan untuk mengcompress script html css js tanpa harus menginstall software pihak ketiga , anda tinggal mengunjungi situs penyedia layanan kemudian mempaste kode script dan klik compress
Salah satu situs yang saya rekomendasikan untuk mengcompress css adalah https://htmlcompressor.com/compressor/ , yaa situs ini sangat mudah dipahami bahkan oleh pengguna awam sekalipun (dibaca user friendly) tinggal copy paste and compress dijamin tidak akan menyebabkan script rusak
Cara memperkecil ukuran css
Jika anda ingin mengecilkan ukuran css maka yang harus dilakukan anda menyalin kode css yang biasanya terletak diatas kode </style> dan ]]></b:skin>
Selengkapnya , silahkan buka dashboard blogger > tema > edit html > salin kode css yang terdapat dalam template blog
Buka halaman HTML compressor letakan pada tab source lalu pada pilihan code type silahkan pilih css
Atur code type nya ke CSS karena anda ingin melakukan compress pada kode css bukan ? selanjutnya tinggal klik button compress untuk mengecilkan file
Lihat kode yang telah diperkecil pada tab compress lalu kli select all , tinggalkan dicopy paste kedalam template blog
Memperkecil ukuran html
Untuk menemukan kode HTML biasanya terletak dibawah tag </head atau </body
Jangan langsung mengcopy paste semua kode template untuk dicompress , seleksi perbagian mulai dari head , navigasi , body untuk memastikan bahwa tidak ada error pada hasil akhirnya
Buka dashboard blogger > tema > edi html , cari tag </head gunakan fungsi pencarian ctrl+f lalu tekan enter
Salin kode html pada bagian pertama mulai dari kode html wrapper
Buka situs html compressor dan paste kode html disana sebagai langkah pertama
Untuk code typenya pilih blogger ya
Jika anda tidak mau cara sulit silahkan dicopy paste seluruh kode template , semoga saja nanti bisa disimpan
Memperkecil ukuran javascript
Format javascript bertuliskan <script>coding</script> biasanya terletak diatas tag </head dan </body silahkan dicari
Ini adalah contoh javascript yang mungkin anda temui
<script rel=’stylesheet’ src=’//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js’/>
Buka halaman html compressor dan pastekan pada tab source , ubah code typenya menjadi javascript dan klik compress
Nah itu dia bagaimana cara mengcompress kode css html javascript untuk template blogger, jika anda mengalami masalah jangan sungkan untuk berkomentar diblog ini
