เมื่อไม่นานมานี้ ทีม Chrome Aurora ได้เปิดตัวคำสั่ง NgOptimizedImage ของ Angular คำสั่งนี้มุ่งเน้นที่การปรับปรุงประสิทธิภาพเป็นหลัก ซึ่งวัดโดยเมตริก Core Web Vitals โดยรวมการปรับปรุงรูปภาพทั่วไปและแนวทางปฏิบัติแนะนำไว้ใน API ที่แสดงต่อผู้ใช้ซึ่งไม่ซับซ้อนกว่าองค์ประกอบ <img> มาตรฐานมากนัก
ในปี 2023 เราได้ปรับปรุงคำสั่งด้วยฟีเจอร์ใหม่ๆ โพสต์นี้จะอธิบายฟีเจอร์ใหม่ที่สำคัญที่สุด โดยเน้นที่เหตุผลที่เราเลือกจัดลำดับความสำคัญของแต่ละฟีเจอร์ และวิธีที่ฟีเจอร์เหล่านั้นจะช่วยปรับปรุงประสิทธิภาพของแอปพลิเคชัน Angular
ฟีเจอร์ใหม่
NgOptimizedImage ได้รับการปรับปรุงอย่างมากในช่วงที่ผ่านมา รวมถึงฟีเจอร์ใหม่ต่อไปนี้
โหมดเติม
การปรับขนาดรูปภาพโดยระบุแอตทริบิวต์ width และ height เป็นการเพิ่มประสิทธิภาพที่สำคัญอย่างยิ่งในการลดการเปลี่ยนเลย์เอาต์ เนื่องจากเบราว์เซอร์จำเป็นต้องทราบสัดส่วนภาพของรูปภาพเพื่อประหยัดพื้นที่ อย่างไรก็ตาม การปรับขนาดรูปภาพเป็นงานเพิ่มเติมสำหรับนักพัฒนาแอปพลิเคชัน และไม่มีความหมายกับ Use Case บางรายการของรูปภาพ
ฟีเจอร์หลักที่เพิ่มลงในคอมโพเนนต์รูปภาพหลังการทดลองใช้สำหรับนักพัฒนาแอปอย่างเต็มรูปแบบเป็นครั้งแรกซึ่งจะช่วยคลายความกังวลนี้ก็คือโหมดการเติม วิธีนี้เป็นวิธีที่นักพัฒนาแอปจะใส่รูปภาพได้โดยไม่ต้องกำหนดขนาดรูปภาพอย่างชัดเจนและไม่ต้องทำให้เลย์เอาต์เปลี่ยน
เมื่อใช้โหมดการเติม ระบบจะปิดใช้ข้อกำหนดการปรับขนาดรูปภาพ และจัดรูปแบบรูปภาพโดยอัตโนมัติให้พอดีกับองค์ประกอบที่บรรจุ วิธีนี้จะทำให้สัดส่วนภาพของรูปภาพแยกออกจากพื้นที่ที่รูปภาพนั้นใช้บนหน้าเว็บ และช่วยให้คุณควบคุมรูปภาพให้พอดีกับเลย์เอาต์หน้าเว็บได้มากขึ้น
โหมด "เติม" ใช้ NgOptimizedImage เป็นทางเลือกที่มีประสิทธิภาพดีกว่าพร็อพเพอร์ตี้ background-image ของ CSS วางรูปภาพภายใน <div> หรือองค์ประกอบอื่นๆ ที่จะต้องมีการจัดสไตล์ background-image จากนั้นเปิดใช้โหมดการเติมตามที่แสดงในตัวอย่างโค้ดก่อนหน้า ใช้พร็อพเพอร์ตี้ CSS object-fit และ object-position ใน <div> เพื่อควบคุมตำแหน่งของรูปภาพในพื้นหลัง
// Height and width are required
<img ngSrc="example.com" height="300" width="400">
// Unless you use fill mode!
<div style="width: 100vw; height: 50em; position: relative">
<img ngSrc="example.com" fill>
</div>
การสร้าง Srcset
เทคนิคการเพิ่มประสิทธิภาพรูปภาพที่มีประสิทธิภาพมากที่สุดอย่างหนึ่งคือการใช้แอตทริบิวต์ srcset เพื่อให้มั่นใจว่าระบบจะดาวน์โหลดรูปภาพขนาดที่เหมาะสมสำหรับอุปกรณ์ทุกเครื่องที่เข้าถึงแอปพลิเคชันของคุณ การใช้ srcset ทั่วทั้งแอปจะช่วยป้องกันไม่ให้เสียแบนด์วิดท์และปรับปรุง LCP Core Web Vital อย่างมาก
ข้อเสียของแอตทริบิวต์ srcset คือการติดตั้งใช้งานอาจยุ่งยาก การเขียนค่า srcset ด้วยตนเองหมายถึงการเพิ่มมาร์กอัปหลายบรรทัดลงในองค์ประกอบรูปภาพแต่ละรายการในแอป พร้อม URL ที่กำหนดเองหลายรายการสำหรับ srcset แต่ละรายการ นอกจากนี้ คุณยังต้องเลือกชุดจุดหยุดพัก ซึ่งมีความซับซ้อนเนื่องจากสามารถแสดงทั้งความหนาแน่นของหน้าจอและขนาดวิวพอร์ตของอุปกรณ์ทั่วไป
ด้วยเหตุนี้ การเพิ่มการสร้าง srcset อัตโนมัติ ลงในคำสั่ง NgOptimizedImage จึงถือเป็นเหตุการณ์สำคัญหลังการเปิดตัว การเพิ่มนี้ช่วยให้แอปพลิเคชันที่ใช้ CDN ที่รองรับการปรับขนาดรูปภาพสามารถเพิ่ม srcset แบบเต็มที่กำหนดค่าได้ลงในรูปภาพทุกรูปที่สร้างด้วยคำสั่ง NgOptimizedImage โดยอัตโนมัติ
เราได้รวม API ที่ใช้งานง่ายสำหรับการตั้งค่าพร็อพเพอร์ตี้ sizes ซึ่งใช้เพื่อให้แน่ใจว่ารูปภาพแต่ละรูปจะมี srcset ประเภทที่ถูกต้อง หากคุณไม่ได้ระบุแอตทริบิวต์ sizes เราจะถือว่ารูปภาพมีไว้สำหรับขนาดคงที่ และควรได้รับ srcset ที่ขึ้นอยู่กับความหนาแน่น ดังตัวอย่างต่อไปนี้
<img src="www.example.com/image.png" srcset="www.example.com/image.png?w=400 1x, www.example.com/image.png?w=800 2x" >
srcset ประเภทนี้ช่วยให้มั่นใจได้ว่าระบบจะแสดงรูปภาพในขนาดที่คำนึงถึงความหนาแน่นของพิกเซลในอุปกรณ์ของผู้ใช้
ในทางกลับกัน หากคุณใส่พร็อพเพอร์ตี้ sizes NgOptimizedImage จะสร้าง srcset ที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งมีจุดหยุดพักสำหรับอุปกรณ์และขนาดรูปภาพทั่วไปหลายขนาด โดยใช้รายการจุดหยุดพักเริ่มต้นต่อไปนี้
[16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]
การสร้างการเชื่อมต่อล่วงหน้า
หากต้องการปรับปรุง LCP คุณควรลดเวลาที่ผู้ใช้ใช้ในการดาวน์โหลดรูปภาพ LCP ในส่วนก่อนหน้านี้ คุณได้เห็นว่า srcset ช่วยได้อย่างไรด้วยการโอนไฟล์ภาพขนาดเล็กลง แต่การเพิ่มประสิทธิภาพที่สำคัญไม่แพ้กันคือการเริ่มการโอนโดยเร็วที่สุด วิธีหนึ่งคือการใช้แท็ก link rel="preconnect" เพื่อเริ่มต้นการเชื่อมต่อกับโดเมนรูปภาพ
ตั้งแต่เริ่มต้น NgOptimizedImage ได้เตือนคุณหากเชื่อมต่อกับโดเมนของรูปภาพ LCP ล่วงหน้าไม่สำเร็จ แต่คำเตือนไม่ใช่วิธีแก้ปัญหาที่เหมาะสม เราต้องการแก้ไขปัญหาให้คุณ ซึ่ง NgOptimizedImage ก็ทำเช่นนั้นด้วยการสร้างการเชื่อมต่อล่วงหน้าอัตโนมัติ
เราใช้การวิเคราะห์โค้ดแบบคงที่เพื่อพยายามตรวจหาโดเมนรูปภาพในโปรแกรมโหลด NgOptimizedImage และสร้างแท็กลิงก์การจองล่วงหน้าโดยอัตโนมัติสําหรับโดเมนเหล่านั้นเพื่อรองรับฟีเจอร์นี้ ยังคงมีบางกรณีที่ต้องใช้ลิงก์การจองล่วงหน้าด้วยตนเอง แต่สำหรับผู้ใช้ส่วนใหญ่ การจองล่วงหน้าอัตโนมัติจะช่วยลดขั้นตอนในการเพิ่มประสิทธิภาพรูปภาพที่ดีได้
รองรับโปรแกรมโหลดที่กำหนดเองได้ดียิ่งขึ้น
องค์ประกอบสําคัญของ NgOptimizedImage คือสถาปัตยกรรมโปรแกรมโหลด ซึ่งช่วยให้คําสั่งให้สร้าง URL ที่ปรับให้เหมาะกับ CDN รูปภาพของแอปพลิเคชันโดยอัตโนมัติ มีชุดโปรแกรมโหลดในตัวสำหรับ CDN ที่ใช้กันอย่างแพร่หลาย นอกจากนี้ เรายังมีโปรแกรมโหลดที่กำหนดเอง ซึ่งช่วยให้คุณผสานรวม NgOptimizedImage กับโซลูชันการโฮสต์รูปภาพได้เกือบทุกโซลูชัน
เมื่อเปิดตัว โปรแกรมโหลดที่กำหนดเองเหล่านี้มีขอบเขตที่จำกัด และอ่านได้เฉพาะแอตทริบิวต์ width จากองค์ประกอบรูปภาพ เราเพิ่มการรองรับโครงสร้างข้อมูล loaderParams ที่ปรับแต่งได้เพื่อตอบสนองต่อความคิดเห็นของผู้ใช้ ซึ่งช่วยให้สามารถส่งข้อมูลแบบใดก็ได้จากองค์ประกอบรูปภาพไปยังโปรแกรมโหลดที่กำหนดเอง การขยายนี้ช่วยให้โปรแกรมโหลดที่กำหนดเองมีความซับซ้อนหรือเรียบง่ายได้ตามที่โครงสร้างพื้นฐานของรูปภาพแอปพลิเคชันกำหนด
ตัวอย่างต่อไปนี้แสดงวิธีที่โปรแกรมโหลดที่กำหนดเองอย่างง่ายสามารถใช้ loaderParams API เพื่อเลือกระหว่างโดเมนรูปภาพทางเลือก 2 รายการ
const myCustomLoader = (config: ImageLoaderConfig) => {
if (config.loaderParams?.alternateDomain) {
return `https://alternate.domain.com/images/${config.src}`
}
return `https://primary.domain.com/images/${config.src}`;
};
ดูตัวอย่างโปรแกรมโหลดที่กำหนดเองที่ซับซ้อนมากขึ้นได้ในเอกสารประกอบของ Angular
คำแนะนำเพิ่มเติมสำหรับประสิทธิภาพของรูปภาพ
ก่อนหน้านี้ การแจ้งเตือนประสิทธิภาพรูปภาพทั้งหมดที่เราเพิ่มลงใน Angular เป็นส่วนหนึ่งของคำสั่ง NgOptimizedImage หากไม่ได้ใช้คําแนะนําในแอป คุณจะไม่ได้รับคําแนะนําเกี่ยวกับปัญหาด้านประสิทธิภาพของรูปภาพ
ใน Angular 17 เราจะขยายขอบเขตของคำแนะนำด้านประสิทธิภาพรูปภาพให้ครอบคลุมแอป Angular ทั้งหมด หากตรวจพบรูปแบบรูปภาพที่รู้ว่าเป็นข้อผิดพลาดที่ส่งผลเสียต่อประสิทธิภาพ เช่น การโหลดรูปภาพ LCP แบบ Lazy หรือการดาวน์โหลดไฟล์ที่มีขนาดใหญ่เกินกว่าที่หน้าเว็บจะรองรับได้ เราจะแจ้งให้คุณทราบ แม้ว่าคุณจะไม่ได้ใช้ NgOptimizedImage ก็ตาม
ประสิทธิภาพของรูปภาพมีความสำคัญต่อแอปทุกแอป และเรายินดีที่จะสร้างขอบเขตต่อไปเพื่อช่วยป้องกันข้อผิดพลาดที่พบบ่อยในแอป Angular
เส้นทางต่อจากนี้
เรากําลังพัฒนาชุดฟีเจอร์ถัดไปสําหรับ NgOptimizedImage แม้ว่าประสิทธิภาพของรูปภาพจะยังคงเป็นข้อกังวลหลักของเรา แต่เรายังต้องการเพิ่มฟีเจอร์ที่ปรับปรุงประสบการณ์ของนักพัฒนาแอปด้วย เพื่อให้ NgOptimizedImage เป็นตัวเลือกที่น่าสนใจในการรวมรูปภาพในแอปพลิเคชัน Angular ต่อไป
ฟีเจอร์หนึ่งที่มีความสำคัญสำหรับเราคือตัวยึดตำแหน่งรูปภาพ ซึ่งมักใช้ในการทำให้การโหลดรูปภาพในเว็บแอปพลิเคชันดูดีขึ้น แต่อาจส่งผลเสียต่อประสิทธิภาพหากติดตั้งใช้งานไม่ถูกต้อง เราหวังว่าจะสร้างระบบตัวยึดตําแหน่งรูปภาพที่เน้นประสิทธิภาพเป็นหลักใน NgOptimizedImage โปรดติดตามประกาศเพิ่มเติมในบล็อกของเรา