โครงการ Aurora ของ Chrome เป็นการทำงานร่วมกันระหว่าง Chrome กับเฟรมเวิร์กและเครื่องมือ JavaScript แบบโอเพนซอร์สเพื่อปรับปรุงประสบการณ์ของผู้ใช้บนเว็บ หากคุณเพิ่งเคยได้ยินชื่อ Aurora โปรดดูโพสต์แนะนำเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับพันธกิจและวิธีการของเรา
เนื่องจากเราไม่ได้เผยแพร่แผนงานมาตั้งแต่ปี 2021 เราจึงอยากแชร์สิ่งที่เราทําอยู่และโปรเจ็กต์ที่น่าสนใจบางรายการที่เราเตรียมไว้ในปี 2023
ไฮไลต์โปรเจ็กต์ล่าสุด
ในช่วง 2-3 ปีที่ผ่านมา เราได้ร่วมมือกับเฟรมเวิร์กต่างๆ เช่น Next.js, Angular และ Nuxt เพื่อเพิ่มประสิทธิภาพ Core Web Vitals ไฮไลต์บางส่วนนับตั้งแต่การอัปเดตครั้งล่าสุดมีดังนี้
รูปภาพ
รูปภาพมักเป็นสาเหตุของปัญหาด้านประสิทธิภาพ ต่อไปนี้คือวิธีการบางส่วนที่เราได้ดำเนินการร่วมกับผู้มีส่วนเกี่ยวข้องของเฟรมเวิร์กเพื่อให้มั่นใจว่าแนวทางปฏิบัติแนะนำพร้อมใช้งานโดยค่าเริ่มต้น เพื่อให้นักพัฒนาแอปแสดงรูปภาพได้อย่างเหมาะสมที่สุดโดยค่าเริ่มต้นเมื่อใช้เฟรมเวิร์กที่เราเป็นพาร์ทเนอร์ด้วย
คำสั่งรูปภาพเชิงมุม
เราได้เผยแพร่คำสั่งรูปภาพแบบเสถียรสำหรับเฟรมเวิร์ก Angular ซึ่งมีให้ใช้งานใน Angular 15 และพอร์ตย้อนกลับไปยัง 13.4 และ 14.3 โดยเฉพาะ คำสั่งนี้จะเปิดใช้การโหลดแบบเลื่อนดูเมื่อพร้อมโดยค่าเริ่มต้น เพิ่มคำแนะนำ fetchpriority ลงในรูปภาพที่มีลำดับความสำคัญ และสร้างแอตทริบิวต์ srcset ที่เหมาะสมโดยอัตโนมัติสำหรับรูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณา
ผลลัพธ์: การทดสอบในแล็บของ Lighthouse ดำเนินการในสภาพแวดล้อม QA ของ Land's End ก่อนและหลังการใช้คำสั่งรูปภาพ บนเดสก์ท็อป ค่ามัธยฐานของ Largest Contentful Paint (LCP) ลดลงจาก 12.0 วินาทีเป็น 3.0 วินาที ซึ่งถือเป็นการปรับปรุง LCP ขึ้น 75%
อ่านข้อมูลเพิ่มเติมเกี่ยวกับคําแนะนําได้ในบล็อกโพสต์การเพิ่มประสิทธิภาพรูปภาพด้วยคําแนะนํารูปภาพ Angular
ปรับปรุงใหม่ next/image
นอกจากนี้ เรายังทํางานร่วมกับทีม Next.js เพื่ออัปเดตคอมโพเนนต์รูปภาพให้ใช้ฟีเจอร์ใหม่ๆ ของเบราว์เซอร์ เช่น การโหลดแบบเลื่อนเวลาออกไปโดยค่าเริ่มต้นและแอตทริบิวต์ HTML fetchpriority เวอร์ชันใหม่จะพร้อมใช้งานโดยค่าเริ่มต้นจาก Next 13
ผลลัพธ์ : พาร์ทเนอร์ของเราอย่าง Leboncoin สามารถปรับปรุง LCP ของบางหน้าเว็บได้สูงสุด 60% ด้วยการเปลี่ยนไปใช้ next/image เวอร์ชันใหม่
แบบอักษรเว็บ
การเพิ่มประสิทธิภาพแบบอักษรในเว็บอาจเป็นเรื่องยากที่จะทําให้ถูกต้อง เนื่องจากมีขั้นตอนเพิ่มเติมนอกเหนือจากการลดขนาดการโอนของทรัพยากรแบบอักษร แบบอักษรเว็บยังส่งผลต่อเมตริกการเปลี่ยนเลย์เอาต์สะสม (CLS) ของหน้าเว็บอย่างมาก และการลดการเปลี่ยนเลย์เอาต์เนื่องจากการสลับแบบอักษรต้องใช้ความพยายามอย่างมาก แต่โชคดีที่เราได้ร่วมมือกับเฟรมเวิร์กต่างๆ เพื่อช่วยให้นักพัฒนาเว็บทำงานนี้ได้ง่ายขึ้น
เครื่องมือสำหรับแบบอักษรสำรองที่ปรับปรุงแล้วใน Next.js, Nuxt และ Vite
เราได้เปิดตัวฟีเจอร์ใน Next 13 ที่ปรับขนาดแบบอักษรสำรองของหน้าเว็บให้สอดคล้องกับแบบอักษรเว็บเมื่อโหลดเข้ามาได้ดีขึ้น ซึ่งจะช่วยลด CLS ที่เกี่ยวข้องกับแบบอักษร เราได้แชร์วิธีการกับทีม Nuxt ซึ่งกลายเป็นแรงบันดาลใจสําหรับโมดูล nuxtjs/fontaine และปลั๊กอิน fontaineVite ซึ่งทั้ง 2 อย่างใช้อัลกอริทึมพื้นฐานเดียวกัน
ผลลัพธ์: พาร์ทเนอร์ของเราอย่าง Vox Media ลด CLS ใน The Verge เหลือ 0 ในหน้าเว็บเวอร์ชันที่ใช้งานจริงได้โดยใช้ฟีเจอร์นี้
อ่านเพิ่มเติมในบล็อกโพสต์เกี่ยวกับการสร้างแบบอักษรสำรองที่ปรับปรุงแล้วและเครื่องมือเฟรมเวิร์กแบบอักษรสำรอง
โมดูล nuxtjs/google-fonts
เราร่วมมือกับทีม Nuxt เพื่อเปิดตัวโมดูลเพื่อเพิ่มประสิทธิภาพ Google Font โมดูลจะดาวน์โหลดและโฮสต์แบบอักษร Google ด้วยตนเองโดยอัตโนมัติเพื่อหลีกเลี่ยงการติดต่อเซิร์ฟเวอร์หลายครั้ง และรองรับตัวเลือกการฝังแบบอักษรด้วย
สคริปต์ของบุคคลที่สาม
JavaScript ของบุคคลที่สามอาจเป็นสาเหตุของปัญหาด้านประสิทธิภาพ และอาจส่งผลต่อเมตริกต่างๆ เช่น Interaction to Next Paint (INP) เนื่องจากงานที่สคริปต์เหล่านี้กำหนดเวลาไว้อาจทำให้การโต้ตอบของผู้ใช้ทำงานล่าช้า
คอมโพเนนต์ next/script สําหรับสคริปต์ของบุคคลที่สาม
เราได้สร้างคอมโพเนนต์สคริปต์สําหรับ Next 12 ขึ้นไปที่จะโหลดสคริปต์โดยค่าเริ่มต้นหลังจากการไฮเดรตเพื่อป้องกันการบล็อกเส้นทางที่มีความสำคัญระหว่างการโหลด นอกจากนี้ยังมีโหมด Web Worker ที่ผสานรวม Partytown เพื่อย้ายสคริปต์ออกจากเธรดหลักอย่างสมบูรณ์
ผลลัพธ์: ในการทดสอบใน Lighthouse Lab CareerKarma พบว่า LCP ลดลง 24% เมื่อใช้ next/script component ที่เปิดใช้โหมดผู้ปฏิบัติงาน
อ่านเพิ่มเติมได้ในบล็อกโพสต์เรื่องการเพิ่มประสิทธิภาพการโหลดสคริปต์ของบุคคลที่สามใน Next.js
เบ็ดเตล็ด
การเป็นพาร์ทเนอร์กับนักพัฒนาเฟรมเวิร์กไม่ได้จบลงที่การปรับปรุง Core Web Vitals นอกจากนี้ เรายังพยายามใช้ประโยชน์จากสิ่งใหม่ๆ ให้ได้มากขึ้น และช่วยให้นักพัฒนาแอปเริ่มใช้ฟีเจอร์สุดล้ำของแพลตฟอร์มเว็บได้ง่ายขึ้น
โพลีฟิลล์การค้นหาคอนเทนเนอร์
เราได้อัปเดต container queries polyfill เพื่อรองรับชุดฟีเจอร์ CSS ที่หลากหลายขึ้นและปรับปรุงประสิทธิภาพ โดยมุ่งสู่รุ่น 1.0
อ่านเพิ่มเติมได้ในบล็อกโพสต์ข้อมูลเบื้องต้นเกี่ยวกับ Polyfill ของคําค้นหาคอนเทนเนอร์
อนาคตของ Aurora
ในปี 2023-2024 เรามีโปรเจ็กต์ที่น่าสนใจหลายโปรเจ็กต์ที่กำลังจะเปิดตัวเพื่อเพิ่มประสิทธิภาพ Core Web Vitals สําหรับนักพัฒนาเฟรมเวิร์ก
ในปีหน้า เราจะมุ่งเน้นที่สิ่งต่อไปนี้
คอมโพเนนต์ Wrapper ของบุคคลที่สามสําหรับ Next.js และ Nuxt: คอมโพเนนต์ Wrapper ช่วยในการโหลดไลบรารีของบุคคลที่สามยอดนิยมในลักษณะที่เหมาะสมที่สุดสําหรับ LCP และ INP วางแท็กคอมโพเนนต์ลงใน DOM เพื่อโหลดบุคคลที่สามแทนแท็กสคริปต์ แล้วเฟรมเวิร์กจะเลือกกลยุทธ์การโหลดที่ดีที่สุด ดูรายละเอียดเพิ่มเติมได้ใน RFC
ประสบการณ์การใช้งาน SSR และ Hydratation ของนักพัฒนาซอฟต์แวร์ Angular: เราได้ทํางานร่วมกับทีม Angular อย่างใกล้ชิดในโปรเจ็กต์ SSR และ Hydratation เรามุ่งเน้นที่การอัปเกรดประสบการณ์การใช้งาน SSR ของนักพัฒนาซอฟต์แวร์ เพื่อให้แอปพลิเคชันจำนวนมากขึ้นใช้ประโยชน์จาก LCP ได้ โปรดติดตาม RFC อย่างเป็นทางการเกี่ยวกับฟีเจอร์การจัดการ DOM ของ SSR
คำสั่งรูปภาพ Angular และฟีเจอร์
nuxt/image: เรามีฟีเจอร์ที่น่าสนใจหลายอย่างสำหรับ Angular เช่น การสร้างคำแนะนำการเชื่อมต่อล่วงหน้าอัตโนมัติ เครื่องมือย้ายข้อมูลเพื่อช่วยในการเปลี่ยนจากองค์ประกอบ<img>พื้นฐาน การสนับสนุนองค์ประกอบ<picture>และตัวยึดตำแหน่ง นอกจากนี้ เราจะปรึกษากับทีม Nuxt เกี่ยวกับฟีเจอร์ใหม่ๆ ของnuxt/imageด้วยการวิจัย INP (ข้ามเฟรมเวิร์ก): เนื่องจาก Interaction to Next Paint (INP) จะแทนที่ First Input Delay (FID) ในปี 2024 เราจึงเพิ่มการรองรับการปรับปรุง INP ในเฟรมเวิร์ก ซึ่งจะเกี่ยวข้องกับการวิเคราะห์สาเหตุของปัญหา INP ในเฟรมเวิร์ก และการสร้างโซลูชันในตัวสำหรับผู้ใช้เฟรมเวิร์กหากเป็นไปได้
Speedometer 3: เรายังช่วยนำเครื่องมือการเปรียบเทียบรุ่นถัดไปอย่าง Speedometer มาใช้เพื่อแสดงภาพรวมเฟรมเวิร์กเว็บสมัยใหม่ในปี 2023 ด้วย
ไม่พลาดรับข้อมูลอัปเดต
บุ๊กมาร์กหน้า Landing Page เพื่อติดตามข่าวสารล่าสุด บทสนทนาทางเทคนิค และบล็อกโพสต์จากทีม Aurora หรือจะติดตามเราบน Twitter ก็ได้
- Kara Erickson - karaforthewin@
- Houssein Djirdeh - hdjirdeh@
- Katie Hempenius - katiehempenius@
- Alex Castle - atcastle@
- Gerald Monaco - devknoll@
- Janicklas Ralph James - janicklas@
- Thorsten Kober - tckober@