คุณสามารถโหลดรูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณาไว้ล่วงหน้า ซึ่งจะช่วยให้รูปภาพโหลดได้เร็วขึ้นอย่างมากโดยช่วยให้เบราว์เซอร์ระบุรูปภาพที่ถูกต้องจาก srcset
ได้ก่อนที่จะแสดงผลแท็ก img
ภาพรวมของรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์
การรองรับเบราว์เซอร์
สมมติว่าคุณท่องเว็บบนหน้าจอที่มีความกว้าง 300 พิกเซล และหน้าเว็บขอรูปภาพที่มีความกว้าง 1,500 พิกเซล หน้าเว็บดังกล่าวใช้อินเทอร์เน็ตมือถือไปมากเนื่องจากหน้าจอของคุณไม่สามารถแสดงความละเอียดที่มากเกินนั้น โดยหลักการแล้วเบราว์เซอร์จะดึงข้อมูลรูปภาพเวอร์ชันที่มีความกว้างเล็กน้อยกว่าขนาดหน้าจอ เช่น 325 พิกเซล วิธีนี้ช่วยให้มั่นใจได้ว่ารูปภาพจะมีความละเอียดสูงโดยไม่สิ้นเปลืองอินเทอร์เน็ต และช่วยให้รูปภาพโหลดได้เร็วขึ้น
รูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณาช่วยให้เบราว์เซอร์ดึงข้อมูลทรัพยากรรูปภาพที่แตกต่างกันสำหรับอุปกรณ์ต่างๆ หากไม่ได้ใช้ CDN รูปภาพ ให้บันทึกหลายมิติข้อมูลสำหรับแต่ละรูปภาพ แล้วระบุในแอตทริบิวต์ srcset
ค่า w
จะบอกความกว้างของเวอร์ชันแต่ละเวอร์ชันแก่เบราว์เซอร์ เพื่อให้เลือกเวอร์ชันที่เหมาะสมสำหรับอุปกรณ์ทุกเครื่องได้
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
ภาพรวมการโหลดล่วงหน้า
การโหลดล่วงหน้าช่วยให้คุณบอกเบราว์เซอร์เกี่ยวกับทรัพยากรสำคัญที่คุณต้องการโหลดโดยเร็วที่สุดก่อนที่ระบบจะค้นพบทรัพยากรเหล่านั้นใน HTML ซึ่งมีประโยชน์อย่างยิ่งสำหรับทรัพยากรที่ค้นพบได้ยาก เช่น แบบอักษรที่รวมอยู่ในสไตล์ชีต รูปภาพพื้นหลัง หรือทรัพยากรที่โหลดจากสคริปต์
<link rel="preload" as="image" href="important.png">
imagesrcset
และ imagesizes
องค์ประกอบ <link>
ใช้แอตทริบิวต์ imagesrcset
และ imagesizes
เพื่อโหลดรูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณาล่วงหน้า ใช้ตัวระบุเหล่านี้ควบคู่กับ <link rel="preload">
โดยใช้ไวยากรณ์ srcset
และ sizes
ในองค์ประกอบ <img>
เช่น หากต้องการโหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ที่ระบุไว้ล่วงหน้าด้วย
<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">
ซึ่งทําได้โดยการเพิ่มข้อมูลต่อไปนี้ลงใน <head>
ของ HTML
<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
ซึ่งจะเริ่มต้นคําขอโดยใช้ตรรกะการเลือกแหล่งข้อมูลที่ srcset
และ sizes
ใช้
กรณีการใช้งาน
ต่อไปนี้คือกรณีการใช้งานบางส่วนสำหรับการโหลดรูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณาล่วงหน้า
โหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งแทรกแบบไดนามิกไว้ล่วงหน้า
ลองนึกภาพว่าคุณกำลังโหลดรูปภาพหลักแบบไดนามิกซึ่งเป็นส่วนหนึ่งของภาพสไลด์ และคุณรู้ว่าจะแสดงรูปภาพใดก่อน ในกรณีนี้ คุณอาจต้องการแสดงรูปภาพนั้นให้เร็วที่สุด และไม่ต้องรอให้สคริปต์ภาพสไลด์โหลดรูปภาพดังกล่าว
คุณสามารถตรวจสอบปัญหานี้ในเว็บไซต์ที่มีแกลเลอรีรูปภาพที่โหลดแบบไดนามิกได้โดยทำดังนี้
- เปิดตัวอย่างสไลด์โชว์นี้ในแท็บใหม่
- กด
Control+Shift+J
(หรือCommand+Option+J
ใน Mac) เพื่อเปิด DevTools - คลิกแท็บเครือข่าย
- ในรายการแบบเลื่อนลงการจำกัด ให้เลือก Fast 3G
- ปิดใช้ช่องทำเครื่องหมายปิดใช้แคช
- โหลดหน้าเว็บซ้ำ
การใช้ preload
ในส่วนนี้จะทำให้รูปภาพเริ่มโหลดล่วงหน้าได้ เพื่อให้พร้อมแสดงเมื่อเบราว์เซอร์ต้องการแสดง
หากต้องการดูความแตกต่างของการโหลดล่วงหน้า ให้ตรวจสอบแกลเลอรีรูปภาพที่โหลดแบบไดนามิกเดียวกัน แต่มีการโหลดรูปภาพแรกไว้ล่วงหน้าโดยทำตามขั้นตอนจากตัวอย่างแรก
โหลดภาพพื้นหลังล่วงหน้าโดยใช้ image-set
หากมีรูปภาพพื้นหลังที่แตกต่างกันสำหรับความหนาแน่นของหน้าจอที่แตกต่างกัน คุณสามารถระบุรูปภาพเหล่านั้นใน CSS โดยใช้ไวยากรณ์ image-set
จากนั้นเบราว์เซอร์จะเลือกรายการที่จะแสดงโดยอิงตาม DPR ของหน้าจอได้
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
ปัญหาเกี่ยวกับภาพพื้นหลัง CSS คือเบราว์เซอร์จะค้นพบภาพเหล่านั้นก็ต่อเมื่อดาวน์โหลดและประมวลผล CSS ทั้งหมดใน <head>
ของหน้าเว็บแล้ว
คุณสามารถตรวจสอบปัญหานี้ในเว็บไซต์ตัวอย่างที่มีรูปภาพพื้นหลังที่ปรับขนาดได้
การโหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ล่วงหน้าช่วยให้คุณโหลดรูปภาพเหล่านั้นได้เร็วขึ้น
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
การไม่ใช้แอตทริบิวต์ href
จะช่วยให้มั่นใจได้ว่าเบราว์เซอร์ที่ไม่รองรับ imagesrcset
ในองค์ประกอบ <link>
แต่รองรับ image-set
ใน CSS จะดาวน์โหลดแหล่งที่มาที่ถูกต้อง อย่างไรก็ตาม ในกรณีนี้ ผู้ใช้จะไม่ได้รับประโยชน์จากการโหลดล่วงหน้า
คุณสามารถตรวจสอบลักษณะการทำงานของตัวอย่างก่อนหน้าได้ด้วยภาพพื้นหลังที่ปรับเปลี่ยนตามอุปกรณ์ที่โหลดไว้ล่วงหน้าในการสาธิตการโหลดพื้นหลังที่ปรับเปลี่ยนตามอุปกรณ์
ผลลัพธ์ที่ได้จากการใช้การโหลดรูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณาล่วงหน้า
การโหลดรูปภาพที่ตอบสนองตามอุปกรณ์ล่วงหน้าจะเพิ่มความเร็วได้ในทางทฤษฎี แต่ในทางปฏิบัติแล้วจะเป็นอย่างไร
เราสร้างร้านค้า PWA สาธิต 2 รายการเพื่อตอบคำถามนี้ รายการหนึ่งไม่ได้โหลดรูปภาพล่วงหน้า และอีกรายการหนึ่งโหลดรูปภาพบางส่วนล่วงหน้า เนื่องจากเว็บไซต์โหลดรูปภาพแบบ Lazy Loading โดยใช้ JavaScript จึงมีแนวโน้มที่จะได้ประโยชน์จากการโหลดรูปภาพที่ปรากฏในวิวพอร์ตแรกล่วงหน้า
ซึ่งให้ผลลัพธ์ต่อไปนี้สำหรับไม่ต้องโหลดล่วงหน้าและการโหลดรูปภาพล่วงหน้า
- เริ่มแสดงผล เหมือนเดิม
- ดัชนีความเร็ว improved slightly (273 ms, as images arrive faster don't take up a huge chunk of the pixel area).
- ฮีโร่ที่วาดล่าสุด improved significantly, by 1.2 seconds.
การโหลดล่วงหน้าและ <picture>
คณะทำงานด้านประสิทธิภาพเว็บกำลังพูดคุยเกี่ยวกับการเพิ่มการโหลดล่วงหน้าที่เทียบเท่าสำหรับ srcset
และ sizes
แต่ไม่ใช่องค์ประกอบ <picture>
ซึ่งจัดการกรณีการใช้งาน "ทิศทางศิลปะ"
ยังคงมีปัญหาทางเทคนิคที่ต้องแก้ไขสำหรับการโหลด <picture>
ล่วงหน้า แต่ในระหว่างนี้ คุณสามารถใช้วิธีแก้ปัญหาชั่วคราวต่อไปนี้
<picture>
<source srcset="small_cat.jpg" media="(max-width: 400px)">
<source srcset="medium_cat.jpg" media="(max-width: 800px)">
<img src="large_cat.jpg">
</picture>
ตรรกะการเลือกแหล่งที่มาของรูปภาพขององค์ประกอบ <picture>
จะตรวจสอบแอตทริบิวต์ media
ขององค์ประกอบ <source>
ตามลําดับ ค้นหารายการแรกที่ตรงกันและใช้ทรัพยากรที่แนบมา
เนื่องจากการโหลดล่วงหน้าที่ปรับเปลี่ยนตามอุปกรณ์จะไม่มีการระบุว่า "คำสั่งซื้อ" หรือ "การจับคู่แรก" คุณจะต้องแปลเบรกพอยท์เป็นรูปแบบต่อไปนี้
<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">
โหลดล่วงหน้าและ type
องค์ประกอบ <picture>
ยังรองรับการจับคู่กับ type
แรกด้วย เพื่อให้คุณระบุรูปแบบรูปภาพต่างๆ เพื่อให้เบราว์เซอร์เลือกรูปแบบรูปภาพแรกที่รองรับได้ การโหลดล่วงหน้าไม่รองรับกรณีการใช้งานนี้
สําหรับเว็บไซต์ที่ใช้การจับคู่ประเภท เราขอแนะนําให้หลีกเลี่ยงการโหลดล่วงหน้า และขอให้เครื่องมือสแกนการโหลดล่วงหน้าเลือกรูปภาพจากองค์ประกอบ <picture>
และ <source>
แทน นี่เป็นแนวทางปฏิบัติที่ดีที่สุด โดยเฉพาะเมื่อใช้ Fetch Priority เพื่อช่วยในการจัดลำดับความสำคัญของรูปภาพที่เหมาะสม
ผลต่อ Largest Contentful Paint (LCP)
เนื่องจากรูปภาพอาจเป็น Largest Contentful Paint (LCP) โหลดรูปภาพล่วงหน้าจึงช่วยปรับปรุง LCP ของเว็บไซต์ได้
ไม่ว่ารูปภาพที่คุณโหลดล่วงหน้าจะปรับเปลี่ยนขนาดได้หรือไม่ วิธีการโหลดล่วงหน้าจะทำงานได้ดีที่สุดเมื่อระบบตรวจไม่พบทรัพยากรรูปภาพในเพย์โหลดมาร์กอัปเริ่มต้น นอกจากนี้ คุณยังจะได้รับ LCP ที่ดีขึ้นในเว็บไซต์ที่แสดงผลมาร์กอัปฝั่งไคลเอ็นต์มากกว่าเว็บไซต์ที่ส่งมาร์กอัปที่สมบูรณ์จากเซิร์ฟเวอร์