โหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ไว้ล่วงหน้า

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

คุณสามารถโหลดรูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณาไว้ล่วงหน้า ซึ่งจะช่วยให้รูปภาพโหลดได้เร็วขึ้นอย่างมากโดยช่วยให้เบราว์เซอร์ระบุรูปภาพที่ถูกต้องจาก srcset ได้ก่อนที่จะแสดงผลแท็ก img

ภาพรวมของรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์

การรองรับเบราว์เซอร์

  • Chrome: 73
  • Edge: 79
  • Firefox: 78
  • Safari: 17.2.

สมมติว่าคุณท่องเว็บบนหน้าจอที่มีความกว้าง 300 พิกเซล และหน้าเว็บขอรูปภาพที่มีความกว้าง 1,500 พิกเซล หน้าเว็บดังกล่าวใช้อินเทอร์เน็ตมือถือไปมากเนื่องจากหน้าจอของคุณไม่สามารถแสดงความละเอียดที่มากเกินนั้น โดยหลักการแล้วเบราว์เซอร์จะดึงข้อมูลรูปภาพเวอร์ชันที่มีความกว้างเล็กน้อยกว่าขนาดหน้าจอ เช่น 325 พิกเซล วิธีนี้ช่วยให้มั่นใจได้ว่ารูปภาพจะมีความละเอียดสูงโดยไม่สิ้นเปลืองอินเทอร์เน็ต และช่วยให้รูปภาพโหลดได้เร็วขึ้น

รูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณาช่วยให้เบราว์เซอร์ดึงข้อมูลทรัพยากรรูปภาพที่แตกต่างกันสำหรับอุปกรณ์ต่างๆ หากไม่ได้ใช้ CDN รูปภาพ ให้บันทึกหลายมิติข้อมูลสำหรับแต่ละรูปภาพ แล้วระบุในแอตทริบิวต์ srcset ค่า w จะบอกความกว้างของเวอร์ชันแต่ละเวอร์ชันแก่เบราว์เซอร์ เพื่อให้เลือกเวอร์ชันที่เหมาะสมสำหรับอุปกรณ์ทุกเครื่องได้

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

ภาพรวมการโหลดล่วงหน้า

การรองรับเบราว์เซอร์

  • Chrome: 50
  • Edge: ≤79
  • Firefox: 85
  • Safari: 11.1

แหล่งที่มา

การโหลดล่วงหน้าช่วยให้คุณบอกเบราว์เซอร์เกี่ยวกับทรัพยากรสำคัญที่คุณต้องการโหลดโดยเร็วที่สุดก่อนที่ระบบจะค้นพบทรัพยากรเหล่านั้นใน 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 ใช้

กรณีการใช้งาน

ต่อไปนี้คือกรณีการใช้งานบางส่วนสำหรับการโหลดรูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณาล่วงหน้า

โหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งแทรกแบบไดนามิกไว้ล่วงหน้า

ลองนึกภาพว่าคุณกำลังโหลดรูปภาพหลักแบบไดนามิกซึ่งเป็นส่วนหนึ่งของภาพสไลด์ และคุณรู้ว่าจะแสดงรูปภาพใดก่อน ในกรณีนี้ คุณอาจต้องการแสดงรูปภาพนั้นให้เร็วที่สุด และไม่ต้องรอให้สคริปต์ภาพสไลด์โหลดรูปภาพดังกล่าว

คุณสามารถตรวจสอบปัญหานี้ในเว็บไซต์ที่มีแกลเลอรีรูปภาพที่โหลดแบบไดนามิกได้โดยทำดังนี้

  1. เปิดตัวอย่างสไลด์โชว์นี้ในแท็บใหม่
  2. กด Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิด DevTools
  3. คลิกแท็บเครือข่าย
  4. ในรายการแบบเลื่อนลงการจำกัด ให้เลือก Fast 3G
  5. ปิดใช้ช่องทำเครื่องหมายปิดใช้แคช
  6. โหลดหน้าเว็บซ้ำ
แผง Chrome DevTools Network แสดง Waterfall ที่มีทรัพยากร JPEG ที่เริ่มดาวน์โหลดหลังจาก JavaScript บางรายการเท่านั้น
หากไม่ใช้การโหลดล่วงหน้า รูปภาพจะเริ่มโหลดหลังจากที่เบราว์เซอร์เรียกใช้สคริปต์เสร็จแล้ว สำหรับรูปภาพแรก ความล่าช้านั้นไม่จำเป็น

การใช้ preload ในส่วนนี้จะทำให้รูปภาพเริ่มโหลดล่วงหน้าได้ เพื่อให้พร้อมแสดงเมื่อเบราว์เซอร์ต้องการแสดง

แผงเครือข่ายของเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome ที่แสดง Waterfall ที่มีทรัพยากร JPEG กำลังดาวน์โหลดควบคู่ไปกับ JavaScript บางรายการ
การโหลดรูปภาพแรกล่วงหน้าช่วยให้รูปภาพเริ่มโหลดพร้อมกันกับสคริปต์

