ความคิดเห็นจากแบบสำรวจการเพิ่มประสิทธิภาพรูปภาพของฤดูร้อนปี 2019

ความคิดเห็นจากผู้ตอบแบบสำรวจเกี่ยวกับเทคนิคการเพิ่มประสิทธิภาพรูปภาพต่างๆ

Sam Dutton

โพสต์นี้แสดงความคิดเห็นแบบอิสระที่ Google Web DevRel ได้รับในแบบสำรวจเทคนิคการเพิ่มประสิทธิภาพรูปภาพช่วงฤดูร้อนปี 2019 เราได้ขอคำตอบผ่านหลักพื้นฐานในการทำเว็บไซต์และ @ChromiumDev แรงจูงใจในการทำแบบสำรวจคือการค้นหาว่าเหตุใดเว็บไซต์ส่วนใหญ่จึงไม่ปฏิบัติตามแนวทางปฏิบัติแนะนำในการเพิ่มประสิทธิภาพรูปภาพ แม้ว่าดูเหมือนจะเป็นวิธีที่ค่อนข้างง่ายในการปรับปรุงประสิทธิภาพ ข้อมูลคำตอบไม่ได้แสดงอยู่ที่นี่เนื่องจากมีข้อบกพร่องในวิธีการสำรวจ

กลุ่มเป้าหมาย

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

ความคิดเห็น

WebP

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

• "ฉันชอบ WebP แต่ยังไม่พร้อมใช้งานอย่างเต็มรูปแบบ นอกจากนี้ WordPress ของเรายังไม่รองรับ WebP ด้วย Photoshop ซึ่งเป็นหนึ่งในแอปแต่งภาพที่ได้รับความนิยมมากที่สุดก็ไม่รองรับ WebP โดยค่าเริ่มต้นเช่นกัน เราจึงไม่สามารถใช้แอปหรือบริการของบุคคลที่สามในการบีบอัดรูปภาพ"
• "ทำให้ WebP ใช้งานได้ใน Safari"
• "ฉันอยากใช้ WebP ถ้าสามารถส่งออกจาก Photoshop/Figma/Sketch และเบราว์เซอร์ทั้งหมดรองรับ" [หมายเหตุ: Sketch รองรับ WebP]
• "โซลูชันการจัดรูปแบบรุ่นถัดไปน่าจะดี"
• "หยุดผลักดัน WebP อย่างหนักเมื่อการรองรับเบราว์เซอร์ไม่ดี และพิจารณาความจำเป็นในการใช้ PNG แทน JPEG สำหรับภาพหน้าจอ"
• "Google เอกสารไม่รองรับ WebP"
• "เราจะใช้ WebP เท่านั้น แต่กังวลเกี่ยวกับความเข้ากันได้ของเบราว์เซอร์"
• "ก่อนอื่นให้แก้ไขความเข้ากันได้ของเบราว์เซอร์และอัปเดตเบราว์เซอร์เดิมหรือเพิ่มการแก้ไขเดิม จากนั้นผู้คนจะมีแนวโน้มที่จะนำรูปภาพประเภทใหม่ๆ เช่น WebP มาใช้มากขึ้น…"
• "กระตุ้นให้นักพัฒนาปลั๊กอิน/ธีมพิจารณาให้การรองรับ WebP และรูปภาพประเภทอื่นๆ รุ่นถัดไป เพื่อให้ผู้ที่ไม่ใช่นักพัฒนาไม่ต้องยุ่งยากกับเรื่องนี้"

รูปภาพ SVG และรูปภาพเวกเตอร์

