วิธีการเลื่อนภาพออกจากหน้าจอใน WordPress

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

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

หากคุณได้ตรวจสอบเว็บไซต์ของคุณผ่าน เครื่องมือทดสอบความเร็ว เช่น Google PageSpeed ​​Insight หรือ Web.dev คำเตือนอย่างหนึ่งที่คุณอาจได้รับคือ “เลื่อนภาพที่อยู่นอกหน้าจอ”

ในบทความนี้ ฉันจะอธิบายว่าสิ่งนั้นหมายถึงอะไร บอกวิธีแก้ไข และแนะนำปลั๊กอินที่คุณสามารถใช้เพื่อแก้ไขปัญหาได้

อย่างไรก็ตาม คุณควรทราบว่าเหตุใดการเลื่อนภาพนอกหน้าจอจึงช่วยเพิ่มความเร็วของมือถือได้ ปัจจัยที่สำคัญที่สุดที่ส่งผลต่อความเร็วของคุณคือโฮสติ้งและธีมของคุณ ที่ BloggingTools เราใช้ Cloudways เนื่องจากเป็นโฮสติ้ง WordPress ที่เร็วที่สุด หากคุณไม่สามารถซื้อ Cloudways ได้ Bluehost หรือ Hostinger ก็เป็นตัวเลือกที่ดี สำหรับธีม เราใช้ธีม WordPress ที่เร็วที่สุดซึ่งรู้จักกันในชื่อ GeneratePress.

การเลื่อนภาพออกนอกจอหมายถึงอะไร

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

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

แต่เมื่อคุณเลื่อนภาพที่อยู่นอกหน้าจอ ภาพจะโหลดเมื่อผู้ใช้เลื่อนไปที่ภาพนั้นเท่านั้น

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

วิธีการเลื่อนภาพออกจากหน้าจอใน WordPress

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

เมื่อคุณสามารถโหลดรูปภาพแบบ Lazy Load และทรัพยากรอื่นๆ ที่ทำให้หน้าของคุณโหลดไม่เร็วได้ ฟีเจอร์ “เลื่อนรูปภาพออกจากหน้าจอ” จาก Google PageSpeed ​​Insight และเครื่องมือทดสอบอื่นๆ จะหายไป

ปฏิบัติตามขั้นตอนเหล่านี้เพื่อเลื่อนภาพออกจากหน้าจอใน WordPress:

1. ติดตั้งปลั๊กอิน Lazy Loading

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

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

นอกจากนี้ หากคุณใช้ Jetpack และปรับให้เหมาะสมอัตโนมัติ ก็จะมีตัวเลือกการโหลดแบบ Lazy Loading ด้วย

2. เปิดใช้งานตัวเลือกการโหลดแบบขี้เกียจ

เมื่อคุณติดตั้งปลั๊กอินแล้ว โปรดตรวจสอบว่าคุณได้เปิดใช้งานตัวเลือกการโหลดแบบขี้เกียจแล้ว หากคุณมีปลั๊กอินแคชที่มีฟังก์ชันการโหลดแบบขี้เกียจ โปรดตรวจสอบว่าคุณได้เปิดใช้งานตัวเลือกนั้นแล้ว

3. ล้างแคชของคุณ

เมื่อเปิดใช้งานการโหลดแบบขี้เกียจแล้ว ให้ล้างแคชของคุณ เพียงเท่านี้ก็เรียบร้อย!

คุณสามารถทดสอบเว็บไซต์ของคุณอีกครั้ง คำเตือนควรจะหายไปแล้ว!

ปลั๊กอิน WordPress สำหรับเลื่อนภาพออกจากหน้าจอ

ปลั๊กอิน Defer offsreen images นั้นก็เหมือนกับปลั๊กอิน lazy loading ด้านล่างนี้คือปลั๊กอินบางส่วน:

1 Jetpack

Jetpack เป็นหนึ่งในปลั๊กอิน WordPress ที่ได้รับความนิยมมากที่สุด โดยมีการติดตั้งใช้งานจริงมากกว่า 5 ล้านครั้ง หากคุณได้ติดตั้ง Jetpack ไว้แล้ว คุณไม่จำเป็นต้องติดตั้งปลั๊กอินเพิ่มเติมสำหรับการโหลดแบบ Lazy Loading

เพียงเปิดใช้งานการโหลดแบบขี้เกียจใน Jetpack หากต้องการเปิดใช้งาน ให้ไปที่การตั้งค่า Jetpack จากนั้นเลื่อนลงมาด้านล่างแท็บประสิทธิภาพและเปิดใช้งานการโหลดแบบขี้เกียจ

2. เพิ่มประสิทธิภาพอัตโนมัติ

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

ไปที่การตั้งค่า Autoptimize จากนั้นคลิกที่แท็บรูปภาพและเปิดใช้งานการโหลดแบบ Lazy

3 WP จรวด

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

ไปที่การตั้งค่า WP Rocket จากนั้นคลิกที่สื่อ จากนั้นคุณสามารถเปิดใช้งานการโหลดแบบขี้เกียจได้

4. แคช LiteSpeed

ถ้าคุณกำลังใช้ ปลั๊กอิน LiteSpeed ​​Cacheมีฟีเจอร์การโหลดแบบ Lazing หากต้องการเปิดใช้งาน เพียงไปที่ส่วนสื่อ จากนั้นคุณสามารถเปิดใช้งานการโหลดแบบ Lazing ได้

5. a3 โหลดขี้เกียจ

หากคุณต้องการปลั๊กอินสำหรับการโหลดแบบ Lazy เพียงอย่างเดียว a3 Lazy Load เป็นปลั๊กอินที่ดีสำหรับสิ่งนั้น เพียงไปที่ปลั๊กอิน > เพิ่มใหม่ ค้นหา a3 Lazy Load ติดตั้งและเปิดใช้งาน จากนั้นไปที่การตั้งค่าปลั๊กอินและเปิดใช้งานการโหลดแบบ Lazy

โดยทั่วไป ธีมบางตัว ปลั๊กอินแคชบางตัว และปลั๊กอินเพิ่มประสิทธิภาพรูปภาพบางตัวจะมาพร้อมกับฟีเจอร์การโหลดแบบล่าช้า

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