ก่อนที่จะรวบรวมเมตริกประสิทธิภาพสําหรับการตรวจสอบเว็บไซต์ คุณสามารถดําเนินการตรวจสอบหลายอย่างเพื่อระบุการแก้ไขที่ง่ายดายและพื้นที่ที่ต้องให้ความสําคัญ
การตรวจสอบความถูกต้อง: สถาปัตยกรรมและโค้ด
แก้ไขข้อบกพร่องง่ายๆ และนําชิ้นงานและโค้ดที่ไม่จําเป็นออกก่อนวัดประสิทธิภาพ หากเป็นไปได้ แต่อย่าลืมบันทึกปัญหาและการแก้ไขก่อนและหลัง การปรับปรุงเหล่านี้จะยังคงเป็นส่วนหนึ่งของงานตรวจสอบ
สถาปัตยกรรมและชิ้นงานของเว็บไซต์
การนำสิ่งต่างๆ ออกจากที่เก็บโค้ดและเว็บไซต์ทำได้ยากไหม เช่น หน้าเว็บเดิม เนื้อหา หรือชิ้นงานอื่นๆ ที่ไม่ได้ใช้งาน ตรวจสอบหน้าเว็บที่ไม่มีหน้าเว็บหลัก เทมเพลตที่ซ้ำซ้อน รูปภาพที่ไม่ได้ใช้ และโค้ดและไลบรารีที่ไม่ได้ใช้
ข้อผิดพลาดขณะรันไทม์
ตรวจสอบข้อผิดพลาดที่รายงานในคอนโซลเบราว์เซอร์ ไม่ควรมี :)
การตรวจสอบโค้ด
โค้ด HTML, CSS หรือ JavaScript มีข้อผิดพลาดหรือไม่ การใช้โปรแกรมตรวจสอบโค้ดในเวิร์กโฟลว์จะช่วยรักษาคุณภาพของโค้ดและหลีกเลี่ยงการเกิดข้อบกพร่องซ้ำได้ เราขอแนะนําใช้ 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 เกี่ยวกับการช่วยเหลือพิเศษและบทความวิธีตรวจสอบการช่วยเหลือพิเศษใน Web Fundamentals
เก็บบันทึกการตรวจสอบการช่วยเหลือพิเศษ คุณอาจทำการปรับปรุงง่ายๆ ที่เป็นประโยชน์ต่อผู้ใช้ทุกคนได้
ปัญหาพื้นฐานเกี่ยวกับ UI และ UX
การโต้ตอบที่ไม่ทำงานตามที่ควรจะเป็น องค์ประกอบที่แสดงเกินขอบในหน้าต่างและวิวพอร์ตขนาดเล็ก เป้าหมายการแตะเล็กเกินไป เนื้อหาที่อ่านไม่ได้ การเลื่อนที่กระตุก... เปิดหน้าเว็บหลายหน้าในเว็บไซต์ ลองใช้การนําทางและฟังก์ชันหลักทั้งหมด เก็บบันทึก
รูปภาพ เสียง และวิดีโอ
ทดสอบเนื้อหาที่แสดงเกินขอบ สัดส่วนภาพไม่ถูกต้อง การตัดไม่ดี และปัญหาด้านคุณภาพ
การทดสอบ UI โดยอิงตามความรู้สึก
รายการต่อไปนี้อาจไม่เกี่ยวข้องทั้งหมด แต่การเปลี่ยนแปลงเล็กๆ น้อยๆ จะช่วยให้การแยกส่วนง่ายขึ้น
- "ฉันจะทำอะไรได้บ้าง" ชัดเจนทันทีเมื่อคุณเปิดเว็บไซต์ไหม
- คุณสนใจที่จะบริโภคเนื้อหาและติดตามลิงก์ไหม
- มีลําดับชั้นหรือเส้นทางภาพ หรือทุกอย่างมีน้ำหนักภาพเท่ากัน
- เลย์เอาต์รกหรือไม่
- มีแบบอักษรมากเกินไปไหม
- มีรูปภาพหรือเนื้อหาอื่นๆ ที่อาจนำออกได้ไหม
- การออกแบบเนื้อหามีความสำคัญพอๆ กับการออกแบบอินเทอร์เฟซ เนื้อหาข้อความและรูปภาพในเว็บไซต์เหมาะสมกับบริบทของอุปกรณ์เคลื่อนที่และเดสก์ท็อปไหม Can anything be eliminated? เขียนสำหรับอุปกรณ์เคลื่อนที่