Wednesday, June 6, 2012

Kompres Html, Css dan Java Script Blog Untuk Mempercepat Loading Blog

Posted By: Randy Ikas - Wednesday, June 06, 2012

Share

& Comment

Kompres Html, Css dan Java Script Blog Untuk Mempercepat Loading Blog



Sobat Ri Zone mungkin sudah banyak blog yang share mengenai cara Kompres Html, Css dan Java Script Blog Untuk Mempercepat Loading Blog. namun tidak ada salahnya Blog RI Zone mengulas kembali Untuk membantu sobat  melakukan kompres html, css dan java script blog secara lengkap dan benar guna mempercepat loading blog anda untuk itu saya akan jelaskan satu persatu caranya secara rinci: 
Cara Kompres kode CSS blog
Agar caranya benar dan tidak error maka anda harus tau kode css mana yang harus di kompress dari sederetan kode script yang ada di blog anda. Kode css yang harus anda kompres letaknya adalah antara kode <b:skin><![CDATA[/* sampai pada kode css sebelum ]]></b:skin>. Copy semua kode CSS yang ada antara kedua kode berwarna biru tersebut dengan terlebih dahulu mencarinya di blog anda dengan cara (ini untuk pemula bila anda tidak tahu sama sekali caranya):

  • Silahkan menuju ruang pengeditan HTML template blog anda, dari halaman Dasboard klik Desaign  atau tata letak loyout.
  • Kemudian klik Edit HTML
  • Selanjutnya dari kolom edit HTML/edit template, untuk memudahkan pencarian kode css anda tekan tombol Ctrl + F kemudian ketikkan kode <b:skin><![CDATA[/* dan tekan Enter.
Bila sudah silahkan copy semua code css yang saya maksud di atas dan kemudian kunjungi website penyedia layanan compress css yang sudah saya coba dan terbukti keakuratannya (Ingat! sangat banyak yang menyediakan layanan kompres css, tapi cuma ini yang diakui ke akuratannya karna dikelola oleh Yahoo sendiri. Silahkan kunjungi http://www.refresh-sf.com/yui/#output (recommendation) atau bisa juga di http://www.csscompressor.com/  atau di sini http://www.refresh-sf.com/yui/#urlinput.

Pada contoh yang saya pakai kali ini adalah via  www.refresh-sf.com
Bila sudah terbuka websitenya silahkan paste code css yang anda copy tadi dan ikuti petunjuk ini:

  • Pada bagian file tipe pilih 'CSS' (ini juga berlaku untuk file Javascript karena bila anda menggunakan pilihan 'JS' biasanya akan error hasilnya sekalipun yang akan anda kompres adalah Javascript)
  • Pada global option abaikan saja bila anda tidak menginginkannya.
  • Pada Javascript Option silahkan centang semua kolomnya jika anda ingin hasil yang maksimal.
  • Langsung klik 'Compress' dan abaikan dua kolom yang ada persis di atasnya.
  • Bila sudah ada hasilnya silahkan anda copy dan ikuti langkah selanjutnya.
Terakhir tinggal kembali ke halaman kode css blog anda. Bila keadaannya masih terblok langsung saja paste kode css hasil kompres yang anda copy tadi untuk menimpa kode css aslinya.

Ingat jangan langsung di save. Usahakan untuk melakukan 'preview' kode css-nya terlebih dahulu. Bila telah berhasil maka silahkan anda save, tapi bila tidak clik saja Ctrl + Z untuk membatalkannya.

Cara Kompres kode Javescript Blog

Untuk bagian ini caranya sama dengan cara di atas hanya saja yang perlu saya sampaikan kepada anda adalah mengenai kepastian kode Javascript yang harus anda kompress. Letak kode Javascript yang akan anda kompres letaknya ada antara kode <head> sampai pada kode javascript sebelum </head>

Sebelum memulai saya ingin sampaikan bahwa kode css pada penjelasan sebelumnya sebenarnya juga ada antara kode <head> dan </head> jadi anda seperti mengulang langkah sebelumnya tapi secara keseluruhan kodenya yang anda kompress.

Mengenai cara kompres dan sumber website yang menyediakan fasilitas kompres Javascript adalah sama dengan cara kompres kode css di atas. hanya saja yang perlu anda perhatikan adalah mengenai pemilihan toolnya yang saya jelaskan seperti di atas, yaitu pada "file tipe" tetap pilih 'CSS' sekalipun yang akan anda kompres adalah Javascript karena bila anda menggunakan pilihan 'JS' biasanya akan error hasilnya.

Cara Kompres kode HTML blog

Cara kompres kode html untuk keperluan mempercepat loading blog anda berbeda dengan cara di atas, baik mengenai kodenya maupun dengan website penyedia tool kompres html-nya.

Kode html yang anda kompres letaknya ada antara <body> sampai dengan kode html sebelum </body> caranya cukup lakukan hal yang sama seperti cara kompres css di atas. Hanya saja website penyedia layanan kompres html yang digunakan berbeda. Website yang dimaksud adalah http://www.miniwebtool.com/html-compressor/ 

Alamat website penyedia fasilitas kompres html yang saya tunjukkan di atas sudah saya coba keakuratannya dan sudah saya bandingkan dengan website fasilitas kompres html yang lainnya. jadi tidak usah khawatir soal hasil kerjanya.

Terakhir  kunjungi halamannya di http://pagespeed.googlelabs.com/ lalu masukkan url blog sobat untuk mengecek page speed blog sobat.
Membaca hasil Page Speed Online
Ada dua pilihan saat kita memasukkan url blog Sobat, yaitu hasil untuk ditampilkan pada desktop atau hasil yang ingin ditampilkan pada perangkat mobile semacam handphone. Hasil yang ditampilkan dalam angka sampai 100. Semakin besar angka yang sobat dapatkan maka semakin kecil yang hal perlu diperbaiki dalam pada blog Sobat. Sekian!
Semoga bermanfaat!


Coba Facebook-nya Indonesia jejaring sosial yang dapat dijadikan investasi untuk menghasilkan uang secara online.... daftar di sini Facebook Indonesia

About IKASMEDIA.COM

IKASMEDIA adalah blog yang didedikasikan untuk membangun pendidikan melalui khususnya pendidikan di daerah 3T Mari bersama membangun indonesia menuju generasi emas dan indonesia sejahterah. Kupang 2015

1 komentar:

  1. wah mantap gan...sangat mmebantu terima kasih,,jangan lupa kunjungi juga blog saya

    ReplyDelete

Copyright © 2015 IKASMEDIA™ is a registered trademark.

Designed by Templateism. Hosted on Blogger Platform.