BAB IV IMPLEMENTASI DAN ANALISA HASIL
4.3. Penghitungan Manual
Berikut ini merupakan penghitungan secara manual perubahan ukuran data yang dikirim berdasarkan aset-aset dari website. Dimana hasil dari kompresi dari Grunt jumlah ukuran data sebesar 362 kb untuk JS dan 181 kb untuk CSS.
Tabel 4.5. Hasil Penghitungan Manual Ukuran Aset-Aset
Tabel 4.6. Hasil Kompresi pada Aset JS dan CSS
Web Aset (JavaScript) Web Aset (CSS)
Themes.js (362 kb) Themes.min.css (181 kb) Web Aset (JavaScript) Web Aset (CSS)
Jquery_003.js (267 kb) Jquery-ui.css (32.5 kb) Jquery-ui.js (451 kb) Bootstrap.css (101 kb) Jquery_002.js (2.7 kb) Template.css (79.3 kb) Password.js (1.3 kb) pwdStyles.css (966 b) Slicker.js (1.2 kb) Menu.css (4.1 kb) Jquery_004.js (2.3 kb) Responsiveslides-2.css (2.9 kb) Responsiveslides.js (12 kb) Responsiveslides.css (837 b) Jquery_005.js (12.5 kb) Jquery_002.css (4.3 kb) Jquery_009.js (48.6 kb) Jquery.css (3.8 kb) Jquery_007.js (3.2 kb) TOTAL 229 kb Jquery.js (8.3 kb) Scroll.js (1.7 kb) TOTAL 811.8 kb
Dilihat dari tabel perhitungan secara manual jumlah bobot paket data dari aset yang terdapat pada website Perpustakaan Universitas Sanata Dharma sebelum dan sesudah dilakukan kompresi menghasilkan perbandingan
Aset Javascript :
. � = . 9 %
Aset CSS : � = 9. %
Dari hasil perhitungan diatas dapat Grunt melakukan kompresi hingga 44.59 % dari aset Javascript. Sedangkan untuk aset CSS bisa dilakukan kompresi hingga 79.03 % dari total data.
Di samping itu juga bisa dilihat dari segi waktu sebelum dan sesudah dilakukan kompresi menggunakan Grunt, seperti pada tabel dibawah ini :
Tabel 4.7. Hasil Penghitungan Manual Waktu Transfer Aset-Aset
Web Aset (JavaScript) Web Aset (CSS)
Jquery_003.js (112 ms) Jquery-ui.css (96 ms) Jquery-ui.js (132 ms) Bootstrap.css (221 ms) Jquery_002.js (92 ms) Template.css (222 ms) Password.js (113 ms) pwdStyles.css (172 ms) Slicker.js (224 ms) Menu.css (165 ms) Jquery_004.js (225 ms) Responsiveslides-2.css (187 ms) Responsiveslides.js (226 ms) Responsiveslides.css (165 ms) Jquery_005.js (225 ms) Jquery_002.css (189 ms)
Tabel 4.8. Hasil Waktu Data Transfer pada Aset JS dan CSS
Web Aset (JavaScript) Web Aset (CSS)
Themes.js (103 ms) Themes.min.css (42 ms)
Pada hasil perhitungan secara manual jumlah waktu data transfer dari aset- aset Javascript dan CSS sebelum dan sesudah dilakukan kompresi adalah sebagai berikut :
Aset Javascript :
A = Total waktu awal aset Javascript
x = total waktu setelah dilakukan kompresi Javascript
A – x = z 3210 – 103 = 3107
�
� = ⋯ % � = 9 . 9 %
Web Aset (JavaScript) Web Aset (CSS)
Jquery_009.js (242 ms) Jquery.css (96 ms) Jquery_007.js (239 ms) TOTAL 1513 ms Jquery.js (240 ms)
Scroll.js (240 ms) TOTAL 3210 ms
Aset CSS :
B = Total waktu awal aset CSS
y = total waktu setelah dilakukan kompresi CSS
B – y = z 1513 – 42 = 1471
� � = ⋯ % � = 9 . %
Dari hasil yang didapat dari perhitungan secara manual waktu data transfer pada aset Javascript didapatkan hasil kompresi Grunt yang mengalami percepatan sebesar 96.79 % , Sedangkan untuk aset CSS setelah dilakukan kompresi terjadi percepatan sebesar 97.23 % dari seluruh jumlah waktu data transfer yang dilakukan selama mendownload aset-aset tersebut.
34
BAB V PENUTUP
5.1. Kesimpulan
Setelah menyelesaikan pembuatan tugas akhir berjudul Penerapan Teknologi Kompresi Grunt pada Website Perpustakaan Universitas Sanata Dharma ini, penulis dapat menyimpulkan :
Penerapan teknologi kompresi web aset (Grunt) dapat diterapkan langsung pada website Perpustakaan Universitas Sanata Dharma dengan melakukan konfigurasi pada file Gruntfile.js yang sudah disediakan langsung setelah Grunt di install dan memberikan perubahan pada pemakaian paket data yang lebih kecil dalam mengakses website.
Aset-aset dari website Perpustakaan Universitas Sanata Dharma dapat di kompresi sesuai dengan kebutuhan dari teknologi kompresi Grunt yaitu CSS dan JavaScript. Dari segi efektifitasnya web tidak perlu download aset-aset terlalu banyak yang bisa memakan waktu dan paket data.
Dari hasil perhitungan perbandingan presentase perubahan, Grunt melakukan kompresi hingga 44.59 % dari aset Javascript. Sedangkan untuk aset CSS bisa dilakukan kompresi hingga 79.03 % dari total data. Untuk waktu data transfer pada saat melakukan download aset-aset dan mengalami percepatan dari Javascript sebesar 9 . 9 % dan aset CSS
9 . % dari total waktu data transfer atau me-download aset-aset tersebut.
5.2. Saran
Untuk pengembangan Teknologi Kompresi Grunt pada tahap selanjutnya, penulis menyarankan :
Diperlukan penelitian lanjutan terhadap Grunt, agar dapat ditemukan aset- aset lain yang bisa dilakukan kompresi selain CSS dan Javascript.
Melakukan penerapan teknologi kompresi Grunt terhadap website lain, dengan jumlah aset yang lebih banyak. Sehingga dapat terlihat perubahan bobot aset pada saat website diakses.
DAFTAR PUSTAKA
Arief, Rudyanto. 2011. Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta : Andi Offset
Nahasan N, Jeanot., 2013,Pengujian Kinerja Indonesia Menggunakan Testing Enviroment Situs Informasi Pariwisata Di Keynote Internet (KITE), Skripsi, Jurusan Teknik Informatika FST USD, Yogyakarta.
GITHUB, https://github.com/gulpjs/gulp/issues/540 Diakses pada tanggal 10 Oktober 2015
GRUNT The JavaScript Task Runner, http://gruntjs.com/. Diakses pada tanggal 26 Agustus 2015
JavaScript, https://developer.mozilla.org/id/docs/Web/JavaScript/Getting_Started. Diakses pada tanggal 26 Agustus 2015
Mengenal Less framework untuk CSS, http://bisakomputer.com/mengenal-less- framework-untuk-css/. Diakses pada tanggal 27 Agustus 2015
SASS (Syntactically Awesome Stylesheets), http://sass- lang.com/documentation/file.SASS_REFERENCE.html. Diakses pada tanggal 27 Agustus 2015
CSS minifier, http://search.cpan.org/~pmichaux/CSS-Minifier- 0.01/lib/CSS/Minifier.pm. Diakses pada tanggal 27 Agustus 2015
Uglify CSS Package, https://www.npmjs.com/package/uglifycss. Diakses pada tanggal 27 agustus 2015
NPM (Node Package Manager), https://www.npmjs.com/about. Diakses tanggal 27 Agustus 2015
Web Standards Sherpa, http://webstandardssherpa.com/. Diakses tanggal 28 Desember 2015
LAMPIRAN Tahap Instalasi Grunt
Sebelum melakukan proses instalasi grunt, terlebih dahulu melakukan instalasi node.js. Selanjutnya dapat melakukan tahap-tahap instalasi grunt berikut:
1. menginstall Grunt command line interface (CLI) secara global. Untuk ubuntu harus menggukan sudo sedangkan untuk Windows bisa menjalankan sebagai Administrator. Buka Windows Command Prompt dan selanjutnya memasukkan perintah berikut
Gambar install grunt-cli (secara global)
Proses ini akan menghasilkan perintah grunt pada jalur sistem, yang memungkinkan untuk dijalankan dari direktori manapun.
2. Install grunt dan gruntplugins, untuk menambahkan grunt dan gruntplugins ke dalam package.json yang sudah ada adalah dengan perintah npm install <module> --save-dev . Tidak hanya menginstal modul local (perpus) tapi akan secara otomatis akan ditambahkan ke
bagian devDependencies. Berikut ini cara menginstall versi terbaru daru grunt di dalam folder proyek kita.
Gambar. Cara menginstal grunt dalam modul local (perpus)
3. Hal yang sama dapat dilakukan untuk menginstal gruntplugins dan modul-modul lainnya. Berikut ini cara menginstal modul JShint, modul cssmin, modul uglify. Proses tersebut dilakukan melalui Windows Command Prompt.
Gambar Cara menginstal modul cssmin
Tampilan Webite Perpustakaan Universitas Sanata Dharma
Berikut ini merupakan tampilan dari hasil inspect element. Yang menampilkan jumlah Request dan Paket Data dan aset-aset yang terdapat didalam website.
Gambar Request dan Paket Data setelah Dikompresi
Gambar. Aset CSS setelah Dikompresi
Gambar. Aset JavaScript setelah Dikompresi
Source konfigurasi Grunt pada File Gruntfile.js
/*global module:false*/
module.exports = function(grunt) {
const _DEV_PATH_ = './themes/usd/files/'; const _PUBLIC_PATH_ = './themes/usd/assets/';
const CSS_BUILD = _PUBLIC_PATH_+'css/themes.css';
const CSS_BUILD_MIN = _PUBLIC_PATH_+'css/themes.min.css'; const JS_BUILD = _PUBLIC_PATH_+'js/themes.js';
var CSS_Registry = [ 'jquery-ui.css', 'bootstrap.css', 'responsiveslides.css', 'responsiveslides-2.css', 'jquery_002.css', 'jquery.css', 'template.css', 'PwdStyles.css', 'menu.css', ]; var JS_Registry = [ 'jquery_003.js', 'jquery-ui.js',
'jquery_002.js', 'jquery_004.js', 'responsiveslides.js', 'password.js', 'jquery_005.js', 'jquery_009.js', 'jquery_007.js', 'jquery.js', 'scroll.js', 'slicker.js', ]; CSS_Registry = CSS_Registry.map(function(curr_path){ return _DEV_PATH_+curr_path; }); JS_Registry = JS_Registry.map(function(curr_path){ return _DEV_PATH_+curr_path; }); var Config = { // Task configuration. concat: { css: { src: CSS_Registry, dest: CSS_BUILD }, js: { src: JS_Registry, dest: JS_BUILD } }, cssmin: { combine: { options: { keepSpecialComments: 0, }, files: {} } }, uglify: { dist: { src: JS_BUILD, dest: JS_BUILD } } };
Config.cssmin[CSS_BUILD_MIN] = CSS_BUILD; // Project configuration.
grunt.initConfig(Config);
// These plugins provide necessary tasks. grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task.
grunt.registerTask('default', ['concat', 'cssmin', 'uglify']); };