วิธีใช้ Google Lighthouse ตรวจสอบคุณภาพเว็บไซต์

<h2>วิธีใช้ Google Lighthouse ตรวจสอบคุณภาพเว็บไซต์<&sol;h2>&NewLine;<p>การพัฒนาเว็บไซต์ในปัจจุบันนั้น นอกจากเรื่องความเร็ว และการพัฒนาให้รองรับการแสดงผลในหลากหลาย device แล้ว ยังมีอีกหลายส่วนที่ต้องคำนึงถึง ทีมพัฒนาของ Google จึงได้ออกเครื่องมือโอเพนซอร์ส ที่ชื่อว่า Lighthouse เพื่อให้นักพัฒนาสามารถใช้สำหรับการตรวจสอบคุณภาพของเว็บไซต์ให้ได้ใช้งานกันแบบฟรี ๆ<&excl;--more--><&sol;p>&NewLine;<p>Lighthouse เป็นเครื่องมือโอเพนซอร์ส สำหรับการตรวจสอบ ปรับปรุงคุณภาพของหน้าเว็บไซต์ สามารถใช้ตรวจสอบคุณภาพของหน้าเว็บไซต์ ได้ทุกทุกรูปแบบเว็บไซต์ <&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>โดย Lighthouse จะแบ่งคะแนนแต่ละเว็บไซต์ออกเป็น 5 ข้อหลัก ๆ คือ<&sol;strong><&sol;p>&NewLine;<blockquote><p>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2018&sol;12&sol;lighthouse-codebee&period;png" alt&equals;"ตรวจสอบคุณภาพเว็บไซต์ด้วย Google Lighthouse" &sol;>&NewLine;<&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><&sol;p>&NewLine;<ul>&NewLine;<li><strong>Performance <&sol;strong><br &sol;>&NewLine;ประสิทธิภาพการทำงานโดยรวมของเว็บไซต์ ความเร็วในการโหลดข้อมูลทุกรูปแบบ&NewLine;<&sol;li>&NewLine;<p><&sol;br><&sol;p>&NewLine;<li><strong>Progressive Web App<&sol;strong><br &sol;>&NewLine;การทำเว็บไซต์ให้รองรับการทำงานบนอุปกรณ์ Smart Phone อย่างสมบูรณ์แบบ เปรียบเสมือนเป็น Mobile Apps ตัวหนึ่ง ที่อยู่ในรูปแบบของเว็บไซต์<&sol;li>&NewLine;<p><&sol;br><&sol;p>&NewLine;<li><strong>Accessibility<&sol;strong><br &sol;>&NewLine;การทำเว็บไซต์ให้รองรับการใช้งานโดยปราศจากอุปสรรค ทั้งคนปกติ คนชรา และผู้พิการ สามารถใช้งานเว็บไซต์ได้&NewLine;<&sol;li>&NewLine;<p><&sol;br><&sol;p>&NewLine;<li><strong>Best Practices<&sol;strong><br &sol;>&NewLine;พัฒนาเว็บไซต์ โดยใช้แนวทางปฏิบัติที่ถูกต้องและดีที่สุด และรองรับการทำงานแบบ Cross Platform&comma; Browser&comma; Device&NewLine;<&sol;li>&NewLine;<p><&sol;br><&sol;p>&NewLine;<li><strong>SEO &lpar; Search Engine Optimisation &rpar;<&sol;strong><br &sol;>&NewLine;พัฒนาเว็บไซต์ให้มี เนื้อหา โครงสร้าง องค์ประกอบโดยรวม ที่สนับสนุนเครื่องมือค้นหา&NewLine;<&sol;li>&NewLine;<p><&sol;br>&NewLine;<&sol;ul>&NewLine;<p><strong>วิธีติดตั้งและใช้งาน Google Lighthouse<&sol;strong><&sol;p>&NewLine;<ul>&NewLine;<li>Lighthouse เป็น Google Chrome Plugin ในการติดตั้งให้เปิดเบราว์เซอร์ Chrome ขึ้นมาและไปที่หน้า <a href&equals;"https&colon;&sol;&sol;chrome&period;google&period;com&sol;webstore&sol;detail&sol;lighthouse&sol;blipmdconlkpinefehnmjamm&fjlig;pmpbjk" rel&equals;"noopener" target&equals;"&lowbar;blank">Chrome Lighthouse<&sol;a> หลังจากติดตั้งจะปรากฏ icon รูปประภาคารมุมขวาบนของ browser ให้คลิก และต่อด้วยคลิกปุ่ม generate report<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2018&sol;12&sol;lighthouse-codebee1&period;png" alt&equals;"ตรวจสอบคุณภาพเว็บไซต์ด้วย Google Lighthouse" &sol;><br &sol;>&NewLine;<&sol;br>&NewLine;<&sol;li>&NewLine;<li>แต่เดี๋ยวก่อนครับ ทีมพัฒนา Lighthouse แนะนำว่า ถ้าต้องการผลการทดสอบที่แม่นยำที่สุด ให้ทดสอบโดยการเข้าโหมดไม่ระบุตัวตน วิธีก็ไม่ยากครับ เปิด google chrome ในโหมดไม่ระบุตัวตน หรือกด ctrl&plus;shift&plus;n จากนั้นก็เข้าหน้าเว็บไซต์ที่เราต้องการทดสอบ เปิดเครื่องมือ dev tool ขึ้นมา ไปที่แท็บ audit จะเห็นหน้าต่างแบบด้านล่าง เลือกตั้งค่าตามใจชอบ จากนั้นติ๊กถูกที่ clear storage กด run audit<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2018&sol;12&sol;lighthouse-codebee2&period;png" alt&equals;"ตรวจสอบคุณภาพเว็บไซต์ด้วย Google Lighthouse" &sol;><br &sol;>&NewLine;<&sol;br>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;