Next-Gen Formats: สิ่งที่ Lighthouse ต้องการ

คำเตือนของ Lighthouse หมายถึงการแปลงไฟล์ JPEG และ PNG ของคุณเป็น WebP หรือ AVIF จากนั้นจึงเสิร์ฟไฟล์เหล่านั้นผ่านแท็ก picture โดยมีไฟล์ต้นฉบับเป็นตัวสำรอง (fallback) การตรวจสอบนี้เป็นหนึ่งในการตรวจสอบที่ผ่านได้ง่ายที่สุด เนื่องจากวิธีการแก้ไขเป็นเรื่องของขั้นตอนการทำงานมากกว่าเรื่องของโครงสร้างระบบ

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

สิ่งที่ Lighthouse กำลังวัดผล

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

รูปภาพที่ประหยัดพื้นที่ได้ต่ำกว่าเกณฑ์จะถูกละเลย ซึ่งเป็นเหตุผลว่าทำไมหน้าเว็บที่มีรูปภาพ 30 รูป อาจแสดงในรายงานการตรวจสอบเพียง 4 รูป ไฟล์ที่แสดงในรายการคือไฟล์ที่ควรค่าแก่การแก้ไขก่อน การจัดการไฟล์เหล่านี้มักจะทำให้คำเตือนหายไปทั้งหมด แม้ว่ารูปภาพอื่นๆ บนหน้าเว็บจะยังคงเป็นฟอร์แมตรุ่นเก่าอยู่ก็ตาม

มาร์กอัปที่ผ่านการตรวจสอบ

ใช้แท็ก picture โดยใส่ AVIF เป็นอันดับแรก WebP เป็นอันดับสอง และ JPEG ต้นฉบับในแท็ก img เบราว์เซอร์จะเลือกซอร์สแรกที่เข้าใจ ดังนั้นเบราว์เซอร์รุ่นใหม่จะได้ไฟล์ขนาดเล็ก ส่วนเบราว์เซอร์รุ่นเก่าก็ยังคงแสดงรูปภาพได้

แท็ก img ยังคงจำเป็นต้องมี เนื่องจากเป็นแท็กที่เก็บข้อความ alt, ขนาดของรูปภาพ และไฟล์สำรอง การละเว้นแอตทริบิวต์ width และ height จะทำให้เกิดการเลื่อนของเลย์เอาต์ (layout shift) ขณะที่รูปภาพกำลังโหลด ซึ่งจะส่งผลเสียต่อการวัดผล Core Web Vitals ตัวอื่นในขณะที่กำลังแก้ไขตัวนี้ ให้ตั้งค่าแอตทริบิวต์ทั้งสองตามขนาดพิกเซลจริงของรูปภาพสำรอง

วิธีผ่านการตรวจสอบ

หากต้องการแก้ไขคำเตือนอย่างถูกต้อง ให้ทำตาม 6 ขั้นตอนนี้

1. เปิดรายงาน Lighthouse และจดรายการรูปภาพที่ระบุ ซึ่งเป็นรูปภาพที่สามารถประหยัดพื้นที่ได้อย่างเห็นได้ชัด
2. ตรวจสอบขนาดการแสดงผลของแต่ละรูปภาพ เนื่องจากรูปภาพจำนวนมากมีขนาดใหญ่เกินความจำเป็นและยังใช้ฟอร์แมตที่ผิดอีกด้วย
3. ปรับขนาดรูปภาพแต่ละรูปให้เท่ากับความกว้างที่แสดงผลจริง และคูณสองสำหรับหน้าจอที่มีความหนาแน่นพิกเซลสูง
4. แปลงเป็น WebP ที่คุณภาพ 80 และแปลงเป็น AVIF ที่คุณภาพ 65 สำหรับรูปภาพที่มีขนาดใหญ่ที่สุดบนหน้าเว็บ
5. เสิร์ฟผลลัพธ์ผ่านแท็ก picture โดยใช้รูปภาพต้นฉบับเป็นตัวสำรองในแท็ก img
6. รัน Lighthouse อีกครั้งเพื่อยืนยันว่าคำเตือนหายไปแล้วและไม่มีปัญหาเลย์เอาต์เลื่อนเกิดขึ้น

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

