สรุปปี 2024 ของ Chrome สำหรับนักพัฒนาซอฟต์แวร์: การพลิกโฉมเว็บด้วย AI ใน DevTools, Gemini ในตัว และความสามารถใหม่ๆ ของ UI

เผยแพร่: 13 ธันวาคม 2024

การออนไลน์ในยุคที่เว็บเพิ่งเริ่มต้นหมายถึงการรออย่างอดทนผ่านการเชื่อมต่อแบบหมุนที่ช้าและเล่นกับบิตของ Perl และ HTML แต่เว็บก็มีการพัฒนา อย่างรวดเร็วในชั่วพริบตา ไม่ว่าคุณจะใช้ลิงก์เพื่อสั่งซื้อของชำในนาทีสุดท้าย หรือใช้ AI เพื่อสรุปบทความขนาดยาวจำนวนมาก ลิงก์ก็เป็น พอร์ทัลที่นำไปสู่ความเป็นไปได้ไม่รู้จบ

นี่คือเหตุผลที่พวกเราหลายคนชื่นชอบเว็บ เราได้เปิดตัวเครื่องมือใหม่ๆ สำหรับนักพัฒนาเว็บทุกคน ไม่ว่าคุณจะเป็นนักพัฒนาส่วนหน้าหรือฟูลสแต็ก มือใหม่หรือมือโปร เพื่อช่วยให้คุณดึงดูดผู้คนทั่วโลกได้มากขึ้น

ดูสรุปความสามารถนวัตกรรมปี 2024 ที่ช่วยให้คุณสร้างประสบการณ์บนเว็บที่ สร้างสรรค์ยิ่งขึ้นโดยใช้ความพยายามน้อยลง

AI ในตัวของ Chrome ช่วยให้นักพัฒนาแอปมอบฟีเจอร์ที่มีประสิทธิภาพด้วย Gemini ได้

ในงาน Google I/O 2024 เราได้ประกาศวิธีที่เราใช้ AI เพื่อเพิ่มประสิทธิภาพเว็บด้วย Gemini Nano ที่สร้างขึ้นใน Chrome โดยตรง จนถึงตอนนี้ มีผู้เข้าร่วมโปรแกรม รุ่นทดลอง ก่อนเปิดตัวกว่า 13,000 คนเพื่อช่วยเรากำหนดอนาคตของเว็บ เราขอขอบคุณเป็นอย่างยิ่งสำหรับ การมีส่วนร่วมของคุณ และพร้อมแล้วที่จะได้เห็นประสบการณ์การใช้งาน AI ที่สร้างสรรค์ ที่คุณจะสร้างขึ้น

เราได้เปิดตัว API ในตัวหลายรายการในการทดลองใช้ ต้นทาง เช่น Prompt API Translator API Summarizer API และ Language Detector API เพื่อช่วยให้คุณใช้ประโยชน์จาก AI ได้อย่างเต็มที่ ซึ่งทั้งหมดนี้ช่วยให้คุณเรียกใช้งานที่ขับเคลื่อนด้วย AI ในเบราว์เซอร์ได้โดยไม่ต้องเรียกเซิร์ฟเวอร์ และไม่จำเป็นต้องจัดการและติดตั้งใช้งานโมเดล AI ของคุณเอง นักพัฒนาแอปกว่า 8,600 คนลงทะเบียนเข้าร่วมการแข่งขัน AI ในตัวของ Google Chrome เพื่อสร้างเว็บแอปหรือส่วนขยาย Chrome โดยใช้ API เหล่านี้ เราจะประกาศผู้ชนะในช่วงกลางเดือนมกราคม โปรดรอติดตาม

PolicyBazaar ใช้ Language Detector API เพื่อตรวจหาภาษา เมื่อลูกค้าเปลี่ยนภาษาในระหว่างการสนทนา

AI ในอุปกรณ์ได้รับการเพิ่มประสิทธิภาพด้วยการปรับปรุง WebAssembly (Wasm) และ WebGPU

เราเชื่อว่าเว็บเป็นรันไทม์ที่ดีที่สุดสำหรับคุณในการสร้างแอปที่เปิดใช้ AI ซึ่งสามารถ เข้าถึงทุกคนได้ นอกจาก API ของ AI ในตัวแล้ว เรายังได้ปรับปรุงเทคโนโลยี 2 อย่างที่ช่วยให้คุณนำโมเดล AI ของคุณเองมาใช้บนเว็บและเรียกใช้ได้อย่างรวดเร็ว ได้แก่ WebGPU และ Wasm

