วิธีแก้ปัญหาการส่งภาพใน PageSpeed Insights

1. 01เปิดหน้าที่มีปัญหาใน PageSpeed Insights หรือ Lighthouse เลือกรายงานมือถือหรือเดสก์ท็อปที่ต้องการปรับ แล้วเปิดส่วนการส่งภาพ จด URL ภาพที่ถูกแจ้งและสิ่งที่แนะนำให้แก้
2. 02หาภาพนั้นบนหน้าเว็บ ในเครื่องมือนักพัฒนาของเบราว์เซอร์ ให้เทียบภาพที่ดาวน์โหลดกับมิติที่แสดงโดยคำนึงถึงความหนาแน่นหน้าจอ ตรวจต้นทางที่ถูกเลือก ไม่ใช่ดูเพียงต้นฉบับในคลังสื่อ
3. 03ถ้าภาพที่ส่งมีพิกเซลเกินความจำเป็น ให้แก้ขนาดตามหน้าจอหรือค่าธีมก่อน ถ้ามิติพอดีแล้ว ให้เปรียบเทียบการบีบอัดหรือรูปแบบทางเลือกที่รองรับ
4. 04เตรียมสำเนาที่มีมิติต้องการในโปรแกรมแก้ไขภาพ ใช้ เครื่องมือบีบอัดภาพ Bitinz กับไฟล์ที่เหมาะ และตรวจข้อความ ขอบ ความโปร่งใส กับการไล่สีก่อนแทนที่สิ่งใด
5. 05เผยแพร่ภาพใหม่หรือแก้แม่แบบ ตรวจว่าหน้าเรียกภาพใหม่แทนรุ่นเก่าที่แคชไว้ แล้วรันรายงานอีกครั้งด้วยการตั้งค่าอุปกรณ์เดิม

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

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

• WordPress: ตรวจขนาดภาพที่เลือกในบล็อกหรือธีม และมาร์กอัป srcset กับ sizes จริง WordPress สร้างตัวเลือกภาพตามหน้าจอ แต่แม่แบบเฉพาะหรือคำอธิบายผังที่ไม่ตรงยังอาจส่งขนาดที่ไม่เหมาะ แก้เฉพาะไฟล์ต้นฉบับอาจทำให้สำเนาเดิมที่สร้างไว้ยังถูกใช้งาน
• Shopify: ภาพหน้าร้านถูกปรับผ่าน CDN ของ Shopify อยู่แล้ว รวมถึงการเลือกรูปแบบ Shopify ระบุว่าไม่จำเป็นต้องบีบอัดด้วยตนเองก่อนอัปโหลด เมื่อมีคำเตือน ให้ตรวจความกว้างที่ธีมร้องขอและมาร์กอัปตามหน้าจอ แทนการลดคุณภาพต้นทางซ้ำ ๆ ผู้พัฒนาธีมตรวจ image_url และ image_tag ได้
• Next.js: ใช้การตั้งค่าตามหน้าจอของคอมโพเนนต์ Image และกำหนด sizes ให้ตรงกับผังจริง โดยเฉพาะเมื่อใช้ fill ถ้าค่าไม่เหมาะ ภาพแคบอาจถูกมองว่ากว้างเต็มวิวพอร์ตและดาวน์โหลดตัวเลือกที่ใหญ่กว่า การเปลี่ยนคุณภาพอย่างเดียวไม่แก้ผังที่คลาดเคลื่อนนี้

เก็บต้นฉบับที่แก้ไขได้ สำหรับภาพที่ให้บริการเอง ให้เปรียบเทียบขนาดจริงและรูปลักษณ์ของไฟล์ที่เตรียมไว้ การเปรียบเทียบ JPG, PNG และ WebP ช่วยให้เลือกได้ Bitinz ไม่ปรับมิติภาพ การแปลง WebP อาจทำให้ไฟล์ใหญ่ขึ้น จึงควรเก็บรุ่นที่เหมาะกับหน้าเว็บจริง

สำหรับการเผยแพร่เป็นประจำ API สำหรับนักพัฒนา ช่วยประมวลผลไฟล์ที่เหมาะได้โดยมีบัญชีและโควตารายเดือน แต่ไม่ได้แก้มาร์กอัปธีมหรือผังตามหน้าจอ ตรวจหน้าที่ส่งจริงอีกครั้งหลังเชื่อมระบบอัตโนมัติ

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