การอัปเกรดเป็น React 18 ช่วยเพิ่มประสิทธิภาพเว็บไซต์ของ The New York Times

• วิศวกรของ NYT ให้ความสำคัญอย่างมากกับประสิทธิภาพของหน้าเว็บ, SEO และการคงไว้ซึ่งเทคโนโลยีที่ทันสมัย
• ระหว่างการอัปเกรดเป็น React 18 พวกเขาได้แก้ไขปัญหาหลายอย่างและบรรลุการปรับปรุงประสิทธิภาพครั้งใหญ่
• ข้อดีสำคัญของ React 18: การเรนเดอร์ที่ลื่นไหลยิ่งขึ้นจาก Concurrent Mode, automatic batching และ transitions, รวมถึงการอัปเดตด้าน server-side rendering และ streaming
• คาดหวังว่าการอัปเกรดจะช่วยปรับปรุงคะแนน INP (Interaction to Next Paint) ซึ่งเป็นตัวชี้วัดความตอบสนองของหน้าเว็บ

กระบวนการย้ายระบบ

• เปลี่ยนจากไลบรารีทดสอบ Enzyme ที่เลิกใช้งานแล้วไปเป็น @testing-library/react
• อัปเกรด dependency, type และการทดสอบหลักให้รองรับ React 18 เพื่อผสานความสามารถใหม่ของ React 18 ได้อย่างปลอดภัย
• ใช้ API ใหม่อย่าง createRoot และ hydrateRoot เพื่อเปิดใช้งานความสามารถของ React 18
• หลังปล่อยใช้งานครั้งแรก พบปัญหาที่ไม่คาดคิดใน "embedded interactive" แบบกำหนดเอง
  • React 18 ไวต่อ hydration mismatch มากกว่าเวอร์ชันก่อนหน้า จึงต้องเลือกระหว่างการแก้ไข hydration mismatch หรือรีเมานต์ embedded interactive ฝั่งไคลเอนต์เมื่อเกิด hydration mismatch
  • การแก้ไข hydration mismatch ทั้งหมดอย่างปลอดภัยเป็นงานที่ท้าทาย

การแยกและรันสคริปต์ของ embedded interactive ด้วยตนเอง

• ด้วยเหตุผลด้านความปลอดภัยของเบราว์เซอร์ แท็กสคริปต์ที่เพิ่มผ่าน prop innerHTML จะไม่ถูกรันโดยอัตโนมัติ
• เพื่อให้แท็กสคริปต์ทำงานได้อย่างถูกต้อง ต้องดึงและลบออกจาก HTML แบบอินเทอร์แอกทีฟก่อน แล้วจึงเพิ่มกลับเข้าไปในตำแหน่งที่ถูกต้องเมื่อคอมโพเนนต์ re-render
• สคริปต์อินเทอร์แอกทีฟบางส่วนต้องถูกโหลดตามลำดับที่ถูกต้องเมื่อเพิ่มกลับเข้าไป
  1. เพิ่ม manifest script ที่มีข้อมูลแบบสแตติกก่อน
  2. รันสคริปต์ที่มีแอตทริบิวต์ src แบบ asynchronous
  3. สุดท้ายเพิ่มและรันสคริปต์ที่มี vanilla JavaScript อยู่ใน innerHTML

การปรับปรุงประสิทธิภาพที่เห็นผลทันที

• หลังผสานการควบคุมโค้ด embedded interactive อย่างละเอียด พวกเขาสามารถปล่อย React 18 ได้อย่างปลอดภัย
• หลังการปล่อยใช้งาน พบว่าประสิทธิภาพดีขึ้นแทบจะทันที โดยคะแนน INP ลดลงประมาณ 30%
• ด้วย automatic batching และความสามารถด้าน concurrency ของ React 18 จำนวนการ re-render ระหว่างการโหลดหน้าลดลงเกือบครึ่งหนึ่ง

ทิศทางต่อจากนี้

• จะมุ่งสำรวจประโยชน์ที่เป็นไปได้ของความสามารถใหม่ เช่น startTransition และ React Server Components
• เป้าหมายหลักคือการลดคะแนน INP ลงอย่างต่อเนื่องและปรับปรุงความสามารถโดยรวม
• สิ่งสำคัญสูงสุดคือการรับประกันประสิทธิภาพที่เสถียรและเชื่อถือได้ของเวอร์ชัน React ที่ใช้อยู่ในปัจจุบัน
• จากผลลัพธ์บนเว็บไซต์ข่าว จะเดินหน้าหาการปรับปรุงประสิทธิภาพในลักษณะคล้ายกันกับเว็บไซต์อื่น ๆ
• ก่อนที่ Google จะเปลี่ยนอัลกอริทึม SEO พวกเขาสามารถพาคะแนน INP หลุดพ้นจากช่วง "แย่" ได้สำเร็จ และไม่พบผลกระทบด้าน SEO ในทางลบ