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