Jurnal Informatika Teknologi dan Sains (JINTEKS) E-ISSN : 2686-3359 Submit July 02, 2024 | Revised July 12, 2024 | Accepted July 15, 2024

## OPTIMASI RESPONSIVITAS WEB DENGAN PENDEKATAN MOBILE-FIRST DESIGN
Insan Kamil Nurhikmat 1 , Asep Id Hadiana 2* , Fatan Kasyidi 3 1,2,3 Informatika, Universitas Jenderal Achmad Yani Cimahi email : asep.hadiana@lecture.unjani.ac.id 2*
Abstrak: Dengan pertumbuhan pesat penggunaan perangkat mobile untuk mengakses internet, pendekatan desain web telah bergeser ke desain responsif dan mobile-first. Penelitian ini bertujuan mengoptimalkan pengalaman pengguna web Puskesmas melalui  mobile-first  design.  Rumusan  masalah  mencakup  strategi  peningkatan  performa  dan  efisiensi  web,  pengukuran responsivitas,  dan  optimalisasi  pengalaman  pengguna.  Metode  penelitian  mencakup  tinjauan  literatur,  analisis  kebutuhan pengguna,  desain  prototipe,  pengujian,  serta  analisis  data.  Hasil  penelitian  menunjukkan  metode  mobile-first  design  efektif meningkatkan  performa  situs  web  Puskesmas,  dengan  skor  rata-rata  90  pada  Pagespeed  Insight  dan  Lighthouse  setelah optimasi, dibandingkan skor 79 sebelum optimasi. Optimasi dilakukan melalui efisiensi gambar, penghapusan animasi yang tidak  penting,  perubahan  ukuran  viewport,  dan  implementasi  lazy  loading.  Penelitian  ini  diharapkan  meningkatkan responsivitas web Puskesmas pada perangkat mobile, memberikan manfaat bagi pengembang dan pengguna situs web dalam mendapatkan pengalaman yang lebih baik dan optimal.
Kata Kunci : Mobile-first design , Desain responsif, Pengalaman pengguna, Performa situs web
Abstract: With the rapid growth in mobile internet use, web design has shifted towards responsive and mobile-first approaches. This research aims to optimize the user experience of the Puskesmas website through a mobile-first design. The study addresses strategies  to  improve  performance  and  efficiency,  measure  responsiveness,  and  optimize  user  experience.  Methods  include literature  review,  user  needs  analysis,  prototype  design,  testing,  data  collection  and  analysis,  and  report  preparation.  The research found that mobile-first design effectively enhances the Puskesmas website's performance, achieving an average score of 90 on Pagespeed Insight and Lighthouse, compared to 79 for the unoptimized site. Optimization involved image efficiency, removal of unnecessary animations, viewport size adjustments, and lazy loading of images. The results are expected to enhance the responsiveness of the Puskesmas website on mobile devices, benefiting both developers and users by providing a better, more optimal experience.

## Keywords : Mobile-first design, Responsive design, User experience, Website performance

