Abstrak —Pengenalan  institusi melalui media internet seperti situs web dan sudah menjadi hal yang penting pada  zaman ini. Informasi  yang disampaikan  melalui situs web  lebih lengkap dan efisien dibanding media lain seperti televisi, radio, majalah, atau  koran.  Bahkan,  saat  ini  hampir  setiap  orang  dapat terhubung dengan  media internet. S itus web  jurusan Teknik Informatika  sudah  berjalan  selama  bertahun-tahun,  namun terdapat beberapa hal yang perlu diperbaiki. Hal pertama yaitu performa kecepatan. S itus web perlu cepat agar pembaca tidak menunggu lama untuk mendapat  informasi. Hal kedua  yaitu banyaknya pembaca. Konten situs web yang bagus tidak akan berguna  tanpa  adanya  pembaca.  S alah  satu  cara  untuk menjangkau  pembaca  yang  lebih  banyak  adalah  dengan membagikannya di media sosial seperti Facebook dan Twitter yang  memiliki  banyak  pengguna.  Dalam  pembagiannya, sekadar mencantumkan link menuju situs web saja tidak cukup. Optimasi representasi situs web di media sosial diperlukan agar pengguna tertarik untuk mengunjungi link situs web tersebut. Hal ketiga yaitu kemudahan pembuatan artikel. Artikel seperti info lomba dan beasiswa membutuhkan penerbitan yang cepat. Hasil yang diharapkan  dari  pengerjaan  penelitian ini adalah berupa aplikasi situs web kustom jurusan Teknik Informatika yang cepat,  memudahkan penulis dalam menyalurkan artikel dan  menerapkan  Open  Graph  Protocol  untuk  memperbaiki representasi konten situs web di media social .
Kata Kunci — web kustom, open graph protocol.

## I. PENDAHULUAN
ENGENA LAN  institusi  melalui  media  internet  seperti situs  web  dan  sudah  menjadi  hal  yang  penting  pada zaman  ini.  Informasi  yang disampaikan  melalui  situs  web lebih  lengkap  dan  efisien  dibanding  media  lain  seperti televisi,  radio,  majalah,  atau koran.  Bahkan,  saat ini  hampir setiap orang dapat terhubung dengan media  internet.
Situs  web  jurusan  Teknik  Informatika  sudah  berjala n selama  bertahun-tahun, namun  terdapat  beberapa  hal  yang perlu diperbaiki.  Hal pertama yaitu performa  kecepatan. Situs web  perlu  cepat agar pembaca  tidak  menunggu lama  untuk mendapat  informasi.  Hal  kedua  yaitu  banyaknya pembaca. Konten  situs  web  yang  bagus  tidak  akan  berguna  tanpa adanya pembaca. Salah satu cara untuk menjangkau pembaca yang lebih  banyak adalah dengan membagikannya  di media sosial  seperti Facebook  dan  Twitter  yang memiliki  banyak pengguna.  Dalam  pembagiannya,  sekadar  mencantumka n link menuju situs web saja tidak cukup. Optimasi representasi situs web di  media  sosial diperlukan  agar pengguna tertarik untuk mengunjungi  link  situs web tersebut. Hal ketiga  yaitu kemudahan pembuatan artikel.  Artikel  seperti info lomba  dan beasiswa membutuhkan  penerbitan yang cepat.
Hasil  yang  diharapkan  dari  pengerjaan  penelitian  in i adalah  berupa  aplikasi  situs  web  kustom  jurusan  Teknik
Informatika yang  cepat,  memudahkan  penulis  dala m menyalurkan  artikel  dan  menerapkan  Open Graph  Protocol untuk memperbaiki  repres entasi konten situs web  di  media sosial.

## II. TINJAUAN PUSTAKA