• "หากเป็นไปได้ ฉันจะใช้ SVG (แบบเคลื่อนไหว) gatsby-image ช่วยแก้ปัญหานี้ได้มาก แต่เมื่อพิจารณาสิ่งที่พวกเขาทำแล้ว เป็นไปไม่ได้เลยที่เว็บไซต์ปกติจะต้องสร้างสิ่งแบบนั้นขึ้นมาเพื่อให้รูปภาพทำงานได้อย่างถูกต้อง เบราว์เซอร์ควรรับผิดชอบเรื่องนี้มากขึ้น"
• "เป็นไปได้ไหมที่จะจัดทำเอกสารเกี่ยวกับวิธีสร้างภาพเคลื่อนไหว SVG ด้วย lottie.js"
• "เราพยายามใช้รูปภาพ JPEG ที่มีความละเอียดสูงแต่มีขนาดเล็กในเว็บไซต์ของเราเกือบตลอดเวลาเพื่อหลีกเลี่ยงเวลาในการโหลด นอกจากนี้ เรายังตรวจสอบให้แน่ใจว่าได้ใช้ SVG เมื่อจำเป็นเพื่อให้การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์มีคุณภาพ"
• "เราพยายามใช้ภาพกราฟิกเวกเตอร์ที่เพิ่มประสิทธิภาพแล้วสำหรับทุกอย่าง ยกเว้นรูปภาพ หากเป็นไปได้"

รูปแบบรูปภาพอื่นๆ

• "เรา [ต้อง] ให้ความรู้แก่ผู้คนมากขึ้นเพื่อหยุดใช้ GIF"

การโหลดแบบ Lazy Loading

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

• "โปรดคำนึงถึงผู้ใช้เมื่อพิจารณาฟีเจอร์ต่างๆ เช่น การโหลดแบบ Lazy Loading เนื่องจากผู้ใช้หลายคนรู้สึกรำคาญ"
• "ช่วยทำให้แอตทริบิวต์การโหลดแบบ Lazy Loading ทำงานร่วมกับรูปภาพพื้นหลังได้"
• "เฟรมเวิร์กควรประมวลผลชิ้นงานได้ดีขึ้นตั้งแต่เริ่มต้น"
• "เราเปลี่ยนจากการโหลดแบบ Lazy Loading มานานแล้ว ผู้ใช้รายงานว่ารูปภาพและเว็บไซต์หลายล้านรายการ "ไม่โหลด" นั่นคือความเข้าใจที่ทีมของเราสรุปไว้ ผู้ใช้ที่ไม่เชี่ยวชาญด้านเทคนิคจะอธิบายปัญหาได้ยาก"
• "ฉันอยากเข้าใจการใช้ Intersection Observer API สำหรับการโหลดแบบ Lazy Loading ให้ดีขึ้น แทนที่จะใช้เทคนิคแบบเดิม"
• "วิธีนี้ใช้ได้ผลดีสำหรับฉัน: pwafire.org/developer/codelabs/progressive-loading"

ภาพพื้นหลัง

• "ฉันมักจะโหลดรูปภาพเป็นพื้นหลังใน CSS"
• "แท็ก <img> มีปัญหาและควบคุมรายละเอียดที่ละเอียดได้ยาก โดยเฉพาะอย่างยิ่งกับเนื้อหาที่ผู้ใช้ส่งมา เราใช้ <div> และการจัดรูปแบบภาพพื้นหลังบ่อยกว่ามาก เนื่องจากช่วยให้เราใช้ขนาดพื้นหลัง ตำแหน่งพื้นหลัง และป้องกันไม่ให้บันทึกรูปภาพด้วยการคลิกขวาได้"

ความโปร่งใส

• "ตอนนี้ปี 2019 แล้ว JPG จะยังคงไม่มีความโปร่งใสแบบอัลฟ่าได้อย่างไร"
• "ฉันจะใช้ PNG สำหรับภาพถ่ายก็ต่อเมื่อต้องการพื้นหลังโปร่งใสเท่านั้น"

Low quality image placeholders (LQIP)

• "เราใช้ LQIP ซึ่งเป็นเทคนิคที่ยอดเยี่ยมในการดึงดูดผู้เข้าชมโดยไม่ต้องโหลดรูปภาพคุณภาพสูงตั้งแต่เนิ่นๆ"

ประสิทธิภาพ

