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