## A. Website
Website atau  situs web  adalah  halaman  informasi  yang disediakan  melalui  jalur  internet  sehingga  bisa  diakses  di seluruh  dunia  selama  terkoneksi  dengan  jaringan  internet. Situs  web  bisa  diaks es melalui  HTTP,  yaitu  protokol  yang menyampaikan informasi dari server website untuk ditampilkan  kepada para pengunjung melalui  browser [1].
Situs web  memiliki  2  macam  desain, yaitu  web templat e dan  web  kustom.  Web  template  adalah  web  yang  sudah dirancang  sebelumnya,  atau  web  yang  dapat  digunakan siapapun untuk memasukkan  konten teks dan gambar mereka ke  dalam  membuat  situs web.  Biasanya dibuat dengan kode HTML  dan  CSS.  Web  template  memungkinkan  seseorang untuk membuat  situs web tanpa harus menyewa pengembang atau  perancang  web  profesional, walaupun  banyak pengembang  menggunakan  template  situs  untuk  membua t situs untuk klien  mereka.  Hal  ini  memungkinkan  seseorang untuk membangun situs web pribadi atau bisnis dengan harga terjangkau  yang kemudian  dapat terdaftar  di  mesin  pencari sehingga  pengguna  dapat  mencari  produk  atau  layanan spesifiknya [2].  Web template  memiliki  beberapa kelebihan, yaitu:
1) Tidak  membutuhkan  biaya yang mahal  untuk menyewa pengembang. Biaya digunakan untuk membeli  template.
2) Pengembangan  lebih  cepat,  karena  hanya  tinggal mengganti beberapa teks dan gambar
Namun  web  template  juga  memiliki  beberapa  kekurangan, yaitu:
1) Kustomisasi yang terbatas
2) Tidak selalu didukung oleh pengembang
3) Tidak  unik.  Banyaknya  pengguna  template  berakibat desain web bisa jadi ada yang sama dengan yang lain Web kustom  adalah situs web  yang dirancang agar  lebih sesuai  dengan  spesifikasi  kebutuhan  klien.  Beberapa kategorinya  diantaranya  menetapkan  referensi  umu m, memberi  akses  yang  lebih  mudah  pada  fungsionalitasnya, merubah antarmuka,  dan lain-lain  [3].  Web kustom memilik i beberapa kelebihan,  yaitu:
1) Desain yang unik
2) Skalabilitas,  Fleksibilitas,  dan Pengelolaan yang bagus
3) Kode yang terbaru dan SEO
4) Dukungan dari pengembang yang berpengalaman

## Rancang  Bangun  Web Kustom  Menggunakan Open Graph Protokol pada Studi Kasus  Web Jurusan Teknik Informatika
Nugroho Wicaksono, Sarwosri, dan Dwi Sunaryono
Departemen Teknik Informatika, Fakultas  Teknologi  Informasi, Institut Teknologi  Sepuluh  Nopember (ITS) e-mail : nugroho13@mhs.if.its.ac.id , sarwosri76@gmail.com
P
Namun  web  kustom  juga  memiliki  beberapa  kekurangan, yaitu:
1) Pengembangan lebih lama
2) Membutuhkan  biaya  yang  mahal  untuk  menyewa pengembang

## B. Situs Web Jurusan Tek nik  Informatik a
Situs  web  Jurusan  Teknik  Informatika  merupakan  web profil  dari  Jurusan Teknik  Informatika,  Fakultas  Teknologi dan Informasi,  ITS  yang berisi  informasi  profil,  akademik, kurikulum,  staf, fasilitas, prestasi, agenda, kontak, dan artike l mengenai  Jurusan  Teknik  Informatika.  Situs  web  Jurusan Teknik  Informatika dapat  diakses  pada  alamat  URL http://if.its.ac.id/.  Saat  ini,  situs  web  Jurusan  Teknik Informatika menggunakan  desain  web  template  dari WordPress.  Pada  penelitian  ini,  situs web  Jurusan  Teknik Informatika  dirancang  menggunakan  desain  web  kustom dengan arsitektur Headless WordPress.