เราได้เปิดตัวค่าจุดลอยตัว 16 บิตใน WebGPU และผลิตภัณฑ์ดอทของจำนวนเต็มแบบแพ็ก ซึ่งช่วยให้ใช้ GPU ของอุปกรณ์ได้อย่างยืดหยุ่นมากขึ้นด้วย Compute Shader การปรับปรุงในอนาคตที่วางแผนไว้สำหรับ WebGPU ได้แก่ กลุ่มย่อยและเมทริกซ์กลุ่มย่อย ฟีเจอร์เหล่านี้ จะช่วยให้แอปสื่อสารระหว่างเธรด GPU ได้อย่างรวดเร็วและใช้ประโยชน์จาก การคูณเมทริกซ์ขนาดคงที่ได้อย่างเต็มที่ นอกจากนี้ เราจะเปิดตัว Memory64 สำหรับ Wasm ในปี 2025 เพื่อให้โมเดล AI ขนาดใหญ่ขึ้นสามารถเข้าถึงได้ในหน่วยความจำ

กราฟการเปรียบเทียบจาก Transformers.js
การทดสอบประสิทธิภาพ WebGPU จาก Transformers.js แสดงให้เห็นว่า WebGPU เร็วกว่า Wasm 32.51 เท่า

View Transition API ช่วยให้เว็บไซต์ดูเชื่อมต่อกันมากขึ้นกว่าที่เคยด้วยการนำทางที่ราบรื่น

ความสามารถใหม่ๆ เช่น การเปลี่ยนมุมมองเอกสาร ข้ามเอกสาร ช่วยให้คุณสร้างการนำทางที่ราบรื่นและลื่นไหลในหลายหน้าได้ เพียงใช้ CSS ไม่กี่บรรทัด คุณก็กำจัด "การกระพริบ" ที่น่ารำคาญเมื่อโหลดซ้ำได้ การนำทางที่ลื่นไหลและดูเป็นธรรมชาติที่ได้ จะช่วยให้คุณมอบประสบการณ์ที่สมจริงยิ่งขึ้นในขณะที่ ยังคงได้รับประโยชน์จากสถาปัตยกรรมแบบหลายหน้า

การเปลี่ยนมุมมองช่วยให้การนำทางข้ามหน้าเว็บเป็นไปอย่างราบรื่น ดูเดโมการเปลี่ยนมุมมอง

ป๊อปอัป CSS และการจัดตำแหน่งจุดยึดช่วยให้วางซ้อนแบบอินเทอร์แอกทีฟได้โดยไม่ต้องใช้ JavaScript

ตอนนี้คุณสามารถสร้างเคล็ดลับ เมนู และการวางซ้อนอื่นๆ ด้วย popover และ เชื่อมโยงองค์ประกอบเหล่านี้กับองค์ประกอบทริกเกอร์ด้วยAPI การจัดตำแหน่งยึด CSS ได้แล้ว คุณเพียงแค่ต้องใช้ CSS และ HTML เล็กน้อยเพื่อให้แน่ใจว่าภาพซ้อนทับจะยังคงยึดและมองเห็นได้ แม้ว่าผู้ใช้จะเลื่อนหรือปรับขนาดหน้าต่างก็ตาม ผู้ใช้จะได้รับประสบการณ์การใช้งานเว็บที่เชื่อถือได้และไดนามิกมากขึ้น และคุณก็ไม่ต้องจัดการ z-index และคณิตศาสตร์การจัดตำแหน่ง JavaScript ที่ซับซ้อน ถือว่าได้ประโยชน์ทั้งสองฝ่าย

Speculation Rules API ช่วยให้ไปยังส่วนต่างๆ ได้แทบจะในทันทีด้วยการแสดงหน้าเว็บล่วงหน้า

ความเร็วในการโหลดหน้าเว็บเปลี่ยนจากเร็วเป็นแทบจะในทันทีในปีนี้ด้วย API ของกฎการคาดคะเน API นี้ ซึ่งใช้โค้ด JSON เพียงไม่กี่บรรทัดในการติดตั้งใช้งาน จะช่วยให้หน้าเว็บ แสดงผลล่วงหน้าอย่างเต็มรูปแบบในเบื้องหลังเพื่อให้พร้อมใช้งานทุกเมื่อที่ผู้ใช้ ต้องการ

web.dev ใช้เวลาโหลด 1.6 วินาทีโดยไม่มีการแสดงผลล่วงหน้า และ 0.2 วินาทีเมื่อมีการแสดงผลล่วงหน้า

Interaction to Next Paint (INP) จะกลายเป็น Core Web Vitals