ฟอร์แมตไหนเหมาะกับรูปภาพใด

แพลตฟอร์มของคุณทำสิ่งนี้ให้อยู่แล้วหรือไม่

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

ทดสอบได้ใน 2 นาที เปิดหน้าเว็บที่เผยแพร่แล้ว คลิกขวาที่รูปภาพแล้วเปิดในแท็บใหม่ จากนั้นดูนามสกุลไฟล์ในแถบที่อยู่เว็บ นามสกุล .webp บนไฟล์ที่คุณอัปโหลดเป็น JPEG หมายความว่าแพลตฟอร์มกำลังแปลงไฟล์ให้คุณอยู่แล้ว Shopify, โฮสต์ WordPress แบบ managed ส่วนใหญ่ และเครื่องมือสร้างเว็บไซต์หลายรายทำสิ่งนี้เป็นค่าเริ่มต้น

ทำไมคำเตือนจึงกลับมาแสดงอีกครั้ง

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

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

คุณควรใช้ AVIF, WebP หรือใช้ทั้งสองอย่าง

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

การคำนวณนี้จะเปลี่ยนไปสำหรับเว็บไซต์ที่เน้นรูปภาพเป็นหลัก ซึ่ง AVIF จะช่วยประหยัดพื้นที่เพิ่มขึ้นอีก 20 ถึง 30 เปอร์เซ็นต์สำหรับไฟล์ที่มีขนาดหลายร้อยกิโลไบต์ บนหน้าเว็บที่มีรูปภาพ hero ขนาด 600 KB นั่นคือการลดขนาดที่เห็นผลจริง แต่บนหน้าเว็บที่มีรูปภาพขนาดเล็ก (thumbnail) ขนาด 40 KB ขั้นตอนการทำงานที่เพิ่มขึ้นมานั้นต้องใช้ความพยายามมากกว่าผลลัพธ์ที่ได้ และการใช้ WebP เพียงอย่างเดียวก็เพียงพอที่จะผ่านการตรวจสอบแล้ว

การตรวจสอบผลลัพธ์อย่างถูกต้อง

รัน Lighthouse อีกครั้งในหน้าต่างส่วนตัว (private window) ที่ปิดใช้งานส่วนขยาย (extensions) ทั้งหมด เนื่องจากส่วนขยายของเบราว์เซอร์อาจทำให้การวัดผลคลาดเคลื่อน คะแนนอาจแตกต่างกันไปในการรันแต่ละครั้ง ดังนั้นควรเปรียบเทียบจากการรัน 3 ครั้ง แทนที่จะเชื่อตัวเลขจากการรันเพียงครั้งเดียว

ตรวจสอบให้แน่ใจว่าเบราว์เซอร์ได้รับฟอร์แมตใหม่จริงแทนที่จะคาดเดาเอาเอง เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ (developer tools) ไปที่แท็บ Network กรองเฉพาะรูปภาพ (images) แล้วโหลดหน้าเว็บใหม่อีกครั้ง คอลัมน์ Type จะแสดงฟอร์แมตที่ถูกเสิร์ฟจริง หากหน้าเว็บยังคงเสิร์ฟ JPEG หลังจากแปลงไฟล์แล้ว มักจะหมายความว่ามาร์กอัปของแท็ก picture ผิดพลาด หรือระบบแคชยังคงจำเวอร์ชันก่อนหน้าอยู่

การตรวจสอบที่เกี่ยวข้องซึ่งมักจะปรากฏขึ้นพร้อมกัน

• Properly size images. รูปภาพมีขนาดใหญ่กว่าพื้นที่ที่แสดงผล ให้ปรับขนาดรูปภาพแทนการบีบอัด
• Efficiently encode images. การบีบอัดน้อยเกินไป ให้ลดการตั้งค่าคุณภาพลง
• Defer offscreen images. ใส่ lazy loading ให้กับรูปภาพที่อยู่ด้านล่างของหน้าเว็บ (below the fold)
• Largest Contentful Paint element. มักจะเป็นรูปภาพ hero ของคุณ ซึ่งเป็นส่วนที่ควรให้ความสำคัญเป็นอันดับแรก
• Image elements do not have explicit width and height. ใส่แอตทริบิวต์ทั้งสองเพื่อป้องกันไม่ให้เลย์เอาต์เลื่อน

