เลื่อนภาพ Offscreen: วิธีแก้ไขโอกาสของ Google Lighthouse

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

สำหรับโพสต์นี้ เราจะดูที่ 🔎 วิธีเลื่อนภาพนอกหน้าจอใน WordPress โดยใช้ทั้งโค้ดและปลั๊กอิน อันดับแรก เราต้องทำความเข้าใจเงื่อนไขบางประการเกี่ยวกับ Google Lighthouse ก่อน จากนั้นจึงค่อยพูดถึงตำแหน่งที่เมตริก ภาพนอกหน้าจอ Defer ควรอยู่ในรายการลำดับความสำคัญของคุณ

ความแตกต่างระหว่างคำแนะนำในการตรวจสอบและโอกาส

ก่อนที่เราจะพูดถึงวิธีการเลื่อนภาพนอกจอใน WordPress สิ่งสำคัญคือต้องเข้าใจว่าคำสั่งนี้แทรกเข้าไปใน Google Lighthouse ได้อย่างไร เป็น 'โอกาส' ในการปฏิบัติงานมากกว่าคำแนะนำในการตรวจสอบ นี่คือความแตกต่าง:

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

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

เลื่อนภาพนอกจอ – คำจำกัดความ

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

เมตริก รูปภาพที่เลื่อนออกไปนอกจอ หมายถึงองค์ประกอบภาพที่ตรงตามเกณฑ์ใดๆ ในสี่เกณฑ์ต่อไปนี้:

• รูปภาพต้องเริ่มต้นใต้พื้นที่หน้าที่มองเห็นได้ และสิ้นสุดความสูงสามเท่าของพื้นที่นี้
• รูปภาพที่มีขนาดเล็กมาก (ที่มีขนาดน้อยกว่า 0.02 MB) จะไม่รวมอยู่ในเมตริก รูปภาพที่เลื่อนออกไปนอกจอ
• หน้าที่ใช้เวลาโหลดมากกว่า 50 มิลลิวินาทีจะทำให้เกิดโอกาส
• หากเพจของคุณกำหนดแอตทริบิวต์การโหลด คุณจะไม่เห็น Defer offscreen images เลย การแจ้งเตือนสปอยเลอร์: ทำความคุ้นเคยกับ loading="lazy" ตอนนี้!

ยิ่งไปกว่านั้น คุณอาจพบว่าไซต์ที่มีรูปภาพนอกจอจำนวนมากจะได้คะแนน Largest Contentful Paint (LCP) ที่แย่ สิ่งนี้ทำให้เกิดการเปลี่ยนแปลงที่น่าสับสนกับ Google Lighthouse 10 ซึ่งเราจะกล่าวถึงต่อไป

การปรับปรุง Time To Interactive (TTI) เป็นเมตริกที่คิดค่าเสื่อมราคา

ใน Google Lighthouse เวอร์ชันเก่า การเลื่อนภาพนอกหน้าจอ จะส่งผลต่อ TTI อย่างไรก็ตาม ขณะนี้ Google ถือว่านี่เป็นการวัดค่าเสื่อมราคา การถ่วงน้ำหนัก 10% นี้ให้คะแนนการตรวจสอบประสิทธิภาพโดยรวมที่โอนไปยัง Cumulative Layout Shift (CLS) และตอนนี้มีการถ่วงน้ำหนัก 25% [1][2]

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

เหตุใด Google Lighthouse จะขอให้คุณเลื่อนการแสดงภาพนอกจอ

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

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

ทำไมคุณไม่ควรโหลดภาพทั้งหมดพร้อมกัน

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

เหตุใดสิ่งนี้จึงสำคัญ เพราะหากคุณให้ข้อมูลมากเกินไป อาจทำให้ผู้ฟังมีภาระมากเกินไป (รวมถึงปัญหาอื่นๆ ด้วย)

ด้วยเหตุนี้ คุณจึงไม่ควรโหลดรูปภาพทั้งหมดของไซต์ของคุณพร้อมกัน! นี่คือเหตุผลที่ชัดเจนบางประการ:

• ผู้ใช้จะไม่เห็นรูปภาพนอกจอ และผู้ใช้จะใช้ทรัพยากรที่จำเป็นสำหรับองค์ประกอบบนหน้าจอ
• การโหลดรูปภาพนอกหน้าจออาจทำให้ประสบการณ์ผู้ใช้ (UX) ไม่ดี เนื่องจากหน้าจะโหลดโดยไม่มีข้อความใดๆ เกิดขึ้นภายในวิวพอร์ต
• สำหรับผู้ใช้ สิ่งนี้อาจทำให้พวกเขาเสียค่าใช้จ่ายทางการเงิน ตัวอย่างเช่น ลองนึกถึงคนที่กำลังเรียกดูไซต์ที่ไม่เลื่อนภาพนอกหน้าจอขณะใช้ข้อมูลมือถือ แทนที่จะใช้ Wi-Fi

เนื่องจาก Google Lighthouse ให้ความสำคัญกับ UX และประสิทธิภาพที่รับรู้ส่งผลต่อมันอย่างไร ทั้งหมดข้างต้นจึงมีความสำคัญต่อการทำความเข้าใจ ข่าวดีก็คือมีวิธีง่ายๆ ในการเลื่อนภาพนอกจอออกไป

วิธีเลื่อนภาพนอกจอในไซต์ของคุณ

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

