Langsung ke konten utama

Optimasi Css Dengan Css Optimizer

Atauruz.com, CSS Optimizer - Struktur website atau blog terbentuk dari aneka macam macam arahan atau scripts diantaranya HTML, CSS, Javascripts dan lain sebagainya. Semakin banyak penulisan arahan yang di sematkan (Embedded) maka akan menciptakan waktu loading semakin usang atau lambat. Proses loading yang usang sanggup menghipnotis kenyamanan bagi para pengunjung website atau blog anda sehingga halaman anda  gampang ditinggalkan oleh pengunjung. Untuk mengatasi hal tersebut diharapkan beberapa trik meningkatkan secara optimal semoga arahan sanggup di sanksi lebih cepat oleh browser. Kode yang perlu di kompresi semoga ringan ketika dibuka yaitu HTML, Javascript dan CSS. Sebelum melaksanakan edit sebaiknya laukan back up dulu.

Masuk ke dashboard sajian kemudian edit HTML dan carilah arahan yang akan dihapus :

1. Hapus arahan CSS yang ibarat ini. Periksa seetiap arahan homogen ini untuk di hapus
    Contoh : Hapus arahan  seperti  /*--------------*/ atau /* head ====================*/

2. Ganti arahan HTML warna.
    Contoh : Kode warna #ffffff diganti menjadi #fff.

3. Ganti Javascript ibarat “Code Jquery” dengan type terkompresi yang ditandai dengan (min.js).
    Contoh : <script src='https://code.jquery.com/jquery-migrate-1.4.0.min.js'/>

4. Hapus arahan HTML yang tidak perlu.
    Contoh : <!-- twitter summary card -->  Di bab ini saja yang dihapus bukan meta-contentnya.
5. Gunakan CSS Optimizer atau CSS Kompresor 

6. Tambahkan arahan javascript dibawah ini sebelum </head> untuk CSS Optimizer :

<script type="text/javascript">
function convert(){var b=$id("source"),c=$id("result"),a=$id("status"),d;c.value=cssOptimize(b.value);b=b.value.length;c=c.value.length;d=(b-c)/b*100;a.innerHTML="Before: &lt;b&gt;"+b+"&lt;/b&gt; bytes. After: &lt;b&gt;"+c+"&lt;/b&gt; bytes. Ratio: &lt;b&gt;"+d.toFixed(1)+"%&lt;/b&gt;."}function cssOptimize(a){a=a.replace(/[\r\t\n]/g,"");a=a.replace(/ {2,}/g," ");a=a.replace(/ *([{}:;,]) */g,"$1");a=a.replace(/;}/g,"}");a=a.replace(/#([\da-f])\1([\da-f])\2([\da-f])\3/gi,"#$1$2$3");a=a.replace(/(\d+px)( \1){3}/gi,"$1");a=a.replace(/(\d+px \d+px) \1/gi,"$1");a=a.replace(/(\d+px) (\d+px) (\d+px) \2/gi,"$1 $2 $3");a=a.replace(/(\D)0px/gi,"$10");if(!isChecked("STB")){a=a.replace(/}/g,"}\n")}if(isChecked("comments")){a=a.replace(/\/\*.*?\*\//g,"")}return a}function isChecked(a){return $id(a).checked}function $id(a){return document.getElementById(a)};
</script>

Catatan : Cara copy script lakukan klik text + Shift kemudian tekan CTRL+C
Form copy sengaja saya ganti formatnya tanpa box alasannya blog saya di copy share tanpa izin oleh Mutiara Softindo - Depok di websitenya yang berjulukan "grosirwedges".

7. Lanjutkan edit CSS ibarat gambar dibawah ini :
 Struktur website atau blog terbentuk dari aneka macam macam arahan atau scripts diantaranya HT Optimasi CSS dengan CSS optimizer
Optimasi CSS dengan edit arahan CSS

Fungsi dari arahan javascript tersebut untuk meningkatkan secara optimal dengan mengkompresi arahan CSS dan HTML. Atauruz juga menyediakan CSS Optimizer silahkan masuk ke : CSS Optimizer 
Dengan tersedianya online tool CSS Optimizer atau CSS Kompresor ini sanggup membantu anda melaksanakan kompresi arahan CSS semoga lebih sederhana.

#CSSOptimizer, #OptimasiCSS, #CSSKompresor, #AtauruzCSSOptimizer, #SEOCSS

Komentar