## C. WordPress
WordPress dulunya adalah sistem blogging , namun telah berkembang  menjadi content management system utuh yang memiliki banyak  plugin,  widget  dan  tema. Content Management  System (CMS)  merupakan  sistem  dimana informasi  dibuat  dikelola,  diterbitkan  dan  diarsipkan  [4]. Sebagai content management system , WordPress mendukung multi  user (pengguna dengan kapasitas  yang berbeda)  dan multi blogging (mengatur lebih dari satu situs web).
WordPress  menggunakan  arsitektur  Coupled  CMS. Coupled  CMS  adalah  arsitektur  yang  menghubungkan sepenuhnya  sistem  backend  manajemen  konten  dengan frontend  dari  penerbitan  konten.  Arsitektur  ini  memilik i kelebihan  dan  kekurangan.  Berikut  ini  adalah  beberapa kelebihan menggunakan Coupled CMS:
1) Pemasangan yang mudah
2) Mudah bagi editor
3) Fitur yang banyak. WordPress memiliki  fitur pembuatan artikel  dan halaman, perizinan  pengguna dan manajemen peran  pengguna,  kategori,  tag,  riwayat  revisi  konten, penyusunan,  penerbitan,  pratinjau,  penjadwalan  isi, pengelolaan  media  dengan  pemotongan  gambar  dan rotasi,  penguncian  pos  saat  pengguna  editor  lain mengerjakan  konten, multi-sites,  dan WYSIWYG  editor dan tema.
Sedangkan kekurangan menggunakan Coupled CMS  adalah sebagai berikut:
1) Pengembangan  yang sulit  karena  tidak  ada  pemisahan view  dan  logic,  tema  yang  tidak  bisa  dikembangkan , serta dokumentasi yang tidak konsisten.
2) Waktu  muat  halaman  yang  lama  karena  tidak  ada pemisahan view  dan logic  sehingga WordPress merakit halaman  yang diformat  sepenuhnya berdasarkan aturan yang kompleks.
D. Headless WordPress
Decoupled CMS Architecture ( Headless )  atau  dala m bahasa  Indonesia  berarti  Arsitektur  CMS  yang  dipisah semakin populer di dunia pengembangan web [5]. WordPress merupakan  CMS  tradisional,  dengan presentasi  antarmuka menggunakan  tema.  Namun,  karena  kebutuhan  akan fleksibilitas  dan kebebasan yang lebih,  banyak pengembang telah  mulai  memisahkan  CMS,  menggunakannya  untuk pengelolaan  konten,  editorial, dan  alat  administratif,
sementara  menerapkan  komponen frontend terpisah  yang berkomunikasi  dengan CMS melalui  API.
Pembagian frontend dan back end pada  Headless WordPress memiliki  beberapa kelebihan sebagai berikut:
1) Telah terpasang fitur-fitur  yang dimiliki  WordPress.
2) Editor  tetap akrab dengan WordPress.
3) Pengembangan  yang  fleksibel.  Headless  WordPress memisahkan  view  dan  logic.  Sehingga  pengembang frontend  terbebas dari  konvensi  dan  struktur  backend. Pengemban frontend dapat berinovasi menggunakan alat yang lebih modern.
4) Mempercepat situs dengan mengubah logika layar ke sisi klien  dan pengambilan data menggunakan API. Aplikasi dengan arsitektur tersebut jauh lebih  responsif daripada aplikasi  yang  merakit  halaman  dengan  peraturan kompleks.
Namun,  Headless  WordPress  juga  memiliki  kekurangan sebagai berikut:
1) Sistem  yang dikelola  lebih  dari  1  (frontend  dan  CMS yang lain).
2) Banyaknya  sistem  berarti  membutuhkan  kemampua n dan usaha yang lebih besar untuk mengelola

## E. Open Graph Protocol
Open  Graph  Protocol  adalah  protokol  yang  membua t setiap halaman pada situs web menjadi  objek yang informatif di media  sosial [6].  Protokol  ini  menggunakan beberapa tag untuk  memberikan  informasi  yang  detail  ke  media  sosial (Facebook, Google  +, Twitter,  LinkedIn)  [7]. Tag dasar agar representasi  dapat  muncul  di  media  sosial  terdiri  dari  3 properti, yaitu:
1) og:title, yaitu tag judul objek.
2) og:type,  yaitu tag tipe  objek  dapat berupa video,  situs web, dan lain-lain. Default dari tag og:type adalah situs web.
3) og:url  – Canonical URL  objek  yang digunakan sebagai ID pada graph.
Selain itu juga terdapat tag opsional seperti og:description, og:image,  og:audio,  og:locale,  og:video,  dan  lain -lain . Representasi situs web  yang lengkap  memiliki tag og:title, og:url,  og:description  dan  og:image  seperti  pada  gambar berikut.
Gambar 1. Representasi Web yang menggunakan Open Graph Protocol di Media Sosial.