## PENDAHULUAN
Dengan  adanya  pertumbuhan  pesat  dalam  penggunaan  perangkat  mobile  untuk  mengakses  internet, pendekatan desain web telah mengalami pergeseran yang signifikan. Desain responsif telah menjadi kunci dalam pengembangan web untuk memastikan bahwa situs web dapat diakses dan digunakan dengan mudah di berbagai perangkat  dan  ukuran  layar.  Pendekatan  mobile  first  Design  mengutamakan  pengguna  mobile  sebagai  target utama, sebelum kemudian diperluas ke penggunaan komputasi desktop konvensional[1].
Mobile-first design bertujuan untuk  memberikan pengalaman pengguna yang optimal bagi  mereka yang mengakses situs web melalui perangkat mobile. Dengan pertumbuhan penggunaan perangkat mobile sebagai akses utama  ke  internet,  mobile-first  design  menjamin  pengalaman  yang  lancar  dan  mudah  dipahami  bagi  pengguna perangkat  mobile.  Prinsip  desain  ini  melibatkan  penyederhanaan  tata  letak,  penerapan  teknik  desain  responsif untuk  memastikan tampilan yang optimal di  berbagai  ukuran layar, serta  fokus pada konten dan fungsionalitas yang paling utama[2].
Pada  penelitian  sebelumnya,  Transformasi  lanskap  komputasi  mobile  menuntut  solusi  inovatif  untuk mendukung aplikasi yang memerlukan responsivitas waktu nyata. Keterbatasan infrastruktur jaringan saat ini dan tantangan dalam menangani lonjakan permintaan data memerlukan pendekatan baru dalam desain sistem web yang responsif[3].  Penelitian  tentang  mobile-responsive  registries  mengungkapkan  bahwa  pendekatan  mobile-first mungkin lebih berhasil  dalam populasi  tertentu,  terutama ketika menyangkut  partisipasi dalam studi  klinis dan penelitian. Ini menunjukkan potensi yang lebih luas dari mobile-first design dalam meningkatkan pendaftaran dan partisipasi  dalam  berbagai  platform  web[4].  Dalam  konteks  Game,  implementasi  pendekatan  Mobile  First memungkinkan akses melalui perangkat mobile dalam lingkungan kelas dengan menggunakan Responsive Web Design  (RWD).    Pendekatan  ini  diprioritaskan  untuk  meningkatkan  efisiensi  dalam  pengembangan  dan pemeliharaan,  sambil  mempertahankan  kualitas  informasi,  fungsionalitas  situs,  dan  kepuasan  pengguna  di berbagai perangkat[5]. Selanjutnya, pada penelitian[6]dilakukan untuk merancang dan mengembangkan aplikasi berbasis web yang dapat memenuhi kebutuhan IDI Cabang Kota Salatiga. Tujuan utama dari aplikasi ini adalah memberikan layanan pusat informasi, update pengetahuan, dan forum komunikasi yang dapat diakses oleh seluruh
Jurnal Informatika Teknologi dan Sains (JINTEKS) E-ISSN : 2686-3359 Submit July 02, 2024 | Revised July 12, 2024 | Accepted July 15, 2024
anggota IDI Cabang Kota Salatiga dengan berbagai  jenis perangkat,  seperti laptop, handphone, tablet,  dan lain sebagainya.  Penggunaan  teknik  Responsif  Web  Design  menjadi  sangat  penting.  Responsif  Web  Design memungkinkan  tampilan  dan  fungsionalitas  aplikasi  untuk  menyesuaikan  diri  dengan  berbagai  jenis  layar perangkat, sehingga memberikan pengalaman pengguna yang konsisten dan optimal.
Pada  puskesmas,  implementasi  pendekatan  mobile-first  design  sangat  relevan  untuk  meningkatkan aksesibilitas  dan  pengalaman  pengguna  dalam  mencari  informasi  kesehatan  dan  layanan  medis.  Puskesmas, sebagai  penyedia  layanan  kesehatan  primer  di  tingkat  masyarakat,  harus  memastikan  bahwa  informasi  mereka dapat diakses dengan mudah oleh semua individu, termasuk mereka yang menggunakan perangkat mobile. Dengan menggunakan  pendekatan  mobile-first  design,  puskesmas  dapat  memastikan  bahwa  layanan  kesehatan  mereka dapat  diakses  oleh  semua  individu,  termasuk  mereka  yang  memiliki  akses  terbatas  ke  komputer  desktop  tetapi mengandalkan  perangkat  mobile  untuk  mengakses  internet.  Ini  akan  membantu  meningkatkan  aksesibilitas layanan  kesehatan  dan  memperluas  jangkauan  puskesmas  dalam  menyediakan  informasi  kesehatan  kepada masyarakat.
Dalam  mengoptimalkan  pengalaman  pengguna  web  Puskesmas  melalui  pendekatan  mobile-first  design, beberapa  indikator  digunakan  untuk  mengukur  keberhasilannya.  Pertama,  tingkat  aksesibilitas  situs  web Puskesmas  dari  berbagai  perangkat,  termasuk  mobile,  menunjukkan  kemudahan  akses  tanpa  hambatan. Selanjutnya,  tingkat  partisipasi  pengguna  dalam  mencari  informasi  kesehatan  dan  layanan  medis  diukur  dari jumlah dan durasi kunjungan, serta interaksi pengguna. Konsistensi pengalaman pengguna di berbagai perangkat, dan waktu muat situs web yang cepat pada perangkat mobile juga menjadi fokus evaluasi. Dengan memantau dan mengevaluasi indikator-indikator ini.
Berdasarkan  penjelasan  yang  telah  diuraikan  diatas,  mengingat  pentingnya  desain  responsif,  maka penelitian  ini  dilakukan  untuk  mengoptimalkan  pengalaman  pengguna  web  Puskesmas  melalui  pendekatan mobile-first design, mengeksplorasi teknik dan strategi terbaru untuk merancang situs web yang tidak hanya estetis menyenangkan tetapi juga berkinerja tinggi dan mudah diakses di semua perangkat.

## TINJAUAN PUSTAKA
Pada  penelitian  sebelumnya[6],  merancang  dan  membangun  aplikasi  berbasis  web  untuk  meningkatkan komunikasi  dan  kolaborasi  antar  anggota  IDI  Kota  Salatiga.  Aplikasi  ini  dirancang  untuk  menyediakan  pusat informasi,  pembaruan  pengetahuan,  dan  forum  komunikasi.  Agar  dapat  diakses  melalui  berbagai  perangkat, aplikasi ini dikembangkan menggunakan teknik Desain Web Responsif.
Lalu pada penelitian [7], Website Toko Kerja sebelumnya mengalami masalah performa yang signifikan, yang menyebabkan pengunjung meninggalkan situs tersebut karena waktu loading yang lama. Untuk mengatasi masalah  ini,  dilakukan  pengujian  dan  analisis  menggunakan  Google  PageSpeed  Insights.  Google  PageSpeed Insights adalah alat yang dikembangkan oleh Google untuk menguji performa website, baik pada desktop maupun perangkat mobile, serta memberikan saran untuk meningkatkan performa, aksesibilitas, dan SEO. Hasil analisis awal menunjukkan bahwa skor performa website Toko Kerja berada di bawah standar yang ditetapkan oleh Google. Berdasarkan saran yang diberikan oleh Google PageSpeed Insights, beberapa langkah optimasi dilakukan untuk meningkatkan  performa,  aksesibilitas,  dan  SEO  website  Toko  Kerja.  Langkah-langkah  optimasi  meliputi mengurangi  ukuran  gambar,  mengaktifkan  kompresi  teks,  memanfaatkan  caching  browser,  mengurangi  jumlah permintaan HTTP, dan mengoptimalkan rendering.

