Abstrak
Minat para konsumen pada layanan internet semakin meningkat untuk berbagi informasi. Ada banyak instansi yang membuat sebuah layanan yang memberikan informasi untuk para konsumen atau penggunanya. Dalam hal ini instansi-instansi tersebut membuat layanan sarana dan prasarana untuk memberikan informasi berupa Official Website. Salah satu instansi yang memiliki official website adalah instansi pendidikan seperti Universitas Sanata Dharma Yogyakarta, yang memiliki official website Perpustakan Universitas Sanata Dharma. (www.library.usd.ac.id)
Abstract
The interest of consumers on internet services increased to share information. There are many agencies that create a service that provides information to consumers or users. In this case the agencies to make the service infrastructure to provide information in the form of Official Website. One of the agencies that have official website is educational institutions like the University of Sanata Dharma Yogyakarta, which has the official website of Sanata Dharma University Library (library.usd.ac.id).
i
KAJIAN TEKNOLOGI WEB ASET GRUNT
PADA WEBSITE
PERPUSTAKAAN UNIVERSITAS SANATA DHARMA
Skripsi
Diajukan Untuk Memenuhi Salah Satu Syarat Memperoleh Gelar Sarjana Komputer
Program Studi Teknik Informatika
Oleh:
NICODIMUS DWIYANTO RAHMAHADI 095314065
.
PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS SANATA DHARMA YOGYAKARTA
i
WEB TECHNOLOGY REVIEW ASSETS GRUNT
ON WEBSITE
LIBRARY of SANATA DHARMA UNIVERSITY
THESIS
Presented as Partial Fulfillment of the Requirements to Obtain Sarjana Computer Degree
in Informatic Engineering Department
FACULTY OF SCIENCE AND TECHNOLOGY SANATA DHARMA UNIVERSITY
iv
LEMBAR MOTTO
“If you’re afraid to FAIL, then you’re probably going to fail”
v
PERNYATAAN
Dengan ini saya menyatakan bahwa Laporan Skripsi ini tidak terdapat karya yang pernah diajukan untuk memperoleh gelar kesarjanaan di suatu Perguruan Tinggi, dan sepanjang pengetahuan saya juga tidak terdapat karya atau pendapat yang pernah ditulis atau diterbitkan oleh orang lain, kecuali yang secara tertulis diacu dalam naskah ini dan disebutkan dalam daftar pustaka.
Yogyakarta, 20 Juli 2016
vi
Abstrak
Minat para konsumen pada layanan internet semakin meningkat untuk berbagi informasi. Ada banyak instansi yang membuat sebuah layanan yang memberikan informasi untuk para konsumen atau penggunanya. Dalam hal ini instansi-instansi tersebut membuat layanan sarana dan prasarana untuk memberikan informasi berupa Official Website. Salah satu instansi yang memiliki official website adalah instansi pendidikan seperti Universitas Sanata Dharma Yogyakarta, yang memiliki official website Perpustakan Universitas Sanata Dharma. (www.library.usd.ac.id)
vii
Abstract
The interest of consumers on internet services increased to share information. There are many agencies that create a service that provides information to consumers or users. In this case the agencies to make the service infrastructure to provide information in the form of Official Website. One of the agencies that have official website is educational institutions like the University of Sanata Dharma Yogyakarta, which has the official website of Sanata Dharma University Library (library.usd.ac.id).
viii
PUBLIKASI KARYA ILMIAH UNTUK KEPERLUAN AKADEMIS
Yang bertanda tangan dibawah ini, saya mahasiswa Universitas Sanata Dharma :
Nama : Nicodimus Dwiyanto Rahmahadi
Nomor Mahasiswa : 095314065
Demi pengembangan ilmu pengetahuan, saya memberikan kepada perpustakaan Universitas Sanata Dharma karya ilmiah saya yang berjudul :
KAJIAN TEKNOLOGI WEB ASET GRUNT PADA WEBSITE PERPUSTAKAAN UNIVERSITAS SANATA DHARMA
Beserta perangkat yang diperlukan. Dengan demikian saya memberikan kepada Perpustakaan Universitas Sanata Dharma hak untuk menyimpan, mengalihkan dalam bentuk media lain, mengelolanya dalam bentuk pangkalan data, mendistribusikan secara terbatas, dan mempublikasikannya di Internet atau media lain untuk kepentingan akademis tanpa perlu meminta ijin dari saya maupun memberikan royalty kepada saya selama tetap mencantukan nama saya sebagai penulis.
Demikian pernyataan ini saya buat dengan sebenarnya.
Dibuat di Yogyakarta
Pada tanggal : 20 Juli 2016
Yang menyatakan,
ix
KATA PENGANTAR
Syukur kepada Tuhan Yang Maha Esa atas segala berkat dan bimbingan-Nya, sehingga penulis dapat menyelesaikan tugas akhir ini dengan baik. Tugas akhir ini disusun untuk memenuhi salah satu syarat untuk mencapai derajat dan memperoleh gelar Sarjana Komputer dari Program Studi Teknik Informatika, Fakultas Sains dan Teknologi, Universitas Sanata Dharma Yogyakarta. Penulis menyadari bahwa dalam pembuatan tugas akhir ini tidak terlepas dari bantuan berbagai pihak baik secara langsung maupun tidak langsung. Oleh sebab itu, pada kesempatan ini penulis ingin mengucapkan terimakasih kepada:
1. Tuhan Yesus Kristus, yang selalu memberikan pencerahan dan membimbing saya dalam menyelesaikan tugas akhir ini.
2. Ibu Anastasia Rita Widiarti, M.Kom,. selaku dosen pembimbing, yang telah meluangkan waktu dan pikiran untuk membantu, membimbing dan memberikan banyak masukan dan saran dalam proses penyusunan tugas akhir ini.
3. Keluarga saya, bapak Hadi Suyono dan ibu Tarmiyati, yang telah memberikan kesempatan pada saya untuk dapat menimba ilmu yang sangat banyak dan tidak pernah berhenti meluangkan waktu untuk selalu mendoakan dan memberi restu. Dan Mas Fibry yang selalu mendorong dan member motivasi demi menyelesaikan studi saya.
4. Yustina Dwi Adriati Wulandari, yang selalu mendukung, memberi semangat, menghibur, dan memotivasi saya dalam penyelesaian tugas akhir ini.
5. Teman-teman seperjuangan, Yosi, Fidi, Jenot, Kiki, Yudi, Cosmas Puji, Alvin, Andi dan terutama Putera yang sudah membantu dan membagi ilmu nya.
x
7. Teman-teman Teknik Informatika Sanata Dharma 2009, yang saling memberikan semangat dan dukungan dalam pengerjaan tugas akhir.
Yogyakarta, 20 Juli 2016
xi
DAFTAR ISI
HALAMAN JUDUL ……….. i
HALAMAN PERSETUJUAN ... ii
HALAMAN PENGESAHAN ………...………. iii
LEMBAR MOTO ………..…… iv
HALAMAN PERNYATAAN KEASLIAN KARYA ... v
ABSTRAK ... vi
ABSTRACT ... vii
LEMBAR PERNYATAAN PERSETUJUAN PUBLIKASI ……… viii
KATA PENGANTAR ... ix
1.6 Sistematika Penulisan ………... 5
BAB II LANDASAN TEORI ...………... 7
2.1 Web……...….………... 7
2.1.1 Pengertian Web………... 7
2.1.2 Pengertian Situs Web……….. 8
2.1.3 HTML………. 8
2.1.4 CSS………. 9
2.1.5 JavaScript……… 12
xii
2.3 Node Package Module……….. ...………... 14
2.3.1 Grunt……...………... 14
BAB III METODOLOGI PENELITIAN ………... 16
3.1. Subjek Dan Objek Penelitian...………... 16
3.2. Penelitian Kepustakaan………….………. 3.2.1. Studi Kepustakaan……...…………. 3.2.2. Pengumpulan Data………... ... 3.2.3. Menyajikan Data Hasil Penerapan……... 16 3.3.2. JetBrains PhpStorm 9.0.2.………... 3.3.3. Xampp version 2.1……….. 3.4 Analisis Hasil Pengujian………. 20
BAB IV IMPLEMENTASI DAN ANALISA HASIL………... 4.1. Analisis Data Website Perpustakaan Universitas Sanata Dharma... 21 21 4.2. Implementasi Grunt dan Pembahasan………... 26
xiii
DAFTAR GAMBAR
Gambar (4-1) : Inspect Element Devtool Chrome.………...……….. 22
Gambar (4-2) : Tampilan Inspect Element Devtool Chrome…...……….... 22
Gambar (4-3) : Performa webload www.library.usd.ac.id... 23
Gambar (4-4) : Konfigurasi Grunt ... 26
Gambar (4-5) : konfigurasi hasil kompresi... 26
Gambar (4-6) : Konfigurasi Variabel………... 27
xiv
DAFTAR TABEL
Tabel (4-1) : Aset-aset website Perpustakaan Universitas Sanata Dharma.... 24
Tabel (4-2) : Web aset CSS ...………...………... 25
Tabel (4-3) : Web aset JavaScript………... 25
Tabel (4-4) : Hasil Perbandingan Perubahan menggunakan Grunt... 28
Tabel (4-5) : Hasil Penghitungan Manual Ukuran Aset-Aset…... 30
Tabel (4-6) : Hasil Kompresi pada Aset JS dan CSS…... 30
Tabel (4-7) : Hasil Penghitungan Manual Waktu Transfer Aset-Aset ... 31
1
BAB I PENDAHULUAN
1.1 Latar Belakang
Pembangunan official website bagi lembaga pendidikan bertujuan untuk mempromosikan identitas mereka, sebagai bentuk eksistensi dengan memaparkan berbagai program studi, prestasi dan aktifitas yang akan atau sedang berlangsung. Sebagian besar dari pemilik website tersebut sangat memperhatikan dari sisi user interface dan user experience design karena sebuah official website bertujuan
untuk menggambarkan tingkat profesionalitas, visi, dan misi yang ingin ditunjukan kepada masyarakat. Salah satu diantaranya adalah Universitas Sanata Dharma Yogyakarta, yang memiliki official website perpustakaan (http://www.library.usd.ac.id/). Namun hampir sebagian besar universitas belum memperhatikan performa dari situs yang mereka miliki, salah satunya webload performance.
Bagi universitas-universitas yang mempergunakan official website sebagai sarana untuk menarik minat mahasiswa baru, tentunya perhatian terhadap webload performance sangat dibutuhkan. Hal ini menarik perhatian penulis untuk dapat
menganalisa metode-metode baru, agar dapat diimplementasikan pada official website salah satunya adalah website perpustakaan yang dimiliki oleh Universitas
Sanata Dharma, yakni http://www.library.usd.ac.id/. Dalam penelitian ini penulis ingin memaksimalkan performa webload dari website http://www.library.usd.ac.id/, dimana kecepatan webload itu dipengaruhi oleh
struktur server, arsitektur software, dan seberapa banyak aset yang diterima. Dalam penelitian kali ini penulis mefokuskan pada aset yang terdapat pada website Perpustakaan Universitas Sanata Dharma. Setiap halaman website berisikan sejumlah aset dengan berbagai jenis dan kegunaan. Aset itu sendiri yang merupakan bagian yang mendukung sebuah website yang mengacu pada semua bahan yang diperlukan untuk membangun sebuah website, seperti html document, javascript, stylesheet, images, font dan sebagainya. Sehingga penulis lebih mefokuskan penelitian ini dalam membantu meningkatkan performa webload dengan melakukan kompresi pada aset-aset tersebut.
(http://gruntjs.com/who-uses-grunt) ada banyak situs internasional seperti Twitter, Adobe, Mozilla, Opera, LiveChat, Wordpress dan sebagainya memanfaatkan teknologi dari Grunt ini sendiri. Pada penelitian kali ini penulis tidak menerapkan teknologi kompresi web aset saja, melainkan menganalisa perubahan yang terjadi pada website Perpustakaan Universitas Sanata Dharma setelah dilakukan proses kompresi pada web aset.
1.2 Rumusan Masalah
Seberapa efektif penggunaan Grunt pada perubahan performa webload yang terjadi pada website Perpustakaan Universitas Sanata Dharma?
1.3 Tujuan Penelitian
Tujuan diadakan penelitian ini agar dapat mengetahui seberapa efektif penggunaan Grunt dan cara penerapannya sehingga menemukan perubahan performa webload pada Perpustakaan Universitas Sanata Dharma.
1.4 Batasan Masalah
Aset-aset yang akan dilakukan kompresi adalah Javascript (js) dan
Pengujian dilakukan secara offline. (localhost)
1.5 Metodologi Penelitian
Metodologi yang digunakan dalam pelaksanaan penulisan tugas akhir ini adalah sebagai berikut
1. Penelitian Kepustakaan
Mempelajari literatur tentang penggunaan teknologi kompresi pada web aset. Meneliti dan menentukan kebutuhan web aset dari website perpustakaan Univesitas Sanata Dharma dalam meningkatkan performa webload. Selajutnya melakukan analisis sistem untuk mengidentifikasi teknologi kompresi web aset yang digunakan untuk meningkatkan performa dari website library.usd.ac.id
2. Implementasi.
3. Analisis Hasil Pengujian
Menganalisa hasil yang di dapat dari pengujian/percobaan untuk dapat menyimpulkan hasil dari penelitian.
1.6 Sistematika Penulisan
Adapun sistematika penulisan skripsi sebagai berikut :
BAB I PENDAHULUAN
Berisi tentang latar belakang masalah, rumusan masalah, tujuan, batasan masalah, metodologi, dan sistematika penulisan.
BAB II LANDASAN TEORI
Bab ini berisi penjelasan teori-teori yang dipergunakan dalam penelitian ini.
BAB III METODOLOGI PENELITIAN
Bab ini berisi tentang metodologi penelitian.
BAB IV IMPLEMENTASI
BAB V KESIMPULAN DAN SARAN
7
BAB II
LANDASAN TEORI
Bab ini berisi mengenai penjelasan dari beberapa teori atau pengertian terkait dengan penelitian ini. Isi dari bab ini merujuk dari beberapa artikel, buku-buku, karya ilmiah, hingga sumber-sumber lain di internet. Isi dari bab ini berupa sub bab dan tiap sub bab juga terdiri dari poin-poin penjelasan.
Adapun pokok-pokok pembahasan dari bab ini meliputi website, kinerja situs web (web performance), web assets (javascript, gulp, webpack,css, less, sass, uglify,image comparison)
2.1 Web
2.1.1 Pengertian Web
2.1.2 Pengertian Situs Web
Arief (2011) menyatakan situs web merupakan kumpulan dari halaman web yang sudah dipublikasikan dijaringan internet dan memiliki domain / URL (Uniform Resource Locator) yang dapat diakses semua pengguna internet dengan cara mengetikkan alamatnya.
2.1.3 HTML
2.1.4 CSS
Cascading Style Sheet atau CSS digunakan untuk mengendalikan penyajian suatu halaman XHTML. Sebagai contoh, sebuah berkas CSS akan mengendalikan huruf-huruf, margin, warna, latar grafis, dan aspek-aspek lain dari penampilan halaman web. CSS mengizinkan pengguna memisahkan konten halaman XHTML dari penampilannya. Pembuatan layout yang salah, maka web kita akan sala diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memiliki dukungan bahasa (CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda.
Dalam me-layout sebuah web , ada dua metode yang sering dipakai untuk membuat sebuah layout web, yaitu :
d. Footer : identitas / copyright
Penggunaan CSS management extension meliputi :
1. LESS
Less adalah preprosesor CSS yang memberikan sentuhan dinamis kepada CSS dengan vitur variabel, mixin, serta operasi dan fungsi yang dimilikinya. Tujuan dibuatnya LESS sendiri adalah untuk memberikan kemudahan dan keringkasan dalam membangun tampilan website yang menggunakan CSS.
2. SASS (Syntactically Awesome Stylesheets)
SASS merupakan extension dari CSS yang menambahkan kekuatan dalam pemakain bahasa dasar. Hal ini memungkinkan untuk menggunakan variabel, aturan terorganisir, mixin, imor inline dan sebagainya dimana semmuanya menggunakan syntax CSS kompatible. SASS membantu menjaga big stylesheetagar terorganisir dengan baik dan mendapatkan small-stylesheet
CSS Minify
Modul ini digunakan untuk menghapus spasi yang tidak perlu dari CSS. Untuk file CSS statis, direkomendasikan bahwa mengecilkan selama tahap membangun penyebaran web.
Uglify
Uglifi CSS dapat digunakan untuk menggabungkan dan mengecilkan aset JavaScript sehingga mereka membutuhkan permintaan HTTP kurang dan membuat beban situs lebih cepat. UglifyCSS adalah CSS compressor / beautifier yang sangat mirip dengan UglifyJS.
NodeJS
NodeJs adalah sebuah platform software yang dipakai untuk membangun aplikasi-aplikasi serverside yang fleksibel di sebuah network / jaringan. Menggunakn JavaScript sebagai pemrograman dan dapat dengan mudah menghasilkan throughput / pemrosesan tingkat tinggi melalui non-blocking I/O. Fitur yang dimiliki yaitu built-in HTTP server library yang menjadikannya mampu menjadi sebuah web
NPM (Node Package Manager)
NPM adalah paket manager untuk NodeJs. Diciptakan tahun 2009 sebagai sebuah proyek open source untuk membantu memudahkan pengembangan JavaScript yang dikemas dalam sebuah modul.
2.1.5 JavaScript
JavaScript adalah bahasa pemrograman yang mudah untuk di-implementasikan dalam pembuatan program atau app. Dimana bersifat Client Side Programming Language atau dimana tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client. Keunggulan JavaScript yaitu dapat berjalan di semua platform dengan browser yang mendukung JavaScript, dan hampir semua platform dan browser saat ini mendukung JavaScript. Contoh aplikasi yang dibangun dengan JavaScript adalah Google Maps yang dapat berjalan di atas Linux, Windows dan Mac Os.
2.2 Web Aset
2.3 Node Package Module
Penulis akan menerapkan metode untuk meningkatkan web performance. Berikut ini metode yang akan digunakan dalam melakukan peningkatan performa. Pertama menggunakan javascript taskrunner atau biasa disebut dengan automatisasi pekerjaan. Task runner adalah suatu aktifitas untuk mempermudah semua pekerjaan rutinitas pada saat developing aplikasi seperti validasi HTML, minification, compiling, unit testing, render dan aktifasi lainnya.
2.3.1 Grunt
Grunt adalah salah satu dari beberapa task runner yang memiliki banyak task yang siap digunakan. Merupakan automation tool berbasis line interface yang dibangun menggunakan node.js. Grunt berguna sebagai automation tools dalam pengembangan aplikasi berbasis HTML. Automation
tools berfungsi untuk menjalankan tugas-tugas yang dilakukan secara berulang seperti minification, kompilasi, unit test dan lain sebagainya untuk menghemat waktu pengembang dalam melakukan tugas-tugas tersebut. Konfigurasi Grunt dideklarasikan dalam sebuah file bernama Gruntfile yang diletakkan pada direktori project.
selanjutnya jumlah aset-aset yang banyak dapat berubah atau dikompresi menjadi lebih kecil, dilihat dari ukuran setiap aset.
16
BAB III
METODOLOGI PENELITIAN
Tujuan dari penelitian ini untuk mengetahui performa webload dari website Perpustakaan Universitas Sanata Dharma, akan dilakukan penerapan teknologi kompresi web aset pada website tersebut.
Teknologi kompresi web aset yang digunakan untuk meningkatkan performa webload yang dipilih adalah Grunt. Grunt memiliki ketentuan sendiri, aset apa saja yang bisa dilakukan kompresi dan konfigurasi apa saja yang harus dilakukan pada sebuah website.
3.1 Subjek dan Objek Penelitian
Subjek penelitian ini adalah website Perpustakaan Universitas Sanata Dharma. Objek penelitian adalah perubahan performa webload dari website Perpustakaan Universitas Sanata Dharma setelah penerapan teknologi kompresi web (Grunt).
3.2 Penelitian Kepustakaan
3.2.1. Studi kepustakaan
3.2.2 Pengumpulan Data
Tahap selanjutnya adalah tahap pengumpulan data. Tahapan pengumpulan data yaitu dengan melakukan pengujian pada website Perpustakaan Universitas Sanata Dharma untuk melihat perubahan performa webload setelah dilakukan penerapan teknologi kompresi web (Grunt) menggunakan tool yang sebelumnya digunakan untuk melihat performa webload dan bentuk perubahan dari web aset.
1. upload database website library.usd.ac.id ke localhost
2. melakukan konfigurasi CSS_Registry dan JS_Registry pada file Gruntfile.js yang disimpan dalam folder perpus-baru
3. melakukan inspect element menggunakan devtool chrome, untuk melihat perubahan pada js dan css.
3.2.3. Menyajikan data hasil penerapan
3.3 Implementasi
Berdasarkan judul penelitian ini, penulis menggunakan alat bantu yang mendukung dalam penerapan teknologi Grunt itu ,antara lain sebagai berikut:
3.3.1 Grunt version 0.4.5
Merupakan teknologi yang memudahkan untuk menciptakan sebuah file repo. Dan otomatisasi yang mempermudah pekerjaan yang harus dilakaukan secara berulang seperti minifikasi, kompilasi, unit testing dan sebagainya. Perkembangan Grunt juga sangat pesat yang terbukti dengan adanya jumlah plugin yang bisa dipakasi sebagai pilihan otomatisasi.
Dalam proses kompresi web aset memilih menggunakan teknologi kompresi web yakni Grunt. Sebelum mengintegrasikan grunt ke dalam website perpustakaan Universitas Sanata Dharma, maka perlu melakukan proses install grunt ke dalam sistem (pc/laptop).
3.3.2 JetBrains PhpStorm 9.0.2
3.3.3 Xampp version 2.1
Xampp merupakan tool yang menyediakan paket perangkat lunak ke dalam satu buah paket. Dengan menginstall XAMPP maka tidak perlu lagi melakukan instalasi dan konfigurasi web server Apache, PHP dan MySQL secara manual. XAMPP akan menginstalasi dan mengkonfigurasikannya secara otomatis.
3.3.4 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 pada web. Penggunaan tool ini adalah untuk mengetahui performa webload dan aset apa saja yang terdapat dalam website.
file Gruntfile.js, selanjutnya membuat konfigurasi agar dapat diterapkan aset apa saja
yang bisa dikonfigurasikan. Dalam variabel “const _DEV_PATH_ =
'./themes/usd/files/';” merupakan lokasi dimana web aset yang belum dilakukan
kompresi, sedangkan pada variabel “const _PUBLIC_PATH_ =
'./themes/usd/assets/';” merupakan hasil dari kompresi web aset itu. Pada fungsi
“const CSS_BUILD_MIN = _PUBLIC_PATH_+'css/themes.min.css';” memiliki
fungsi sebagai hasil yang didapat setelah dilakukan kompresi terutama pada web aset
.css. Sedangkan pada fungsi “const JS_BUILD = _PUBLIC_PATH_+'js/themes.js';”
merupakan hasil dari kompresi dari web aset .js.
3.4 Analisis Hasil Pengujian
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.
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.
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
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
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
Tabel 4.3 Web aset Javascript
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
Setelah tahap instalasi selesai dilakukan, selanjutnya melakukan proses konfigurasi grunt ,berikut ini adalah potongan source code dari konfigurasi dari grunt yang dibuat pada file Gruntfile.js.
Gambar 4.4. Konfigurasi Grunt
Gambar 4.5. konfigurasi hasil kompresi
dilakukan. Untuk fungsi CSS_BUILD, CSS_BUILD_MIN, JS_BUILD merupakan hasil dari file yang sudah dikompres.
Gambar 4.6. Konfigurasi Variabel
Gambar diatas merupakan konfigurasi dari variable yang terdapat pada aset css maupun js. Aset-aset tersebut ditentukan berdasarkan hasil inspect elemen dari webload yang dibutuhkan.
Grunt yang sudah dijalankan melalui command prompt dengan mengetikkan
perintah “grunt” , memberikan hasil secara langsung pada ukuran file cssmin yang
awalnya berukuran 231.99 kb dilakukan kompresi menjadi 184.77 kb
Hasil dari kompresi dari Grunt juga dapat dilihat dari website secara langsung melalui inspect element seperti tabel berikut ini :
Tabel 4.4. Hasil Perbandingan Perubahan menggunakan Grunt
Sebelum dilakukan kompresi Sesudah dilakukan kompresi Jumlah request dari css dan js
sebanyak 59 request.
Jumlah request dari css dan js sebanyak 40 request.
Jumlah data transfer sebesar 2.1 MB Jumlah data transfer sebesar 1.5 MB Aset-aset dari css masih belum
dikompresi sehingga terdapat banyak file berupa aset, seperti jquery-ui.css, bootstrap.css, PwdStyles.css dsb
Sebelum dilakukan kompresi Sesudah dilakukan kompresi Pada aset-aset js juga masih banyak
file aset js. Seperti jquery_003.js, jquery-ui.js, slicker.js, password.js,
responsiveslides.js dsb.
Setelah dilakukan kompresi seluruh aset dikompresi kedalam 1 aset yaitu themes.js
Setelah melakukan penerapan tekonologi kompresi Grunt pada website Perpustakaan Universitas Sanata Dharma, terlihat penurunan bobot paket data dari aset-aset yang diunduh.
4.3 Penghitungan Manual
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)
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)
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)
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
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,
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
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.
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
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.