## F. Rendering Halaman Web
Rendering halaman web  adalah  proses  membua t representasi  visual  situs  web  [8].  Terdapat  3  mac a m rendering halaman  web, yaitu:
1) Client Side Rendering
Client Side Rendering adalah membuat konten halaman situs web  pada  browser client .  Keunggulannya adalah waktu  respon  yang  lebih  cepat  dan  aplikasi  lebih
interaktif.  Sedangkan kelemahannya  adalah waktu muat awal  yang  lebih  lama  karena  konten  baru  dapat ditampilkan setelah semua dokumen Javascript didapatkan dan diproses oleh browser client.
2) Server Side Rendering
Server Side Rendering adalah membuat  konten halaman situs  web  pada server .  Keunggulannya  adalah  waktu muat  awal  yang  lebih  cepat  karena  dokumen  HTM L didapatkan dari server di awal. Sedangkan kelemahannya  adalah  waktu  respon  yang  lebih  lama karena  aplikasi  harus  membuat  ulang  halaman  ketika melakukan request data baru.
3) Isomorphic Rendering
Isomorphic Rendering adalah membuat  konten halaman situs web pada client dan server . Keunggulannya adalah waktu  muat  awal  lebih  cepat  karena  konten  dapat disajikan sebelum semua dokumen Javascript didapatkan browser  dan  waktu  respon  lebih  cepat  karena  setelah semua  dokumen  Javascript  didapatkan  dan  diproses, aplikasi  hanya  perlu  membuat  sebagian  dari  halaman ketika  melakukan  request data baru.
G. React
React  adalah front  end library berbasis JavaScript  yang untuk  pembuatan  antarmuka  pengguna pada  suatu aplikas i web.
React memiliki  beberapa keistimewaan,  yaitu:
1) Basis Komponen yang dek lratif
Antarmuka  dipisah  menjadi  beberapa  komponen  yang independen, deklaratif  dan dapat digunakan kembali.
2) V-DOM  (Virtual Document Object  Model)
Ketika  berganti halaman,  browser tidak perlu me-rende r ulang  keseluruhan  DOM  halaman.    Karena  V-DOM meneliti perbedaan  dari  kedua  halaman  tersebut, sehingga DOM halaman  diperbarui dengan efisien.
H. React-Helmet
React-Helmet  adalah library untuk membuat komponen React  yang  mengelola  head  pada  dokumen .  React-Helme t memungkinkan  untuk  mengganti metadata objek  secara dinamis.

