สรุปข่าวสารและข้อมูลอัปเดตที่สำคัญซึ่งประกาศในกิจกรรมชุมชนออนไลน์ระยะเวลา 3 วันของเรา รวมถึงการช่วยเตือนเกี่ยวกับกิจกรรมระดับภูมิภาคที่กำลังจะจัดขึ้น
เราเพิ่งจัดกิจกรรม web.dev LIVE เป็นเวลา 3 วัน ซึ่งมีสมาชิกบางส่วนจากชุมชนเว็บมารวมตัวกันทางออนไลน์เพื่อพูดคุยเกี่ยวกับสถานะของการพัฒนาเว็บ เราเริ่มงานแต่ละวันในเขตเวลาของภูมิภาคที่แตกต่างกัน และ Googler ได้แชร์ข้อมูลอัปเดต ข่าวสาร และเคล็ดลับต่างๆ เพื่อช่วยเหลือนักพัฒนาซอฟต์แวร์ด้วยเครื่องมือและคำแนะนำเพื่อให้เว็บมีความเสถียร มีประสิทธิภาพ และเข้าถึงได้
หากคุณพลาดไลฟ์สดบางส่วน เราได้บันทึกเซสชันทั้งหมดไว้ให้คุณรับชมบน YouTube แล้ว นอกจากนี้ เรายังมีกิจกรรมระดับภูมิภาคที่กำลังจะจัดขึ้นทั่วโลก ซึ่งจัดโดย Google Developer Groups และจะมีการจัดเซสชันข้อมูลเจาะลึกในหัวข้อที่เกี่ยวข้องกับสิ่งที่เราพูดถึงใน 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 เพื่อสำรวจค่า Vitals ของเว็บไซต์ นอกจากนี้ เรายังแชร์การพูดคุยอื่นๆ ที่เกี่ยวข้องกับประสิทธิภาพอีกมากมาย ซึ่งคุณดูได้ที่ web.dev/live ในกำหนดการของวันที่ 1
tooling.report
การพัฒนาสำหรับแพลตฟอร์มที่กว้างอย่างเว็บอาจเป็นเรื่องที่ท้าทาย เครื่องมือสร้างมักเป็นหัวใจสำคัญของโปรเจ็กต์การพัฒนาเว็บ โดยมีบทบาทสำคัญในการจัดการวงจรของนักพัฒนาเว็บและผลิตภัณฑ์
เราทุกคนเคยเห็นไฟล์การกำหนดค่าบิลด์ที่ยุ่งยาก ดังนั้นเพื่อช่วยนักพัฒนาเว็บและผู้เขียนเครื่องมือเอาชนะความซับซ้อนของเว็บ เราจึงสร้าง tooling.report ขึ้นมา ซึ่งเป็นเว็บไซต์ที่ช่วยคุณเลือกเครื่องมือบิลด์ที่เหมาะสมสำหรับโปรเจ็กต์ถัดไป ตัดสินใจว่าการย้ายข้อมูลจากเครื่องมือหนึ่งไปยังอีกเครื่องมือหนึ่งคุ้มค่าหรือไม่ หรือหาวิธีรวมแนวทางปฏิบัติแนะนำเข้ากับการกำหนดค่าเครื่องมือและฐานของโค้ด
เราได้ออกแบบชุดการทดสอบเพื่อพิจารณาว่าเครื่องมือสร้างใดช่วยให้คุณทำตามแนวทางปฏิบัติแนะนำในการพัฒนาเว็บได้ เราทำงานร่วมกับผู้เขียนเครื่องมือสร้างเพื่อตรวจสอบว่าเราใช้เครื่องมืออย่างถูกต้องและนำเสนออย่างเป็นธรรม
การเปิดตัวครั้งแรกของ tooling.report ครอบคลุม webpack v4, Rollup v2, Parcel v2 และ Browserify ที่มี Gulp ซึ่งดูเหมือนจะเป็นเครื่องมือสร้างที่ได้รับความนิยมมากที่สุดในขณะนี้ เราสร้าง tooling.report โดยมีความยืดหยุ่นในการเพิ่มเครื่องมือสร้างและทดสอบเพิ่มเติมด้วยความช่วยเหลือจากชุมชน
หากเราพลาดแนวทางปฏิบัติแนะนำที่ควรทดสอบ โปรดเสนอแนวทางดังกล่าวในปัญหา GitHub หากคุณต้องการเขียนการทดสอบหรือเพิ่มเครื่องมือใหม่ที่เราไม่ได้รวมไว้ในชุดเริ่มต้น เรายินดีให้คุณมีส่วนร่วม
ในระหว่างนี้ คุณสามารถอ่านข้อมูลเพิ่มเติมเกี่ยวกับแนวทางในการสร้าง tooling.report และดูเซสชันจาก web.dev LIVE
ความเป็นส่วนตัวและความปลอดภัยบนเว็บ
Chrome เชื่อมั่นในเว็บแบบเปิดที่เคารพความเป็นส่วนตัวของผู้ใช้และคงกรณีการใช้งานที่สำคัญซึ่งทำให้เว็บทำงานได้สำหรับทุกคน
ในปี 2019 Chrome ได้เสนอการอัปเดตมาตรฐานคุกกี้เพื่อจำกัดคุกกี้ให้อยู่ในบริบทของบุคคลที่หนึ่งโดยค่าเริ่มต้น และกำหนดให้คุกกี้สำหรับบริบทของบุคคลที่สามต้องมีการทำเครื่องหมายไว้อย่างชัดเจน โดยเฉพาะอย่างยิ่ง วิธีนี้จะช่วยป้องกันการโจมตีแบบ Cross-Site Request Forgery ปัจจุบัน Chrome, Firefox, Edge และเบราว์เซอร์อื่นๆ ได้นำข้อเสนอนี้ไปใช้แล้ว
แม้ว่า Chrome จะตัดสินใจย้อนกลับการเปลี่ยนแปลงเหล่านี้ชั่วคราวเนื่องจากสถานการณ์โควิด-19 แต่น่าเสียดายที่ในช่วงวิกฤตซึ่งผู้คนมีความเสี่ยงมากที่สุด คุณจะเห็นการโจมตีประเภทนี้เพิ่มขึ้นด้วย ดังนั้นเมื่อเปิดตัว Chrome 84 เวอร์ชันเสถียร (กลางเดือนกรกฎาคม 2020) การเปลี่ยนแปลงจะเริ่มเปิดตัวอีกครั้งใน Chrome ทุกเวอร์ชันตั้งแต่ 80 ขึ้นไป ดูข้อมูลเพิ่มเติมได้ที่คำแนะนำเกี่ยวกับคุกกี้ SameSite รวมถึงเซสชัน web.dev LIVE
นอกจากนี้ ภายใต้แบนเนอร์ของ Privacy Sandbox Chrome กำลังเปิดตัวข้อเสนอมาตรฐานจำนวนหนึ่งที่มีจุดมุ่งหมายเพื่อรองรับกรณีการใช้งานที่ช่วยให้ผู้คนสามารถสร้างรายได้โดยใช้แพลตฟอร์มเว็บ แต่ทำในลักษณะที่เคารพความเป็นส่วนตัวของผู้ใช้มากขึ้น Chrome กำลังพยายามรวบรวมความคิดเห็นเกี่ยวกับข้อเสนอเหล่านี้ และเข้าร่วมในฟอรัมแบบเปิดของ W3C เพื่อพูดคุยเกี่ยวกับข้อเสนอต่างๆ รวมถึงข้อเสนอที่ส่งโดยบุคคลอื่นๆ ดูข้อมูลเพิ่มเติมเกี่ยวกับโครงการริเริ่มนี้ได้ในเซสชันความปลอดภัยและความเป็นส่วนตัวสำหรับเว็บแบบเปิด
สุดท้าย เมื่อพิจารณาความปลอดภัยของผู้ใช้ Spectre เป็นช่องโหว่ที่ทำให้โค้ดที่เป็นอันตรายซึ่งทำงานในกระบวนการของเบราว์เซอร์หนึ่งอาจอ่านข้อมูลใดๆ ที่เชื่อมโยงกับกระบวนการนั้นได้ แม้ว่าข้อมูลจะมาจากต้นทางอื่นก็ตาม หนึ่งในวิธีลดความเสี่ยงของเบราว์เซอร์สำหรับปัญหานี้คือการแยกเว็บไซต์ ซึ่งก็คือการแยกแต่ละเว็บไซต์ออกเป็นกระบวนการที่แยกต่างหาก ดูเซสชัน web.dev LIVE เกี่ยวกับนโยบายใหม่สำหรับตัวเปิดและตัวฝังแบบข้ามต้นทาง (COOP และ COEP) เพื่อดูข้อมูลเพิ่มเติม
การสร้างเว็บที่มีความสามารถอันทรงพลัง
Chrome ต้องการให้คุณสร้างเว็บแอปคุณภาพสูงสุดได้อย่างอิสระ ซึ่งจะช่วยให้คุณเข้าถึงผู้ใช้ในอุปกรณ์ต่างๆ ได้มากที่สุด Chrome ผสานรวมความสามารถในการติดตั้งและความน่าเชื่อถือของ PWA เข้ากับโปรเจ็กต์ความสามารถ (โปรเจ็กต์ Fugu) โดยมุ่งเน้นที่ 3 สิ่งเพื่อปิดช่องว่างระหว่างแอปเฉพาะแพลตฟอร์มกับเว็บ เพื่อช่วยคุณสร้างและมอบประสบการณ์ที่ยอดเยี่ยม
ประการแรก ทีม Chrome ได้ทำงานอย่างหนักเพื่อให้นักพัฒนาเว็บและผู้ใช้ควบคุมประสบการณ์การติดตั้งได้มากขึ้น เพิ่มการโปรโมตการติดตั้งลงในแถบอเนกประสงค์ และอื่นๆ แม้ว่าเว็บจะแพร่หลาย แต่การมีแอปใน Store ก็ยังคงสำคัญสำหรับธุรกิจบางประเภท Chrome จึงได้เปิดตัว Bubblewrap ซึ่งเป็นไลบรารีและ CLI ที่ช่วยให้คุณนำ PWA เข้าสู่ Play Store ได้อย่างง่ายดาย ที่จริงแล้ว PWABuilder.com ก็ใช้ Bubblewrap อยู่เบื้องหลังด้วย เพียงคลิกเมาส์ไม่กี่ครั้ง คุณก็สร้าง APK และอัปโหลด PWA ไปยัง Play Store ได้ ตราบใดที่คุณมีคุณสมบัติตรงตามเกณฑ์
ประการที่ 2 Chrome มีการผสานรวมกับระบบปฏิบัติการที่แน่นแฟ้นยิ่งขึ้น เช่น ความสามารถในการแชร์รูปภาพ เพลง หรืออะไรก็ตามโดยเรียกใช้บริการแชร์ระดับระบบด้วย Web Share API หรือความสามารถในการรับเนื้อหาเมื่อแชร์จากแอปที่ติดตั้งไว้แอปอื่น คุณสามารถแจ้งให้ผู้ใช้ทราบข้อมูลล่าสุดหรือแจ้งเตือนอย่างแนบเนียนเกี่ยวกับกิจกรรมใหม่ด้วยการติดป้ายแอป นอกจากนี้ ผู้ใช้ยังเริ่มดำเนินการได้อย่างรวดเร็วโดยใช้ทางลัดของแอป ซึ่งจะพร้อมใช้งานใน Chrome 84 (กลางเดือนกรกฎาคม 2020)
และสุดท้าย Chrome ได้พัฒนาความสามารถใหม่ๆ ที่ช่วยให้เกิดสถานการณ์ใหม่ๆ ที่ไม่เคยเป็นไปได้มาก่อน เช่น เครื่องมือแก้ไขที่อ่านและเขียนไฟล์ในระบบไฟล์ในเครื่องของผู้ใช้ หรือรับรายการแบบอักษรที่ติดตั้งในเครื่องเพื่อให้ผู้ใช้สามารถใช้แบบอักษรเหล่านั้นในการออกแบบได้
ในระหว่างกิจกรรม web.dev LIVE เราได้พูดถึงความสามารถและฟีเจอร์อื่นๆ อีกมากมายที่จะช่วยให้คุณมอบประสบการณ์แบบเดียวกันด้วยความสามารถแบบเดียวกับแอปเฉพาะแพลตฟอร์ม ดูเซสชันทั้งหมดได้ที่ web.dev/live ในกำหนดการของวันที่ 2
มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และ Lighthouse 6.0
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome: แท็บปัญหาใหม่ โปรแกรมจำลองการมองเห็นสีบกพร่อง และการรองรับ Web Vitals
หนึ่งในฟีเจอร์ที่มีประสิทธิภาพมากที่สุดของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คือความสามารถในการตรวจหาปัญหาในหน้าเว็บและแจ้งให้นักพัฒนาซอฟต์แวร์ทราบ ซึ่งมีความเกี่ยวข้องมากที่สุดเมื่อเราก้าวเข้าสู่ระยะถัดไปของเว็บที่ให้ความสำคัญกับความเป็นส่วนตัวเป็นอันดับแรก เพื่อลดความเหนื่อยล้าจากการแจ้งเตือนและความยุ่งเหยิงในคอนโซล เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ได้เปิดตัวแท็บปัญหาซึ่งมุ่งเน้นที่ปัญหาสำคัญ 3 ประเภท ได้แก่ ปัญหาเกี่ยวกับคุกกี้ เนื้อหาผสม และปัญหา COEP ดูเซสชัน web.dev LIVE เกี่ยวกับการค้นหาและแก้ไขปัญหาด้วยแท็บปัญหาเพื่อเริ่มต้นใช้งาน
นอกจากนี้ เนื่องจาก Core Web Vitals กลายเป็นชุดเมตริกที่สำคัญที่สุดชุดหนึ่งสำหรับนักพัฒนาเว็บในการติดตามและวัดผล DevTools จึงต้องการให้นักพัฒนาซอฟต์แวร์ติดตามประสิทธิภาพของตนเทียบกับเกณฑ์เหล่านี้ได้อย่างง่ายดาย เมตริกทั้ง 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 เพื่อดูกิจกรรมของชุมชนที่กำลังจะจัดขึ้นในเขตเวลาของคุณ