บทความ

เพิ่มประสิทธิภาพสื่อบนเว็บไซต์เพื่อความเร็วและ Core Web Vitals

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

เลือกฟอร์แมตที่ถูกต้องก่อนสิ่งอื่นใด

การเลือกฟอร์แมตสำคัญกว่าแถบเลื่อนคุณภาพใด ๆ สำหรับภาพถ่ายบนหน้าเว็บ WebP คือค่าเริ่มต้นที่เหมาะสม มันเล็กกว่า JPEG ราว 25 ถึง 35 เปอร์เซ็นต์ที่คุณภาพการมองเห็นเท่ากัน และเบราว์เซอร์สมัยใหม่ทุกตัวรองรับ AVIF บีบอัดได้ดีกว่านั้น มากถึง 50 เปอร์เซ็นต์ที่ดีกว่า JPEG โดยแลกกับการเข้ารหัสที่ช้าลง ใช้ AVIF สำหรับภาพฮีโร่และภาพถ่ายสินค้าที่คุณบีบอัดครั้งเดียว ใช้ WebP สำหรับสิ่งที่คุณประมวลผลเป็นชุดหรือต้องการอย่างรวดเร็ว PNG เหมาะเฉพาะเมื่อคุณต้องการความแม่นยำแบบไม่สูญเสียข้อมูลหรือพื้นหลังโปร่งใส ส่วน SVG เป็นตัวเลือกเดียวที่สมเหตุสมผลสำหรับโลโก้ ไอคอน และภาพประกอบ มันปรับขนาดได้ทุกขนาดและมักหนักเพียงไม่กี่กิโลไบต์เทียบกับหลายร้อยกิโลไบต์ของภาพแรสเตอร์ที่เทียบเท่า

บีบอัดรูปภาพโดยไม่สูญเสียคุณภาพที่มองเห็นได้

เริ่มด้วยการย่อขนาดให้เท่ากับขนาดที่แสดงผลจริง ภาพฮีโร่ที่แสดงผลกว้าง 1280 พิกเซลไม่จำเป็นต้องมีข้อมูล 4000 พิกเซล ย่อขนาดก่อนแล้วจึงบีบอัด สำหรับภาพถ่าย คุณภาพ 80 ใน WebP หรือ JPEG คือขีดต่ำที่ใช้ได้จริง ต่ำกว่านั้นผู้ชมทั่วไปจะเริ่มสังเกตเห็น จึงควรตั้งเป้าที่ 75 ถึง 85 และดูผลลัพธ์ที่การซูมเต็มก่อนเผยแพร่ สำหรับกราฟิกที่มีตัวอักษรและพื้นที่สีเรียบ PNG แบบไม่สูญเสียข้อมูลหรือ SVG จะรักษาความคมชัดที่ฟอร์แมตแบบสูญเสียข้อมูลทำให้เลอะเลือน เครื่องบีบอัดรูปภาพบนเว็บไซต์นี้รองรับฟอร์แมตเหล่านี้ทั้งหมด ทำงานทั้งหมดในเบราว์เซอร์ของคุณ และใช้อัลกอริทึมเดียวกับเครื่องมือเดสก์ท็อปเฉพาะทาง

แปลงวิดีโอสำหรับเว็บโดยไม่ต้องอัปโหลด

ลูปพื้นหลังและวิดีโอแบบฝังคือจุดที่การเพิ่มประสิทธิภาพสื่อบนเว็บมักทำได้ไม่ดีพอ MP4 ที่ใช้ H.264 เล่นได้ทุกที่ แต่ WebM ที่ใช้ VP9 เล็กกว่าราว 20 ถึง 40 เปอร์เซ็นต์ที่คุณภาพเท่ากัน ซึ่งสำคัญต่อผู้ใช้มือถือบนการเชื่อมต่อที่จำกัด แนวทางที่ใช้ได้จริงคือแปลงเป็น WebM ครั้งเดียว ให้บริการเป็นแหล่งที่ต้องการในองค์ประกอบวิดีโอ และเก็บ MP4 ไว้เป็นตัวสำรอง เครื่องแปลงวิดีโอที่นี่ใช้ FFmpeg ที่คอมไพล์เป็น WebAssembly การแปลงทำงานภายในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลด และไฟล์ขนาดใดก็ทำงานได้ตราบใดที่อุปกรณ์ของคุณมีหน่วยความจำเพียงพอ สำหรับวิดีโอพื้นหลังแบบอินไลน์ ลองพิจารณาเครื่องตัดวิดีโอเพื่อตัดวินาทีที่ไม่จำเป็นออกก่อนการเข้ารหัสด้วย ความยาวคือปัจจัยที่ส่งผลต่อขนาดไฟล์มากที่สุด

แอสเซตแบบอินไลน์ base64 และ SVG

รูปภาพขนาดเล็กมาก ไอคอน และ favicon ที่ฝังโดยตรงใน HTML หรือ CSS ในรูปสตริง base64 จะช่วยกำจัดการรับส่งข้อมูลผ่านเครือข่ายหนึ่งรอบต่อแอสเซต วิธีนี้เหมาะกับแอสเซตที่เล็กกว่าประมาณ 2 KB ซึ่งปรากฏบนทุกหน้า เช่น สไปรต์โลโก้หรือตัวบ่งชี้การโหลด แอสเซตที่ใหญ่กว่าควรเป็นไฟล์แยกต่างหาก เพราะ base64 เข้ารหัสใหญ่กว่าข้อมูลไบนารี 33 เปอร์เซ็นต์ และเบราว์เซอร์จะแคชการอ้างอิงไฟล์แต่ไม่แคชข้อมูลอินไลน์อย่างเป็นอิสระ เครื่องมือเพิ่มประสิทธิภาพ SVG ลบขยะของโปรแกรมแก้ไขออกจาก SVG ที่ส่งออกโดยไม่แตะผลลัพธ์ทางภาพ ส่วนเครื่องแปลงรูปภาพเป็น base64 จะสร้าง data URI ที่พร้อมวางในเบราว์เซอร์ของคุณ

เครื่องมือที่กล่าวถึงในบทความนี้

คำถามที่พบบ่อย

การบีบอัดรูปภาพส่งผลต่ออันดับการค้นหาของฉันหรือไม่

Google ใช้ Core Web Vitals เป็นสัญญาณจัดอันดับ และ Largest Contentful Paint มักเป็นรูปภาพหรือภาพปกวิดีโอเสมอ หน้าที่ภาพฮีโร่โหลดในเวลาไม่ถึงหนึ่งวินาทีจะได้คะแนนดีกว่าหน้าที่ใช้เวลาสามวินาที การบีบอัดและฟอร์แมตที่ถูกต้องส่งผลต่อตัวชี้วัดนี้โดยตรง ดังนั้นใช่ การเพิ่มประสิทธิภาพรูปภาพมีผลต่อ SEO ที่วัดได้ ผลกระทบนี้แรงที่สุดบนมือถือ ที่การเชื่อมต่อช้ากว่าและบทลงโทษสำหรับภาพหนักก็มากกว่า

ทำไมจึงควรประมวลผลสื่อบนเครื่องแทนการใช้บริการเว็บ

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