Prakerja

Sebelum mengumpulkan metrik performa untuk audit situs, ada beberapa pemeriksaan yang dapat Anda lakukan untuk mengidentifikasi perbaikan yang mudah dan area yang perlu difokuskan.

Pemeriksaan validitas: Arsitektur dan kode

Bayar utang teknis!

Jika memungkinkan, perbaiki bug sederhana dan hapus aset serta kode yang tidak diperlukan sebelum mengukur performa — tetapi pastikan untuk menyimpan catatan sebelum dan sesudah masalah dan perbaikan. Peningkatan ini masih dapat menjadi bagian dari pekerjaan audit Anda.

Arsitektur dan aset situs
Apakah ada yang dapat dengan mudah dihapus dari repositori kode dan dari situs, seperti halaman lama, konten, atau aset lain yang tidak digunakan? Periksa halaman tanpa induk, template redundan, gambar yang tidak digunakan, serta kode dan library yang tidak digunakan.

Error runtime
Periksa error yang dilaporkan di konsol browser. Seharusnya tidak ada :).

Linting
Apakah ada error dalam kode HTML, CSS, atau JavaScript Anda? Membangun linting ke dalam alur kerja dapat membantu menjaga kualitas kode dan menghindari regresi. Sebaiknya gunakan HTMLHint, StyleLint, dan ESLint, yang dapat digunakan sebagai plugin editor kode, atau dijalankan dari command line dalam proses alur kerja dan alat continuous integration seperti Travis.

Link dan gambar rusak
Ada banyak alat untuk menguji link rusak pada waktu build dan runtime, termasuk Ekstensi Chrome (yang ini bagus) dan alat Node seperti Pemeriksa Link Rusak.

Plugin
Plugin seperti Flash dan Silverlight dapat menimbulkan risiko keamanan, dukungan untuk plugin tersebut tidak digunakan lagi, dan plugin tersebut tidak berfungsi di perangkat seluler. Gunakan Lighthouse untuk memeriksa plugin.

Menguji dengan berbagai perangkat dan konteks

Tidak ada yang lebih baik daripada meminta orang sungguhan untuk menguji situs Anda dengan perangkat sungguhan, beberapa browser, dan konteks konektivitas yang berbeda.

Beberapa pemeriksaan ini relatif subjektif, tetapi dapat mengidentifikasi masalah yang memengaruhi performa yang dirasakan. Misalnya, link rusak akan membuang-buang waktu dan terasa 'tidak responsif'. Teks yang tidak terbaca lambat dibaca.

Pengujian lintas perangkat
Coba berbagai ukuran area pandang dan jendela. Gunakan setidaknya satu perangkat seluler dan satu perangkat desktop. Jika memungkinkan, coba situs Anda di perangkat seluler berspesifikasi rendah dengan layar kecil. Apakah teksnya dapat dibaca? Apakah ada gambar yang rusak? Bisakah Anda memperbesar? Apakah target sentuh cukup besar? Apakah lambat? Apakah ada fitur yang tidak responsif? Ambil screenshot atau video hasilnya.

Pengujian lintas platform
Platform apa yang Anda targetkan? Anda perlu melakukan pengujian di browser dan sistem operasi yang digunakan pengguna Anda saat ini dan pada masa mendatang.

Konektivitas
Uji di beberapa jenis jaringan target: terhubung, Wi-Fi, dan seluler. Anda dapat menggunakan alat browser untuk mengemulasikan berbagai kondisi jaringan.

Perangkat
Pastikan untuk mencoba situs Anda di perangkat yang sama dengan pengguna Anda. Foto berikut menunjukkan halaman yang sama di dua ponsel yang berbeda.

Halaman postingan blog yang berjalan di ponsel berspesifikasi tinggi dan rendah

Di layar yang lebih besar, teks berukuran kecil, tetapi dapat dibaca. Pada layar yang lebih kecil, browser merender tata letak dengan benar, tetapi teksnya tidak dapat dibaca, bahkan saat diperbesar. Layar buram dan memiliki 'color cast' — warna putih tidak terlihat putih — sehingga konten kurang terbaca.

Temuan sederhana seperti ini bisa jauh lebih penting daripada data performa yang tidak jelas.

Mencoba UI dan UX

Aksesibilitas, kegunaan, dan keterbacaan
Untuk memastikan bahwa konten dan fungsi situs Anda dapat diakses oleh semua orang, Anda perlu memahami keberagaman pengguna Anda. Lighthouse dan alat lainnya menguji masalah aksesibilitas tertentu, tetapi tidak ada yang mengalahkan pengujian di dunia nyata. Coba baca, navigasikan, dan masukkan data dalam berbagai skenario: misalnya, di luar ruangan di bawah sinar matahari atau di kereta. Minta berbagai teman, keluarga, dan kolega untuk mencoba situs Anda. Coba gunakan konten melalui pembaca layar seperti VoiceOver di Mac atau NVDA di Windows.

Anda dapat mengetahui lebih lanjut cara menerapkan dan meninjau aksesibilitas di kursus Udacity tentang Aksesibilitas dan artikel Web Fundamentals Cara Melakukan Peninjauan Aksesibilitas.

Simpan catatan audit aksesibilitas Anda. Kemungkinan besar Anda akan dapat melakukan peningkatan sederhana yang bermanfaat bagi semua pengguna.

Masalah UI dan UX mendasar
Interaksi yang tidak berfungsi sebagaimana mestinya, elemen yang meluap di jendela dan area pandang yang lebih kecil, target ketuk yang terlalu kecil, konten yang tidak dapat dibaca, scroll yang tersendat-sendat… Buka beberapa halaman di situs, coba navigasi dan semua fungsi inti. Simpan catatan.

Gambar, audio, dan video
Uji konten yang meluap, rasio aspek yang salah, pemangkasan yang buruk, dan masalah kualitas.

Pengujian UI subjektif
Mungkin tidak semuanya relevan, tetapi perubahan sederhana dapat mempermudah refaktorisasi:

  • Apakah 'Apa yang dapat saya lakukan di sini?' langsung terlihat jelas saat Anda membuka situs?
  • Apakah Anda tertarik untuk mengonsumsi konten dan mengikuti link?
  • Apakah ada hierarki atau jalur visual — atau apakah semuanya memiliki bobot visual yang sama?
  • Apakah tata letaknya berantakan?
  • Apakah ada terlalu banyak font?
  • Apakah ada gambar atau konten lain yang dapat dihapus?
  • Desain konten sama pentingnya dengan desain antarmuka. Apakah konten teks dan gambar di situs Anda sesuai untuk konteks seluler dan desktop? Apakah ada yang bisa dihilangkan? Tulis untuk perangkat seluler.