## I. GraphQL
GraphQL  adalah bahasa query untuk API.  GraphQL  sebagai API berkembang  pesat dan mulai  menggantikan REST  API. GraphQL  memiliki  beberapa keistimewaan,  yaitu:
1) Sesuai Kebutuhan Klien
Klien  yang  menentukan  kembalian  data  dari  request, bukan server.
2) Sek ali Request
Dibandingkan  REST  API  yang  membutuhkan  request dari  banyak  URL,  GraphQL  mendapatkan  semua  data yang diinginkan  dalam  satu kali  request.
III. ANALISIS, PERANCANGA N DAN IMPLEMENTASI
A. Analisis Permasalahan
Pengembangan situs web pada jurusan Teknik Informat ika sudah berjalan  dengan baik  selama  bertahun -tahun, namun terdapat beberapa masalah.
Masalah pertama adalah kecepatan situs web. Saat ini situs web  menggunakan  server  side  rendering.  Walaupun
pembuatan  konten  awal  lebih  cepat,  namun  waktu  respon pindah  halaman  lebih  lama  karena  harus  membuat  konten dari  awal  lagi.  Masalah  ini  dapat  diselesaikan  dengan menggantinya  menjadi  isomorphic  rendering.  Isomorphic rendering  membuat  konten awal  dengan metode  yang sama dengan server side rendering, sehingga waktu  muat awalnya sama.  Konten yang telah  ditampilkan  akan diproses dengan metode  client  side  rendering.  Ketika  request  un tuk  pindah halaman  dilakukan,  aplikasi  tidak membuat  konten dari awal lagi,  sehingga waktu responnya lebih cepat.
Masalah kedua adalah kelengkapan penyebaran informas i melalui  media  sosial.  Representasi  situs  web  pada  media sosial  haruslah  lengkap  dan  seefisien  mungkin.  Masalah tersebut  dapat  diselesaikan  dengan  menambah  metadata Open Graph  Protocol pada setiap halaman.
Masalah  ketiga  adalah  kecepatan  dan  kemudahan  pada proses pembuatan artikel oleh penulis. Saat ini, penulis artike l masih  harus menyampaikan  tulisannya dalam  bentuk file  ke ruang tata usaha atau pengelola.  Hal  ini  akan  memperla ma penerbitan  artikel  dan  mengurangi  jumlah  artikel  yang membutuhkan  waktu  cepat  untuk  diterbitkan  seperti  info lomba  dan  beasiswa.  Masalah  tersebut  dapat  diselesaikan dengan penambahan pengguna contributor pada  situs web. Contributor dapat mengusulkan artikel yang akan dimoderasi oleh administrator  hingga layak  untuk diterbitkan.

## B. Perancangan Arsitek tur Sistem
Pada penelitian  ini  dibuat sebuah perangkat lunak  berupa situs web pada studi kasus web  jurusan Teknik  Informatika yang menggunakan Open Graph Protocol untuk memperb a iki representasi  situs  web  pada  media  sosial.  Penambahan metadata Open Graph  Protocol  menggunakan library  React - Helmet  pada setiap halaman  untuk memperbaiki  representasi situs web di media  sosial.
Situs  web  ini  memungkinkan Reader (pengguna umu m) untuk  melihat  artikel  pada  situs  web,  serta  menyebarkan artikel  pada media  sosial. Situs web ini  juga memungkinka n Contributor (pengguna yang sudah login ) untuk mengusulkan artikel.
Antarmuka situs web akan dibangun menggunakan library React.  Perolehan  dan  penyimpanan  data  menggunakan GraphQL  API  yang  terhubung  dengan  CMS  (Content Management  Sistem)  WordPress  dan  database  MySQL. Editor dan Administrator tetap  menggunakan  CMS WordPress untuk mengelola data situs web. Arsitektur sistem dapat dilihat  pada Gambar  2.

## C. Implementasi
Implementasi  Open  Graph  Protocol  ini  menggunakan bahasa  pemrograman  Javascript  dan  library  React-helme t . Implementasi  dapat dilihat  pada Kode Sumber  1.

## IV. PENGUJIAN DAN EVALUASI
A. Lingk ungan Pengujian
T abel 1. Spesifikasi Lingkungan Pengujian No. Spesifikasi Deskripsi 1 Jenis Perangkat Laptop 2 Merek Perangkat MacBook Pro 2016 13-inch 3 Sistem Operasi macOS Sierra v10.12.1 4 Memori Internal 251 GB 5 RAM 8 GB 6 Kecepatan Internet 6,3 Mbpps

