สรุปข่าวสารและข้อมูลอัปเดตสำคัญที่ประกาศระหว่างกิจกรรมชุมชนออนไลน์ระยะเวลา 3 วันของเรา และการช่วยเตือนเกี่ยวกับกิจกรรมในภูมิภาคที่กำลังจะเกิดขึ้น
เราเพิ่งสิ้นสุดกิจกรรม web.dev LIVE นาน 3 วันไป ซึ่งชุมชนเว็บบางส่วนได้มารวมตัวกันทางออนไลน์เพื่อพูดคุยเกี่ยวกับสถานะการพัฒนาเว็บ เราเริ่มต้นกันทุกวันในเขตเวลาระดับภูมิภาคที่ต่างกัน และ Googler ได้แชร์ข่าวสารอัปเดต ข่าวสาร และเคล็ดลับต่างๆ ด้วยเจตนาที่การช่วยเหลือนักพัฒนาซอฟต์แวร์ด้วยเครื่องมือและคำแนะนำต่างๆ ในการดูแลเว็บให้เสถียร มีประสิทธิภาพ และเข้าถึงง่าย
หากคุณพลาดการสตรีมแบบสดบางตอน ระบบจะบันทึกเซสชันทั้งหมดไว้ให้คุณรับชมบน YouTube ได้ เรายังมีกิจกรรมระดับภูมิภาคที่กำลังจะจัดขึ้นทั่วโลกซึ่งจัดขึ้นโดย Google Developer Group และจะเป็นเซสชันเจาะลึกเกี่ยวกับหัวข้อที่เกี่ยวข้องกับสิ่งที่เราพูดคุยกันในงาน web.dev LIVE
มาเจาะลึกข่าวสารและอัปเดตที่แชร์ในช่วง 3 วันกัน
Web Vitals
ทีม Chrome ได้ประกาศโครงการริเริ่ม Web Vitals ที่ให้คำแนะนำ เมตริก และเครื่องมือแบบครบวงจรเพื่อช่วยให้นักพัฒนาซอฟต์แวร์มอบประสบการณ์การใช้งานที่ยอดเยี่ยมแก่ผู้ใช้บนเว็บ ทีม Google Search ยังประกาศเมื่อไม่นานมานี้ว่าจะประเมินประสบการณ์การใช้งานหน้าเว็บเป็นเกณฑ์การจัดอันดับ และจะรวมเมตริก Core Web Vitals เป็นรากฐาน
องค์ประกอบหลัก 3 ประการของ Core Web Vitals ปี 2020 ได้แก่ การโหลด การโต้ตอบ และความเสถียรของภาพของเนื้อหาของหน้า ซึ่งวัดได้จากเมตริกต่อไปนี้
- Largest Contentful Paint วัดความเร็วในการโหลดที่รับรู้ได้ และทำเครื่องหมายจุดในไทม์ไลน์การโหลดหน้าเว็บเมื่อเนื้อหาหลักของหน้าโหลดขึ้น
- First Input Delay จะวัดการตอบสนองและจำนวนประสบการณ์ที่ผู้ใช้รู้สึกเมื่อพยายามโต้ตอบกับหน้าเว็บเป็นครั้งแรก
- Cumulative Layout Shift จะวัดความเสถียรของภาพและนับจำนวนการเคลื่อนไหวที่ไม่คาดคิดของเนื้อหาในหน้า
ที่ web.dev LIVE เราได้แชร์แนวทางปฏิบัติแนะนำเกี่ยวกับวิธีเพิ่มประสิทธิภาพสำหรับ Core Web Vitals และวิธีใช้ Chrome DevTools เพื่อสำรวจค่า Vitals ของเว็บไซต์ นอกจากนี้ เรายังได้แชร์การพูดคุยอื่นๆ เกี่ยวกับประสิทธิภาพซึ่งคุณดูได้ที่ web.dev/live ในกำหนดการของวันที่ 1
tooling.report
การพัฒนาแพลตฟอร์มให้กว้างพอๆ กับเว็บอาจเป็นเรื่องที่ท้าทาย เครื่องมือสร้างมักเป็นหัวใจสำคัญของโปรเจ็กต์การพัฒนาเว็บ โดยมีบทบาทสำคัญในการจัดการนักพัฒนาซอฟต์แวร์และวงจรผลิตภัณฑ์
เราต่างเห็นไฟล์การกำหนดค่าเวอร์ชันที่ไม่เป็นระเบียบ เราจึงสร้าง tooling.report ขึ้นมาเพื่อช่วยให้นักพัฒนาเว็บและเครื่องมือผู้เขียนเครื่องมือเอาชนะความซับซ้อนของเว็บ เครื่องมือนี้เป็นเว็บไซต์ที่จะช่วยให้คุณเลือกเครื่องมือสร้างที่เหมาะสมสำหรับโปรเจ็กต์ถัดไป ตัดสินใจว่าการย้ายข้อมูลจากเครื่องมือหนึ่งไปอีกเครื่องมือหนึ่งคุ้มค่าหรือไม่ หรือเรียนรู้วิธีรวมแนวทางปฏิบัติแนะนำไว้ในการกำหนดค่าเครื่องมือและฐานโค้ด
เราออกแบบชุดการทดสอบเพื่อดูว่าเครื่องมือสร้างรุ่นใดที่จะช่วยให้คุณทำตามแนวทางปฏิบัติแนะนำในการพัฒนาเว็บได้ เราทำงานร่วมกับผู้เขียนเครื่องมือสร้าง เพื่อให้แน่ใจว่าเราใช้เครื่องมือของตนอย่างถูกต้องและนำเสนออย่างเป็นธรรม
การเปิดตัวครั้งแรกของ Tooling.report ครอบคลุมถึง Webpack v4, Rollup v2, Parel v2 และ browserify with Gulp ซึ่งดูเหมือนว่าจะเป็นเครื่องมือสร้างที่ได้รับความนิยมมากที่สุดในขณะนี้ เราสร้าง Tooling.report ที่มีความยืดหยุ่นในการเพิ่มเครื่องมือสร้างและการทดสอบอื่นๆ ด้วยความช่วยเหลือจากชุมชน
หากเราขาดแนวทางปฏิบัติแนะนำที่ควรทดสอบ โปรดเสนอในปัญหา GitHub หากคุณพร้อมที่จะเขียนการทดสอบหรือเพิ่มเครื่องมือใหม่ที่เราไม่ได้รวมไว้ในชุดเริ่มต้น เราก็ยินดีให้คุณร่วมให้ข้อมูล
ในระหว่างนี้ คุณสามารถอ่านข้อมูลเพิ่มเติมเกี่ยวกับวิธีการสร้างtooling.report และดูเซสชันจาก web.dev สด
ความเป็นส่วนตัวและความปลอดภัยในเว็บ
Chrome เชื่อมั่นในเว็บแบบเปิดที่เคารพความเป็นส่วนตัวของผู้ใช้ และยังคงรักษากรณีการใช้งานหลักๆ ที่ทำให้เว็บใช้งานได้สำหรับทุกคน
ในปี 2019 Chrome ได้เสนอการอัปเดตมาตรฐานคุกกี้เพื่อจำกัดคุกกี้ให้อยู่ในบริบทของบุคคลที่หนึ่งโดยค่าเริ่มต้น และกำหนดให้ต้องทำเครื่องหมายคุกกี้สำหรับบริบทของบุคคลที่สามอย่างชัดแจ้ง กล่าวอย่างเจาะจงคือ วิธีนี้เป็นการป้องกันการโจมตี ด้วยการปลอมแปลงคำขอแบบข้ามเว็บไซต์ กำลังใช้ข้อเสนอนี้โดย Chrome, Firefox, Edge และเบราว์เซอร์อื่นๆ
แม้ว่า Chrome ตัดสินใจที่จะย้อนกลับการเปลี่ยนแปลงเหล่านี้ไว้ชั่วคราวเนื่องด้วยสถานการณ์โควิด-19 แต่ที่น่าเศร้าคือ ในช่วงวิกฤติที่ผู้คนตกอยู่ในความเสี่ยงมากที่สุด คุณก็จะเห็นรูปแบบการโจมตีแบบนี้เพิ่มมากขึ้นเช่นกัน ดังนั้น ในรุ่น Chrome 84 เวอร์ชันเสถียร (กลางเดือนกรกฎาคม 2020) การเปลี่ยนแปลงจะเริ่มเปิดตัวอีกครั้งใน Chrome ทุกเวอร์ชันตั้งแต่ 80 ขึ้นไป ดูข้อมูลเพิ่มเติมได้ในคำแนะนำเกี่ยวกับคุกกี้ SameSite และเซสชัน web.dev LIVE
นอกจากนี้ ใต้แบนเนอร์ของ Privacy Sandbox Chrome ยังนำเสนอข้อเสนอมาตรฐานต่างๆ ที่มีเป้าหมายเพื่อสนับสนุนกรณีการใช้งานที่ให้ผู้ใช้สร้างรายได้โดยใช้แพลตฟอร์มเว็บด้วยวิธีที่เคารพความเป็นส่วนตัวของผู้ใช้มากขึ้น Chrome ต้องการความคิดเห็นเกี่ยวกับข้อเสนอเหล่านี้อย่างจริงจัง และเข้าร่วมในฟอรัมแบบเปิดของ W3C เพื่อหารือเกี่ยวกับข้อเสนอต่างๆ รวมถึงข้อเสนอที่ฝ่ายอื่นๆ ส่งเข้ามา ดูข้อมูลเพิ่มเติมเกี่ยวกับโครงการริเริ่มนี้ในเซสชันความปลอดภัยและความเป็นส่วนตัวสำหรับเว็บแบบเปิด
สุดท้าย เมื่อพิจารณาความปลอดภัยของผู้ใช้แล้ว Spectre เป็นช่องโหว่ที่หมายถึงโค้ดที่เป็นอันตรายซึ่งกำลังทำงานในกระบวนการของเบราว์เซอร์หนึ่งอาจอ่านข้อมูลที่เกี่ยวข้องกับกระบวนการดังกล่าวได้แม้จะมาจากต้นทางอื่น หนึ่งในปัญหาที่พบได้ในเบราว์เซอร์คือการแยกเว็บไซต์ กล่าวคือการนำแต่ละเว็บไซต์ไปไว้ในกระบวนการที่แยกจากกัน ดูเซสชันสดของ web.dev ในนโยบายเครื่องมือเปิดและเครื่องมือฝังแบบข้ามต้นทางใหม่ (COOP และ COEP) เพื่อดูข้อมูลเพิ่มเติม
การสร้างเว็บที่มีความสามารถอันทรงพลัง
Chrome ต้องการให้คุณสร้างเว็บแอปที่มีคุณภาพสูงสุดได้อย่างอิสระ เพื่อช่วยให้คุณเข้าถึงผู้ใช้ได้มากที่สุดบนอุปกรณ์ต่างๆ เมื่อรวมความสามารถในการติดตั้งและความน่าเชื่อถือของ PWA เข้ากับโปรเจ็กต์ความสามารถ (Project Fugu) Chrome จะมุ่งเน้น 3 สิ่งต่อไปนี้เพื่อปิดช่องว่างระหว่างแอปเฉพาะแพลตฟอร์มกับเว็บ เพื่อช่วยคุณสร้างและมอบประสบการณ์ที่ยอดเยี่ยม
อันดับแรก ทีม Chrome ทำงานอย่างหนักเพื่อให้นักพัฒนาเว็บและผู้ใช้ควบคุมประสบการณ์การติดตั้งได้มากขึ้น การเพิ่มโปรโมชันการติดตั้งลงในแถบอเนกประสงค์ และอีกมากมาย แม้จะมีอยู่อย่างแพร่หลายบนเว็บ แต่ธุรกิจบางแห่งก็ต้องมีแอปอยู่ใน Store เป็นสิ่งสำคัญ Chrome จึงได้เปิดตัว Bubblewrap ซึ่งเป็นไลบรารีและ CLI ที่ทำให้การนำ PWA มาไว้ใน Play Store เป็นเรื่องที่ไม่ยุ่งยาก อันที่จริง PWABuilder.com ใช้ Bubblewrap ในเครื่อง คุณสามารถสร้าง APK และอัปโหลด PWA ไปยัง Play Store ได้ด้วยการคลิกเมาส์เพียงไม่กี่ครั้ง ตราบใดที่คุณมีคุณสมบัติตามเกณฑ์
รูปแบบที่ 2 คือ Chrome มีการผสานรวมกับระบบปฏิบัติการอย่างเข้มงวดยิ่งขึ้น เช่น ความสามารถในการแชร์รูปภาพ เพลง หรืออะไรก็ตามโดยเรียกใช้บริการแชร์ระดับระบบด้วย API การแชร์เว็บ หรือความสามารถในการรับเนื้อหาเมื่อมีการแชร์จากแอปอื่นที่ติดตั้ง คุณสามารถคอยอัปเดตให้ผู้ใช้ทราบหรือแจ้งเตือนกิจกรรมใหม่แบบเร็วๆ ด้วยการติดป้ายแอป นอกจากนี้ ตอนนี้ผู้ใช้ยังเริ่มการทํางานอย่างรวดเร็วได้ง่ายขึ้นด้วยทางลัดของแอป ซึ่งจะอยู่ใน Chrome 84 (กลางเดือนกรกฎาคม 2020)
และสุดท้าย Chrome ได้พยายามสร้างความสามารถใหม่ๆ ที่ทำให้ได้สถานการณ์ใหม่ๆ ที่ไม่สามารถทำได้ก่อนหน้านี้ เช่น โปรแกรมแก้ไขที่อ่านและเขียนไฟล์ลงในระบบไฟล์ในเครื่องของผู้ใช้ หรือรับรายการแบบอักษรที่ติดตั้งอยู่ในเครื่องเพื่อให้ผู้ใช้นำไปใช้ในการออกแบบได้
ในงาน web.dev LIVE เราได้พูดถึงความสามารถและฟีเจอร์อื่นๆ มากมายที่ให้คุณมอบประสบการณ์การใช้งานเหมือนๆ กัน พร้อมความสามารถแบบเดียวกับแอปเฉพาะแพลตฟอร์ม ดูเซสชันทั้งหมดที่ web.dev/live ในกำหนดการของวันที่ 2
มีอะไรใหม่ใน Chrome DevTools และ Lighthouse 6.0
เครื่องมือสําหรับนักพัฒนาเว็บใน Chrome: แท็บ "ปัญหา" ใหม่ โปรแกรมจำลองการขาดสี และการสนับสนุน Web Vitals
หนึ่งในฟีเจอร์ที่มีประสิทธิภาพที่สุดของ Chrome DevTools คือความสามารถในการตรวจหาปัญหาในหน้าเว็บและดึงดูดความสนใจของนักพัฒนาซอฟต์แวร์ ซึ่งเป็นสิ่งที่เกี่ยวข้องมากที่สุดขณะที่เราก้าวเข้าสู่ขั้นต่อไปของเว็บที่ให้ความสำคัญกับความเป็นส่วนตัวเป็นอันดับแรก เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ได้เปิดตัวแท็บปัญหา ซึ่งมุ่งเน้นไปที่ปัญหาร้ายแรง 3 ประเภท โดยเริ่มจากปัญหาคุกกี้ เนื้อหาผสม และปัญหาเกี่ยวกับ COEP เพื่อลดความเหนื่อยล้าและการรบกวนการแจ้งเตือนในคอนโซล ดูเซสชันสดของ web.dev เกี่ยวกับการค้นหาและแก้ปัญหาด้วยแท็บปัญหาเพื่อเริ่มต้นใช้งาน
นอกจากนี้ การที่ Core Web Vitals กลายเป็นหนึ่งในชุดเมตริกที่สำคัญที่สุดสำหรับนักพัฒนาเว็บเพื่อติดตามและวัดผล เครื่องมือสำหรับนักพัฒนาเว็บจึงต้องดูแลให้นักพัฒนาแอปติดตามประสิทธิภาพการทำงานตามเกณฑ์เหล่านี้ได้อย่างง่ายดาย เมตริก 3 รายการนี้ อยู่ในแผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แล้ว
และสุดท้าย DevTools ยังนำเสนอโปรแกรมจำลองความบกพร่องทางการมองเห็นสีที่ช่วยให้นักพัฒนาซอฟต์แวร์จำลองการตามัวและภาวะบกพร่องทางการมองเห็นประเภทอื่นๆ ได้ด้วย คุณดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์นี้และฟีเจอร์อื่นๆ ได้ในเซสชันมีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
Lighthouse 6.0: เมตริกใหม่, การวัดผลในห้องทดลอง Core Web Vitals, คะแนนประสิทธิภาพที่อัปเดต และการตรวจสอบใหม่
Lighthouse เป็นเครื่องมืออัตโนมัติแบบโอเพนซอร์ส ที่ช่วยให้นักพัฒนาซอฟต์แวร์ปรับปรุงประสิทธิภาพของเว็บไซต์ได้ ในเวอร์ชันล่าสุดนี้ ทีม Lighthouse ได้มุ่งเน้นการให้ข้อมูลเชิงลึกตามเมตริกต่างๆ ซึ่งช่วยให้คุณเห็นมุมมองที่สมดุลเกี่ยวกับคุณภาพประสบการณ์ของผู้ใช้เทียบกับมิติข้อมูลที่สำคัญ
Lighthouse เพิ่มการรองรับ Core Web Vitals ดังนี้ LCP, TBT (พร็อกซีสำหรับ FID เนื่องจาก Lighthouse เป็นเครื่องมือในห้องทดลองและ FID วัดได้ในพื้นที่เท่านั้น) และ CLS นอกจากนี้ Lighthouse ยังได้นำเมตริกเก่า 3 รายการออก ได้แก่ First Meaningful Paint, First CPU Idle และ Max Potential FID การนำออกเหล่านี้เกิดจากการพิจารณาต่างๆ เช่น ความแปรปรวนของเมตริกและเมตริกใหม่ๆ ที่ให้การสะท้อนประสบการณ์ของผู้ใช้ที่ Lighthouse กำลังพยายามวัดผลที่ดีขึ้น นอกจากนี้ Lighthouse ยังได้ปรับวิธีที่เมตริกแต่ละรายการส่งผลต่อคะแนนประสิทธิภาพโดยรวมตามความคิดเห็นของผู้ใช้อีกด้วย
Lighthouse ยังได้เพิ่มเครื่องคำนวณคะแนนเพื่อช่วยให้คุณดูการให้คะแนนประสิทธิภาพได้โดยการเปรียบเทียบคะแนนเวอร์ชัน 5-6 เมื่อเรียกใช้การตรวจสอบด้วย Lighthouse 6.0 รายงานจะมาพร้อมลิงก์ไปยังเครื่องคิดเลขเพื่อแสดงผลลัพธ์
และสุดท้าย Lighthouse ได้เพิ่มการตรวจสอบใหม่หลายรายการ โดยมุ่งเน้นที่การวิเคราะห์และการเข้าถึง JavaScript
ดูข้อมูลเพิ่มเติมได้ในเซสชันมีอะไรใหม่ในเครื่องมือความเร็ว
ดูข้อมูลเพิ่มเติม
ขอขอบคุณทุกคนในชุมชนที่มาร่วมพูดคุยกับเราเกี่ยวกับโอกาสและความท้าทายของแพลตฟอร์มเว็บ
โพสต์นี้สรุปไฮไลต์บางส่วนของกิจกรรม แต่ยังมีอะไรอีกอีกมากมาย โปรดตรวจสอบเซสชันทั้งหมดและสมัครรับจดหมายข่าว web.dev หากต้องการเนื้อหาเพิ่มเติมทางอีเมล และไปที่ส่วนกิจกรรมในภูมิภาคบน web.dev/live เพื่อหากิจกรรมของชุมชนที่กำลังจะเกิดขึ้นในเขตเวลาของคุณ!