อย่างไรก็ตาม Firefox รองรับเฉพาะการโหลดแบบ Lazy Loading สำหรับรูปภาพ ซึ่งจะมีความสำคัญหากคุณเลือกใช้สิ่งนี้กับ Inline Frames ถึงกระนั้น คุณมีหลายวิธีในการดำเนินการนี้ วิธีการหลักใช้แอตทริบิวต์ loading HTML ภายในองค์ประกอบ <img> หรือ <iframe> คุณจะได้รับตัวเลือกให้ใช้ค่าที่แตกต่างกันสามค่า:

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

สิ่งนี้ง่ายต่อการนำไปใช้อย่างที่คุณคาดหวัง:

 <img src="image.png" loading="lazy" alt="" width="200" height="200">

แน่นอนว่าไม่มีอะไรให้ดูที่ส่วนหน้าที่นี่ เพราะภาพจะถูกปิดหน้าจอและมองไม่เห็นอยู่ดี

หากคุณเลือกใช้ Accelerated Mobile Pages (AMP) คุณสามารถใช้การโหลดแบบ Lazy Loading แบบอัตโนมัติได้โดยใช้องค์ประกอบ amp-img เมื่อพูดถึงแพลตฟอร์มอื่น โมดูลหรือปลั๊กอินเป็นวิธีที่ดีที่สุดในการนำการโหลดแบบขี้เกียจมาใช้

หากคุณต้องการเลื่อนภาพนอกหน้าจอใน WordPress คุณจะต้องใช้ปลั๊กอินเฉพาะเพื่อดำเนินการดังกล่าว ตามค่าเริ่มต้น WordPress จะใช้การโหลดแบบ Lazy Loading สำหรับรูปภาพทั้งหมด แต่แปรงแบบกว้างนี้อาจไม่เหมาะกับความต้องการที่แท้จริงของคุณ

การใช้ปลั๊กอิน WordPress เพื่อเพิ่มการโหลดแบบ Lazy Loading ให้กับไซต์ของคุณ

เมื่อใดก็ตามที่คุณต้องการเพิ่มฟังก์ชันพิเศษให้กับ WordPress ปลั๊กอินคือทางออกที่ดีที่สุดของคุณเสมอ เมื่อพูดถึงการโหลดแบบ Lazy Loading ก็อาจเป็นเช่นนั้นได้เช่นกัน

WordPress มีปลั๊กอินหลายตัวที่สามารถช่วยคุณเพิ่มการโหลดแบบขี้เกียจได้ แต่ทั้งหมดไม่เท่ากัน ตัวอย่างเช่น บางรายการมีคะแนนและรีวิวไม่ดี บางรายการไม่ได้รับการอัปเดตมากนัก และบางรายการไม่สามารถให้ฟังก์ชันการทำงานในระดับที่เหมาะสมได้ อย่างไรก็ตาม Optimole สามารถส่งมอบสินค้าได้ทั้งในด้านการบีบอัดภาพและการโหลดแบบ Lazy Loading

นี่จะไม่ใช่ภาพรวมของสิ่งที่ Optimole สามารถทำได้โดยทั่วไป – Themeisle ซึ่งเป็นเว็บไซต์ในเครือของเราสามารถแสดงให้คุณเห็นได้ แต่เราจะเน้นตัวเลือกที่รวดเร็วและปราศจากความเจ็บปวดแทนการโหลดภาพแบบขี้เกียจ หากต้องการค้นหาตัวเลือกที่เหมาะสม ให้ไปที่หน้าจอ Media > Optimole > Settings จากนั้นมองหาสวิตช์ ปรับขนาดภาพและโหลดแบบ Lazy Load คุณจะต้องแน่ใจว่าสิ่งนี้เปิดอยู่:

เมื่อคุณทำสิ่งนี้ ตัวเลือกทั้งหมดจะพร้อมใช้งานในส่วน ขั้นสูง > Lazyload :

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

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

คุณสมบัติที่ยอดเยี่ยมอื่น ๆ คือความสามารถในการระบุตัวเลือก CSS เพื่อช่วยให้คุณโหลดภาพพื้นหลังแบบขี้เกียจ:

วิธีนี้จะช่วยให้คุณสามารถปรับแต่งประสบการณ์การโหลดแบบ Lazy Loading ทั้งหมดตามความต้องการและคะแนน Lighthouse ของคุณ แต่ยังคงความยืดหยุ่นไว้บ้าง ยิ่งไปกว่านั้น ทั้งหมดนี้สามารถทำได้ด้วย Optimole เวอร์ชั่นฟรี!

สรุป🧐

หากภาพไม่ปรากฏบนหน้าจอ คุณไม่จำเป็นต้องโหลดภาพเหล่านั้น หากไม่มีวิธีแก้ปัญหาเช่นการโหลดแบบสันหลังยาว คุณจะยืดเวลาที่ใช้ในการโหลดไซต์ของคุณได้ นอกจากนี้ยังจะส่งผลต่อเมตริกที่สำคัญที่สุดบางส่วนที่เกี่ยวข้องกับประสิทธิภาพอีกด้วย โอกาส แสดงภาพนอกจอของ Defer ของ Google Lighthouse ช่วยให้คุณผลักดันการใช้งานการโหลดแบบ Lazy Loading และมีวิธีมากมายที่ไม่ต้องใช้โค้ดในการทำเช่นนั้น

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

Optimole จะกลายเป็นวิธีการเลื่อนภาพ offscreen ใน WordPress ของคุณหรือไม่? แบ่งปันความคิดของคุณกับเราในส่วนความคิดเห็นด้านล่าง!