Lighthouse ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome สำหรับเอเจนต์ช่วยให้เอเจนต์การเขียนโค้ดประเมินคุณภาพเว็บไซต์ได้โดยการตรวจสอบสถานะแบบเรียลไทม์เพื่อดูความสามารถในการเข้าถึง, SEO, แนวทางปฏิบัติแนะนำ และการท่องเว็บแบบเอเจนต์
ในเวิร์กโฟลว์แบบ Agent ตัวแทนการเขียนโค้ดจะใช้การตรวจสอบ Lighthouse เพื่อระบุปัญหาเฉพาะที่วัดผลได้ในรันไทม์ แทนที่จะค้นหาการปรับปรุงทั่วไปในโค้ดเบสแบบสุ่ม
แนวทางที่เจาะจงนี้ให้คำแนะนำที่นำไปใช้ได้จริงภายในบริบทของ Agent โดยตรง ซึ่งช่วยให้ Agent การเขียนโค้ดค้นหาและแก้ไขข้อบกพร่องได้แม่นยำกว่าการค้นหาแบบคงที่ในวงกว้างทั่วทั้งฐานของโค้ด
การตรวจสอบของ Lighthouse จะมุ่งเน้นที่หมวดหมู่หลักต่อไปนี้
- การช่วยเหลือพิเศษ (a11y): ช่วยให้มั่นใจว่าทุกคนจะใช้เว็บไซต์ของคุณได้ รวมถึง ผู้ที่ใช้โปรแกรมอ่านหน้าจอ
- SEO: ดำเนินการตรวจสอบทางเทคนิคเพื่อให้แน่ใจว่าเครื่องมือค้นหาจะค้นหาและ เข้าใจเนื้อหาของคุณได้
- แนวทางปฏิบัติแนะนำ: ยืนยันว่าเว็บไซต์เป็นไปตามมาตรฐานการพัฒนาเว็บสมัยใหม่
- การท่องเว็บผ่านระบบ Agent: วัดความสามารถของผู้ช่วย AI ในการทำความเข้าใจและโต้ตอบกับเว็บไซต์ของคุณ
โปรดคำนึงถึงสิ่งต่อไปนี้เมื่อใช้ Lighthouse
- การรองรับสภาพแวดล้อมในเครื่องและสภาพแวดล้อมการจัดเตรียม: ตัวแทนสามารถตรวจสอบหน้าเว็บใดก็ได้ที่มองเห็นใน Chrome รวมถึงเซิร์ฟเวอร์การพัฒนาในเครื่องและไฟล์ HTML ในเครื่องที่เข้าถึงผ่านโปรโตคอล
file:// - ลักษณะการทำงานของเบราว์เซอร์: การตรวจสอบอาจขัดขวางมุมมองของคุณในระยะเวลาสั้นๆ คุณอาจเห็น หน้าเว็บปรับขนาดหรือโหลดซ้ำเมื่อเครื่องมือจำลองอุปกรณ์ต่างๆ
ตรวจสอบคุณภาพเว็บ
ใช้เวิร์กโฟลว์และตัวอย่างต่อไปนี้เพื่อผสานรวม Lighthouse เข้ากับกระบวนการพัฒนา
ยืนยันการช่วยเหลือพิเศษ
เมื่อคุณเปลี่ยน UI ให้มอบหมายงานให้ตัวแทนตรวจสอบว่าหน้าเว็บยังคง เข้าถึงได้
ตัวอย่างพรอมต์:
How can I improve accessibility on this page as measured by Lighthouse?
ตัวอย่างการเรียกใช้ Agent: Agent จะทริกเกอร์การตรวจสอบ Lighthouse โดยตั้งค่า formFactor เป็น mobile โดยจะวิเคราะห์ผลลัพธ์ เช่น คอนทราสต์ของสีไม่เพียงพอหรือไม่มีป้ายกำกับ ARIA
และแนะนำการแก้ไขโค้ดที่เฉพาะเจาะจง
ตรวจสอบ SEO เพื่อการแสดงผลในการค้นหา
ข้อกำหนดด้าน SEO ทางเทคนิคหลายครั้งมักจะถูกตรวจพบช้าเกินไปในวงจรการพัฒนา คุณขอให้ตัวแทนค้นหาและแก้ไขปัญหาทางเทคนิคที่ขัดขวางขณะที่คุณสร้างได้
ตัวอย่างพรอมต์:
According to Lighthouse audit, how can I improve this page for better discoverability in search?
ตัวอย่างการดำเนินการของเอเจนต์: เอเจนต์จะทำการตรวจสอบ SEO และระบุ เมตาแท็ก ลิงก์ Canonical หรือข้อความอธิบายที่ขาดหายไป จากนั้นจึงเสนอให้ อัปเดตซอร์สโค้ดเพื่อแก้ไขการตรวจสอบที่ไม่สำเร็จ
ตรวจสอบแนวทางปฏิบัติแนะนำ
ตรวจสอบว่าเซิร์ฟเวอร์ในพื้นที่หรือเว็บไซต์ Staging เป็นไปตามแนวทางปฏิบัติแนะนำด้านความปลอดภัยและด้านเทคนิค
ตัวอย่างพรอมต์:
Does my site follow best practices as measured by Lighthouse?
ตัวอย่างการดำเนินการของเอเจนต์: เอเจนต์จะตรวจสอบด้านเทคนิค เช่น การใช้ HTTPS ข้อผิดพลาดในคอนโซล และการเรียก API ที่เลิกใช้งานแล้วซึ่ง Lighthouse รายงาน
การปรับปรุงเว็บไซต์ทั่วไป
คุณสามารถเรียกใช้การตรวจสอบ Lighthouse แบบเต็มของเว็บไซต์และช่วยคุณระบุพื้นที่ที่ควรปรับปรุงได้ตั้งแต่ระยะแรกๆ ของการพัฒนา
ตัวอย่างพรอมต์:
Run a full Lighthouse audit of my site, in mobile and desktop, and suggest improvement areas and possible fixes for any problems you find.
ตัวอย่างการทำงานของเอเจนต์: เอเจนต์จะทำการตรวจสอบ Lighthouse แบบเต็มของเว็บไซต์ทั้งในอุปกรณ์เคลื่อนที่และเดสก์ท็อป และแนะนำการเปลี่ยนแปลงที่อาจปรับปรุงคะแนนของการตรวจสอบต่างๆ หาก Agent มีความรู้ด้านบริบทอย่างเต็มที่เกี่ยวกับ ซอร์สโค้ด ก็อาจแนะนำการแก้ไขโดยตรง หากมีสิทธิ์เข้าถึงบริบทที่เหมาะสม โมเดลยังสามารถแนะนำวิธีปรับปรุงการกำหนดค่าเซิร์ฟเวอร์หรือการกำหนดค่าแบ็กเอนด์อื่นๆ ได้อีกด้วย