• "เมื่อเร็วๆ นี้เราพบปัญหาด้านประสิทธิภาพเกี่ยวกับรูปภาพ เมื่อผู้ใช้เลื่อนลงในเว็บไซต์ เราจะแสดงการ์ด 60 รายการถัดไปซึ่งมีภาพปก เนื่องจากมีการจำกัดการเชื่อมต่อ 6 รายการในโดเมนเดียวกัน ระบบจึงบล็อกภาพขนาดย่อและคำขอ AJAX ถัดไปเพื่อรับการ์ด 60 รายการถัดไปหากผู้ใช้เลื่อนลงต่อไป"
• "เราอยากใช้ HTTP/2 แต่ลูกค้าส่วนใหญ่ใช้ IE11 เราจึงกำลังสำรวจการชาร์ดโดเมน/การโหลดคำขอข้อมูล AJAX JSON จากโดเมนอื่น"

การกำหนดขนาด

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

• "ขออภัยสำหรับ intrinsicsize การใช้ประโยชน์จากความสูง/ความกว้างดูเหมือนจะดีกว่าสำหรับฉัน"
• "กำลังมองหาวิธีสร้างขนาดให้น้อยลง ตอนนี้มีประมาณ 12 ขนาด"
• "การปรับขนาดรูปภาพแบบไดนามิกเป็นเรื่องยากมากและเป็นไปไม่ได้เลยหากไม่มี JS"
• "เครื่องมืออย่าง responsivebreakpoints.com เหมาะสำหรับ web.dev :)"

รูปภาพคุณภาพสูงและมีความละเอียดสูง

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

ความสามารถของเบราว์เซอร์

• "การครอบตัด src ที่ปรับเปลี่ยนตามอุปกรณ์โดยอัตโนมัติจากเบราว์เซอร์เป็นฟีเจอร์ [ในตัว] จะมีประโยชน์มาก เนื่องจากใช้เวลานานในการครอบตัดรูปภาพทั้งหมดเป็น 4 ขนาดและเขียนมาร์กอัปทั้งหมด หากเราสามารถอัปโหลดรูปภาพขนาดใหญ่ 1 รูปและเขียนแท็กรูปภาพง่ายๆ ที่เบราว์เซอร์จะสร้างแอตทริบิวต์ src หลายรายการโดยอัตโนมัติได้ นั่นจะเป็นฟีเจอร์ที่ยอดเยี่ยมมาก"
• "โดยส่วนตัวแล้ว ฉันพบว่าการหลีกเลี่ยงการจัดเรียงหน้าใหม่เป็นเรื่องยากเมื่อตั้งค่าความกว้างของรูปภาพด้วย CSS สำหรับรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ (max-width: 100%; height auto หรือ height: width: 100%; height auto) โดยเฉพาะเมื่อใช้ร่วมกับทิศทางศิลปะจากแท็กรูปภาพ/รูปภาพที่ปรับเปลี่ยนได้ วิธีที่ดีที่สุดในการหลีกเลี่ยงคือการใช้ "แฮ็กระยะห่างจากขอบเชิงลบ" สำหรับอัตราส่วนรูปภาพคงที่ แล้ววางรูปภาพไว้ในกล่องอัตราส่วนนี้ การรองรับเบราว์เซอร์ที่ดีขึ้น/การจัดการรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์จะช่วยได้มาก"
• "โปรดปิดใช้ "เล่นอัตโนมัติ" ของ GIF โดยดึงข้อมูลเฉพาะเฟรมแรก"

CDN และบริการรูปภาพ