## Web
Website  adalah  sekumpulan  halaman  yang  berisi  informasi  digital.  Jenis  informasi  dapat  berupa  teks, gambar,  audio,  video,  animasi,  atau  kombinasi  dari  semua  jenis  tersebut.  Selama  ada  koneksi  internet,  banyak orang di seluruh dunia dapat mengakses website. Website terdiri dari tiga bagian yang saling melengkapi: kata- kata, foto, dan kode [8].
Untuk mengakses website, digunakan perangkat lunak yang disebut browser, yang menggunakan protokol HTTP (Hyper Text Transfer Protocol). Beberapa contoh browser populer saat ini adalah Internet Explorer, Google Chrome, Mozilla Firefox, Opera, dan Safari. Browser juga dikenal sebagai perambah, adalah aplikasi yang dapat menjalankan  dokumen-dokumen  web  dengan  menerjemahkannya.  Proses  ini  dilakukan  oleh  komponen  yang disebut  web  engine  yang  ada  di  dalam  aplikasi  browser.  Semua  dokumen  web  ditampilkan  setelah diterjemahkan[9].

## Aplikasi Web
Aplikasi web merupakan aplikasi yang disimpan dan dijalankan di lingkungan webserver. Ketika pengguna melakukan  permintaan  melalui  aplikasi  klien  (web  browser),  aplikasi  web  akan  memberikan  respons  terhadap permintaan  tersebut  dan  mengembalikan  hasilnya  kepada  pengguna  melalui  aplikasi  web.  Halaman  yang
Jurnal Informatika Teknologi dan Sains (JINTEKS) E-ISSN : 2686-3359 Submit July 02, 2024 | Revised July 12, 2024 | Accepted July 15, 2024
ditampilkan di layar web browser dapat memiliki sifat yang dinamis, tergantung pada nilai data atau parameter yang dimasukkan oleh pengguna[10].
Aplikasi  web  umumnya  dikembangkan  menggunakan  struktur  HTML  (Hypertext  Markup  Language) sebagai dasar, yang kemudian diperkaya dengan penggunaan bahasa pemrograman seperti PHP dan Javascript. Selain itu, tampilan situs dapat ditingkatkan secara estetis dengan penerapan CSS (Cascading Style Sheets)[11].

## Optimasi Web
Optimasi  web  adalah  serangkaian  proses  yang  dilakukan  secara  sistematis  dan  bertujuan  untuk meningkatkan volume serta kualitas trafik kunjungan website. Tujuannya  adalah untuk  membuat  website lebih mudah  ditemukan  oleh  pengguna  yang  mencari  informasi  atau  produk/jasa  yang  ditawarkan  oleh  website tersebut[12].

## Responsive Web Design
Responsive web design adalah pendekatan desain web yang membuat halaman web dapat merender dengan baik di semua ukuran layar dan resolusi, sambil memastikan pengalaman pengguna yang baik. Sebelumnya, situs web umumnya memiliki lebar tetap, yang berarti desain situs web tersebut memiliki lebar yang sama tidak peduli ukuran layar yang digunakan. Namun, dengan munculnya smartphone, pendekatan ini tidak efektif karena situs web terlihat sangat kecil di layar kecil dan pengguna harus terus-menerus memperbesar dan memperkecil untuk membaca. Kemudian, situs web mobile dibuat secara terpisah dari situs web utama, yang seringkali hanya berisi sebagian kecil dari konten dan fungsionalitas yang tersedia di situs web reguler. Seiring dengan munculnya lebih banyak perangkat, desainer menyadari bahwa tidak praktis, bahkan tidak mungkin, untuk membuat beberapa situs web untuk setiap ukuran layar yang berbeda. Konsep desain responsif diperkenalkan sebagai cara untuk membuat situs web yang dapat menyesuaikan dengan lebar layar perangkat dan menampilkan konten situs dengan cara yang sesuai untuk ukuran layar tersebut[13].
Manfaat dari desain web responsif sangat banyak. Desain web responsif berfokus pada konten; membuat halaman web tidak tergantung pada perangkat. Secara jangka panjang, ini akan menghemat waktu dan uang, karena lebih mudah untuk dikelola. Selain itu, desain web responsif memberikan pengalaman pengguna dan kegunaan yang lebih baik dan konsisten pada situs web, serta membuatnya lebih mudah diadaptasi[14].

