เหตุใดเว็บไซต์ของคุณจึงช้า — รายการตรวจสอบการเพิ่มประสิทธิภาพรูปภาพสำหรับปี 2026
ใช้งานเว็บไซต์ของคุณผ่าน Google PageSpeed Insights ทันที ไปข้างหน้าเปิดแท็บใหม่และทำมัน หากคะแนนประสิทธิภาพของคุณต่ำกว่า 80 ก็มีโอกาสสูงที่คำแนะนำยอดนิยมจะเกี่ยวกับรูปภาพ รูปภาพที่ไม่ได้เพิ่มประสิทธิภาพเป็นสาเหตุสำคัญที่สุดที่ทำให้เว็บไซต์ช้า โดยรูปภาพเหล่านี้มีน้ำหนักหน้ามากกว่า JavaScript, CSS, แบบอักษร และ HTML รวมกันอย่างสม่ำเสมอ ข่าวดีก็คือ การปรับรูปภาพให้เหมาะสมเป็นวิธีแก้ไขประสิทธิภาพที่ง่ายที่สุดเช่นกัน ไม่มีการเปลี่ยนแปลงโค้ด ไม่มีการกำหนดค่าเซิร์ฟเวอร์ใหม่ ไม่มีการดีบัก เพียงแค่ภาพที่ชาญฉลาดยิ่งขึ้น
รูปภาพคือปัญหาเรื่องน้ำหนักหน้าอันดับ 1
จากข้อมูล HTTP Archive รูปภาพคิดเป็นประมาณ 42% ของน้ำหนักรวมของหน้าเว็บโดยเฉลี่ย หน้าเว็บเฉลี่ยมีขนาดประมาณ 2.3 MB และประมาณ 1 MB เป็นรูปภาพ แต่นั่นเป็นค่ามัธยฐาน — ไซต์ที่ได้รับการปรับปรุงคุณภาพต่ำจะให้บริการรูปภาพขนาด 5-15 MB ต่อหน้าเป็นประจำ ทุกเมกะไบต์เพิ่มเติมจะทำให้เวลาในการโหลดเพิ่มขึ้นประมาณ 1-2 วินาทีบนการเชื่อมต่อมือถือทั่วไป เพจขนาด 10 MB ใช้เวลา 8-12 วินาทีในการโหลดบน 4G โดยสมบูรณ์ และผู้เข้าชมส่วนใหญ่จะละทิ้งหลังจาก 3 วินาที
ปัญหามักเกิดจากหนึ่งในสองสิ่งต่อไปนี้: รูปภาพที่มีขนาดใหญ่เกินไป (แสดงรูปภาพ 4000px ในคอนเทนเนอร์ 800px) หรือรูปภาพที่มีการบีบอัดไม่เพียงพอ (ประหยัดคุณภาพ 100% เมื่อ 80% มีความเหมือนกันทางสายตา) มักจะเป็นทั้งสองอย่าง
รายการตรวจสอบ 1 — ให้บริการรูปภาพในขนาดที่เหมาะสม
นี่คือการเพิ่มประสิทธิภาพที่มีผลกระทบสูงสุดเพียงครั้งเดียว หาก CSS ของคุณแสดงรูปภาพที่มีความกว้าง 800 พิกเซล ไฟล์รูปภาพควรมีความกว้างประมาณ 800 พิกเซล ไม่ใช่ 4000 พิกเซล การแสดงภาพขนาดใหญ่จะทำให้แบนด์วิธสิ้นเปลืองไปกับพิกเซลที่เบราว์เซอร์ทิ้งไป เปิดเครื่องมือสำหรับนักพัฒนาเบราว์เซอร์ของคุณ ตรวจสอบรูปภาพของคุณ และเปรียบเทียบขนาดที่แสดงกับขนาดธรรมชาติ (ไฟล์) หากขนาดธรรมชาติมากกว่า 2 เท่าของขนาดที่แสดง แสดงว่าคุณกำลังสิ้นเปลืองข้อมูล
สำหรับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งรูปภาพอาจแสดงในขนาดที่แตกต่างกันบนหน้าจอที่แตกต่างกัน ให้ใช้แอตทริบิวต์ srcset เพื่อระบุขนาดรูปภาพหลายขนาด เบราว์เซอร์จะเลือกเบราว์เซอร์ที่ดีที่สุดสำหรับหน้าจอของผู้เยี่ยมชม วิธีการทั่วไป: จัดเตรียมรูปภาพที่มีความกว้าง 400px, 800px, 1200px และ 1600px สร้างตัวแปรขนาดเหล่านี้ จากต้นฉบับของคุณ และให้เบราว์เซอร์เลือก
รายการตรวจสอบ 2 — ใช้รูปแบบ Next-Gen
หากคุณยังคงให้บริการเฉพาะไฟล์ JPEG และ PNG ในปี 2026 คุณจะเหลือขนาดไฟล์ที่ประหยัดได้ 25-50% ไว้บนโต๊ะ เว็บพี มีการรองรับเบราว์เซอร์ที่เกือบจะเป็นสากล (97%+ ทั่วโลก) และสร้างไฟล์ที่เล็กกว่า JPEG 25-35% ในคุณภาพเดียวกัน AVIF บรรลุการบีบอัดที่ดียิ่งขึ้น - เล็กกว่า JPEG ประมาณ 50% - และตอนนี้รองรับเบราว์เซอร์มากกว่า 92%
การนำไปปฏิบัตินั้นตรงไปตรงมา: แปลงรูปภาพของคุณเป็น WebP (หรือ AVIF หากแพลตฟอร์มของคุณรองรับ) เพื่อความเข้ากันได้สูงสุด ให้ใช้องค์ประกอบรูปภาพ HTML เพื่อให้บริการ AVIF กับเบราว์เซอร์ที่รองรับ WebP เป็นทางเลือกสุดท้าย และ JPEG เป็นทางเลือกสุดท้าย แพลตฟอร์ม CMS ที่ทันสมัยที่สุดและเครื่องมือสร้างไซต์แบบคงที่มีปลั๊กอินหรือคุณสมบัติในตัวเพื่อจัดการสิ่งนี้โดยอัตโนมัติ
รายการตรวจสอบ 3 — ใช้ Lazy Loading
การโหลดแบบ Lazy Loading เป็นการเลื่อนการโหลดรูปภาพที่อยู่ด้านล่างวิวพอร์ตที่มองเห็นได้ เบราว์เซอร์ของผู้เยี่ยมชมจะดาวน์โหลดรูปภาพเฉพาะเมื่อพวกเขาเลื่อนเข้าไปใกล้พวกเขาเท่านั้น แทนที่จะโหลดรูปภาพทั้งหมดบนเพจพร้อมกัน วิธีนี้ช่วยปรับปรุงเวลาในการโหลดหน้าแรกได้อย่างมาก โดยเฉพาะอย่างยิ่งบนหน้าเว็บที่มีรูปภาพจำนวนมาก เช่น พอร์ตโฟลิโอ แกลเลอรี หรือโพสต์บล็อกขนาดยาว ใน HTML ทำได้ง่ายเพียงแค่เพิ่ม กำลังโหลด = "ขี้เกียจ" ไปที่แท็ก img ของคุณ ขณะนี้แพลตฟอร์ม CMS ส่วนใหญ่ทำเช่นนี้ตามค่าเริ่มต้น
คำเตือนที่สำคัญ: อย่าโหลดรูปภาพที่มองเห็นได้ในวิวพอร์ตเริ่มต้น (ครึ่งหน้าบน) แบบ Lazy Loading รูปภาพหลัก โลโก้ และรูปภาพใดๆ ที่เห็นได้โดยไม่ต้องเลื่อนควรโหลดทันที การโหลดแบบ Lazy Loading สิ่งเหล่านี้ส่งผลเสียต่อคะแนน LCP ของคุณ เนื่องจากจะทำให้การเรนเดอร์เนื้อหาภาพที่สำคัญที่สุดล่าช้า
รายการตรวจสอบ 4 — บีบอัดที่ระดับคุณภาพที่เหมาะสม
รูปภาพส่วนใหญ่บนเว็บสามารถบีบอัดได้ที่คุณภาพ 75-85% โดยไม่สูญเสียไป ความแตกต่างระหว่างคุณภาพ 100% ถึง 85% ใน JPEG โดยทั่วไปจะมองไม่เห็นด้วยตามนุษย์ แต่ความแตกต่างของขนาดไฟล์คือ 2-3x เรียกใช้ภาพของคุณผ่านคอมเพรสเซอร์ และเปรียบเทียบก่อนและหลัง คุณจะแปลกใจว่าคุณสามารถทำให้มันเล็กลงได้มากเพียงใดโดยไม่เกิดการเสื่อมสลายที่มองเห็นได้
เครื่องมือทดสอบประสิทธิภาพของภาพ
ข้อมูลเชิงลึกของ Google PageSpeed: ระบุภาพเฉพาะที่ต้องการการปรับให้เหมาะสมและประหยัดค่าใช้จ่ายโดยประมาณ จีทีเมตริกซ์: แสดงแผนภูมิน้ำตกเพื่อให้คุณเห็นได้อย่างชัดเจนว่ารูปภาพใดที่ทำให้สิ่งต่าง ๆ ช้าลง การทดสอบหน้าเว็บ: ให้มุมมองแถบฟิล์มเพื่อดูว่าภาพปรากฏขึ้นเมื่อใดระหว่างการโหลด Chrome DevTools: แท็บเครือข่ายช่วยให้คุณจัดเรียงคำขอตามขนาดเพื่อค้นหาผู้กระทำผิดที่ใหญ่ที่สุด
รายการตรวจสอบ 5 — พิจารณา CDN สำหรับรูปภาพ
เครือข่ายการจัดส่งเนื้อหาจัดเก็บสำเนารูปภาพของคุณบนเซิร์ฟเวอร์ทั่วโลก ดังนั้นผู้เยี่ยมชมจึงดาวน์โหลดรูปภาพจากเซิร์ฟเวอร์ที่อยู่ใกล้พวกเขา แทนที่จะดาวน์โหลดจากเซิร์ฟเวอร์ต้นทางของคุณที่อยู่ครึ่งซีกโลก สำหรับไซต์ที่มีผู้ชมทั่วโลก CDN สามารถลดเวลาในการโหลดรูปภาพลงได้ 40-60% ผู้ให้บริการ CDN หลายรายยังเสนอการปรับแต่งรูปภาพอัตโนมัติ — พวกเขาจะปรับขนาด บีบอัด และแปลงรูปแบบได้ทันทีตามอุปกรณ์และเบราว์เซอร์ของผู้เข้าชม
Cloudflare (มีระดับฟรี), BunnyCDN และ Amazon CloudFront เป็นตัวเลือกยอดนิยม หากคุณใช้ WordPress แผนบริการฟรีของ Cloudflare เพียงอย่างเดียวสามารถสร้างความแตกต่างที่เห็นได้ชัดเจน สำหรับไซต์คงที่บนแพลตฟอร์มเช่น Netlify หรือ Vercel จะมีการนำส่ง CDN มาให้ในตัว
รายการตรวจสอบทั้งหมดตามลำดับผลกระทบ: (1) ปรับขนาดรูปภาพเพื่อแสดงขนาด (2) บีบอัดที่คุณภาพ 75-85% (3) แปลงเป็น WebP หรือ AVIF (4) ใช้การโหลดแบบ Lazy Loading สำหรับรูปภาพครึ่งหน้าล่าง (5) ใช้ srcset ที่ตอบสนองสำหรับหน้าจอหลายขนาด (6) ให้บริการผ่าน CDN (7) ตั้งค่าส่วนหัวแคชที่เหมาะสม เพื่อให้ผู้เยี่ยมชมที่กลับมาไม่ต้องดาวน์โหลดรูปภาพซ้ำ ดำเนินการตามรายการนี้และเรียกใช้ PageSpeed Insights หลังจากแต่ละขั้นตอน ไซต์ส่วนใหญ่เห็นการปรับปรุงครั้งใหญ่ที่สุดตั้งแต่ขั้นตอนที่ 1-3 เพียงอย่างเดียว