หมายเหตุ: ทำไมจึงสำคัญ บริการรูปภาพช่วยให้เพิ่มประสิทธิภาพรูปภาพได้ง่ายขึ้น โดยปกติแล้ว คุณเพียงแค่อัปโหลดรูปภาพแต่ละรูปในเวอร์ชันความละเอียดสูง 1 เวอร์ชัน แล้วใช้ API ของบริการบนเว็บเพื่อเพิ่มประสิทธิภาพหรือเปลี่ยนรูปแบบรูปภาพตามต้องการ เครือข่ายนำส่งข้อมูล (CDN) จะเพิ่มประสิทธิภาพการกระจายและการนำส่งรูปภาพและเนื้อหาอื่นๆ ของเว็บไซต์ และบางครั้งก็ให้บริการเพิ่มประสิทธิภาพ เช่น การนำส่งรูปภาพ WebP ไปยังเบราว์เซอร์ที่รองรับโดยอัตโนมัติแทน PNG หรือ JPEG โดยไม่ต้องเปลี่ยนนามสกุลไฟล์

• "Google ควรให้บริการ CDN ฟรีเหมือน Cloudflare"
• "อาจมีเครื่องมือเพิ่มเติมเพื่อตั้งค่าการปรับขนาดแบบไดนามิกและ CDN กับผู้ให้บริการรายต่างๆ"
• "รูปภาพขนาดใหญ่เกินไปที่บีบอัดมากเกินไปเพียงรูปเดียวเป็นโซลูชันที่เหมาะสมมากโดยไม่มีต้นทุนการผลิตเพิ่มเติม คุณต้องใช้รูปภาพที่มีความกว้างประมาณ 1,000 พิกเซลสำหรับอุปกรณ์เคลื่อนที่ (ความกว้างในการแสดงผล 500 พิกเซล) และนั่นก็เป็นขนาดที่คุณต้องใช้สำหรับจอแสดงผลขนาดใหญ่/จอแสดงผลเดสก์ท็อปที่ไม่ใช่จอภาพ Retina ด้วย ฉันคิดว่า CDN ที่ปรับขนาดรูปภาพเป็นโซลูชันที่ไม่ดีเลย แม้ว่าฉันจะเคยใช้ในอดีตก็ตาม CMS ควรจัดการการปรับขนาด และหากการปรับขนาดซับซ้อนเกินกว่าที่จะตั้งค่าได้ โซลูชันเดียวก็เป็นทางออกที่ดี (ในตอนนี้)"
• "CloudFlare ปรับขนาดรูปภาพของเราโดยอัตโนมัติเพื่อให้ตรงกับจอแสดงผลของผู้ใช้มากที่สุด ซึ่งจะช่วยประหยัดเวลาในการโหลดเนื่องจากรูปภาพจะโหลดตามการแสดงผลของผู้ใช้ เช่น หากผู้ใช้ใช้โทรศัพท์ ระบบจะไม่โหลดพื้นหลังขนาดเดสก์ท็อป"
• "Cloudflare ดำเนินการนี้ในเบื้องหลังโดยที่เราไม่ต้องทำอะไรเลย นอกจากการเลือกช่องในแผงการตั้งค่า"
• "ขอย้ำอีกครั้งว่าเหตุผลเดียวที่ฉันใช้ srcset ฯลฯ ได้สำเร็จก็เพราะความง่ายของ Cloudinary แต่ Cloudinary มีราคาแพงขึ้นอย่างรวดเร็วมาก ซึ่งทำให้รู้สึกเหมือนเป็นช่องโหว่สำคัญในประสบการณ์การพัฒนา"
• "เราต้องการวิธีครอบตัดรูปภาพโดยอัตโนมัติอย่างชาญฉลาดและง่ายดาย เพื่อให้รูปภาพทำงานร่วมกับสัดส่วนภาพที่แตกต่างกันในบริบทต่างๆ ได้"
• "ฉันยังใช้รูปภาพจากผู้ให้บริการรายอื่นๆ เช่น Unsplash ซึ่งควบคุมความละเอียด คุณภาพ และการบีบอัดได้น้อยมาก"

CMS, แพลตฟอร์ม และเฟรมเวิร์ก