INP มาแทนที่ First Input Delay เพื่อเป็น Core Web Vitals ในเดือนมีนาคมเพื่อช่วยให้คุณวัด การตอบสนองของหน้าเว็บได้อย่างครอบคลุมมากขึ้นนอกเหนือจากการป้อนข้อมูลครั้งแรกของผู้ใช้ นับตั้งแต่ตอนนั้นเป็นต้นมา จำนวนเว็บไซต์ที่มี INP "ดี" ในอุปกรณ์เคลื่อนที่เพิ่มขึ้น 9% ซึ่งหมายถึงประสบการณ์ของผู้ใช้ที่เร็วขึ้นและสนุกสนานมากขึ้นทั่วทั้งเว็บ

การป้อนข้อความอัตโนมัติช่วยให้คุณสร้างความพึงพอใจให้ผู้ใช้ด้วยการชำระเงินออนไลน์ที่ราบรื่นยิ่งขึ้น

การเปิดใช้การป้อนข้อความอัตโนมัติ ซึ่ง ช่วยให้เบราว์เซอร์กรอกช่องแบบฟอร์มโดยอัตโนมัติด้วยข้อมูลที่ผู้ใช้บันทึกไว้ จะช่วยกระตุ้นให้ผู้ใช้ส่งแบบฟอร์มจนเสร็จ เมื่อทีม Chrome วิเคราะห์ข้อมูลรวมที่ไม่ระบุตัวตนในแบบฟอร์มออนไลน์หลายพันรายการ พบว่าการละทิ้งแบบฟอร์มลดลงโดยเฉลี่ย 75% เมื่อใช้การป้อนข้อความอัตโนมัติ แม้ว่าจะมีหลายปัจจัยที่ช่วยให้ประสบการณ์การชำระเงินเป็นไปอย่างราบรื่น แต่ข้อมูลก็ชี้ให้เห็นว่าการป้อนข้อความอัตโนมัติมีบทบาทสำคัญในการช่วยให้ผู้ใช้ได้รับประสบการณ์การชำระเงินที่ดี

การป้อนข้อความอัตโนมัติมีประโยชน์อย่างยิ่งสำหรับขั้นตอนการชำระเงินของอีคอมเมิร์ซ ที่ Shopify การชำระเงินในฐานะผู้เข้าชมที่ใช้การป้อนข้อความอัตโนมัติมีอัตรา Conversion ของการชำระเงินสูงกว่าการชำระเงินในฐานะผู้เข้าชมที่ไม่ได้ใช้การป้อนข้อความอัตโนมัติถึง 45%

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ยกระดับด้วยโซลูชันที่ทำงานด้วยระบบ AI

คุณอาจจำได้ว่าเราได้เปิดตัว Gemini ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome พร้อมข้อมูลเชิงลึกของคอนโซล ซึ่งช่วยให้คุณเข้าถึงการแก้ไขข้อบกพร่องที่ทำงานด้วยระบบ AI เพื่อการแก้ปัญหาที่มีประสิทธิภาพมากขึ้น ฟีเจอร์นี้พร้อมให้บริการทั่วโลกแล้วตั้งแต่ Google I/O 2024

นอกจากนี้ เรายังได้เปิดตัวแผงความช่วยเหลือจาก AI ซึ่งใช้ Gemini เพื่อช่วยให้คุณเข้าใจรายละเอียดทางเทคนิคของหน้าเว็บ เช่น การจัดรูปแบบ คำขอเครือข่าย แหล่งที่มา และประสิทธิภาพ

ข้อมูลเชิงลึกของคอนโซลและแผงความช่วยเหลือจาก AI
ข้อมูลเชิงลึกของคอนโซลและแผงความช่วยเหลือจาก AI เป็นการปรับปรุง DevTools เพียง 2 รายการจากการปรับปรุงหลายรายการในปี 2024

คุณอาจสังเกตเห็นว่าแผงประสิทธิภาพได้รับการปรับปรุงมากมายในปีนี้ รวมถึงความสามารถในการตรวจสอบ Core Web Vitals แบบเรียลไทม์ และเพิ่มคำอธิบายประกอบ นอกจากนี้ เรายังได้นำความสามารถของ Lighthouse มาไว้ในแผงประสิทธิภาพด้วยข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ

การปรับปรุงที่เปิดใช้ AI, การปรับปรุงแผงประสิทธิภาพ และการอัปเดตคุณภาพชีวิตหลายสิบรายการ เช่น ป้ายเลื่อน ทำให้ Chrome DevTools มีประโยชน์มากกว่าที่เคย เราจะทำการปรับปรุงเพิ่มเติม เช่น การอัปเกรด ประสิทธิภาพด้วยโมเดล Gemini 2.0 ใหม่ในปี 2025

