Optimize รูปภาพ เพื่อเพิ่มความเร็วและคะแนนจาก PageSpeed Insights

เรียนรู้ 4 วิธี Optimize รูปภาพเพื่อเพิ่มความเร็วเว็บไซต์และคะแนน PageSpeed Insights โดยใช้ WebP, AVIF และเทคนิคปรับขนาดไฟล์ เพิ่มประสิทธิภาพ SEO แบบ Quick Win
10 ตุลาคม 2024
Optimize รูปช่วยให้เว็บไซต์เร็วขึ้นง่ายๆ
การเพิ่มความเร็วของเว็บไซต์เป็นสิ่งสำคัญมากในการทำเว็บไซต์ โดยเฉพาะอย่างยิ่งเมื่อเครื่องมืออย่าง Google PageSpeed Insights เป็นตัวชี้วัดคะแนน SEO และ Performance ของเว็บไซต์เรา
การ Optimize รูปภาพ เป็นหนึ่งในวิธีหลักที่ช่วยเพิ่มความเร็วและประสิทธิภาพของเว็บไซต์ได้แบบ Quick Win โดยการใช้ format ไฟล์สมัยใหม่อย่างเช่น WebP และ AVIF หรือปรับขนาดไฟล์ให้เหมาะสมกับขนาดที่ใช้ เพื่อลดการดาวน์โหลดให้รวดเร็วมากยิ่งขึ้น
วันนี้ Tumwebtook มานำเสนอ 4 วิธีที่นำมา Optimize รูปภาพ เพื่อช่วยให้เว็บไซต์ของเราเร็วและเพิ่มคะแนน SEO, PageSpeed Insights ให้ดีขึ้นง่ายๆ

1.เลือก Format สมัยใหม่
การเลือกฟอร์แมตไฟล์ที่เหมาะสมมีผลโดยตรงต่อความเร็วของเว็บไซต์ โดยเฉพาะฟอร์แมตที่ใหม่กว่าอย่าง WebP และ AVIF ซึ่งช่วยลดขนาดไฟล์ได้มากเมื่อเทียบกับ JPEG และ PNG:
- WebP: ลดขนาดไฟล์ได้มากถึง 25%-34% เมื่อเทียบกับ JPEG และ PNG แต่ยังคงคุณภาพของภาพได้อย่างดี
- AVIF: ฟอร์แมตที่ใหม่กว่า WebP ลดขนาดไฟล์ได้มากถึง 50% เมื่อเทียบกับ JPEG โดยให้คุณภาพที่สูงขึ้น
การใช้ฟอร์แมตที่เหมาะสมจะช่วยให้รูปภาพโหลดเร็วขึ้นและเพิ่มประสิทธิภาพเว็บไซต์ทั้งในแง่ความเร็วและคะแนน SEO.
2. ปรับขนาดรูปภาพให้เหมาะสม
การใช้รูปภาพขนาดใหญ่เกินกว่าที่แสดงบนเว็บไซต์จะทำให้เว็บไซต์โหลดช้า ควรปรับขนาดรูปภาพให้ตรงกับขนาดที่จำเป็น เช่น หากพื้นที่แสดงภาพคือ 800x600 pixel เราก็ควรปรับให้รูปขนาดเพียง 800x600 pixel
มี Tools มากมายที่ช่วยนำมาปรับแต่งขนาดรูปได้โดยไม่ต้องไล่ทำทีละไฟล์อย่างเช่น unjs/ipx ที่ช่วยให้เราเลือก format, ขนาด, quality ของรูปภาพได้เพียงใส่รายละเอียดลงไปใน url เพิ่มเติมเท่านั้นเอง
3. ใช้ Lazy Loading
Lazy Loading คือเทคนิคที่ทำให้รูปภาพโหลดเฉพาะเมื่อผู้ใช้งานเลื่อนมาถึงภาพนั้นๆ ซึ่งช่วยลดการโหลดรูปภาพที่ไม่จำเป็นในทันที ลดภาระการโหลดหน้าเว็บในช่วงแรกได้มาก เพิ่มคะแนน SEO ได้ในทุกๆด้าน
สามารถเพิ่ม Lazy Loading ได้ง่ายๆ โดยการใช้ HTML5 loading="lazy"
หรือใช้ปลั๊กอินที่รองรับ เช่นสำหรับ WordPress
4. ใช้ CDN (Content Delivery Network)
การใช้ CDN ช่วยกระจายรูปภาพและเนื้อหาของเว็บไซต์ไปยังเซิร์ฟเวอร์ที่อยู่ใกล้กับผู้ใช้งานมากที่สุด ทำให้รูปภาพโหลดเร็วขึ้นสำหรับผู้ใช้ทั่วโลก ตัวอย่างเช่น Cloudflare ที่จะช่วยกระจายไฟล์ไปให้อยู่ที่ใกล้กับผู้ใช้งานเรียกใช้ อยู่ที่กรุงเทพ ก็ดึงไฟล์จากเซิฟเวอร์ใกล้ๆกรุงเทพ อยู่ที่นิวยอร์คก็ดึงไฟล์ที่เซิฟเวอร์ใน USA ก็จะช่วยลด load time ตรงนี้ได้
บทสรุป
การ Optimize รูปภาพ ช่วยเพิ่มความเร็วของเว็บไซต์และคะแนนจาก Google PageSpeed Insights โดยตรง ซึ่งมีผลต่อการจัดอันดับ SEO ของเว็บไซต์ด้วย การปรับแต่งรูปภาพด้วยวิธีต่างๆ ที่กล่าวมาจะทำให้เว็บไซต์ทำงานได้เร็วขึ้น และสร้างประสบการณ์ที่ดีให้กับผู้ใช้งานมากยิ่งขึ้น
การนำเสนอเนื้อหาที่โหลดเร็วและเป็นมิตรกับผู้ใช้งานจะทำให้เว็บไซต์ของคุณมีโอกาสได้รับการจัดอันดับที่สูงขึ้นบนหน้าแรกของ Google
👋 สอบถามรายละเอียดทำเว็บไซต์กับ TumWebTook