• "ฉันยังคงพยายามหาวิธีที่ดีที่สุดในการใช้รูปภาพเมื่อสร้างเว็บไซต์โดยใช้ CMS ผู้เขียนมักจะกำหนดค่ารูปภาพที่มีขนาดแตกต่างกัน และคาดหวังว่ารูปภาพจะไม่หดหรือปรับขนาด ฉันไม่แน่ใจว่าการตั้งค่าความกว้างสูงสุดหรือความสูงสูงสุดในรูปภาพจะโอเคไหม"
• "ใช้ gatsby-image ในโปรเจ็กต์ 2-3 รายการล่าสุดและไม่เคยหันกลับไปใช้แบบเดิมอีกเลย"
• "รูปภาพมักเป็นส่วนที่ยากเนื่องจากผู้ใช้ปลายทางเป็นผู้ใส่รูปภาพลงใน CMS โดยอาจใช้รูปภาพขนาดและรูปแบบใดก็ได้ บางครั้งรูปภาพต้นฉบับก็ไม่มีรูปแบบและขนาดที่เหมาะสม"
• "รูปภาพเป็นสิ่งที่ดูแลรักษาได้ยากเนื่องจากระบบของเราเป็นแบบให้บริการเอง การเพิ่มการควบคุมจึงเป็นเรื่องยาก เว้นแต่ว่าสิ่งต่างๆ จะเกิดขึ้นโดยอัตโนมัติโดยไม่ส่งผลต่อความละเอียด นอกจากนี้ รูปภาพของเรายังดูไม่ถูกต้องในอุปกรณ์เคลื่อนที่เมื่อเทียบกับเดสก์ท็อป"
• "ฉันช่วยผู้คนเพิ่มประสิทธิภาพเว็บไซต์ (WordPress) ปัญหาที่ใหญ่ที่สุดที่ฉันพบเกี่ยวกับรูปภาพคือ ต้องพึ่งพา CDN หรือปลั๊กอินเพื่อสร้าง WebP และนักพัฒนาธีมต้องเขียนโค้ด srcset/picture อย่างถูกต้อง ปลั๊กอินการโหลดแบบ Lazy Loading ส่วนใหญ่จะโหลดช้า ซึ่งทำให้ UX ไม่ดี รูปภาพพื้นหลังเป็นสิ่งที่โหลดแบบ Lazy Loading ได้ยาก"

ต้นทุน/ประโยชน์

• "แนวทางปฏิบัติใหม่มีประสิทธิภาพ แต่เพิ่มเวลาในการพัฒนาเว็บไซต์"
• "บริษัทใน Fortune 500 หลายแห่งยังคงปรับตัวช้าในการปฏิบัติตามมาตรฐานใหม่ๆ เช่น srcset และ WebP เมื่อเห็นเช่นนี้ หลายบริษัทจึงต่อต้านการเปลี่ยนแปลงเนื่องจากมองว่าเป็นต้นทุนการพัฒนาที่ไม่จำเป็นสำหรับเว็บไซต์ปัจจุบัน ผู้ใช้ปลายทาง (UX) ไม่ได้พูดถึงหรือรายงานประสิทธิภาพที่เพิ่มขึ้นอย่างกว้างขวาง แต่กลับทำให้การบันทึกรูปภาพจากเว็บทำได้ยากขึ้น"
• "การสร้างและจัดการหลายขนาดและหลายเวอร์ชันมีค่าใช้จ่ายสูง"
• "เพราะไฟล์เหล่านี้ใช้พื้นที่ในเซิร์ฟเวอร์ของเรามาก"

SEO

• "การสร้างสมดุลระหว่างคุณภาพของรูปภาพและขนาดไฟล์ที่ยอมรับได้เป็นเรื่องยาก ในแง่หนึ่ง ฉันต้องการให้โหลดเร็วเพื่อประโยชน์ด้าน SEO แต่ในอีกแง่หนึ่ง รูปภาพคุณภาพต่ำจะทำให้ UI/UX ดูแย่ลง"

บทบาทของรูปภาพบนเว็บ

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

เครื่องมือ คำแนะนำ มาตรฐาน และแนวทางปฏิบัติแนะนำ: ความไม่พอใจและคำขอ

