kajian teknologi web aset grunt pada website

PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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
2016
i
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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
Created By :
NICODIMUS DWIYANTO RAHMAHADI
095314065
.
INFORMATICS ENGINEERING STUDY PROGRAM
INFORMATICS ENGINEERING DEPARTMENT
FACULTY OF SCIENCE AND TECHNOLOGY
SANATA DHARMA UNIVERSITY
YOGYAKARTA
2016
i
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
ii
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
iii
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
LEMBAR MOTTO
“If you’re afraid to FAIL, then you’re probably going to fail”
-Kobe Bryant-
iv
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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
Nicodimus Dwiyanto Rahmahadi
v
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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)
Pihak universitas harus memperhatikan performa dari website
Perpustakaan Sanata Dharma, salah satu nya adalah Webload Performance,
dimana proses ini terjadi pada saat pertama kali website diakses dan membuka
halaman home dari website tersebut. Hal yang mempengaruhi adalah jumlah web
aset. Untuk dapat meningkatkan performa dari webload, maka perlu menerapkan
teknologi kompresi web aset yaitu Grunt. Dimana sistem kerja dari Grunt adalah
melakukan kompresi pada web aset Javascript dan CSS.
vi
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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).
The university must pay attention to the performance of Sanata Dharma
Library website, one of them is webload Performance. Where this process occurs
during the first website accessible and open the home page of the website. Things
that influence is the number of web assets. In order to improve the performance of
webload, it is necessary to apply a compression technology that is Grunt web
assets. Where the working system of Grunt is doing on the web assets
compression Javascript and CSS
vii
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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,
Nicodimus Dwiyanto Rahmahadi
viii
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
KATA PENGANTAR
Syukur kepada Tuhan Yang Maha Esa atas segala berkat dan bimbinganNya, 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.
6. Teman-teman Pasjub, Seba dan Nyelekutis yang selalu mendukung dan
memberi semangat selama proses penyelesaian Skripsi.
ix
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
7. Teman-teman Teknik Informatika Sanata Dharma 2009, yang saling
memberikan semangat dan dukungan dalam pengerjaan tugas akhir.
Yogyakarta, 20 Juli 2016
Penulis
x
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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
DAFTAR ISI …………………………………………………………..……
xi
DAFTAR GAMBAR …………………………………………………….....
xiii
DAFTAR TABEL ..........................................................................................
xiv
BAB I PENDAHULUAN ………………………………………………......
1
1.1
Latar Belakang…………………………………………………….
1
1.2
Rumusan Masalah ...………………………………………………
3
1.3
Tujuan Penelitian…………… ....…………………………………
3
1.4
Batasan Masalah …...…………………………………………......
3
1.5
Metodologi Penulisan ..…………………………………………...
4
1.6
Sistematika Penulisan ………………………………………….....
5
BAB II LANDASAN TEORI .........…………………………………….....
2.1
2.2
7
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
Web Aset………….........................................…………………….
xi
13
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
2.3
Node Package Module……….. .......……………………………...
2.3.1 Grunt…….........................................………………………...
14
14
BAB III METODOLOGI PENELITIAN ………………………….............
16
3.1.
Subjek Dan Objek Penelitian...………………...................................
16
3.2.
Penelitian Kepustakaan…………. ………………………………….
16
3.2.1. Studi Kepustakaan…….........................................………….
16
3.2.2. Pengumpulan Data……………... ..........................................
17
3.2.3. Menyajikan Data Hasil Penerapan……..................................
17
Implementasi ……..........….………………………………………..
18
3.3.1. Grunt version 0.4.5………………………..……………........
18
3.3.2. JetBrains PhpStorm 9.0.2.…………………………...............
18
3.3.3. Xampp version 2.1…………………………………………..
19
3.3.4. Devtool Chrome…………………………………………….
19
Analisis Hasil Pengujian…………………………………………….
20
3.3.
3.4
BAB IV IMPLEMENTASI DAN ANALISA HASIL……………….........
4.1.
21
Analisis Data Website Perpustakaan Universitas Sanata
Dharma....................................................................................
21
4.2. Implementasi Grunt dan Pembahasan………………………...
26
4.3. Penghitungan Manual…………………….…………..............
29
BAB V PENUTUP ………….......................................................................
34
5.1 Kesimpulan ………….................................................................
34
5.2 Saran ...........................................................................................
35
DAFTAR PUSTAKA……………………………………………………….
LAMPIRAN………………………………………………………………..
xii
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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
Gambar (4-7) :Menjalankan Grunt………………............................................
27
xiii
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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
Tabel (4-8) : Hasil Waktu Data Transfer pada Aset JS dan CSS……............
32
xiv
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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.
Webload performance adalah proses pertama kali browser mengakses
sebuah website. Proses webload mempengaruhi jumlah paket data dan data
transfer sebuah website, dimana proses webload yang terlalu banyak memiliki
data transfer akan memperlama proses akses website tersebut yang juga akan
memakan paket data yang banyak. Buruknya webload performance pada sebuah
situs juga akan mempengaruhi banyaknya paket data yang diperlukan jika diakses
pada gadget seperti smartphone dan tablet yang memiliki tingkat mobilitas tinggi.
1
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
2
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.
Kelemahan pada performa website Perpustakaan Universitas Sanata
Dharma salah satunya terletak pada akses webload berupa data transfer data yang
berat yang melebihi 3.8 MB dan jumlah data request yang banyak, hal ini
membuat penulis tertarik untuk menerapkan teknologi kompresi web aset, salah
satunya adalah Grunt. Grunt sudah banyak dimanfaatkan oleh banyak user dalam
pembuatan sebuah website. Seperti tercantum pada (http://gruntjs.com/who-uses-
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
3
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
CSS.
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
4

1.5
Pengujian dilakukan secara offline. (localhost)
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.
Sebelum melakukan implementasi menyebutkan kebutuhan apa saja
yang dibutuhkan dalam penelitian, melakukan
instalasi Grunt.
Selanjutnya melakukan implementasi Grunt dengan melakukan
konfigurasi pada website perpustakaan Universitas Sanata Dharma dan
melakukan proses scripting untuk pengolahan data berupa web aset
pada website library.usd.ac.id yang sebelumnya sudah dianalisis.
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
5
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 ini berisi tentang penyajian dan pembahasan hasil pengujian /
penelitian yang didapatkan dari hasil analisis dan uji dari performa webload
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
6
BAB V KESIMPULAN DAN SARAN
Bab ini berisi tentang kesimpulan pengujian / penelitian dan juga
berisi saran terkait kinerja website universitas.
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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
Web adalah salah satu aplikasi yang berisikan dokumen-dokumen multimedia (teks, gambar, suara, animasi, video) di dalamnya yang menggunakan
protokol HTTP (hypertex transfer protocol) dan untuk mengaksesnya
menggunakan perangkat lunak yang disebut browser (Arief, 2011).
7
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
8
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
HTML adalah bahasa komputer yang dirancang untuk memungkinkan dalam
pembuatan website. HTML merupakan halaman yang berada pada suatu situs
internet atau web. HTML merupakan metode yang menautkan (link) satu
dokumen dengan dokumen yang lain melalui teks. HTML merupakan
framework internet, hampir semua situs web yang ada menggunkan HTML
untuk menampilkan teks, grafik, suara, dan animasinya. HTML adalah suatu
bahasa yang dikenali oleh web browser untuk menampilkan informasi dengan
lebih menarik dibandingkan dengan tulisan teks biasa (plain text).
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
9
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 :
1. Metode Table
2. Metode Div
Pada umumnya ada empat bagian yang sering ada dalam layout sebuah web
yaitu:
a. Header : berisi tema web / judul
b. Menu : menu link web
c. Content : isi dari web
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
10
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
berjalan dengan cepat, terutama dengan bantuan Compass style library.
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
11
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
server tanpa bantuan software lainnya seperti Apache atau Nginx
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
12
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
implementasikan dalam pembuatan program atau app. Dimana
di-
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.
JavaScript sangat cocok untuk mengenalkan pada bahasa pemrograman
komputer,
penulisan
JavaScript
juga
sama
halnya
dengan
bahasa
pemrograman C, C++ dan java, bahasa pemrograman yang banyak
kontribusinya dalam bidang development.
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
13
2.2
Web Aset
Berdasarkan WebStandardsSherpa.com yang merupakan sebuah website yang
membantu memberikan kesempatan bagi website profesional untuk mendapatkan
informasi, mengumpulkan saran, dan memperlajari praktek terbaik dari para ahli di
lapangan untuk membantu dalam proses peningkatan kualitas pekerjaan sebuah
website. Menurut penjelasan dalam WebStandardsSherpa.com ,
Web aset sendiri
merupakan bagian yang mendukung dari sebuah website yang mengacu pada semua
bahan yang diperlukan untuk membangun sebuah website (Web Standart Sherpa).
Setiap aset dipergunakan untuk melengkapi kebutuhan client side layer agar browser
dapat menterjemahkannya menjadi sebuah website yang memiliki tampilan dan dapat
berfungsi. Adapun tipe web aset yang diperlukan dan didukung yakni : html
document, javascript, stylesheet, images, font dan sebagainya. Web aset tersebut
diunduh oleh browser ketika sebuah halaman situs dibuka oleh pengunjung. Besarnya
muatan aset yang diunduh mempengaruhi waktu tunggu untuk situs tersebut dapat
siap dipergunakan dan mempengaruhi seberapa besar daya yang dipergunakan dalam
mengerjakan proses pengunduhan dan penerjemahan oleh browser.
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
14
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.
Grunt disini menjalankan kompresi terhadap uglify dan minify,
dimana keduanya memiliki fungsi untuk mengecilkan aset-aset. Dimana
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
15
selanjutnya jumlah aset-aset yang banyak dapat berubah atau dikompresi
menjadi lebih kecil, dilihat dari ukuran setiap aset.
Sebelum memulai project menggunakan Grunt, membutuhkan dua file
konfigurasi yaitu packcage.json dan Gruntfile.js. Package.json merupakan file
yang digunakan oleh npm untuk menyimpan metadata dalam project yang
yang dipublish sebagai npm modules. Sedangkan Gruntfile.js merupakan yang
digunakan
untuk
mengkonfigurasi
mendaftarkan plugins. (gruntjs.com)
dan
mendefinisikan
tugas
serta
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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
Studi kepustakaan dengan mempelajari hal-hal yang terkait dengan
penelitian ini dari buku, internet dan makalah yang sejenis.
16
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
17
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
Data dari hasil penerapan teknologi kompresi web aset (Grunt) yang
memberikan perubahan sebelum maupun sesudah dilakukan kompresi
pada web aset dan performa webload ditampilkan dalam bentuk tabel
dimana data yang ditampilkan berupa paket data dan jumlah transfer data.
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
18
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
Jetbrains PhpStorm merupakan code editor yang menyediakan dukungan
bagi PHP, seperti HTML, javascript, CSS, Sass, Less, CofeeScript dan
masih banyak bahasa pemrograman yang lain.
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
19
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.
Pada tahap awal sebelum dilakukan pengujian, penguji melakukan analisa
pada website, yaitu aset apa saja yang bisa dilakukan kompresi oleh Grunt. Setelah
menemukan aset apa saja yang bisa dilakukan kompresi, selanjutnya melakukan
instalasi Grunt kedalam localhost dan akan menghasilkan file Gruntfil.js. Di dalam
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
20
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
Setelah melakukan pengujian pada website Perpustakaan Universitas Sanata
Dharma, akan didapatkan perubahan yang terlihat pada web aset. Tahap akhir dari
penelitian ini yakni pendokumentasian hasil analisis dan hasil penemuan selama
proses penelitian yang disajikan pada bab 5 yaitu dalam bentuk kesimpulan.
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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.
21
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
22
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
23
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
24
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
25
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
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
26
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
Pada konfigurasi _DEV_PATH berfungsi sebagai request , dimana aset yang
akan dikompres terletak pada folder ’./themes/usd/files/’; . Sedangkan
_PUBLIC_PATH merupakan lokasi folder hasil dari kompresi yang sudah
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
27
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.
Gambar 4.7. Menjalankan Grunt
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
28
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 Jumlah request dari css dan js
sebanyak 59 request.
sebanyak 40 request.
Jumlah data transfer sebesar 2.1 MB
Jumlah data transfer sebesar 1.5 MB
Aset-aset
dari
css
masih
belum Aset-aset dari css sudah mengalami
dikompresi sehingga terdapat banyak kompresi sehingga file berkurang
file berupa aset, seperti jquery-ui.css, dan
bootstrap.css, PwdStyles.css dsb
menjadi
themes.css
1
file
kompresi
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
29
Sebelum dilakukan kompresi
Sesudah dilakukan kompresi
Pada aset-aset js juga masih banyak Setelah dilakukan kompresi seluruh
file aset js. Seperti jquery_003.js, aset dikompresi kedalam 1 aset yaitu
jquery-ui.js, slicker.js, password.js, themes.js
responsiveslides.js dsb.
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
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.
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
30
Tabel 4.5. Hasil Penghitungan Manual Ukuran Aset-Aset
Web Aset (JavaScript)
Web Aset (CSS)
Jquery_003.js
(267 kb) Jquery-ui.css
Jquery-ui.js
(451 kb)
(32.5 kb)
Bootstrap.css
(101 kb)
Jquery_002.js
(2.7 kb) Template.css
(79.3 kb)
Password.js
(1.3 kb) pwdStyles.css
Slicker.js
(1.2 kb) Menu.css
(4.1 kb)
Jquery_004.js
(2.3 kb) Responsiveslides-2.css
(2.9 kb)
(12 kb) Responsiveslides.css
(837 b)
Responsiveslides.js
(966 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
Jquery.js
(8.3 kb)
Scroll.js
(1.7 kb)
TOTAL
811.8 kb
Tabel 4.6. Hasil Kompresi pada Aset JS dan CSS
Web Aset (JavaScript)
Themes.js
Web Aset (CSS)
(362 kb) Themes.min.css (181 kb)
229 kb
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
31
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
362
Aset Javascript : (811.8) 𝑥100 = 44.59 %
Aset CSS
181
:(
229
) 𝑥100 = 79.03 %
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
Jquery-ui.js
(132 ms) Bootstrap.css
Jquery_002.js
(96 ms)
(221 ms)
(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)
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
32
Web Aset (JavaScript)
Web Aset (CSS)
Jquery_009.js
(242 ms)
Jquery.css
Jquery_007.js
(239 ms)
TOTAL
Jquery.js
(240 ms)
Scroll.js
(240 ms)
TOTAL
3210 ms
(96 ms)
1513 ms
Tabel 4.8. Hasil Waktu Data Transfer pada Aset JS dan CSS
Web Aset (JavaScript)
Web Aset (CSS)
Themes.js
Themes.min.css (42 ms)
(103 ms)
Pada hasil perhitungan secara manual jumlah waktu data transfer dari asetaset 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
𝑧
(𝐴) 𝑥100 = ⋯ %
3210 – 103 = 3107
3107
(3210) 𝑥100 = 96.79 %
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
33
Aset CSS
:
B = Total waktu awal aset CSS
y = total waktu setelah dilakukan kompresi CSS
B–y=z
1513 – 42 = 1471
𝑧
(𝐵) 𝑥100 = ⋯ %
1471
(1513) 𝑥100 = 97.23 %
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.
.
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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 96.79 %
34
dan aset CSS
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
35
97.23 % 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 asetaset 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.
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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-lessframework-untuk-css/. Diakses pada tanggal 27 Agustus 2015
SASS
(Syntactically
Awesome
Stylesheets),
lang.com/documentation/file.SASS_REFERENCE.html.
http://sassDiakses
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
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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 JShint
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
Gambar Cara menginstal modul cssmin
Gambar Cara menginstal modul uglify
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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. Jumlah Request dan Paket Data Awal
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
Gambar Request dan Paket Data setelah Dikompresi
Gambar. Aset pada CSS sebelum dikompresi
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
Gambar. Aset CSS setelah Dikompresi
Gambar. Aset JavaScript sebelum Dikompresi
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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',
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
'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
}
}
};
PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
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']);
};