การตรวจสอบทั้ง 5 รายการนี้มักจะปรากฏขึ้นพร้อมกัน และการปรับขนาดรวมถึงการแปลงไฟล์รูปภาพที่ระบุในรายงานจะช่วยแก้ปัญหาเกือบทั้งหมดได้ในการทำเพียงครั้งเดียว

การทำเช่นนี้ช่วยปรับปรุงหน้าเว็บได้มากน้อยเพียงใด

การแปลงเป็นฟอร์แมตสมัยใหม่มักจะช่วยลดขนาดของรูปภาพลงได้ 25 ถึง 35 เปอร์เซ็นต์ และการปรับขนาดก่อนมักจะช่วยลดขนาดลงได้มากกว่านั้นมาก สำหรับหน้าเว็บที่มีรูปภาพจำนวนมาก ผลลัพธ์ที่ได้ร่วมกันมักจะอยู่ที่ 70 ถึง 80 เปอร์เซ็นต์

การปรับปรุงนี้จะแสดงให้เห็นใน Largest Contentful Paint ซึ่งวัดความเร็วในการแสดงผลของเนื้อหาหลัก การวัดผลนี้มักจะตัดสินจากรูปภาพเพียงรูปเดียว ดังนั้นการลดขนาดไฟล์ hero จึงส่งผลอย่างมากเมื่อเทียบกับสัดส่วนของรูปภาพบนหน้าเว็บ การลดขนาดรูปภาพขนาดเล็ก 20 รูป มีความสำคัญน้อยกว่าการลดขนาดรูปภาพขนาดใหญ่เพียง 1 รูป

สิ่งที่ไม่ควรทำ

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

ชุดข้อมูลสำหรับสื่อมวลชน (press kits), คู่มือสำหรับพิมพ์, เทมเพลตสำหรับดาวน์โหลด และไฟล์จากซัพพลายเออร์ ควรคงไว้เป็น JPEG หรือ PNG เนื่องจาก WebP ใช้งานได้ไม่สะดวกนักเมื่ออยู่นอกเบราว์เซอร์ การเสิร์ฟไฟล์เหล่านั้นเป็นฟอร์แมตสมัยใหม่อาจทำให้เกิดปัญหาในการใช้งานจากผู้ที่ไม่สามารถเปิดไฟล์ได้ ซึ่งจะสร้างความเสียหายมากกว่าแบนด์วิดท์ที่ประหยัดได้

การแปลงไฟล์รูปภาพที่ระบุในรายงาน

แปลงไฟล์จากรูปภาพต้นฉบับแทนที่จะแปลงจากเวอร์ชันที่เผยแพร่ไปแล้ว เนื่องจากไฟล์ JPEG ที่ถูกบีบอัดไปแล้วจะนำความเสียหายของภาพเข้าไปยังไฟล์ใหม่ด้วย ตัวเข้ารหัสไม่สามารถแยกแยะระหว่างรอยแตกของภาพ (artefacts) ที่มีอยู่แล้วกับรายละเอียดจริงของภาพได้ และจะเสียพื้นที่ในการเก็บรักษาสิ่งเหล่านั้นไว้

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

เก็บไฟล์ที่แปลงแล้วไว้คู่กับไฟล์ต้นฉบับโดยใช้ชื่อที่ตรงกัน เพื่อให้สามารถสร้างมาร์กอัปของแท็ก picture ได้ด้วยรูปแบบที่คาดเดาได้ แทนที่จะต้องแก้ไขด้วยมือสำหรับแต่ละรูปภาพ โฟลเดอร์ที่เก็บไฟล์ hero.jpg, hero.webp และ hero.avif จะช่วยให้การเขียนเทมเพลตเป็นเรื่องง่าย และทำให้การเปลี่ยนผ่านฟอร์แมตในครั้งต่อไปเป็นเพียงการแปลงไฟล์แบบกลุ่ม แทนที่จะต้องเขียนหน้าเว็บใหม่ทั้งหมด