• [ผู้เข้าร่วมคนหนึ่งเขียนบล็อกโพสต์เพื่อตอบแบบสำรวจนี้]
• "ข้อกำหนดดูเหมือนจะเปลี่ยนแปลงอยู่ตลอดเวลา ในฐานะนักพัฒนาเว็บ ฉันรู้สึกหงุดหงิดมากเพราะการบันทึกรูปภาพตั้งแต่แรกนั้นใช้เวลานาน เราเพิ่มประสิทธิภาพอย่างเต็มที่ ตรวจสอบเว็บไซต์ และหลังจากนั้นหลายเดือน Google ก็ตัดสินใจว่ารูปภาพสามารถบีบอัดได้มากกว่านี้หรือต้องอยู่ในรูปแบบอื่น ซึ่งทำให้เราไม่สามารถมอบโซลูชันที่ดีที่สุดและยั่งยืนให้แก่ลูกค้าได้ และยังทำให้ลูกค้าและเราต้องเสียค่าใช้จ่ายสูงอีกด้วย ลูกค้าธุรกิจขนาดเล็กบางรายไม่มีงบประมาณให้เราแก้ไขรูปภาพและบันทึกซ้ำเพื่อให้เป็นไปตามข้อกำหนด เราไม่มีงบประมาณในการดำเนินการนี้ภายในแพ็กเกจการจัดการ นอกจากนี้ การเขียนโค้ดเพื่อเรียกใช้รูปภาพขนาดต่างๆ สำหรับอุปกรณ์แต่ละประเภทก็ใช้เวลานานเช่นกัน คงจะดีไม่น้อยหากมีระบบบันทึกรูปภาพที่สอดคล้องกันเป็นระยะเวลานานขึ้น"
• "ใช่ ฉันคิดว่าคุณเข้าใจผิดเกี่ยวกับ 'Keep Request Counts Low And File Sizes Small' (รักษาจำนวนคำขอให้ต่ำและขนาดไฟล์ให้เล็ก) ใน Lighthouse หากเว็บไซต์แสดงผลผ่าน HTTP1.x ก็ใช่ แต่หากเว็บไซต์แสดงผลผ่าน HTTP2 จำนวนคำขอจะมีความสำคัญน้อยลงหรืออาจไม่ใช่ปัญหาเลยหากมาจากชื่อโฮสต์เดียวกัน ฉันมีเว็บไซต์ขนาดเล็ก แต่ฉันโหลดไฟล์ WebP ขนาดเล็ก 30 ไฟล์จากคำขอทั้งหมดประมาณ 35 รายการผ่าน HTTP2 ในชื่อโฮสต์เดียวกัน Lighthouse แจ้งว่านี่เป็นปัญหา "Keep Request Counts Low And File Sizes Small" (รักษาจำนวนคำขอให้ต่ำและขนาดไฟล์ให้เล็ก) ทั้งที่ทำงานได้เร็วมาก และเนื่องจาก HTTP2 ในชื่อโฮสต์เดียวกัน จำนวนคำขอจึงไม่ใช่ปัญหา และใช่ ไฟล์มีขนาดเล็กอยู่แล้ว (ส่วนใหญ่มีขนาดระหว่าง 1 KB ถึง 2 KB หรือน้อยกว่า) ฉันสามารถโหลดสไปรท์ได้ แต่ก็ต้องมีการประมวลผล CSS เพิ่มเติม ดังนั้น โปรดอัปเดตรายงาน "Keep Request Counts Low And File Sizes Small" ใน Lighthouse เพื่อพิจารณา HTTP2 ผ่านชื่อโฮสต์เดียวกัน"
• "ผู้คนมักลืมบีบอัดรูปภาพ"
• "ลักษณะการทำงานข้ามเบราว์เซอร์ยังคงคาดเดาไม่ได้ ดังนั้นโซลูชันที่ง่ายที่สุดจึงมักจะปลอดภัยที่สุด"