## Mobile First Design
Mobile first design merupakan suatu pendekatan dalam desain responsif yang memberikan prioritas utama pada  perangkat  mobile.  Pendektan  ini  menjadi  semakin  populer  dalam  era  digital  saat  ini  karena  peningkatan jumlah orang yang menggunakan perangkat mobile untuk mengakses internet. Dengan menerapkan konsep mobile first  design,  situs  web  dapat  diakses  dengan  lebih  mudah  dan  memberikan  pengalaman  pengguna  yang  lebih optimal[15].
Faktanya pendekatan Mobile First Design memiliki sejumlah manfaat yang cukup signifikan. Banyak situs web terkemuka di  dunia saat  ini juga menerapkan filosofi desain ini. Eric Schmidt,  pemimpin Google, bahkan menyarankan agar "apa pun yang Anda lakukan, lakukanlah mobile terlebih dahulu." Kate Aronowitz, Direktur Desain  Facebook,  mengungkapkan  bahwa  mereka  mulai  mengadopsi  pendekatan  mobile  first  dan  kemudian mengarah ke pengalaman web untuk banyak produk mereka. Dia menekankan bahwa desainer yang fokus pada ponsel dapat mengatasi kendala dengan lebih baik, dan pengalaman ini membantu mereka memahami lebih baik cara  mendesain  ulang  untuk  desktop.  Kevin  Lynch,  CTO  Adobe,  juga  mengakui  pentingnya  bergeser  untuk memikirkan mobile terlebih dahulu, menyamakan perubahan ini dengan revolusi komputasi personal. Bagi banyak organisasi, pendekatan mobile first merupakan suatu langkah besar yang memberikan wawasan berharga dalam proses desain ulang untuk platform desktop[16].

## PageSpeed Insights
PageSpeed Insights adalah alat digunakan untuk mengukur kecepatan loading sebuah blog atau website, memungkinkan  untuk  mengetahui  seberapa  cepat  blog  atau  website  tersebut  diakses  melalui  perangkat  seluler maupun desktop[17].

## LightHouse
Lighthouse adalah alat open source otomatis yang digunakan untuk meningkatkan kualitas aplikasi web. Alat ini melakukan berbagai pengujian terhadap halaman web dan menghasilkan laporan. Laporan ini memberikan skor untuk kinerja, aksesibilitas, praktik terbaik, SEO, dan aplikasi web progresif[18].

## System Usability Scale (SUS)
System  usabillity  scale  merupakan  Salah  satu  metode  yang  dapat  digunakan  untuk  melakukan  evaluasi tingkat kegunaan suatu sistem atau peralatan. SUS adalah salah satu metode uji pengguna yang menyediakan alat
Jurnal Informatika Teknologi dan Sains (JINTEKS) E-ISSN : 2686-3359 Submit July 02, 2024 | Revised July 12, 2024 | Accepted July 15, 2024
ukur yang "quick and dirty" yang dapat diandalkan. Metode uji pengguna ini diperkenalkan oleh John Brooke pada tahun 1986 dan dapat digunakan untuk melakukan evaluasi berbagai jenis produk ataupun layanan, termasuk di dalamnya hardware, software, perangkat mobile, website, dan aplikasi[19].

## METODE
Berikut  adalah  alur  metode  penelitian  yang  dilakukan  untuk  mengoptimasi  responsivitas  web  dengan metode mobile-first design dapat dilihat dalam Gambar 1.
Gambar 1. Alur Penelitian

## Tinjauan Literatur
Melakukan  studi  komprehensif  terhadap  literatur  yang  ada  mengenai  mobile-first  design,  responsivitas web, dan best practices dalam pengembangan web yang responsif. Mengidentifikasi gap pengetahuan dan praktik terbaik yang berlaku dalam desain web responsif.

## Tahap Analisis Kebutuhan Perangkat Lunak
Pada penelitian ini tahap pertama yaitu mengumpulkan data mengenai preferensi dan kebutuhan pengguna melalui survei dan wawancara dengan meninjau langsung pengguna Website Puskesmas di wilayah Kabupaten Bandung Barat untuk mendapatkan wawasan mendalam mengenai faktor-faktor yang mempengaruhi pengalaman pengguna  pada  perangkat  mobile.  Analisis  ini  bertujuan  untuk  memahami  kebutuhan  spesifik  pengguna, meningkatkan  interaksi,  dan  memastikan  kenyamanan  serta  kepuasan  dalam  menggunakan  layanan  kesehatan digital di perangkat mobile.

## Tahap Desain dan Pengembangan Prototipe
Tahap selanjutnya merancang desain serta mengembangkan prototipe website dengan menerapkan prinsip- prinsip mobile-first design. Peneliti berfokus merancang prototipe diprioritaskan design perangkat mobile untuk memastikan  antarmuka  yang  responsif  dan  user-friendly  pada  layar  kecil.  Kemudian  di  implementasikan menggunakan teknologi web standar seperti HTML5, CSS3, Bootstrap dan JavaScript.

## Tahap Pengujian dan Evaluasi
Jurnal Informatika Teknologi dan Sains (JINTEKS) E-ISSN : 2686-3359 Submit July 02, 2024 | Revised July 12, 2024 | Accepted July 15, 2024
Agustus 2024
Tahap  pengujian  dan  evaluasi  merupakan  tahapan  dimana  sistem  yang  sudah  dibuat  akan  dinilai berdasarkan  hasil  pengujian  dengan  melakukan  pengujian  responsivitas  menggunakan  alat  seperti  Page    Speed Insights  dan  Lighthouse  untuk  mengukur  aspek  teknis  seperti  waktu  muat,  interaktivitas,  dan  stabilitas  visual. Menerapkan  pengujian  A/B  untuk  mengevaluasi  versi  desain  yang  berbeda  terhadap  kelompok  pengguna. Melakukan pengujian pengguna secara langsung atau melalui platform pengujian pengguna online untuk menilai aspek pengalaman pengguna dari prototipe yang dikembangkan.