## B. Pengujian Funsionalitas
Pengujian ini dilakukan  untuk menguji  fungsi-fungsi pada aplikasi  berdasarkan  kasus  penggunaan  seperti  meliha t artikel, melihat  daftar  artikel, melihat  daftar  artike l berdasarkan  kategori,  membagikan  artikel,  melihat  daftar usulan artikel,  menambah usulan artikel, memperbarui  usulan artikel,  dan menghapus usulan artikel.  Hasil  dari  pengujian fungsionalitas dapat dilihat  pada Tabel 2.
T abel 2. Pengujian Fungsionalitas
N o Nama Pengujian Fungsionalitas Hasil yang diperoleh 1 Melihat  artikel Aplikasi berhasil menampilkan konten artikel 2 Melihat daftar artikel Aplikasi berhasil menampilkan daftar artikel
3 Melihat daftar artikel berdasarkan kategori Aplikasi berhasil menampilkan daftar artikel berdasarkan kategori yang dipilih 4 Membagikan artikel Aplikasi berhasil membagikan laman artikel di media sosial dengan representasi yang lengkap,
yaitu memiliki judul, deskripsi, URL, dan gambar.
5 Melihat daftar usulan artikel Aplikasi berhasil menampilkan daftar usulan artikel 6 Menambah usulan artikel Aplikasi berhasil menambahkan usulan artikel 7 Memperbarui usulan artikel Aplikasi berhasil memperbarui usulan artikel 8 Menghapus usulan artikel Aplikasi berhasil menghapus usulan artikel
Berdasarkan  hasil  pengujian  fungsionalitas   tersebut, didapatkan  kesimpulan  bahwa  fungsionalitas  situs  web berjalan dengan baik.

## C. Pengujian Representasi
Metode yang digunakan  adalah  menambahkan  tag Open Graph  Protocol  menggunakan  library  React-Helmet.  Tag Open Graph Protocol akan membuat  representasi situs web di media  sosial menjadi  lebih baik.
Pengujian  representasi  pada  media  sosial  ini  dilakuka n untuk  menguji  kelengkapan  informasi  yang ditampilkan  di media  sosial.  Pengujian  dilakukan  dengan  mencantumka n link  URL  web di  media  sosial. Pengujian dikatakan  berhasil ketika  web  memiliki representasi  yang  lengkap  yaitu memiliki  informasi  judul, deskripsi, URL  dan gambar.  Hasil dari  pengujian representasi dapat dilihat  pada Gambar  3  dan Gambar  4.
Gambar 3. Representasi web saat ini (if.its.ac.id)
Gambar 4. Representasi web rancangan (beta.if.its.ac.id).
Berdasarkan perbandingan representasi pada pada Gamb a r 3  dan  Gambar  4,  web  saat  ini  (if.its.ac.id)  tidak  memilik i representasi  sedangkan  web  rancangan  (beta.if.its.ac.id) memiliki  representasi yang lengkap.
Berdasarkan hasil pengujian  representasi  tersebut, didapatkan  kesimpulan  bahwa  penerapan  Open  Grap h Protocol  pada  web  rancangan  (beta.if.its.ac.id)  membua t representasi pada media sosial menjadi  lebih baik.

