Cara compress script css , html dan javascript diblogger

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

...https://www.helmynia.com