บทความ
เพิ่มประสิทธิภาพสื่อบนเว็บไซต์เพื่อความเร็วและ Core Web Vitals
โดยทั่วไปรูปภาพคิดเป็นประมาณ 40 เปอร์เซ็นต์ของน้ำหนักรวมของหน้าเว็บ มากกว่าทรัพยากรประเภทอื่นใด และวิดีโอยิ่งเพิ่มน้ำหนักมากขึ้นไปอีกในหน้าที่มีสื่อจำนวนมาก การจัดการให้ถูกต้องคือสิ่งเดียวที่ให้ผลคุ้มค่าที่สุดต่อความเร็วในการโหลด คะแนน 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 คือทางเลือกที่ไม่มีค่าลิขสิทธิ์ซึ่งเบราว์เซอร์สมัยใหม่ทุกตัวรองรับ เครื่องแปลงวิดีโอของเว็บไซต์นี้เข้ารหัส WebM ด้วย VP8 ซึ่งอยู่ในระดับการบีบอัดเดียวกับ H.264 การเปลี่ยนคอนเทนเนอร์เพียงอย่างเดียวจึงไม่ทำให้ไฟล์เล็กลง ประโยชน์ที่แท้จริงคือสายโคเดกที่ไม่มีค่าลิขสิทธิ์ทั้งหมดและการรองรับอัลฟาแชนแนลโดยกำเนิด แนวทางที่ใช้ได้จริงคือแปลงเป็น WebM ครั้งเดียว ให้บริการเป็นแหล่งที่ต้องการในองค์ประกอบวิดีโอ และเก็บ MP4 ไว้เป็นตัวสำรองสำหรับเบราว์เซอร์รุ่นเก่า การแปลงทำงานภายในเบราว์เซอร์ของคุณผ่าน FFmpeg ที่คอมไพล์เป็น WebAssembly ไม่มีการอัปโหลด และไฟล์ขนาดสูงสุด 500 MB แปลงได้โดยไม่ต้องรอคิว สำหรับวิดีโอพื้นหลังแบบอินไลน์ ลองพิจารณาเครื่องตัดวิดีโอเพื่อตัดวินาทีที่ไม่จำเป็นออกก่อนการเข้ารหัสด้วย ความยาวคือปัจจัยที่ส่งผลต่อขนาดไฟล์มากที่สุด
แอสเซตแบบอินไลน์ base64 และ SVG
รูปภาพขนาดเล็กมาก ไอคอน และ favicon ที่ฝังโดยตรงใน HTML หรือ CSS ในรูปสตริง base64 จะช่วยกำจัดการรับส่งข้อมูลผ่านเครือข่ายหนึ่งรอบต่อแอสเซต วิธีนี้เหมาะกับแอสเซตที่เล็กกว่าประมาณ 2 KB ซึ่งปรากฏบนทุกหน้า เช่น สไปรต์โลโก้หรือตัวบ่งชี้การโหลด แอสเซตที่ใหญ่กว่าควรเป็นไฟล์แยกต่างหาก เพราะ base64 เข้ารหัสใหญ่กว่าข้อมูลไบนารี 33 เปอร์เซ็นต์ และเบราว์เซอร์จะแคชการอ้างอิงไฟล์แต่ไม่แคชข้อมูลอินไลน์อย่างเป็นอิสระ เครื่องมือเพิ่มประสิทธิภาพ SVG ลบขยะของโปรแกรมแก้ไขออกจาก SVG ที่ส่งออกโดยไม่แตะผลลัพธ์ทางภาพ ส่วนเครื่องแปลงรูปภาพเป็น base64 จะสร้าง data URI ที่พร้อมวางในเบราว์เซอร์ของคุณ
ส่งขนาดที่เหมาะสมและโหลดก่อน
รายละเอียดการส่งข้อมูลสองข้อมีความสำคัญพอ ๆ กับตัวไฟล์เอง ข้อแรกคือการปรับขนาดตามหน้าจอ ด้วยรายการ srcset ที่ระบุความกว้าง (image-400.webp 400w, image-800.webp 800w และอื่น ๆ) เบราว์เซอร์จะเลือกไฟล์ที่เล็กที่สุดที่ยังครอบคลุมหน้าจอได้ โดยคูณความกว้าง CSS กับ device pixel ratio (อัตราส่วนพิกเซลของอุปกรณ์) ก่อนที่จะดาวน์โหลด โทรศัพท์ที่มีเลย์เอาต์กว้าง 390px และหน้าจอ 3x ต้องการภาพประมาณ 1,170 พิกเซล จึงดาวน์โหลดเวอร์ชัน 1200w และข้ามไฟล์ต้นฉบับสำหรับเดสก์ท็อป ข้อที่สองคือลำดับความสำคัญ เบราว์เซอร์มี preload scanner (ตัวอ่านล่วงหน้า) ที่อ่านโค้ดไปข้างหน้าและเริ่มดาวน์โหลดภาพก่อนที่ตัวแยกวิเคราะห์หลักจะอ่านถึง การเพิ่ม fetchpriority="high" ให้กับภาพที่ใหญ่ที่สุดในส่วน above-the-fold (ส่วนที่มองเห็นได้โดยไม่ต้องเลื่อน) บอกให้เบราว์เซอร์โหลดมันก่อน ซึ่งโดยปกติแล้วเป็นปัจจัยสำคัญที่กำหนดเวลา Largest Contentful Paint ของคุณ
เครื่องมือที่กล่าวถึงในบทความนี้
- บีบอัดรูปภาพลดขนาดไฟล์รูปภาพโดยไม่มีการอัปโหลด ใช้แถบเลื่อนคุณภาพหรือขนาดไฟล์เป้าหมายใน KB รองรับการทำงานเป็นชุด
- ปรับขนาดรูปภาพปรับขนาดและแปลงรูปภาพ (JPEG, PNG, WebP) โดยไม่ต้องอัปโหลด
- ปรับแต่ง SVGปรับแต่งและลด SVG ด้วย SVGO โดยตรงในเบราว์เซอร์ ไม่มีการอัปโหลด
- แปลงวิดีโอแปลงวิดีโอระหว่าง MP4, WebM, MKV และ MOV (H.264/VP8) ภายในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลด
- แปลงรูปภาพเป็น Base64แปลงรูปภาพเป็น Base64 data URI (และกลับกัน) โดยตรงในเบราว์เซอร์ คัดลอก สไนปเป็ต CSS ไม่มีการอัปโหลด
- เปรียบเทียบรูปภาพด้วยสไลเดอร์เปรียบเทียบรูปภาพสองรูปแบบเคียงข้างกันหรือด้วยสไลเดอร์ (ก่อน/หลัง) ไม่มีการอัปโหลด
คำถามที่พบบ่อย
การบีบอัดรูปภาพส่งผลต่ออันดับการค้นหาของฉันหรือไม่
Google ใช้ Core Web Vitals เป็นสัญญาณจัดอันดับ และ Largest Contentful Paint มักเป็นรูปภาพหรือภาพปกวิดีโอเสมอ หน้าที่ภาพฮีโร่โหลดในเวลาไม่ถึงหนึ่งวินาทีจะได้คะแนนดีกว่าหน้าที่ใช้เวลาสามวินาที การบีบอัดและฟอร์แมตที่ถูกต้องส่งผลต่อตัวชี้วัดนี้โดยตรง ดังนั้นใช่ การเพิ่มประสิทธิภาพรูปภาพมีผลต่อ SEO ที่วัดได้ ผลกระทบนี้แรงที่สุดบนมือถือ ที่การเชื่อมต่อช้ากว่าและบทลงโทษสำหรับภาพหนักก็มากกว่า
ทำไมจึงควรประมวลผลสื่อบนเครื่องแทนการใช้บริการเว็บ
เครื่องมือสื่อออนไลน์ส่วนใหญ่ต้องอัปโหลดไฟล์ของคุณไปยังเซิร์ฟเวอร์ระยะไกล ซึ่งใช้เวลา กินแบนด์วิดท์ และหมายความว่าสำเนาของไฟล์คุณมีอยู่บนโครงสร้างพื้นฐานที่คุณไม่ได้ควบคุม เครื่องมือบนเว็บไซต์นี้ทำงานทั้งหมดในเบราว์เซอร์ของคุณ รูปภาพและวิดีโอของคุณถูกประมวลผลบนอุปกรณ์ของคุณและผลลัพธ์ถูกดาวน์โหลดโดยตรง ไม่ต้องมีบัญชี ไม่ต้องรออัปโหลด และไม่มีข้อมูลใด ๆ เกี่ยวกับไฟล์ของคุณถูกส่งไปยังเซิร์ฟเวอร์เลย