## D. Pengujian Kecepatan
Metode  yang  digunakan  adalah  Isomorphic  Rendering. Isomorphic  Rendering  berfungsi  agar  server  mengirimka n file HTML  dan CSS terlebih dahulu, sehingga situs web dapat dilihat dengan cepat.
Pengujian  performa  kecepatan  ini  dilakukan  untuk menguji  kecepatan  aplikasi  dalam  menampilkan  konten. Pengujian  ini  dilakukan  dengan cara mengunjungi  halaman pada aplikasi.  Pengujian  ini  menggunakan  aplikasi  Chrome Developer Tools .
Hasil dari pengujian kecepatan dapat dilihat pada Tabel 3 dan Tabel 4.
T abel 3.
Pengujian Waktu Muat Awal Web Saat Ini (if.its.ac.id)
No. Halaman Waktu Muat Awal Web Saat Ini Web Rancangan 1 Beranda 2,71 detik 2,31 detik 2 Beranda 2,46 detik 2,27 detik 3 Beranda 2,33 detik 2,19 detik
1. const max = 3;
2. let count = max;
3. let desc = ‘Web Jurusan Teknik Informatika ITS.’;
4. <Helmet>
5. {props.data && props.data.posts && props.data.posts.map(post => {
6. const { thumbnail, post_title: postTitle } = post;
7. const src = thumbnail && thumbnail.src;
8. if (src) count -= 1;
9. if (count >= 0 && src && postTitle) desc += count < max – 1 ? `, ${max – count}. ${postTitle}` : ` Berita terbaru: ${max – count}. ${postTitle}`;
10. const width = thumbnail && thumbnail.width;
11. const height = thumbnail && thumbnail.height;
12. return [
13. count >= 0 && src ? <meta key={count} property=”og:image” content={src} /> : null,
14. count >= 0 && src && width ? <meta key={count} property=”og:image:width” content={width} /> : null,
15. count >= 0 && src && height ? <meta key={count} property=”og:image:height” content={height} /> : null,
16. ];
17. })}
18. <meta property=”og:description” content={desc} /> 19. </Helmet>
Kode Sumber 1 Implementasi Open Graph Protocol
4 Beranda 2,45 detik 2,33 detik 5 Beranda 2,47 detik 2,32 detik 6 Daftar Artikel kategori akademik 2,21 detik 2,49 detik 7 Daftar Artikel kategori akademik 2,17 detik 2,39 detik 8 Daftar Artikel kategori akademik 2,30 detik 2,5 detik 9 Daftar Artikel kategori akademik 2,33 detik 2,65 detik 10 Daftar Artikel kategori akademik 2,44 detik 2,69 detik 11 Artikel 2,05 detik 2,22 detik 12 Artikel 2,19 detik 2,4 detik 13 Artikel 2,36 detik 2,31 detik 14 Artikel 2,62 detik 2,35 detik 15 Artikel 2,20 detik 2,11 detik Rata-rata 2,35 detik 2,37 detik T abel 4. Pengujian Waktu Respon Web Saat Ini (if.its.ac.id) No. Perubahan Halaman Waktu Respon Web Saat Ini Web Rancangan 1 Beranda ke daftar artikel kategori akademik 1,93 detik 1,93 detik 2 Beranda ke daftar artikel kategori akademik 1,99 detik 1,99 detik 3 Beranda ke daftar artikel kategori akademik 2,22 detik 2,22 detik 4 Beranda ke daftar artikel kategori akademik 1,86 detik 1,86 detik 5 Beranda ke daftar artikel kategori akademik 2,59 detik 2,59 detik 6 Daftar artikel kategori akademik ke artikel 2,42 detik 2,42 detik 7 Daftar artikel kategori akademik ke artikel 2,34 detik 2,34 detik 8 Daftar artikel kategori akademik ke artikel 2,5 detik 2,5 detik 9 Daftar artikel kategori akademik ke artikel 2,1 detik 2,1 detik 10 Daftar artikel kategori akademik ke artikel 2,56 detik 2,56 detik Rata-rata 2,25 detik 0,53 detik
Berdasarkan  perbandingan  kecepatan  waktu  muat  awa l pada  Tabel  3,  web  saat  ini  dan  web  rancangan  memilik i kecepatan  waktu  muat  awal  yang  sama  yaitu  sekitar  2,35 detik. Berdasarkan perbandingan waktu respon pada Tabel 4, web rancangan memiliki  kecepatan waktu respon yang lebih cepat dibandingkan web  saat ini dengan kenaikan  kecepatan sebagai berikut.
𝑘𝑒𝑛𝑎𝑖𝑘𝑎𝑛  𝑘𝑒𝑐𝑒𝑝𝑎𝑡𝑎𝑛 = 𝑘𝑒𝑐𝑒𝑝𝑎𝑡𝑎𝑛  𝑤𝑒𝑏 𝑠𝑎𝑎𝑡 𝑖𝑛𝑖 𝑘𝑒𝑐𝑒𝑝𝑎𝑡𝑎𝑛  𝑤𝑒𝑏 𝑟𝑎𝑛𝑐𝑎𝑛𝑔𝑎𝑛
𝑘𝑒𝑛𝑎𝑖𝑘𝑎𝑛  𝑘𝑒𝑐𝑒𝑝𝑎𝑡𝑎𝑛 = 2,25 0,53
𝑘𝑒𝑛𝑎𝑖𝑘𝑎𝑛  𝑘𝑒𝑐𝑒𝑝𝑎𝑡𝑎𝑛 = 424 ,5%
Berdasarkan hasil pengujian tersebut,  didapatkan kesimpulan bahwa  penerapan Isomorphic  Rendering membuat  waktu respon web menjadi  lebih cepat.

