Prakerja

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

Pemeriksaan validitas: arsitektur dan kode

Bayar utang teknis!

Jika memungkinkan, perbaiki bug sederhana serta hapus kode dan aset yang tidak diperlukan sebelum mengukur performa — tetapi pastikan untuk menyimpan catatan masalah dan perbaikan sebelum dan sesudah. 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 apakah ada halaman usang, 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? Memasukkan analisis lint 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 untuk dijalankan dari command line dalam proses alur kerja dan alat continuous integration seperti Travis.

Link dan image rusak
Ada banyak alat untuk menguji link yang rusak pada waktu build dan runtime, termasuk Ekstensi Chrome (yang satu ini bagus) dan alat Node seperti Broken Link Checker.

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

Uji dengan berbagai perangkat dan konteks

Tidak ada yang lebih baik dari membuat pengguna sungguhan menguji situs Anda dengan perangkat sungguhan, banyak browser, dan konteks konektivitas yang berbeda.

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

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

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

Konektivitas
Menguji pada beberapa jenis jaringan target: terhubung, Wi-Fi, dan seluler. Anda dapat menggunakan alat browser untuk mengemulasi berbagai kondisi jaringan.

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

Halaman postingan blog yang berjalan pada spesifikasi tinggi dan ponsel
dengan spesifikasi rendah

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

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

Mencoba UI dan UX

Aksesibilitas, kegunaan, dan keterbacaan
Untuk memastikan konten dan fungsi situs Anda dapat diakses oleh semua orang, Anda perlu memahami keberagaman pengguna. Lighthouse dan alat lainnya menguji masalah aksesibilitas tertentu, tetapi tidak ada yang mengalahkan pengujian di dunia nyata. Coba baca, navigasi, dan masukkan data dalam berbagai skenario: misalnya, di luar ruangan yang terkena sinar matahari atau di kereta. Ajaklah 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 chromecast tentang Aksesibilitas dan artikel Dasar-Dasar Web Cara Melakukan Peninjauan Aksesibilitas.

Simpan catatan audit aksesibilitas Anda. Kemungkinannya adalah Anda dapat melakukan perbaikan sederhana yang bermanfaat untuk semua pengguna.

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

Gambar, audio, dan video
Lakukan pengujian untuk menemukan konten berlebih, rasio aspek tidak benar, pemangkasan yang buruk, dan masalah kualitas.

Pengujian UI subjektif
Pengujian ini mungkin tidak semuanya relevan, tetapi perubahan sederhana dapat membuat pemfaktoran ulang menjadi lebih mudah:

  • Apakah 'Apa yang dapat saya lakukan di sini? langsung dihapus saat Anda membuka situs?
  • Apakah Anda tertarik untuk melihat 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 {i>font<i}?
  • 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? Menulis untuk perangkat seluler.