Minify JavaScript, CSS and Image for making faster loading time of blog and website.
Mungkinkah kita dapat membuat isi web-site page (halaman website) ukurannya menjadi lebih sedikit byte tanpa mengubah tampilan dan fungsi halaman webpage?
Jawabannya : BISA. Yaitu dengan cara mengurangi size file content website. Jika size file website menjadi lebih ramping, maka akan membantu mengurangi penggunaan sumber-daya (resource) untuk menampilkan webpage blog. Artinya, penggunaan lebih sedikit resources akan menghemat biaya hosting karena waktu yang dibutuhkan untuk loading halaman website menjadi lebih singkat.
Mempercepat Loading website page via source document
Upayakan peningkatan kinerja website dengan Page Speed. Topik ini dirumuskan sebagai berikut :
Pengurangan jumlah byte file website akan membuat loading time menjadi lebih pendek ketika user (pengunjung) blog harus download halaman web.
Mengurangi size content website
Setidaknya ada tiga cara untuk mengurangi ukuran konten web.1. Minify JavaScript
Prakteknya dengan menghapus komentar dan spasi dari file JavaScript ASLI yang masih berukuran besar sehingga membuatnya secara substansial lebih kecil, tanpa mengubah fungsi JavaScript.
Aturan Page Speed "Minify JavaScript" menjalankan semua JavaScript pada halaman melalui minimizer JavaScript. Setelah dihasilkan file lebih kecil, Page Speed akan menampilkan link yang mengarah ke file tersebut. Untuk menggunakan minified JavaScript, klik link tersebut, simpan file minified, dan ubah HTML Anda untuk merujuk ke file minified.
JSMin atau JavaScript Minimizer, tersedia di http://www.crockford.com/javascript/jsmin.html
2. Remove unused CSS
File CSS berisi rule yang memberlakukan atribut style untuk elemen dalam halaman web. Jika sebuah rule tidak berlaku untuk setiap elemen halaman, sebaiknya dihapus agar lebih sedikit byte yang dikirim ke pengunjung, tanpa ada perubahan penampilan webpage.
Karena style sheet eksternal bisa dimasukkan ke lebih dari satu halaman, maka harus berhati-hati untuk HANYA menghapus aturan yang tidak ada halaman yang menggunakannya (be careful to only remove rules that no page uses). Jalankan Page-Speed di halaman yang menggunakan file stylesheet eksternal untuk menentukan aturan yang tidak digunakan untuk dihapus.
Untuk me-minify file CSS atau snippet (potongan) CSS, gunakan tool gratis dari situs ini :
http://www.minifycss.com
3. Page Speed
Untuk pergi ke Rule Page Speed, silahkan kunjungi link : "Remove unused CSS"
Untuk mengunjungi PAGE SPEED di Google Chrome, silahkan buka blog dan tekan secara serentak tombol CRTL-SHIFT-I. Kemudian klik link “Page Speed” di sudut kanan atas.
Bagi user browser Firefox disyaratkan install plugin Page Speed dan FIREBUG terlebih dahulu. Firebug adalah addons mozilla firefox yang digunakan untuk edit, copy atau sekedar melihat code HTML, CSS dan javascript halaman website secara langsung. Dengan bantuan addons firebug, Firefox punya kemampuan edit HTML dan CSS pada semua halaman website dengan mudah.
Bagaimana cara install Page Speed?
- Pada Firebug Extention dan pilih ekstension Page Speed.
- Atau kunjungi https://developers.google.com/speed/docs/insights/using_firefox#savefiles
Tekan tombol hijau “Install Firefox extention” - Restart browser Firefox.
Buka https://developers.google.com/speed/docs/insights/using_firefox#savefiles atau http://www.webpagetest.org/ untuk mengetahui performance halaman web.
Contoh analisis Page Speed blog saya "Website Design” Score blog 83/100 (sudut kanan atas)
Cara kerja CSS Minifications
Ada beberapa tools gratis yang tersedia,diantaranya YUI Compressor dan cssmin.js. Ada berbagai cara bagaimana YUICompressor menjadikan ukuran CSS lebih kecil.
Stripping comments & white space
YUICompressor akan memberi strips (menghapus) semua comments dan “white space” yang tidak diperlukan untuk kerja CSS.
SEBELUM penggunaan CSS minifications :
/*****
Multi-line comment
before a new class name
*****/
.classname {
/* comment in declaration block */
font-weight: normal;
}/* End */
Multi-line comment
before a new class name
*****/
.classname {
/* comment in declaration block */
font-weight: normal;
}/* End */
Sesudah digunakan CSS minifications ukuran CSS code diatas menjadi lebih ramping tanpa mengurangi fungsi dalam pengaturan tampilan webpage (penampilan webpage tidak berubah).
SESUDAH penggunaan CSS minifications :
.classname{font-weight:normal}
Cara kerja Compress images
File gambar sering dibuat dengan informasi tambahan yang tertanam dalam file. Sebagai contoh, file JPEG, yang ditulis oleh banyak program gambar, memasukkan nama program yang digunakan untuk menulis file JPEG tersebut. Pada file gambar PNG dapat dibuat lebih kecil dengan mengubah cara gambar tersebut di-code-kan.
Transformasi ini bersifat “lossless.” Artinya, kompresi gambar terlihat identik dengan gambar terkompresi, tetapi menggunakan lebih sedikit byte. Penghematan byte (ukuran file gambar lebih kecil) otomatis memberi kontribusi loading time lebih pendek.
Rule Page Speed "Optimize images" mencoba kompres “losslessly” semua gambar dalam webpage. Ketika berhasil, akan ditunjukkan versi terkompresi.
Bagaimana cara penggunaan Compress images?
Pada panel Page Speed, klik link yang mengarah ke compressed version, simpan, dan gunakan file gambar terkompresi sebagai pengganti file gambar asli.
SARAN
Ketiga advise di atas adalah contoh kecil solusi masalah Loading Time.
Page Speed dapat mendeteksi dan merekomendasikan perbaikan masalah tersebut. Page Speed memperingkat saran mereka, sehingga kita tahu perubahan mana yang paling mungkin untuk memiliki dampak besar. Jalankan alat ini secara berkala dan perbaiki masalah yang ditemukan agar memberi user (pengunjung blog) pengalaman penggunaan dengan lebih cepat.
Untuk mempelajari lebih lanjut, lihat - Page Speed - Minimize payload size, untuk penjelasan bagaimana menggunakan Page Speed untuk membantu membuat resource lebih kecil.
------------------------
Source blog post :
https://developers.google.com/speed/articles/identifying-page-speed-problems?hl=id
Save optimized files in Firefox browser
https://developers.google.com/speed/articles/identifying-page-speed-problems?hl=id
Save optimized files in Firefox browser
PageSpeed OTOMATIS optimize JavaScript, CSS, dan file image yang direferensikan dari sebuah webpage, ketika menjalankan analysis. Untuk itu lakukan :
- Buka Firebug dengan klik icon kumbang di sudut kanan atas, maka layar akan terbagi dua secara horizontal – dibagian jendela bawah ditampilkan source code
- Pada menu bar horizontal jendela source code, pilih tab PageSpeed
- Klik Down Arrow yang ada tepat di sebelah kanan Page-Speed untuk menampilkan Pop-Up menu berikut :
- Dari pop-up menu tersebut, pilih Save Optimized Files To. Pilih sebuah directory dari opsi Predefined options, atau pilih Choose a Custom Path untuk menentukan custom directory.
![](http://www.blogger.com/img/icon_delete13.gif alt="delete icon di web design){kind=icon}
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://lh3.googleusercontent.com/-AHjNV40KrDw/UextTozh8GI/AAAAAAAAMjU/UG7zSHdmatc/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