## V. KESIMPULAN/ RINGKASAN
Dari  hasil  uji  coba  yang  telah  dilakukan,  dapat  ditarik kesimpulan  antara lain:
1) Situs web  kustom  yang cepat dapat didapatkan dengan Isomorphic Rendering.  Web rancangan (beta.if.its.ac.id )
yang  menggunakan  Isomorphic  Rendering  memilik i waktu  respon yang lebih  cepat dibandingkan situs web saat  ini  (if.its.ac.id)  yang  menggunakan  Server  Side Rendering.
2) Situs  web  kustom  yang  menggunakan  Open  Grap h Protocol  memiliki  representasi yang  lengkap  di  med ia sosial. Pemasangan Open Graph  Protocol menggunakan library  React-Helmet.
3) Situs web kustom memiliki  fungsionalitas yaitu meliha t artikel,  melihat  daftar  artikel,  melihat  daftar  artike l berdasarkan  kategori,  dan  membagikan  artikel  untuk aktor reader.  Juga terdapat fungsionalitas melihat  daftar usulan artikel,  menambah  usulan artikel,  memperbaru i usulan  artikel,  menghapus  usulan  artikel  untuk  aktor contributor.
Saran  yang diberikan  untuk penelitian  ini  adalah sebagai berikut:
1) Penggunaan CSS Modules yang lebih baik lagi sehingga waktu  muat  menjadi  lebih  cepat  dan  pengembangan menjadi  lebih mudah.

## DAFTAR PUSTAKA
[1] “Kustom,”
[Online]. Available: http://www.yourdictionary.com/custom-made. [Diakses 14 12 2017]. [2] PT Proweb Indonesia, [Online].
Available: http://www.proweb.co.id/articles/web_design/website_adalah.html. [Diakses 27 7 2017].
[3] L. B. Chilton, “Why We Customize the Web”.
[4] S. Brockmeier, “Custom Web Design vs Website Template,” 9 1 2018. [Online]. Available: https://mayecreate.com/blog/custom-web-design- vs-website-template/.
[5] “Departemen  Informatika,”  [Online].  Available:  http://if.its.ac.id/. [Diakses 13 12 2017].
[6] H. Hill, “Content Management White Paper”.
[7] Wordpress,
“About,”
[Online]. Available: https://wordpress.org/about/. [Diakses 26 11 2017]. [8] “Wordpress,” [Online]. Available:
https://en.wikipedia.org/wiki/WordPress. [Diakses 26 11 2017]. [9] Pantheon, “Decoupled CMS,” [Online]. Available: https://pantheon.io/decoupled-cms. [Diakses 15 12 2017].
[10] Facebook, [Online]. Available: http://ogp.me/. [Diakses 27 8 2017].
[11] “Open Graph,” 9 1 2018. [Online]. Available: https://www.yakaferci.io/open-graph/.
[12] I.  Grigorik,  “Rendering T ree Construction,” 13 12 2017. [Online]. Available: https://developers.google.com/web/fundamentals/performance/critical -rendering-path/render-tree-construction.
[13] A.  Mardan,  “Isomorphic  Rendering,”  [Online].  Available: https://medium.com/capital-one-developers/why-everyone-is-talking- about -isomorphic-universal-javascript-and-why-it-matters- 38c07c87905. [Diakses 11 12 2017].
[14] Facebook,  [Online].  Available:  https://reactjs.org/.  [Diakses  27  8 2017].
[15] Facebook,  [Online].  Available:  http://graphql.org/.  [Diakses  26  11 2017].
[16] learnnowonline,  “Object-Relational  Mapping,”  [Online].  Available: http://blogs.learnnowonline.com/2012/08/28/4 -benefits-of-object- relational-mapping-orm/. [Diakses 26 11 2017].
[17] Sequelize  Inc.,  [Online].  Available:  http://docs.sequelizejs.com/. [Diakses 26 11 2017].
[18] MySQL, [Online]. Available: https://mysql.com. [Diakses 16 11 2017].
[19] Node.js  Foundation,  [Online].  Available:  htt ps://nodejs.org/en/. [Diakses 27 7 2017].