## Tahap Pengumpulan dan Analisis Data
Tahap Pengumpulan dan Analisis Data Menyusun temuan dari tinjauan literatur, pengujian, dan analisis data ke dalam laporan penelitian. Tahap pengumpulan data ini dilakukan dengan wawancara langsung kepada user dengan  menggunakan  pengambilan  sampel  kuisioner  System  Usability  Scale.  System  Usability  Scale  (SUS) adalah kuesioner yang digunakan untuk menilai kegunaan sebuah sistem dari sudut pandang subjektif pengguna, yang terdiri dari 10 pernyataan[20].
Berikut ini adalah daftar 10 pernyataann yang terdapat dalam kuesioner SUS.
Tabel 1. Pernyataan Kuisiner SUS
NO Pernyataaan
1 Saya berpikir bahwa saya ingin menggunakan situs web ini secara sering.
2 Saya merasa bahwa situs web ini terlalu rumit.
3 Saya merasa bahwa situs web ini mudah digunakan.
4 Saya berpikir bahwa saya akan membutuhkan bantuan teknis untuk dapat menggunakan situs web ini.
5 Saya merasa bahwa berbagai fungsi di situs web ini terintegrasi dengan baik.
6 Saya merasa bahwa ada terlalu banyak ketidaksesuaian di situs web ini.
7 Saya akan membayangkan bahwa kebanyakan orang akan belajar menggunakan situs web ini dengan cepat.
8 Saya merasa website ini sangat sulit digunakan.
9 Saya merasa sangat percaya diri ketika menggunakan website ini.
10 Saya harus mempelajari banyak hal baru sebelum bisa menggunakan website ini dengan baik.
Penilaian menggunakan SUS memiliki ketentuan sebagai berikut[21].
1. Untuk pernyataan bernomor ganjil, kurangi nilai yang diperoleh dengan angka 1.
2. Untuk pernyataan bernomor genap, kurangi angka 5 dengan nilai yang diperoleh.
3. Jumlahkan semua nilai yang telah disesuaikan dan kalikan dengan 2,5.
Rumus untuk mencari rata-rata nilai SUS adalah:
𝑥̅ =   ∑ 𝑥 𝑛 (1)
𝑥̅ = Skor rata-rata ∑ 𝑥 = Jumlah skor SUS 𝑛 = Jumlah responden
Tabel 2. Grade SUS Score SUS Score Grade Adjective Rating >80.3 A Excellent 68-80.3 B Good 68 C Okay 51-68 D Poor <51 F Awful
Setelah hasil pengujian keluar maka selanjutnya membuat rekomendasi berdasarkan hasil penelitian untuk pengembangan web responsif di masa depan.
Jurnal Informatika Teknologi dan Sains (JINTEKS) E-ISSN : 2686-3359 Submit July 02, 2024 | Revised July 12, 2024 | Accepted July 15, 2024

## HASIL DAN PEMBAHASAN

## Hasil Pengembangan Prototipe
Pada Penelitian ini, pengembangan prtotipe diimplementasikan dengan memperbaiki prototipe yang sudah ada sebelumnya yaitu situs web puskesmas belum dioptimasi yang dikembangkan menjadi situs web puskesmas sudah dioptimasi sebagai berikut :
Situs web prototipe Puskesmas Belum dioptimasi telah dikembangkan menggunakan CodeIgniter 3 dan Bootstrap sebagai framework, dengan HTML, CSS dan JavaScript.
Gambar 2. Tampilan web belum dioptimasi
Situs web prototipe Puskesmas yang sudah dioptimasi dikembangkan menggunakan framework yang sama dengan situs web belum dioptimasi, yaitu CodeIgniter 3, Bootstrap, HTML, CSS dan JavaScript. Tujuannya adalah untuk  memastikan  responsivitas  situs  serta  meningkatkan  waktu  muat  halaman  pada  perangkat  mobile. Penyesuaian dilakukan dengan mengubah viewport menjadi relatif terhadap ukuran perangkat mobile, sehingga konten situs dapat diakses dengan rapi sesuai dengan ukuran perangkat. Selain itu, animasi yang tidak penting, seperti animasi loading, kode di hapus pada situs web yang sudah teroptimasi, konten diatur agar dimuat secara lazy loading, dan gambar diubah serta dikompres dari format JPG/PNG menjadi WEBP, serta menghapus CSS dan Javascript yang tidak digunakan untuk efisiensi yang lebih tinggi dan waktu muat yang lebih cepat.
Jurnal Informatika Teknologi dan Sains (JINTEKS) E-ISSN : 2686-3359 Submit July 02, 2024 | Revised July 12, 2024 | Accepted July 15, 2024

## Gambar 3. Tampilan web sudah dioptimasi