หากต้องการดูความแตกต่างของการโหลดล่วงหน้า ให้ตรวจสอบแกลเลอรีรูปภาพที่โหลดแบบไดนามิกเดียวกัน แต่มีการโหลดรูปภาพแรกไว้ล่วงหน้าโดยทำตามขั้นตอนจากตัวอย่างแรก

โหลดภาพพื้นหลังล่วงหน้าโดยใช้ image-set

หากมีรูปภาพพื้นหลังที่แตกต่างกันสำหรับความหนาแน่นของหน้าจอที่แตกต่างกัน คุณสามารถระบุรูปภาพเหล่านั้นใน CSS โดยใช้ไวยากรณ์ image-set จากนั้นเบราว์เซอร์จะเลือกรายการที่จะแสดงโดยอิงตาม DPR ของหน้าจอได้

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

ปัญหาเกี่ยวกับภาพพื้นหลัง CSS คือเบราว์เซอร์จะค้นพบภาพเหล่านั้นก็ต่อเมื่อดาวน์โหลดและประมวลผล CSS ทั้งหมดใน <head> ของหน้าเว็บแล้ว

คุณสามารถตรวจสอบปัญหานี้ในเว็บไซต์ตัวอย่างที่มีรูปภาพพื้นหลังที่ปรับขนาดได้

แผงเครือข่ายของ Chrome DevTools ที่แสดง Waterfall ที่มีทรัพยากร JPEG ซึ่งเริ่มดาวน์โหลดหลังจาก CSS บางรายการเท่านั้น
ในตัวอย่างนี้ การดาวน์โหลดรูปภาพจะไม่เริ่มต้นจนกว่า CSS จะดาวน์โหลดจนเสร็จสมบูรณ์ ซึ่งทำให้การแสดงรูปภาพเกิดความล่าช้าโดยไม่จำเป็น

การโหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ล่วงหน้าช่วยให้คุณโหลดรูปภาพเหล่านั้นได้เร็วขึ้น

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">

การไม่ใช้แอตทริบิวต์ href จะช่วยให้มั่นใจได้ว่าเบราว์เซอร์ที่ไม่รองรับ imagesrcset ในองค์ประกอบ <link> แต่รองรับ image-set ใน CSS จะดาวน์โหลดแหล่งที่มาที่ถูกต้อง อย่างไรก็ตาม ในกรณีนี้ ผู้ใช้จะไม่ได้รับประโยชน์จากการโหลดล่วงหน้า

คุณสามารถตรวจสอบลักษณะการทำงานของตัวอย่างก่อนหน้าได้ด้วยภาพพื้นหลังที่ปรับเปลี่ยนตามอุปกรณ์ที่โหลดไว้ล่วงหน้าในการสาธิตการโหลดพื้นหลังที่ปรับเปลี่ยนตามอุปกรณ์

แผงเครือข่ายของเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome ที่แสดง Waterfall ที่มีทรัพยากร JPEG ดาวน์โหลดควบคู่ไปกับ CSS บางรายการ
ตรงนี้รูปภาพและ CSS จะเริ่มดาวน์โหลดพร้อมกัน ซึ่งช่วยให้โหลดรูปภาพได้เร็วขึ้น

ผลลัพธ์ที่ได้จากการใช้การโหลดรูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณาล่วงหน้า

การโหลดรูปภาพที่ตอบสนองตามอุปกรณ์ล่วงหน้าจะเพิ่มความเร็วได้ในทางทฤษฎี แต่ในทางปฏิบัติแล้วจะเป็นอย่างไร

เราสร้างร้านค้า PWA สาธิต 2 รายการเพื่อตอบคำถามนี้ รายการหนึ่งไม่ได้โหลดรูปภาพล่วงหน้า และอีกรายการหนึ่งโหลดรูปภาพบางส่วนล่วงหน้า เนื่องจากเว็บไซต์โหลดรูปภาพแบบ Lazy Loading โดยใช้ JavaScript จึงมีแนวโน้มที่จะได้ประโยชน์จากการโหลดรูปภาพที่ปรากฏในวิวพอร์ตแรกล่วงหน้า

ซึ่งให้ผลลัพธ์ต่อไปนี้สำหรับไม่ต้องโหลดล่วงหน้าและการโหลดรูปภาพล่วงหน้า

การเปรียบเทียบแถบสไลด์ของ WebPageTest แสดงให้เห็นว่ารูปภาพที่โหลดไว้ล่วงหน้าแสดงเร็วขึ้นประมาณ 1.5 วินาที
รูปภาพจะแสดงขึ้นเร็วขึ้นมากเมื่อโหลดล่วงหน้า ซึ่งช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีขึ้นอย่างมาก

การโหลดล่วงหน้าและ <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 ที่ดีขึ้นในเว็บไซต์ที่แสดงผลมาร์กอัปฝั่งไคลเอ็นต์มากกว่าเว็บไซต์ที่ส่งมาร์กอัปที่สมบูรณ์จากเซิร์ฟเวอร์