เผยแพร่เมื่อ: 10 พฤศจิกายน 2569
ในยุคใหม่ของการพัฒนาเว็บที่ใช้ Agent นักพัฒนาเว็บคาดหวังให้ Agent การเขียนโค้ดเป็นผู้เชี่ยวชาญในการสร้างเว็บ และแม้ว่าโมเดลการเขียนโค้ดที่ล้ำสมัยล่าสุดจะมีความสามารถสูงและมักจะสร้างโค้ดที่ใช้งานได้ แต่หากคุณขอให้ผู้เชี่ยวชาญด้านการพัฒนาเว็บตรวจสอบโค้ดที่ AI สร้างขึ้น ผู้เชี่ยวชาญเหล่านั้นก็มักจะพบวิธีทำให้โค้ดทำงานได้เร็วขึ้น เข้าถึงได้ง่ายขึ้น หรือปลอดภัยยิ่งขึ้น
Chrome กำลังลงทุนอย่างมากในอนาคตของการพัฒนาเว็บแบบ Agentic และเพื่อรับมือกับความท้าทายนี้ เราได้เปิดตัวเวอร์ชันตัวอย่างทดลองใช้ของคำแนะนำในการพัฒนาเว็บที่ทันสมัยที่งาน Google I/O ในเดือนพฤษภาคม คำแนะนำในการพัฒนาเว็บที่ทันสมัยคือชุดทักษะที่ฝังความเชี่ยวชาญด้านแพลตฟอร์มเว็บ แนวทางปฏิบัติแนะนำ และข้อมูลความเข้ากันได้ของเบราว์เซอร์ไว้ใน Agent การเขียนโค้ดโดยตรง
วันนี้เรายินดีที่จะประกาศเปิดตัวคำแนะนำในการพัฒนาเว็บที่ทันสมัยเวอร์ชัน 1.0 ที่เสถียร ซึ่งประกอบด้วยสิ่งต่อไปนี้
- เวิร์กโฟลว์การปรับปรุงใหม่ที่สแกนฐานของโค้ดที่มีอยู่เพื่อช่วยให้ Agent ค้นพบโอกาสในการปรับปรุงให้ทันสมัยอย่างปลอดภัย
- ฐานข้อมูลคู่มือที่ขยายเพิ่มซึ่งกำหนดเป้าหมายช่องว่างด้านความรู้เกี่ยวกับ AI ที่ได้รับการยืนยันหลายร้อยรายการด้วยโซลูชันข้ามเบราว์เซอร์ที่ผ่านการตรวจสอบโดยผู้เชี่ยวชาญ
- การตรวจสอบอย่างละเอียดโดยผู้เชี่ยวชาญที่เป็นมนุษย์สำหรับคู่มือทุกฉบับ รวมถึงการอนุมัติจากหัวหน้าฝ่ายเทคนิคด้านเนื้อหาและการตรวจสอบการช่วยเหลือพิเศษโดยเฉพาะในคู่มือที่แสดงต่อผู้ใช้
- ความครอบคลุมของการประเมินอย่างเต็มรูปแบบในคู่มือทั้งหมดของเราพร้อมแดชบอร์ดการประเมินสาธารณะที่แสดงการปรับปรุงที่วัดได้เมื่อเทียบกับ Agent ที่ไม่มีคำแนะนำในการพัฒนาเว็บที่ทันสมัย
ในเวอร์ชัน 1.0 นี้ เรายินดีที่จะแจ้งให้ทราบว่าคำแนะนำในการพัฒนาเว็บที่ทันสมัยกำลังกลายเป็นความพยายามร่วมกันในหลายเบราว์เซอร์ โดยมี Firefox และ Edge เข้าร่วมกับ Chrome เพื่อสนับสนุน ปรับปรุงความเข้ากันได้ในหลายเบราว์เซอร์ และมีส่วนร่วมในโปรเจ็กต์นี้ เป้าหมายของเราคือการต่อยอดจากการทำงานร่วมกันกับ Baseline เพื่อให้มั่นใจว่าทุกคนที่เขียนโค้ดด้วย Agent จะใช้ประโยชน์จากประสิทธิภาพและความสามารถของแพลตฟอร์มเว็บสมัยใหม่ได้อย่างเต็มที่
ไม่ว่าคุณจะใช้โมเดลหรือระบบควบคุมการทำงานของ Agent ใดก็ตาม หากคุณกำลังสร้างเว็บ คำแนะนำในการพัฒนาเว็บที่ทันสมัยก็ควรอยู่ในเวิร์กโฟลว์แบบ Agentic ของคุณ
หากต้องการติดตั้งคำแนะนำในการพัฒนาเว็บที่ทันสมัย ให้เรียกใช้คำสั่งนี้จากไดเรกทอรีโปรเจ็กต์
npx modern-web-guidance@latest install
หรือหากติดตั้งเวอร์ชันก่อนหน้าไว้แล้ว คุณสามารถอัปเดตเป็น 1.0 ได้โดยเรียกใช้คำสั่งต่อไปนี้
npx modern-web-guidance@latest update
ดูวิธีการติดตั้งเพิ่มเติมหรือข้อมูลเพิ่มเติมได้ที่เอกสารประกอบเกี่ยวกับคำแนะนำในการพัฒนาเว็บที่ทันสมัย หรือดูวิดีโอนี้เพื่อดูภาพรวมโดยย่อ
เหตุใดนักพัฒนาซอฟต์แวร์และธุรกิจจึงควรใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัย
ปฏิเสธไม่ได้ว่าเอเจนต์การเขียนโค้ดช่วยให้นักพัฒนาซอฟต์แวร์เขียนโค้ดได้เร็วขึ้นกว่าที่เคย แต่ในโลกที่ทุกคนใช้เอเจนต์การเขียนโค้ด ความเร็วจะไม่ใช่ข้อได้เปรียบทางการแข่งขันอีกต่อไป
ทุกวันนี้ การสร้างความแตกต่างในปัจจัยพื้นฐาน เช่น ความสามารถในการใช้งานและคุณภาพของประสบการณ์ มีความสำคัญมากกว่าที่เคย ต่อไปนี้คือตัวอย่างวิธีที่คำแนะนำในการพัฒนาเว็บที่ทันสมัยจะช่วยคุณได้
เน้นย้ำแนวทางปฏิบัติแนะนำที่โมเดลมักพลาด
แม้ว่าโมเดลการเขียนโค้ดที่ล้ำสมัยจะเข้าใจแนวทางปฏิบัติแนะนำหลายอย่างเป็นอย่างดี แต่การประเมินของเราแสดงให้เห็นว่ายังมีส่วนสำคัญหลายอย่างที่โมเดลยังทำได้ไม่ดีนัก เช่น
- การช่วยเหลือพิเศษ: โฟกัสของแป้นพิมพ์และการจัดการแบบเฉื่อย การรองรับการเคลื่อนไหวที่ลดลง และการตรวจสอบความถูกต้องของแบบฟอร์มที่เข้าถึงได้
- ประสบการณ์ของผู้ใช้: ท่าทางสัมผัสแบบปัดและแตะ การเปลี่ยนผ่านของกล่องโต้ตอบและป๊อปโอเวอร์ รวมถึงการใช้ธีมสว่าง/ธีมมืด
- ประสิทธิภาพ: การจัดกำหนดการงานในเทรดหลัก การแยกการแสดงผลนอกหน้าจอ และการป้องกันการเปลี่ยนเลย์เอาต์
- ความปลอดภัย: การล้างข้อมูล HTML ที่ปลอดภัย นโยบายรักษาความปลอดภัยเนื้อหาที่เข้มงวด และการจัดการข้อมูลเข้าสู่ระบบพาสคีย์
แนวทางปฏิบัติแนะนำด้านการช่วยเหลือพิเศษเป็นสิ่งสำคัญอย่างยิ่งที่ต้องทำให้ถูกต้อง เนื่องจากข้อผิดพลาดอย่าง ARIA ที่ไม่ถูกต้องอาจทำให้หน้าเว็บเข้าถึงได้น้อยกว่าการไม่มี ARIA เลย สำหรับเวอร์ชัน 1.0 คู่มือที่แสดงต่อผู้ใช้ได้รับการตรวจสอบและทดสอบกับเทคโนโลยีความช่วยเหลือพิเศษจริงโดยผู้เชี่ยวชาญด้านการช่วยเหลือพิเศษที่ใช้เทคโนโลยีเหล่านี้ทุกวัน
ใช้ฟีเจอร์เว็บที่เหมาะกับงานมากที่สุด
โมเดล AI สามารถหาวิธีทำให้บางอย่างทำงานด้วย JavaScript ได้เป็นอย่างดี แต่ในหลายๆ กรณี ฟีเจอร์ HTML หรือ CSS ก็สามารถทำสิ่งเดียวกันได้โดยใช้โค้ดน้อยกว่ามาก และเนื่องจากเบราว์เซอร์เป็นผู้จัดการองค์ประกอบเหล่านี้ จึงมักมีประสิทธิภาพดีกว่าและมาพร้อมกับความสามารถในการช่วยเหลือพิเศษ เช่น
- ฟีเจอร์สำหรับสร้างภาพเคลื่อนไหวของป๊อปโอเวอร์และกล่องโต้ตอบ
- ฟีเจอร์เพื่อปรับปรุงการโต้ตอบที่อิงตามการเลื่อนและการปัด
- API ที่ดีขึ้นเพื่อการเปลี่ยนหน้าเว็บที่ราบรื่นและลื่นไหล
นอกจากนี้ ฟีเจอร์ใหม่ๆ ยังช่วยปรับปรุงประสบการณ์การใช้งานเว็บไซต์ในด้านที่สำคัญต่อผู้ใช้ได้ด้วย เช่น
- พาสคีย์และ WebAuthn: เพื่อประสบการณ์การเข้าสู่ระบบที่รวดเร็วและปลอดภัยยิ่งขึ้น
- การป้อนข้อความอัตโนมัติ: เพื่อปรับปรุงขั้นตอนการชำระเงิน (โดยเฉพาะในอุปกรณ์เคลื่อนที่) ซึ่งมักจะล้มเหลวเมื่อใช้การควบคุมแบบฟอร์มที่ใช้ JavaScript ที่กำหนดเอง
คำแนะนำในการพัฒนาเว็บที่ทันสมัยออกแบบมาเพื่อแนะนำฟีเจอร์ที่ดีที่สุดสำหรับงาน โดยอิงตามข้อกำหนดการรองรับเบราว์เซอร์ของคุณ คู่มือของ Gemini มีข้อมูล Baseline และความเข้ากันได้ของเบราว์เซอร์ฝังอยู่ จึงสามารถปรับแต่งคำแนะนำให้เหมาะกับความต้องการของโปรเจ็กต์ได้
สแกนฐานของโค้ดและค้นหาโอกาสในการปรับปรุงให้ทันสมัย
การพัฒนาเว็บส่วนใหญ่ไม่ได้เกิดขึ้นในโปรเจ็กต์ใหม่ทั้งหมด ซึ่งจะเกิดขึ้นในฐานของโค้ดที่มีอยู่ซึ่งสะสมวิธีแก้ปัญหาเฉพาะหน้าที่ล้าสมัย ทรัพยากร Dependency ที่ไม่จำเป็น และ Polyfill ที่ไม่จำเป็นอีกต่อไปมานานหลายปี
เวอร์ชัน 1.0 เพิ่มเวิร์กโฟลว์การปรับปรุงให้ทันสมัยใหม่ที่สามารถวิเคราะห์ HTML, CSS, JavaScript และ package.json ที่มีอยู่เพื่อค้นหาโอกาสในการอัปเกรดอย่างปลอดภัย จากนั้นแนะนำ Agent ของคุณเกี่ยวกับการเปลี่ยนแปลง
/modern-web-guidance Modernize the code in this directory
ในรุ่นแรกนี้ เวิร์กโฟลว์การปรับปรุงให้ทันสมัยจะใช้การวิเคราะห์แบบคงที่เพื่อตรวจสอบชุดรูปแบบที่จำกัด เราเลือกที่จะเริ่มต้นด้วยขอบเขตที่แคบซึ่งให้ผลลัพธ์ที่คาดการณ์ได้ แล้วจึงขยายขอบเขตออกไปจากจุดนั้น ในอนาคต เราวางแผนที่จะครอบคลุมด้านอื่นๆ อีกมากมาย รวมถึงการตรวจสอบแบบ Agentic ที่ Agent จะให้เหตุผลเกี่ยวกับโค้ดของคุณโดยตรง แทนที่จะจับคู่รูปแบบที่รู้จักเท่านั้น
ติดตามข่าวสารล่าสุดเมื่อแพลตฟอร์มเว็บมีการพัฒนา
แพลตฟอร์มเว็บมีการเปลี่ยนแปลงอยู่ตลอดเวลา ฟีเจอร์ใหม่ๆ จะเปิดตัวในเบราว์เซอร์ทุกครั้งที่มีการอัปเดตเวอร์ชัน และฟีเจอร์ที่มีอยู่ซึ่งคุณอาจใช้ไม่ได้ก่อนหน้านี้จะกลายเป็น Baselineเมื่อมีการเปิดตัวเบราว์เซอร์เวอร์ชันใหม่แต่ละเวอร์ชัน
เนื่องจากคำแนะนำในการพัฒนาเว็บที่ทันสมัยสร้างขึ้นจากข้อมูลความเข้ากันได้ของ Baseline และคำแนะนำได้รับการดูแลโดยวิศวกรเบราว์เซอร์ ผู้เชี่ยวชาญด้านมาตรฐานเว็บ และผู้เชี่ยวชาญด้านการช่วยเหลือพิเศษ คำแนะนำเหล่านี้จึงพัฒนาไปพร้อมกับแพลตฟอร์ม และตอนนี้โปรเจ็กต์ของคุณก็พัฒนาไปพร้อมกันได้ด้วย
ดูข้อมูลเกี่ยวกับฟีเจอร์ใหม่ๆ ของเว็บและแนวทางปฏิบัติแนะนำ
แม้ว่าคำแนะนำในการพัฒนาเว็บที่ทันสมัยจะสร้างขึ้นเพื่อเป็นเครื่องมือสำหรับ Agent เป็นหลัก แต่นักพัฒนาซอฟต์แวร์หลายคนบอกว่าคำแนะนำนี้มีประโยชน์มากในตัวของมันเองในฐานะแหล่งข้อมูลเพื่อการเรียนรู้
แม้ในยุคของการเขียนโค้ดด้วย Agent การสร้างความเชี่ยวชาญเฉพาะด้านก็ยังคงมีคุณค่า และคำแนะนำในการพัฒนาเว็บที่ทันสมัยจะช่วยคุณได้ ไม่ว่าจะเป็นการอ่านคำแนะนำด้วยตนเอง หรือใช้ CLI เพื่อค้นหากรณีการใช้งานและค้นพบเทคนิคใหม่ๆ ที่อาจเกี่ยวข้องกับโปรเจ็กต์ของคุณ
ใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัยร่วมกับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent
ในการพัฒนาเว็บแบบ Agentic การเขียนโค้ดเป็นเพียงส่วนหนึ่งของเวิร์กโฟลว์เท่านั้น นอกจากนี้ คุณยังต้องเรียกใช้โค้ดดังกล่าวเพื่อให้แน่ใจว่าโค้ดทำงานได้ตามที่คาดไว้ ด้วยเหตุนี้ เราจึงแนะนำให้นักพัฒนาซอฟต์แวร์ใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัยร่วมกับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent
- คำแนะนำในการพัฒนาเว็บที่ทันสมัยจะช่วยให้ Agent มีความเชี่ยวชาญที่จำเป็นล่วงหน้าในการเขียนโค้ดตามแนวทางปฏิบัติแนะนำที่ทันสมัย
- เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent ช่วยให้ Agent มองเห็นรันไทม์เพื่อให้สามารถยืนยัน แก้ไขข้อบกพร่อง และเพิ่มประสิทธิภาพโค้ดดังกล่าวในความสามารถของอุปกรณ์ ค่ากำหนดของผู้ใช้ และสภาพเครือข่ายที่หลากหลาย
ซึ่งทั้งหมดนี้จะช่วยให้ Agent ได้รับโซลูชันที่ดีขึ้นโดยใช้จำนวนเทิร์นน้อยลง ต่อไปนี้เป็นตัวอย่างวิธีใช้เครื่องมือเหล่านี้ร่วมกันเพื่อเพิ่มประสิทธิภาพสูงสุด
เพิ่มประสิทธิภาพจนกว่าจะบรรลุเป้าหมายด้านประสิทธิภาพ
คำแนะนำในการพัฒนาเว็บที่ทันสมัยสามารถสอน Agent เกี่ยวกับวิธีแบ่งงาน JavaScript ที่ใช้เวลานานซึ่งบล็อกเทรดหลักได้อย่างมีประสิทธิภาพ แต่ไม่สามารถทดสอบโค้ดเพื่อดูว่างาน JavaScript เหล่านั้นบล็อกเทรดหลักเป็นเวลานานเท่าใด
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent ช่วยให้คุณเรียกใช้การติดตามประสิทธิภาพใน CPU ระดับล่างที่จำลองขึ้นเพื่อดูว่ามีปัญหาหรือไม่ จากนั้นใช้คำแนะนำด้านประสิทธิภาพจากคำแนะนำในการพัฒนาเว็บที่ทันสมัยเพื่อทำซ้ำจนกว่าโค้ดจะไม่บล็อกเทรดหลักนานกว่า 50 มิลลิวินาที (เพื่อไม่ให้ส่งผลต่อ INP ที่ไม่ดี)
ทดสอบและปรับแต่งภาพเคลื่อนไหว
คำแนะนำในการพัฒนาเว็บที่ทันสมัยสามารถแสดงวิธีสร้างภาพเคลื่อนไหวของฟีเจอร์ต่างๆ เช่น กล่องโต้ตอบโมดัล เคล็ดลับเครื่องมือ และเมนูป๊อปโอเวอร์อย่างเหมาะสมและมีประสิทธิภาพ แต่แม้จะมีคำแนะนำนี้ คุณก็ยังต้องยืนยันว่าภาพเคลื่อนไหวทำงานได้จริงและดูดีเมื่อใช้ในบริบทของแอปพลิเคชันแบบเต็ม
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent สามารถเรียกใช้โค้ด โต้ตอบกับหน้าเว็บ และบันทึกหน้าจอของภาพเคลื่อนไหวที่กำลังทำงานอยู่ได้ จากนั้นจะศึกษาการบันทึกเพื่อตรวจสอบว่าภาพเคลื่อนไหวทำงานได้ และเข้ากับสไตล์และความรู้สึกของส่วนที่เหลือของเว็บไซต์
นอกจากนี้ คุณยังใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent เพื่อยืนยันว่าเมื่อตั้งค่า prefers-reduced-motion แล้ว คอมโพเนนต์จะปฏิบัติตามค่ากำหนดของผู้ใช้
แคชมุมมองโดยไม่มีหน่วยความจำรั่วไหล
คำแนะนำในการพัฒนาเว็บที่ทันสมัยสามารถสอนตัวแทนของคุณถึงวิธีทำให้การเปลี่ยนผ่านของ SPA รู้สึกรวดเร็วทันใจด้วยการแสดงผลและแคชมุมมองในหน่วยความจำ ขณะเดียวกันก็ซ่อนมุมมองเหล่านั้นจากแผนผังการช่วยเหลือพิเศษอย่างเหมาะสม
อย่างไรก็ตาม เมื่อดำเนินการนี้ คุณต้องตรวจสอบว่าได้ล้างข้อมูลมุมมองที่ไม่ได้ใช้อย่างถูกต้องเพื่อไม่ให้หน่วยความจำรั่วไหลหากผู้ใช้อยู่ในหน้านั้นเป็นเวลานาน เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent มีเครื่องมือแก้ไขข้อบกพร่องของหน่วยความจำ เพื่อให้ Agent ตรวจสอบได้ว่าการใช้หน่วยความจำไม่ได้เพิ่มขึ้นอย่างไม่มีขอบเขต
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัยและเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent ร่วมกันได้ในวิดีโอนี้
เรื่องราวความสำเร็จ
ทีมวิศวกรทั่วโลกใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัยและเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent เพื่อปรับปรุงคุณภาพโค้ด เร่งการนำส่ง และขจัดปัญหาคอขวดในการแก้ไขข้อบกพร่องด้วยตนเองอยู่แล้ว ดังนี้
Pensionbazaar และ Policybazaar
Pensionbazaar ซึ่งเป็นแพลตฟอร์มการวางแผนเกษียณอายุใหม่ที่เปิดตัวโดย Paisabazaar บริษัทฟินเทคของอินเดีย ได้จับคู่คำแนะนำในการพัฒนาเว็บที่ทันสมัยกับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent เพื่อสร้างและยืนยันหน้าเว็บใหม่ ซึ่งช่วยลดเวลาในการดำเนินการได้มากกว่า 90% (จากประมาณ 4 วันเหลือเพียงไม่กี่ชั่วโมง) และลดข้อบกพร่องของ UI ในหน้าจอใหม่ได้มากกว่า 90% Policybazaar ซึ่งเป็นแพลตฟอร์มในเครือและเป็นหนึ่งในแพลตฟอร์มประกันภัยชั้นนำของอินเดียที่มีลูกค้าที่ลงทะเบียนมากกว่า 97 ล้านราย ได้ใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent เพื่อตรวจสอบประสิทธิภาพโดยอัตโนมัติในหน้า Landing Page ที่มีการเข้าชมสูงประมาณ 30 หน้า ซึ่งช่วยลดภาระงานในการตรวจสอบด้วยตนเองได้ถึง 92% ดังนี้
"สำหรับ Pensionbazaar สิ่งสำคัญอันดับแรกของเราคือการสร้างโค้ดที่มีคุณภาพตั้งแต่วันแรกเพื่อหลีกเลี่ยงหนี้ทางเทคนิคในภายหลัง คำแนะนำในการพัฒนาเว็บที่ทันสมัยช่วยให้ Agent การเขียนโค้ดของเรานำมาตรฐานเว็บสมัยใหม่และแนวทางปฏิบัติแนะนำด้านประสิทธิภาพมาใช้ โดยยังคงคำนึงถึงเป้าหมายความเข้ากันได้กับเบราว์เซอร์ที่เฉพาะเจาะจงของเรา ซึ่งทำให้การรีวิวโค้ดฟรอนท์เอนด์ของเราง่ายขึ้นและรวดเร็วขึ้นอย่างมาก และช่วยปรับปรุงเวลาในการพัฒนาของเราในท้ายที่สุด
—Aman Soni ผู้จัดการฝ่ายวิศวกรรมของ Policybazaar
WeTV
WeTV ซึ่งเป็นแพลตฟอร์มสตรีมมิงวิดีโอระหว่างประเทศของ Tencent ได้เพิ่ม Agent การเขียนโค้ด AI ลงในไปป์ไลน์ CI/CD ซึ่งใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent เพื่อวิเคราะห์การถดถอยของประสิทธิภาพ และใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัยเพื่อแก้ไขปัญหาโดยใช้ฟีเจอร์แพลตฟอร์มเว็บที่ทันสมัย ตอนนี้ Agent จะวิเคราะห์และแก้ไขการตรวจสอบประสิทธิภาพที่ไม่สำเร็จได้ถึง 90% โดยอัตโนมัติ ซึ่งช่วยลดเวลาในการแก้ไขข้อบกพร่องและการแก้ปัญหาลง 87% (จาก 4 ชั่วโมงเหลือ 30 นาที รวมถึงการประเมินด้วยตนเอง) ดังนี้
"ผลลัพธ์ที่ได้มีประสิทธิภาพมากทั้งในด้านความเร็วและคุณภาพ ข้อมูลวิเคราะห์เชิงลึกที่ได้จากเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent และคำแนะนำในการพัฒนาเว็บที่ทันสมัยช่วยให้เรามีข้อมูลอ้างอิงที่เชื่อถือได้สำหรับการแก้ไขปัญหาเลย์เอาต์ที่ซับซ้อน เราทำการยืนยันอย่างเข้มงวดหลังจากการแก้ไขทุกครั้ง และอัตราความสำเร็จและความเสถียรในปัจจุบันช่วยเพิ่มความมั่นใจในการเผยแพร่ของเราได้อย่างมาก"
—Yangjie Zheng หัวหน้าฝ่ายวิศวกรรมของ WeTV (Tencent)
note inc.
note inc. ซึ่งเป็นหนึ่งในแพลตฟอร์มครีเอเตอร์และสื่อที่ใหญ่ที่สุดของญี่ปุ่นที่มีผู้ใช้ที่ใช้งานอยู่รายเดือนมากกว่า 90 ล้านคน ได้ใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัยควบคู่ไปกับระบบการออกแบบภายในองค์กร ซึ่งเป็นส่วนหนึ่งของความพยายามอย่างต่อเนื่องในการปรับปรุงฟรอนท์เอนด์ Next.js ให้ทันสมัย ในการประเมิน 180 ครั้งในฐานของโค้ดเวอร์ชันที่ใช้งานจริง คำแนะนำในการพัฒนาเว็บที่ทันสมัยช่วยเพิ่มอัตราการผ่านในการตรวจสอบเว็บสมัยใหม่จาก 61% เป็น 94% โดยการแนะนำให้ Agent ใช้ฟีเจอร์ HTML และ CSS แบบเนทีฟแทน JavaScript ที่กำหนดเองสำหรับภาพเคลื่อนไหวการเลื่อน ทูลทิป และแอคคอร์เดียน นอกจากนี้ ยังเพิ่มการจัดลำดับความสำคัญของรูปภาพ LCP ที่เหมาะสมได้ 28% ใน PR ที่ผสานรวม 431 รายการ ดังนี้
"พันธกิจของเราที่ note คือ 'เริ่มและสร้างสรรค์ต่อไป' ดังนั้นแพลตฟอร์มของเราจึงต้องรวดเร็วและเข้าถึงได้สำหรับครีเอเตอร์และผู้อ่านทุกคน เนื่องจากโค้ดของเราเขียนด้วย Agent การเขียนโค้ด AI มากขึ้น คำแนะนำในการพัฒนาเว็บที่ทันสมัยจึงช่วยให้ Agent เหล่านี้เข้าถึงโซลูชันที่ทันสมัยและอิงตามมาตรฐาน แทนที่จะกลับไปใช้รูปแบบ JavaScript แบบเก่า นอกจากนี้ยังชี้ให้เห็นรายละเอียดที่อาจมองข้ามได้ง่าย เช่น ลำดับความสำคัญในการโหลดรูปภาพและการช่วยเหลือพิเศษของแบบฟอร์ม เมื่อรวมกับระบบการออกแบบของเราแล้ว ทำให้เราสามารถปรับปรุง Note ได้อย่างต่อเนื่องในขณะที่ยังคงรักษา UI ให้สอดคล้องกัน"
—Takehiko Itabashi, รองประธานฝ่ายเทคโนโลยีของ note inc.
MetaMask
MetaMask ซึ่งเป็นแพลตฟอร์มทางการเงินแบบจัดการด้วยตนเองที่มีการดาวน์โหลดมากกว่า 100 ล้านครั้งในประมาณ 190 ประเทศ ใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัยเป็นบ็อตตรวจสอบอัตโนมัติในทุก Pull Request ไปยังส่วนขยายเบราว์เซอร์โอเพนซอร์ส โดยกำหนดค่าด้วยพรอมต์เพียง 3 บรรทัด ในช่วง 5 สัปดาห์แรก บ็อตได้ตรวจสอบ Pull Request ประมาณ 480 รายการและแสดงความคิดเห็นใน 64 รายการ ซึ่งทำให้วิศวกรแก้ไขสิ่งที่พบ 43 รายการ (ส่วนใหญ่เป็นปัญหาเกี่ยวกับการช่วยเหลือพิเศษ ความหมายของ HTML และแบบฟอร์มที่ Linter ตรวจไม่พบ) โดยมีเวลาเฉลี่ย 15 นาทีตั้งแต่แสดงความคิดเห็นจนถึงแก้ไข
"รีวิวมีประโยชน์มาก ซึ่งช่วยให้วิศวกรของเราได้รู้จักและคุ้นเคยกับ API สมัยใหม่ เช่น Interest Invoker และ Popover API ซึ่งไม่ได้เพิ่มเวลาในการตรวจสอบ PR แต่กลับลดเวลาลงด้วยซ้ำ ปัญหาที่ MWG ตรวจพบนั้น หากไม่มีเครื่องมือนี้ก็จะต้องใช้เจ้าหน้าที่ตรวจสอบที่คุ้นเคยกับเทคนิคเว็บสมัยใหม่เหล่านี้"
—Francis Nepomuceno, วิศวกร UX ของ MetaMask
การสนับสนุนระบบนิเวศและชุมชน
คำแนะนำในการพัฒนาเว็บที่ทันสมัยเริ่มต้นจากโครงการริเริ่มภายใน Chrome แต่การบรรลุเป้าหมายเวอร์ชัน 1.0 นี้เป็นความพยายามร่วมกันของผู้เชี่ยวชาญจำนวนมากในชุมชนเว็บ
ขอขอบคุณหัวหน้าฝ่ายเทคนิคด้านพื้นที่เนื้อหาที่ดูแลพื้นที่แพลตฟอร์มเว็บแต่ละแห่ง, พาร์ทเนอร์เบราว์เซอร์ของเราที่ Firefox และ Edge, ผู้เชี่ยวชาญด้านมาตรฐานเว็บและการช่วยเหลือพิเศษอิสระที่เขียนและทดสอบคู่มือ รวมถึงผู้ร่วมสนับสนุนโอเพนซอร์สใน GitHub ทุกคนที่ช่วยกำหนดรูปแบบการเปิดตัวนี้
หากคุณพบช่องว่างในสิ่งที่เอเจนต์การเขียนโค้ดรู้เกี่ยวกับเว็บ หรือต้องการช่วยปรับปรุงคู่มือที่มีอยู่ โปรดดูคู่มือการมีส่วนร่วมเพื่อมีส่วนร่วม
เริ่มต้นใช้งานคำแนะนำในการพัฒนาเว็บที่ทันสมัย
หากต้องการเพิ่มคำแนะนำในการพัฒนาเว็บที่ทันสมัยลงในโปรเจ็กต์ ให้เรียกใช้โปรแกรมติดตั้ง CLI จากไดเรกทอรีโปรเจ็กต์ โดยทำดังนี้
npx modern-web-guidance@latest install
หรือหากติดตั้งเวอร์ชันก่อนหน้าไว้แล้ว คุณสามารถอัปเดตเป็น 1.0 ได้โดยเรียกใช้คำสั่งต่อไปนี้
npx modern-web-guidance@latest update
นอกจาก CLI แล้ว คุณยังติดตั้งและอัปเดตคำแนะนำในการพัฒนาเว็บที่ทันสมัยได้โดยตรงผ่านมาร์เก็ตเพลสปลั๊กอิน Agent การเขียนโค้ดยอดนิยมส่วนใหญ่ ซึ่งรวมถึง Claude Code, Codex, Cursor, Antigravity, Copilot, WebStorm, Kimi Code และ Grok Build
ดูข้อมูลเพิ่มเติมได้จากแหล่งข้อมูลต่อไปนี้