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