## Pengujian Performa
Setelah sistem dimplementasikan   tahap    selanjutnya   yaitu    melakukan pengujian    performa terhadap sistem   aplikasi   berbasis website yang telah dibangun. Pengujian performa dilakukan dengan cara menghosting kedua  situs  web  tersebut  untuk  menilai  skor  performa  dan  mengukur  responsivitas  pada  perangkat  mobile. Pengujian ini dilakukan dengan dua alat ukur yaitu Google PageSpeed Insight dan Google Lighthouse.
a. Pengujian performa situs web Puskesmas belum dioptimasi menggunakan Google PageSpeed Insight
Gambar 4. Hasil pengujian PSI web belum dioptimasi
b. Pengujian performa situs web Puskesmas belum dioptimasi menggunakan Google Lighthouse
Gambar 5. Hasil pengujian Lighthouse web belum dioptimasi
Pengujian  performa  situs  web  puskesmas  belum  dioptimasi  dilakukan  menggunakan  alat  Google PageSpeed Insight dan Google Lighthouse, yang khusus untuk pengujian perangkat mobile. Hasil tes menunjukkan bahwa metrik seperti  performa, aksesibilitas, dan praktik terbaik  tidak memuaskan dan tidak responsif.  Hal  ini disebabkan oleh faktor-faktor seperti waktu muat yang lama, optimasi sumber yang tidak optimal, optimasi sumber gambar yang kurang efektif, serta tidak memenuhi praktik terbaik yang mempengaruhi skor pengujian.
c. Pengujian performa situs web Puskesmas sudah dioptimasi menggunakan Google PageSpeed Insight
Jurnal Informatika Teknologi dan Sains (JINTEKS) E-ISSN : 2686-3359 Submit July 02, 2024 | Revised July 12, 2024 | Accepted July 15, 2024
d. Pengujian performa situs web Puskesmas sudah dioptimasi menggunakan Google Lighthouse

## Gambar 7. Hasil pengujian Lighthouse web sudah dioptimasi
Kemudian  utuk  pengujian  performa  situs  web  puskesmas  sudah  dioptimasi  sama  seperti  pengujian sebelumnya yang dilakukan menggunakan alat Google PageSpeed Insight dan Google Lighthouse, yang khusus untuk  pengujian  perangkat  mobile.  Hasil  tes  menunjukkan  bahwa  metrik  seperti  performa,  aksesibilitas,  dan praktik  terbaik  memuaskan  dan  responsif.  Hal  ini  disebabkan  karena  faktor-faktor  seperti  waktu  muat  yang optimal, optimasi sumber yang efektif, optimasi sumber gambar yang baik, serta penerapan praktik terbaik yang telah dioptimasi.
Dalam membandingkan hasil pengujian dua website, hasil menunjukkan peningkatan yang signifikan pada semua metrik yang diukur oleh PageSpeed Insights dan  Lighthouse dapat dilihat pada table.
Tabel 3. Pengujian PageSpeed Insights No Metrik Web Puskesmas (Sebelum Optimasi) Web Puskesmas (sesudah Optimasi) 1 Performa 48 90 2 Aksesibilitas 81 95 3 Praktik Terbaik 86 96 4 SEO 100 100 Tabel 4. Pengujian Lighthouse No Metrik Web Puskesmas (Sebelum Optimasi) Web Puskesmas (sesudah Optimasi) 1 Performa 48 92 2 Aksesibilitas 81 95 3 Praktik Terbaik 86 96 4 SEO 100 100
Situs  web  Puskesmas  yang  telah  dioptimasi  menunjukkan  peningkatan  signifikan  dalam  skor  metrik kinerja, meningkat dari kategori "rata-rata" ke "terbaik". Penerapan desain responsif dan optimasi untuk pengguna dengan  berbagai  perangkat  mobile  juga  meningkatkan  aksesibilitas  dan  praktik  terbaik.  Meskipun  SEO sebelumnya sudah baik, tidak ada peningkatan yang signifikan, menunjukkan bahwa situs web Puskesmas yang responsif lebih dioptimalkan untuk mesin pencari dan sesuai dengan standar web modern.

