Minifikasi : Cara Memperpendek Loading time

Mungkinkah kita dapat membuat isi suatu webpage (halaman web) menjadi lebih sedikit byte tanpa mengubah tampilan dan fungsi laman webpage. Ini bisa dilakukan dengan mengurangi size content web. Jika size file website menjadi lebih ramping, hal ini akan membantu mengurangi penggunaan sumber daya untuk menampilkan webpage blog. Artinya, penggunaan lebih sedikit sumber daya (resources) akan menghemat biaya hosting karena waktu yang dibutuhkan untuk loading time halaman webpage menjadi lebih singkat atau lebih cepat.

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.

Prakteknya adalah dengan menghapus komentar dan spasi dari file JavaScript ASLI yang masih berukuran besar sehingga dapat 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.

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 dapat dimasukkan ke lebih dari satu halaman, Anda harus berhati-hati untuk HANYA menghapus aturan yang tidak ada halaman yang menggunakannya (you must 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/css-compressor/

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 mengedit, menyalin atau sekedar melihat kode HTML, CSS dan javascript halaman website ataupun blog secara langsung. Dengan bantuan addons firebug, Firefox punya kemampuan edit HTML dan CSS pada semua halaman website dengan mudah.

Bagaimana cara install Page Speed?

1. Pada Firebug Extention dan pilih ekstension Page Speed.
2. Atau kunjungi https://developers.google.com/speed/docs/insights/using_firefox#savefiles  Tekan tombol hijau “Install Firefox extention”
3. Restart browser Firefox.

Bagaimana memanfaatkan Page Speed?

Kunjungi https://developers.google.com/speed/docs/insights/using_firefox#savefiles  atau http://www.webpagetest.org/  untuk mengetahui performance halaman web. Contoh hasil analisis Page Speed untuk blog “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.

Contoh sebelum CSS minifications :

/*****
Multi-line comment
before a new class name
*****/
.classname {
/* comment in declaration block */
font-weight: normal;
}

Sesudah CSS minifications ukuran CSS menjadi lebih ramping tanpa mengurangi fungsi dalam pengaturan tampilan webpage (penampilan halaman web tidak berubah).

.classname{font-weight:normal}

File gambar sering dibuat dengan informasi tambahan yang tertanam dalam file. Sebagai contoh, file JPEG, yang ditulis oleh banyak program gambar, memasukkan nama program untuk menulis file JPEG. 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 penggunaannya?

Pada panel Page Speed, klik link yang mengarah ke compressed version, simpan, dan gunakan file gambar terkompresi sebagai pengganti file gambar asli.

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.

Source blog post  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 :

1. Buka Firebug dengan klik icon “kumbang” di sudut kanan atas, maka layar akan terbagi dua secara horizontal – dibagian jendela bawah ditampilkan source code.
   

2. Pada menu bar horizontal jendela source code, pilih tab PageSpeed.

3. Klik tanda “Down Arrow yang ada tepat di sebelah kanan Page Speed untuk menampilkan opsi pop-up menu seperti ini

   

4. Dari pop-up menu tersebut, pilih Save Optimized Files To. Kemudian pilih sebuah directory dari opsi (predefined options), atau pilih Choose a Custom Path untuk menentukan custom directory.