เมื่อไม่นานมานี้ ทีม Chrome Aurora ได้เปิดตัวคำสั่ง NgOptimizedImage ของ Angular คำสั่งนี้มุ่งเน้นที่การปรับปรุงประสิทธิภาพเป็นหลัก ซึ่งวัดโดยเมตริก Core Web Vitals โดยรวมการปรับปรุงรูปภาพทั่วไปและแนวทางปฏิบัติแนะนำไว้ใน API ที่แสดงต่อผู้ใช้ซึ่งไม่ซับซ้อนกว่าองค์ประกอบ <img> มาตรฐานมากนัก
ในปี 2023 เราได้ปรับปรุงdirectiveด้วยฟีเจอร์ใหม่ๆ โพสต์นี้จะอธิบายฟีเจอร์ใหม่ที่สำคัญที่สุด โดยเน้นย้ำเหตุผลที่เราเลือกให้ความสำคัญกับแต่ละฟีเจอร์ และวิธีที่ฟีเจอร์ดังกล่าวจะช่วยปรับปรุงประสิทธิภาพของแอปพลิเคชัน Angular
ฟีเจอร์ใหม่
NgOptimizedImage ได้รับการปรับปรุงอย่างมากในช่วงที่ผ่านมา รวมถึงฟีเจอร์ใหม่ต่อไปนี้
โหมดเติม
การปรับขนาดรูปภาพโดยระบุแอตทริบิวต์ width และ height เป็นการเพิ่มประสิทธิภาพที่สำคัญอย่างยิ่งในการลดการเปลี่ยนเลย์เอาต์ เนื่องจากเบราว์เซอร์จำเป็นต้องทราบสัดส่วนภาพของรูปภาพเพื่อประหยัดพื้นที่ อย่างไรก็ตาม การปรับขนาดรูปภาพเป็นงานเพิ่มเติมสำหรับนักพัฒนาแอปพลิเคชัน และไม่มีความหมายกับ Use Case บางรายการของรูปภาพ
ฟีเจอร์หลักที่เพิ่มลงในคอมโพเนนต์รูปภาพหลังการทดลองใช้สำหรับนักพัฒนาแอปอย่างเต็มรูปแบบเป็นครั้งแรกซึ่งจะช่วยคลายความกังวลนี้ก็คือโหมดการเติม วิธีนี้เป็นวิธีที่นักพัฒนาแอปจะใส่รูปภาพได้โดยไม่ต้องกำหนดขนาดรูปภาพอย่างชัดเจนและไม่ต้องทำให้เลย์เอาต์เปลี่ยน
เมื่อใช้โหมดการเติม ระบบจะปิดใช้ข้อกำหนดการปรับขนาดรูปภาพ และจัดรูปแบบรูปภาพโดยอัตโนมัติให้พอดีกับองค์ประกอบที่บรรจุ วิธีนี้จะทำให้สัดส่วนภาพของรูปภาพแยกออกจากพื้นที่ที่รูปภาพนั้นใช้บนหน้าเว็บ และช่วยให้คุณควบคุมรูปภาพให้พอดีกับเลย์เอาต์หน้าเว็บได้มากขึ้น
โหมดเติมใช้ NgOptimizeImage เป็นทางเลือกที่มีประสิทธิภาพแทนพร็อพเพอร์ตี้ CSS ของ background-image วางรูปภาพภายใน <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 เต็มและปรับแต่งได้ลงในรูปภาพทุกรูปที่สร้างขึ้นด้วยคำสั่ง NgEnhancedImage โดยอัตโนมัติ
เราได้รวม 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 และสร้างแท็กลิงก์การจองล่วงหน้าโดยอัตโนมัติสําหรับโดเมนเหล่านั้นเพื่อรองรับฟีเจอร์นี้ แต่ก็อาจมีบางกรณีที่จำเป็นต้องมีลิงก์เชื่อมต่อล่วงหน้าด้วยตนเอง แต่สำหรับผู้ใช้ส่วนใหญ่ การเชื่อมต่อล่วงหน้าอัตโนมัติหมายความว่าต้องการขั้นตอนน้อยลง 1 ขั้นตอนเพื่อให้รูปภาพมีประสิทธิภาพที่ดี
รองรับโปรแกรมโหลดที่กำหนดเองได้ดียิ่งขึ้น
องค์ประกอบสําคัญของ 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 Loading หรือการดาวน์โหลดไฟล์ที่ใหญ่เกินไปสําหรับหน้าเว็บ เราจะแจ้งให้คุณทราบแม้ว่าจะไม่ได้ใช้ NgOptimizeImage ก็ตาม
ประสิทธิภาพของรูปภาพมีความสำคัญต่อแอปทุกแอป และเรายินดีที่จะสร้างขอบเขตต่อไปเพื่อช่วยป้องกันข้อผิดพลาดที่พบบ่อยในแอป Angular
เส้นทางต่อจากนี้
เรากําลังพัฒนาชุดฟีเจอร์ถัดไปสําหรับ NgOptimizedImage ในขณะที่ประสิทธิภาพของรูปภาพยังคงเป็นข้อกังวลหลักของเรา เรายังต้องการเพิ่มฟีเจอร์ที่ช่วยปรับปรุงประสบการณ์ของนักพัฒนาแอปด้วย เพื่อให้มั่นใจว่า NgoptimizerImage ยังคงเป็นตัวเลือกที่น่าสนใจสำหรับการรวมรูปภาพในแอปพลิเคชัน Angular
ฟีเจอร์หนึ่งที่เราให้ความสำคัญมากที่สุดคือตัวยึดตำแหน่งรูปภาพ ซึ่งมักใช้ในการทำให้การโหลดรูปภาพในเว็บแอปพลิเคชันดูดีขึ้น แต่อาจส่งผลเสียต่อประสิทธิภาพหากติดตั้งใช้งานไม่ถูกต้อง เราหวังว่าจะสร้างระบบตัวยึดตำแหน่งรูปภาพที่มุ่งเน้นประสิทธิภาพเป็นอันดับแรกใน NgoptimizerImage โปรดติดตามประกาศเพิ่มเติมในบล็อกของเรา