## Pengujian Pengguna
Pada pengujian pengguna, dilakukan evaluasi dengan menggunakan System Usability Scale (SUS). Peneliti mengadakan survei kuesioner yang terdiri dari 10 pernyataan dan melibatkan 50 responden. Pengujian dilakukan dalam  dua  skema.  Pengujian  pertama  menggunakan  kuesioner  untuk  situs  web  puskesmas  belum  dioptimasi, sedangkan pengujian kedua untuk situs web puskesmas sudah dioptimasi. Berikut adalah hasil skor yang dapat dilihat dalam tabel.
Tabel 5. Hasil kuisioner web belum di optimasi Responden Skor Hasil Hitung Jumlah Nilai x 2.5 R1 23 73 R2 34 58 R3 28 85 R4 23 70 R5 24 58 R6 30 60 R7 16 75 R8 20 40
Jurnal Informatika Teknologi dan Sains (JINTEKS) E-ISSN : 2686-3359 Submit July 02, 2024 | Revised July 12, 2024 | Accepted July 15, 2024
Hal. 476-485 Vol. 6;  No. 3 Agustus 2024
… … … R50 20 53 Skor Rata-rata 59,75
Pada  pengujian  pertama,  nilai  rata-rata  yang  diperoleh  untuk  skor  SUS  situs  web  Puskesmas  belum dioptimasi adalah 59,75. Dengan demikian, kita dapat menginterpretasikan data tersebut menggunakan hasil grade interpretasi hasil. Untuk interpretasi lebih lanjut, dapat dilihat pada table  grade di bawah ini.
Tabel 6. Grade SUS Web belum dioptimasi 51-68 D Poor
Berdasarkan hasil skor, situs web Puskesmas belum dioptimasi yang belum teroptimasi mendapat grade D atau "jelek" karena nilai 59,75 yang terletak dalam rentang 51-68, yang menunjukkan kinerja yang buruk
Tabel 7. Hasil kuisioner web sudah di optimasi Responden Skor Hasil Hitung Jumlah Nilai x 2.5 R1 27 68 R2 33 83 R3 38 95 R4 27 68 R5 23 58 R6 32 80 R7 31 78 R8 31 78 … … … R50 24 60 Skor Rata-rata 72,75
Pada pengujian kedua, nilai rata-rata yang diperoleh untuk skor SUS situs web Puskesmas responsif yang sudah dioptimasi adalah 72,75. Dengan demikian, kita dapat menginterpretasikan data tersebut menggunakan hasil grade interpretasi hasil. Untuk interpretasi lebih lanjut, dapat dilihat pada table  grade di bawah ini.
Tabel 8. Grade SUS Web sudah dioptimasi
68-80.3 B Good
Berdasarkan hasil skor, situs web Puskesmas sudah dioptimasi yang sudah teroptimasi mendapat grade B atau "Baik" karena nilai 72,75 yang terletak dalam rentang 68-80.3, yang menunjukkan kinerja yang baik.
Situs  web  Puskesmas  yang  telah  dioptimasi  menunjukkan  peningkatan  dari  hasil  pengujian,  website puskesmas  belum  dioptimasi  dan  website  puskesmas  sudah  dioptimasi  menunjukkan  perbedaan  skor  dari pengujian pengguna yang mana situs web puskesmas yang belum teroptimasi menunjukan grade D yang buruk, sedangkan  situs  web  puskesmas  yang  sudah  teroptimasi  menunjukan  grade  B  yang  baik.  Hasil  tersebut menunjukkan  bahwa  optimasi  dan  desain  responsif  secara  signifikan  meningkatkan  kinerja  dan  pengalaman pengguna website Puskesmas.

## KESIMPULAN DAN SARAN
Berdasarkan penelitian yang telah dilakukan, dapat disimpulkan bahwa metode mobile first design efektif untuk  meningkatkan  performa  situs  web  puskesmas.  Penelitian  ini  melibatkan  2  jenis  pengujian,  yaitu  dengan pengujian performa dan pengujian pengguna. Pada pengujian performa didapat dengan hasil terbaik diperoleh pada pengujian situs web puskesmas yang sudah dioptimasi lalu diuji dengan Pagespeed Insight dan lighthouse dengan rata rata skor pengujian mencapai nilai  90. Ini lebih tinggi dibandingkan dengan situs web puskesmas yang belum dioptimasi dengan skor rata-rata pengujian 79. Hal ini dilakukan dengan cara efiensi gambar, menghapus animmasi yang  tidak  penting,  merubah  ukuran  viewport  dan  membuat  loading  lazy  pada  gambar.  Lalu  untuk  pengujian pengguna  dengan  dua  pengujian  antara  web  puskesma  belum  teroptimasi  dan  web  puskesmas  yang  sudah teroptimasi, didapat nilai untuk yang belum teroptimasi 59,75 dengan grade D yang berarti buruk, lalu untuk web
Jurnal Informatika Teknologi dan Sains (JINTEKS) E-ISSN : 2686-3359 Submit July 02, 2024 | Revised July 12, 2024 | Accepted July 15, 2024
puskesmas  yang  sudah  teroptimasi  di  dapat  nilai  72,75  dengan  grade  B  yang  berarti  baik.  Hasil  tersebut menunjukkan bahwa user lebih menyukai website puskesmas yang sudah optimasi.
Untuk  peneliti  selanjutnya,  disarankan  menggunakan  teknik  pengembangan  web  yang  memanfaatkan teknologi web terbaru untuk meningkatkan performa dan efisiensi. Hal ini akan memungkinkan desain web yang lebih baik serta performa yang lebih baik. Selain itu, disarankan meningkatkan skor pengujian Sistem Usability Scale menjadi Grade A untuk meningkatkan kualitas penggunaan sistem.

