21
BAB IV IMPLEMENTASI DAN ANALISA HASIL
Implementasi merupakan tahap pengelolaan management dan struktur aset dari website yang telah dianalisa. Pada bab ini akan dijelaskan hasil implementasi
dan pembahasan dari hasil konfigurasi dan penerapan teknologi kompresi web aset pada website Perpustakaan Universitas Sanata Dharma.
4.1. Analisis Data Website Perpustakaan Universitas Sanata Dharma
Untuk melihat performa webload dan aset apa saja yang terdapat pada website Perpustakaan Universitas Sanata Dharma, menggunakan tool yang bisa di
akses langsung dari Browser Google Chrome yakni Devtool Chrome. Dimana Devtool Chrome
merupakan seperangkat web authoring yang disediakan oleh Google Chrome
untuk pengembang web dapat mengakses lebih dalam ke dalam internal browser dan aplikasi web yang secara efisien melacak masalah tata letak ,
mengatur javascript dan wawasan untuk optimasi code. PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
Gambar 4.1 Inspect Element Devtool Chrome Sebelum menjalankan atau mengakses website tersebut, mengaktifkan terlebih
dahulu Inspect Element, sehingga akan muncul tampilan seperti dibawah ini.
Gambar 4.2 Tampilan Inspect Element Devtool Chrome PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
Berdasarkan hasil dari inspect element menggunakan devtool chrome dapat dilihat hasil performa webload pada website perpustakaan Universitas Sanata Dharma
memiliki performa kurang maksimal.
Gambar 4.3 Performa webload www.library.usd.ac.id
Dapat dilihat pada gambar diatas merupakan hasil capture transfer data webload pada website perpustakaan Universitas Sanata Dharma sebesar 3.8 MB,
dan jumlah request yang banyak dimana terlihat ada 157 request yang terlihat, dan file aset dari website tersebut, ini merupakan hasil performa webload yang kurang
maksimal karena membutuhkan paket data yang besar. Di samping itu juga dapat PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
dilihat berdasarkan tabel dibawah ini, aset-aset apa saja yang terdapat dalam website Perpustakaan Universitas Sanata Dharma yang belum dilakukan
kompresi, antara lain:
Tabel 4.1 Aset-aset website Perpustakaan Universitas Sanata Dharma Web Aset JavaScript
Web Aset CSS
Jquery_003.js Jquery-ui.css
Jquery-ui.js Bootstrap.css
Jquery_002.js Template.css
Password.js pwdStyles.css
Slicker.js Menu.css
Jquery_004.js Responsiveslides-2.css
Responsiveslides.js Responsiveslides.css
Jquery_005.js Jquery_002.css
Jquery_009.js Jquery.css
Jquery_007.js Jquery.js
Scroll.js
Berdasarkan hasil yang didapat dari aset tersebut, selanjutnya dapat dianalisa berdasarkan kebutuhan dari Grunt, bahwa aset-aset tersebut dapat
dikompres dengan melakukan konfigurasi menggunakan Grunt. PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
Data yang digunakan pada pengujian teknologi grunt berupa aset-aset css dan javascript yang terdapat dalam website Perpustakaan Universitas Sanata
Dharma sebagai aset pendukung. Berikut ini merupakan aset-aset dari CSS dan Javascript
yang belum mengalami kompresi.
Tabel 4.2 Web aset CSS Web Aset CSS
Jquery-ui.css Responsiveslides-2.css
Bootstrap.css Responsiveslides.css
Template.css Jquery_002.css
pwdStyles.css Jquery.css
Menu.css
Tabel 4.3 Web aset Javascript Web Aset JavaScript
Jquery_003.js Responsiveslides.js
Jquery-ui.js Jquery_005.js
Jquery_002.js Jquery_009.js
Password.js Jquery_007.js
Slicker.js Jquery.js
Jquery_004.js Scroll.js
Pengolahan aset-aset pada css dan js menentukan aset apa saja yang dibutuhkan website dalam melakukan webload, saat pertama kali website tersebut
di akses. Ini juga yang nantinya akan mempengaruhi konfigurasi aset pada Grunt
4.2. Implementasi Grunt dan Pembahasan