Baseline 2024 นำฟีเจอร์ใหม่ๆ บนเว็บที่ใช้ได้กับหลายเบราว์เซอร์มาให้แก่นักพัฒนาซอฟต์แวร์

ตั้งแต่การประมาณค่าการไล่ระดับสีไปจนถึงพร็อพเพอร์ตี้ที่กําหนดเองที่ลงทะเบียน Baseline 2024 มีฟีเจอร์ใหม่บนเว็บที่ใช้ได้ในหลายเบราว์เซอร์ 39 รายการแล้วในตอนนี้ คุณไม่ต้องกังวลเรื่อง การทำงานร่วมกันเมื่อฟีเจอร์เป็นส่วนหนึ่งของ Baseline มาแล้วอย่างน้อย 30 เดือน แต่หากคุณกำลังตัดสินใจว่าการใช้ฟีเจอร์ใหม่คุ้มค่ากับ การสูญเสียการเข้าถึงบางส่วนหรือไม่ ให้ดูข้อมูลเชิงลึกของที่เก็บถาวร RUM ของ Akamai สำหรับฟีเจอร์ของแต่ละเวอร์ชันพื้นฐาน และส่วนแบ่งผู้ใช้ทั่วโลก

ประกาศเกี่ยวกับ Baseline ที่เราชื่นชอบที่สุดในปีนี้คือแดชบอร์ดสถานะแพลตฟอร์มเว็บ ซึ่งแสดงฟีเจอร์ทั้งหมดของเว็บพร้อม ระดับการรองรับข้ามเบราว์เซอร์ สิ่งที่น่าตื่นเต้นยิ่งกว่าคือข้อมูลที่ขับเคลื่อนแดชบอร์ดสถานะแพลตฟอร์มเว็บนั้นเปิดและพร้อมใช้งานเพื่อให้คุณใช้และผสานรวมเข้ากับเครื่องมือของคุณเองได้ แบนเนอร์พื้นฐานเป็นตัวอย่างที่ดีในเรื่องนี้

เบราว์เซอร์หลักๆ ทำให้ฟีเจอร์ต่างๆ เป็นเกณฑ์พื้นฐานมากขึ้นด้วย Interop 2024

เราได้ร่วมงานกับพาร์ทเนอร์อีกครั้งใน Interop 2024 เพื่อช่วยเพิ่มฟีเจอร์ต่างๆ ให้กับ Baseline ฟีเจอร์เป้าหมายของปีนี้ ได้แก่ ป๊อปโอเวอร์ การซ้อน CSS, font-size-adjust และไวยากรณ์สีสัมพัทธ์

นอกจากนี้ Interop ยังระบุคะแนนสำหรับการเปิดตัวเบราว์เซอร์เวอร์ชันทดลองและเวอร์ชันเสถียรด้วย ปัจจุบันคะแนน Interop โดยรวมสำหรับเบราว์เซอร์เวอร์ชันเสถียรอยู่ที่ 87 และ Chrome เวอร์ชันเสถียรมีคะแนน 98 เมื่อเราเข้าสู่ช่วงสิ้นปี คุณติดตามความคืบหน้าของเบราว์เซอร์ได้ในแดชบอร์ด Interop เรากำลังวางแผนสำหรับ Interop 2025 ซึ่งจะประกาศในเดือนกุมภาพันธ์

ร่วมกันกำหนดการเติบโตของเว็บในปีใหม่

แม้ว่าความคืบหน้าในปี 2024 จะน่าตื่นเต้นเพียงใด แต่เราก็รู้ว่าอนาคตจะสดใสยิ่งกว่า และทั้งหมดนี้เป็นผลมาจากความมุ่งมั่น ความคิดเห็น และนวัตกรรมร่วมกันจากคุณ ซึ่งก็คือชุมชนนักพัฒนาแอปของเรา ในงานต่างๆ ทั่วโลก ตั้งแต่ BrazilJS Conference และ DevFest Paris ไปจนถึง Google I/O 2024 และ Web AI Summit ครั้งแรก สิ่งหนึ่งที่ชัดเจนสำหรับเราครั้งแล้วครั้งเล่าคือ ทุกคนเชื่อมั่นในพลังและศักยภาพของเว็บมากพอๆ กับที่เราเชื่อ

คุณมีไอเดียที่กล้าหาญกว่าที่เคย เรามุ่งมั่นที่จะช่วยให้คุณสร้างสรรค์ผลงาน ได้อย่างเต็มที่ โปรดติดตามเราบน X, YouTube และ LinkedIn เพื่อรับข้อมูลอัปเดตล่าสุด และมาจินตนาการถึงพลังของ เว็บ ไปด้วยกัน