ก่อนรวบรวมเมตริกประสิทธิภาพสำหรับการตรวจสอบเว็บไซต์ จะมีการตรวจสอบหลายอย่างที่คุณทำได้เพื่อระบุการแก้ไขที่ง่ายดายและส่วนที่ควรมุ่งเน้น
การตรวจสอบความถูกต้อง: สถาปัตยกรรมและโค้ด
เมื่อใดก็ตามที่เป็นไปได้ ให้แก้ไขข้อบกพร่องง่ายๆ และนำเนื้อหาและโค้ดที่ไม่จำเป็นออกก่อนวัดประสิทธิภาพ แต่อย่าลืมเก็บบันทึกปัญหาและการแก้ไขก่อนและหลัง การปรับปรุงเหล่านี้อาจเป็นส่วนหนึ่งของการตรวจสอบของคุณ
สถาปัตยกรรมเว็บไซต์และชิ้นงาน
มีสิ่งใดไหมที่เรานำออกจากที่เก็บโค้ดและจากเว็บไซต์ได้โดยง่าย เช่น หน้าเว็บ เนื้อหา หรือชิ้นงานอื่นๆ ที่ไม่ได้ใช้งาน ตรวจหาหน้าที่ไม่มีเจ้าของ เทมเพลตซ้ำซ้อน รูปภาพที่ไม่ได้ใช้ รวมถึงโค้ดและไลบรารีที่ไม่ได้ใช้
ข้อผิดพลาดเกี่ยวกับรันไทม์
ตรวจสอบข้อผิดพลาดที่รายงานในคอนโซลของเบราว์เซอร์ ไม่ควรมีเลย :)
Linting
มีข้อผิดพลาดในโค้ด HTML, CSS หรือ JavaScript ไหม การสร้างการวิเคราะห์โค้ดในเวิร์กโฟลว์จะช่วยรักษาคุณภาพของโค้ดและหลีกเลี่ยงการเกิดปัญหาซ้ำ เราขอแนะนำให้ใช้ HTMLHint, StyleLint และ ESLint ซึ่งสามารถใช้เป็นปลั๊กอินสำหรับตัวแก้ไขโค้ด หรือเรียกใช้จากบรรทัดคำสั่งภายในกระบวนการเวิร์กโฟลว์และเครื่องมือการผสานรวมอย่างต่อเนื่อง เช่น
Travis ได้
ลิงก์และรูปภาพที่เสีย
มีเครื่องมือมากมายในการทดสอบหาลิงก์ที่เสีย ณ เวลาสร้างและรันไทม์ เช่น ส่วนขยาย Chrome (อันนี้ดี) และเครื่องมือโหนดอย่าง เครื่องมือตรวจสอบลิงก์ที่เสียหาย
ปลั๊กอิน
ปลั๊กอิน เช่น Flash และ Silverlight อาจมีความเสี่ยงด้านความปลอดภัย โดย
เลิกใช้งานไปแล้ว และปลั๊กอินเหล่านี้จะไม่ทำงานบนอุปกรณ์เคลื่อนที่ ใช้ Lighthouse เพื่อตรวจสอบ
ปลั๊กอิน
ทดสอบกับอุปกรณ์และบริบทที่หลากหลาย
จะมีอะไรดีไปกว่าการให้ผู้ใช้จริงทดสอบเว็บไซต์ด้วยอุปกรณ์จริง หลายเบราว์เซอร์ และบริบทการเชื่อมต่อที่แตกต่างกัน
การตรวจสอบเหล่านี้บางรายการขึ้นอยู่กับแต่ละบุคคล แต่สามารถระบุปัญหาที่ส่งผลต่อประสิทธิภาพที่รับรู้ได้ ลิงก์เสีย เช่น ทำให้เสียเวลาและรู้สึกว่า "ไม่ตอบสนอง" ข้อความที่อ่านไม่ออกนั้น อ่านได้ช้า
การทดสอบแบบหลายอุปกรณ์
ลองใช้วิวพอร์ตและขนาดหน้าต่างที่ต่างกัน ใช้อุปกรณ์เคลื่อนที่และ
เดสก์ท็อปอย่างน้อย 1 เครื่อง หากเป็นไปได้ ให้ลองใช้เว็บไซต์บนอุปกรณ์เคลื่อนที่ที่มีสเปคต่ำที่มีหน้าจอขนาดเล็ก ข้อความอ่านได้ไหม รูปภาพเสียหายไหม คุณซูมได้ไหม เป้าหมายการสัมผัสใหญ่เพียงพอหรือไม่ ทำงานช้าไหม
มีฟีเจอร์ไหนไม่ตอบสนองไหม จับภาพหน้าจอหรือวิดีโอผลลัพธ์
การทดสอบข้ามแพลตฟอร์ม
คุณกำหนดเป้าหมายไปยังแพลตฟอร์มใดบ้าง คุณต้องทดสอบเบราว์เซอร์และระบบปฏิบัติการที่ผู้ใช้ใช้ทั้งในปัจจุบันและอนาคต
การเชื่อมต่อ
ทดสอบกับเครือข่ายเป้าหมายประเภทต่างๆ เช่น เชื่อมต่อ Wi-Fi และเครือข่ายมือถือ คุณใช้เครื่องมือของเบราว์เซอร์เพื่อจำลองเงื่อนไขของเครือข่ายได้
อุปกรณ์
อย่าลืมลองใช้เว็บไซต์บนอุปกรณ์เดียวกันกับผู้ใช้ รูปภาพต่อไปนี้แสดงหน้าเดียวกันบนโทรศัพท์สองเครื่อง
บนหน้าจอที่ใหญ่ขึ้น ข้อความจะมีขนาดเล็กแต่อ่านได้ง่าย บนหน้าจอขนาดเล็ก เบราว์เซอร์แสดงเลย์เอาต์ได้อย่างถูกต้องแต่อ่านข้อความไม่ได้แม้ว่าจะซูมเข้าอยู่ก็ตาม จอแสดงผลเบลอและมี "สีแคสต์" สีขาวไม่ดูเป็นสีขาว ทำให้อ่านเนื้อหาได้ไม่ชัดเจน
การค้นพบเล็กๆ น้อยๆ เช่นนี้อาจมีความสำคัญมากกว่าข้อมูลประสิทธิภาพที่คลุมเครือ
ลองใช้ UI และ UX
การช่วยเหลือพิเศษ ความสามารถในการใช้งาน และการอ่านง่าย
คุณต้องเข้าใจความหลากหลายของผู้ใช้เพื่อให้เนื้อหาและฟังก์ชันการทำงานของเว็บไซต์เข้าถึงได้
Lighthouseและเครื่องมืออื่นๆ จะทดสอบปัญหาด้านการเข้าถึงที่เฉพาะเจาะจง แต่ไม่มีอะไรจะดีไปกว่าการทดสอบในสถานการณ์จริง ลองอ่าน นำทาง และป้อนข้อมูล
ในสถานการณ์ต่างๆ เช่น อยู่กลางแจ้งท่ามกลางแสงแดดหรือบนรถไฟ ขอให้เพื่อน ครอบครัว และเพื่อนร่วมงาน
ที่หลากหลายลองใช้เว็บไซต์ของคุณ ลองใช้เนื้อหาผ่านโปรแกรมอ่านหน้าจอ เช่น VoiceOver ใน Mac หรือ NVDA ใน Windows
คุณดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้งานและการตรวจสอบการช่วยเหลือพิเศษได้ในหลักสูตร Udacity เกี่ยวกับการช่วยเหลือพิเศษ และบทความข้อมูลพื้นฐานเกี่ยวกับเว็บวิธีตรวจสอบการช่วยเหลือพิเศษ
เก็บบันทึกการตรวจสอบการช่วยเหลือพิเศษ คุณสามารถทำการปรับปรุงแบบง่ายๆ ซึ่งดีสำหรับผู้ใช้ทั้งหมด
ปัญหา UI และ UX พื้นฐาน
การโต้ตอบที่ไม่ทํางานตามที่ควรจะเป็น องค์ประกอบล้นหน้าต่างและวิวพอร์ตขนาดเล็กเกินไป เป้าหมายการแตะที่เล็กเกินไป เนื้อหาที่อ่านไม่ได้ การเลื่อนที่ติดขัด... เปิดหลายหน้าในเว็บไซต์ ลองใช้การนำทางและฟังก์ชันหลักทั้งหมด เก็บบันทึก
รูปภาพ เสียง และวิดีโอ
ทดสอบเนื้อหาที่ล้นเกิน สัดส่วนภาพไม่ถูกต้อง
การครอบตัดไม่ดี และปัญหาด้านคุณภาพ
การทดสอบ UI อัตนัย
ทั้งนี้อาจไม่มีความเกี่ยวข้องกันทั้งหมด แต่การเปลี่ยนแปลงง่ายๆ ก็จะทำให้การเปลี่ยนโครงสร้างภายในโค้ดง่ายขึ้น ดังนี้
- ข้อความ "ฉันจะทำอะไรได้บ้าง ที่นี่ชัดเจนทันทีเมื่อคุณเปิดเว็บไซต์"
- คุณสนใจที่จะดูเนื้อหาและเปิดลิงก์หรือไม่
- มีลำดับชั้นของภาพหรือเส้นทาง หรือมีน้ำหนักของสายตาเหมือนกันทั้งหมดหรือไม่
- เลย์เอาต์รกตาไหม
- มีแบบอักษรมากเกินไปไหม
- มีรูปภาพหรือเนื้อหาอื่นๆ ที่สามารถนำออกได้ไหม
- การออกแบบเนื้อหามีความสำคัญพอๆ กับการออกแบบอินเทอร์เฟซ เนื้อหาแบบข้อความและรูปภาพในเว็บไซต์ของคุณ เหมาะกับบริบทของอุปกรณ์เคลื่อนที่และเดสก์ท็อปไหม ขจัดอะไรออกไปได้ไหม เขียนสำหรับอุปกรณ์เคลื่อนที่