## DAFTAR PUSTAKA
[1] M.  X.  Curinga  and  A.  Saravanos,  “Mobile  first  e-learning,”  in Handbook  of  Research  on  Mobile  Learning  in Contemporary Classrooms , IGI Global, 2016, pp. 23–36. doi: 10.4018/978-1-5225-0251-7.ch002.
[2] Maria Martin, “Mobile-First Design: Why It Matters, Key Elements And 5 Best Examples,” designrush. Accessed: Jan. 05, 2024. [Online]. Available: https://www.designrush.com/agency/website-design-development/trends/mobile- first-design
[3] G. , S. B. , & B. R. S. Kaur, “Design of an Efficient QoS-Aware Adaptive Data Dissemination Engine with DTFC for Mobile Edge Computing Deployments,” IEEE , 2023.
[4] D. , A. R. , S. C. , M. U. , G. S. , P. A. , & L. J. Neffa-Creech, “Understanding Barriers and Facilitators to Signing Up for a Mobile-Responsive Registry to Recruit Healthy Volunteers and Members of Underrepresented Communities for Alzheimer’s Disease Prevention Studies,” IEEE , 2023.
[5] C. Hernández-Nieto, X. Sánchez, and P. Salinas, “A Mobile First Approach for the Development of a Sustainability Game,” in Procedia Computer Science , Elsevier, 2015, pp. 182–185. doi: 10.1016/j.procs.2015.12.236.
[6] J. Penerapan et al. , “IT-EXPLORE RANCANG BANGUN MEDIA KOLABORASI BERBASIS RESPONSIF WEB UNTUK IDI CABANG KOTA SALATIGA,” 2023.
[7] F.  Junior  Wangsa,  S.  Informasi,  and  S.  Kharisma  Makassar,  “OPTIMASI  WEBSITE  TOKO  KERJA MENGGUNAKAN  UJI  PERFORMA  GOOGLE  PAGESPEED  INSIGHTS,”  2023,  [Online].  Available: https://tech.kharisma.ac.id
[8] A.  Pardede,  A.  Sidik,  Md.  Diterbitkan  Pertama  Kali  Oleh,  U.  Islam  Kalimantan Muhammad  Arsyad  Al  Banjari  Jl Adhyaksa No, K. Banjarmasin, and K. Selatan Indonesia, Teori, Strategi, dan Evaluasi Merancang Webiste dalam Perspektif Desain . 2019.
[9] P. S. Hasugian, “PERANCANGAN WEBSITE SEBAGAI MEDIA PROMOSI DAN INFORMASI,” 2018.
[10] N.  Rumaf,  K.  Anwar,  D.  Safiroh  Utsalina,  P.  Studi  Teknik  Informatika,  and  S.  PPKIA  Pradnya  Paramita  Malang, “ANALISIS KEAMANAN WEB SERVER TERHADAP WEBSITE PT. VICTORY INTERNASIONAL FUTURES MALANG DENGAN TEKNIK SQL INJECTION,” 2022. [Online]. Available: http://www.google.com
[11] S. Sonny and S. N. Rizki, “PENGEMBANGAN SISTEM PRESENSI KARYAWAN DENGAN TEKNOLOGI GPS BERBASIS WEB PADA PT BPR DANA MAKMUR BATAM,” 2021.
[12] K.  Hernawati,  “Optimalisasi  SEO  (Search  Engine  Optimizer)  sebagai  upaya  meningkatkan  unsur  Visibility  dalam Webometric.,” Seminar Nasional Matematika dan Pendidikan Matematika 2009. , 2013.
[13] C. Peterson, “Learning Responsive Web Design,” 2014. [Online]. Available: www.ebook777.com
[14] E. Modé, “Responsive Web Design and Optimizing Loading Times on Mobile Devices for Enhanced Web Presence,” 2014.
[15] A.  Zulkarnain,  “Penerapan  Mobile-First  Design  pada  Antarmuka  Website  Profil  Sekolah  Menggunakan  Metode Human-Centred Design (Studi Kasus: SMPN 21 Malang),” Jurnal Ilmiah Teknologi Informasi Asia , vol. 13, no. 2, p. 125, Sep. 2019, doi: 10.32815/jitika.v13i2.408.
[16] Aarron. Walter and J. M. Spool, MOBILE FIRST . A Book Apart/Jeffrey Zeldman, 2011.
[17] H. A. Tengriano and A. Yunus, “ANALISIS PERFORMA WEBSITE AYOMULAI MENGGUNAKAN GTMETRIX DAN PAGESPEED INSIGHT Oleh,” 2022. [Online]. Available: https://tech.kharisma.ac.id
[18] M. Atalarik, S. Ajay, A. Novianti, S. St, and A. Hartaman, “PERANCANGAN DAN IMPELEMENTASI WEBSITE UNTUK  MONITORING  DAN  CONTROLLING  DRY  CABINET  DESIGN  AND  IMPLEMENTATION  OF WEBSITE FOR MONITORING AND CONTROLLING DRY CABINET,” 2020.
[19] R.  Nurlistiani  and  N.  Purwati,  “Interpretasi  Pengujian  Usabilitas  E-Learning  di  Masa  Pandemi  COVID-19 Menggunakan System Usability Scale,” 2021.
[20] F. Galuh Sembodo, G. Fadila Fitriana, and N. A. Prasetyo, “Evaluasi Usability Website Shopee Menggunakan System Usability Scale (SUS),” 2021. [Online]. Available: http://jurnal.polibatam.ac.id/index.php/JAIC
[21] A. Nur Rachmawati and V. Puspaning Ramadhan, “Optimasi UI/UX Website Dengan Design Thinking (Studi Kasus Kelurahan Tlogomas Kota Malang),” vol. 7, 2024.