WordPress Lazy Loading: วิธีเพิ่มลงในเว็บไซต์ของคุณ
เผยแพร่แล้ว: 2023-03-09การมีความเร็วในการโหลดหน้าเว็บที่ดีเป็นสิ่งสำคัญในการมอบประสบการณ์ที่ดีแก่ผู้ใช้ และยังช่วยให้คุณปรับปรุงอันดับของเครื่องมือค้นหาได้อีกด้วย เมื่อพูดถึงการสร้างเว็บไซต์ออนไลน์หรือเว็บไซต์ธุรกิจ ไม่มี CMS อื่นใดที่ดีกว่า WordPress
การโหลดแบบขี้เกียจเป็นกลยุทธ์ที่ดีที่สุดในการมีทรัพยากรสื่อจำนวนมากในขณะที่รักษาเวลาในการโหลดที่ดีสำหรับเว็บไซต์ของคุณ เป็นกลยุทธ์สำคัญที่ระบุทรัพยากรที่ไม่สำคัญและโหลดเมื่อจำเป็นเท่านั้น การใช้กลยุทธ์นี้ช่วยลดเวลาในการโหลดหน้าเว็บ ลดอัตราตีกลับ และปรับปรุงประสบการณ์ของลูกค้า
WordPress เป็น CMS ชั้นนำที่ให้คุณรวมวิดีโอ รูปภาพ และสื่ออื่นๆ เข้ากับเว็บไซต์ของคุณ อย่างไรก็ตาม เวอร์ชันใหม่ยังมาพร้อมกับฟังก์ชันการโหลดแบบขี้เกียจของ WordPress
เมื่อคุณเปิดใช้งานฟังก์ชันการโหลดแบบขี้เกียจของ WordPress รูปภาพหรือวิดีโอที่น่าทึ่งทั้งหมดบนเว็บไซต์ของคุณจะผ่านการโหลดแบบขี้เกียจ
ตอนนี้ผู้เข้าชมจะสามารถโหลดไซต์ของคุณได้อย่างรวดเร็วและเข้าถึงเนื้อหาได้ ขอแนะนำกลยุทธ์นี้หากรายได้ธุรกิจของคุณขึ้นอยู่กับเว็บไซต์ WordPress ของคุณ
การโหลดแบบขี้เกียจคืออะไรและทำงานอย่างไร
การโหลดแบบขี้เกียจเป็นเทคนิคการเพิ่มประสิทธิภาพที่ทำให้ผู้ใช้มองเห็นการโหลดเนื้อหา และทำให้การดาวน์โหลดและการแสดงผลเนื้อหาครึ่งหน้าล่างเกิดความล่าช้า
หากเว็บไซต์ของคุณมีรูปภาพและวิดีโอความละเอียดสูงจำนวนมาก เว็บไซต์ของคุณก็ไม่จำเป็นต้องโหลดช้า สามารถให้ความสำคัญกับรูปภาพและวิดีโอที่สำคัญเหล่านี้ ซึ่งช่วยลดเวลาในการโหลดได้มาก
นี่คือวิธีการทำงาน:
- เบราว์เซอร์สร้าง DOM ของหน้าเว็บโดยไม่ต้องดาวน์โหลดรูปภาพและโหลดวิดีโอล่วงหน้า
- รูปภาพที่จะดาวน์โหลดและวิดีโอที่จะโหลดล่วงหน้านั้นขึ้นอยู่กับเนื้อหาที่มองเห็นได้ในตอนแรกซึ่งกำหนดโดย JavaScript
- การโหลดแบบ Lazy Loading จะโหลดรูปภาพหรือวิดีโอเมื่อผู้เข้าชมดูบนหน้าจอเท่านั้น
รูปภาพและวิดีโอจะไม่ถูกโหลดล่วงหน้าจนกว่าจะจำเป็นจริงๆ หากคุณไม่ได้ไปที่ส่วนต่างๆ ของเว็บไซต์ รูปภาพเหล่านั้นบางส่วนจะไม่ถูกโหลด
การโหลดแบบ Lazy Loading คือการโหลดรูปภาพและวิดีโอ WordPress ตามลำดับความสำคัญ เป็นวิธีที่มีประสิทธิภาพอย่างยิ่งในการได้รับสิ่งที่ดีที่สุดจากทั้งสองโลก คุณสามารถมีทั้งเว็บไซต์ที่น่าทึ่งพร้อมกราฟิกและความเร็วที่ยอดเยี่ยม
วิธีเพิ่ม WordPress Lazy Loading ในเว็บไซต์ของคุณ
มีสองวิธีในการเพิ่มการโหลดแบบสันหลังยาวให้กับไซต์ของคุณ คุณสามารถทำได้ด้วยปลั๊กอิน WordPress และด้วยตนเอง เพื่อให้แน่ใจว่างานนี้สำเร็จ สิ่งสำคัญคือต้องรู้ทั้งสองวิธี
1. ใช้การโหลดแบบขี้เกียจโดยใช้ปลั๊กอิน
คุณสามารถขจัดปัญหาการโหลด WordPress ขี้เกียจทั้งหมดได้โดยการติดตั้งปลั๊กอิน มีปลั๊กอินมากมายบน WordPress แต่การใช้ปลั๊กอินเพิ่มประสิทธิภาพความเร็วจะก่อให้เกิดประโยชน์อื่นๆ
คุณสามารถใช้ปลั๊กอินเช่น w3speedster ซึ่งจะปรับความเร็วโดยรวมของไซต์ให้เหมาะสมในขณะที่ใช้งานการโหลดแบบสันหลังยาว คุณสามารถควบคุมได้อย่างเต็มที่ว่าภาพใดที่คุณสามารถโหลดแบบขี้เกียจได้ และทั้งหมดนี้สามารถทำได้โดยไม่ต้องเขียนโค้ดใดๆ
หากทีมของคุณไม่มีความเชี่ยวชาญด้านเทคนิคมากนัก การใช้ปลั๊กอินจะเป็นตัวเลือกที่ดีที่สุด เมื่อคุณใช้ปลั๊กอินเสร็จแล้ว ให้ตรวจสอบความเร็วของคุณผ่าน PageSpeed Insights หากคุณเห็นการปรับปรุงอย่างมาก แสดงว่าคุณทำงานถูกต้องแล้ว!
คุณมั่นใจได้ว่าผู้เยี่ยมชมจะได้รับการต้อนรับด้วยประสบการณ์การใช้งานที่ยอดเยี่ยม
ทำตามขั้นตอนเหล่านี้เพื่อเพิ่มปลั๊กอิน w3speedster ในเว็บไซต์ของคุณให้สำเร็จ
ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งานปลั๊กอิน
ไปที่แดชบอร์ดของ WordPress คลิกที่ส่วนปลั๊กอิน จากนั้นคลิกเพิ่มใหม่ ค้นหาปลั๊กอิน w3speedster และคลิกอัปโหลด เลือกไฟล์ zip แล้วคลิกติดตั้ง
ก่อนที่กระบวนการติดตั้งจะเริ่มขึ้น WordPress จะขอให้คุณยืนยันว่าคุณต้องการเพิ่มปลั๊กอินในไซต์ของคุณหรือไม่ เลือก ใช่ และกระบวนการติดตั้งจะเริ่มขึ้น
เมื่อเปิดใช้งานปลั๊กอินแล้ว คุณสามารถเริ่มรับสิทธิประโยชน์ได้ อย่างไรก็ตาม ก่อนหน้านั้นคุณควรไปที่ส่วนการตั้งค่า
ขั้นตอนที่ 2: ใช้แผงการตั้งค่าเพื่อกำหนดค่าปลั๊กอิน
ไปที่ปลั๊กอิน w3speedster เพื่อให้คุณสามารถกำหนดการตั้งค่าสำหรับการโหลดแบบสันหลังยาว ที่นี่คุณสามารถเลือกไฟล์มีเดียที่คุณต้องการให้ไซต์ของคุณโหลดแบบ Lazy Loading
ปลั๊กอินนี้ช่วยให้คุณโหลดรูปภาพ วิดีโอ เสียง และ iframe แบบขี้เกียจได้ คลิกที่ช่องทำเครื่องหมายของไฟล์มีเดียที่คุณต้องการโหลดแบบสันหลังยาว เมื่อคุณเลือกแล้ว ให้บันทึกการเปลี่ยนแปลง จากนั้นออก
2. เพิ่มการโหลดแบบขี้เกียจด้วยตนเอง
หากคุณไม่ต้องการเพิ่มปลั๊กอินอื่นในไซต์ WordPress ของคุณ คุณยินดีที่จะทราบว่าคุณสามารถทำได้ด้วยตนเอง เบราว์เซอร์หลายตัวเช่น Chrome, Firefox และ Opera รองรับการโหลดแบบเนทีฟ
คุณเพียงแค่ต้องเพิ่ม คุณลักษณะของรูปภาพและวิดีโอที่เลือก เมื่อคุณเพิ่มแอตทริบิวต์แล้ว คุณจะเปิดใช้งานการโหลดแบบสันหลังยาวบนไซต์ของคุณโดยอัตโนมัติ
ขณะนี้การโหลดแบบ Lazy Loading ถูกนำมาใช้ในไซต์ WordPress ของคุณตามค่าเริ่มต้น หากคุณต้องการเปิดใช้งานการโหลดแบบขี้เกียจสำหรับภาพบางภาพเท่านั้น คุณสามารถทำได้ด้วยตนเอง
<img src=”image-name.png” loading=”ขี้เกียจ” alt=”alt attribute” width=”300″ height=”300″>
แม้ว่านี่จะเป็นวิธีที่ยอดเยี่ยมในการเพิ่มการโหลดแบบขี้เกียจให้กับเว็บไซต์ WordPress ของคุณ คุณควรทราบว่าไม่ใช่ทุกเบราว์เซอร์ที่รองรับวิธีนี้ อย่างไรก็ตาม คนที่ได้รับความนิยมมากที่สุดบางคนทำ ดังนั้นจึงยังคงเป็นการเดิมพันที่ปลอดภัย
ข้อดีข้อเสียของการโหลดแบบขี้เกียจ
หากคุณไม่แน่ใจเกี่ยวกับการโหลดแบบ Lazy Loading บนเว็บไซต์ WordPress ของคุณ แล้วค่อยพิจารณาข้อดีข้อเสียเพื่อตัดสินใจ
ข้อดี
- ช่วยลดการใช้แบนด์วิธซึ่งช่วยลดต้นทุนการโฮสต์
- ช่วยเพิ่มความเร็วของไซต์ซึ่งทำให้ประสบการณ์ของผู้เข้าชมดีขึ้น
- ปรับปรุงการใช้งานมือถือ
- ปรับปรุงการจัดอันดับของเว็บไซต์
- เพิ่มโอกาสในการรักษาผู้ใช้
ข้อเสีย
- มันทำให้ความเร็วในการเลื่อนช้าลง
การโหลดแบบ Lazy Loading ส่งผลต่อ SEO อย่างไร?
เครื่องมือค้นหาจะรวบรวมข้อมูลเว็บไซต์ของคุณและองค์ประกอบอื่นๆ ในเว็บไซต์ของคุณ เช่น รูปภาพ เพื่อให้ผลลัพธ์แก่ผู้ใช้ แม้ว่าการโหลดแบบขี้เกียจสามารถเพิ่มความเร็วไซต์และปรับปรุงประสิทธิภาพได้
ในบางกรณี มันสามารถป้องกันไม่ให้เครื่องมือค้นหาจัดทำดัชนีรูปภาพ รูปภาพของเว็บไซต์ของคุณยังสามารถช่วยให้คุณติดอันดับในเครื่องมือค้นหาได้อีกด้วย บางครั้งผู้ใช้อาจพบเว็บไซต์ของคุณผ่านรูปภาพทั้งหมด ดังนั้น จึงจำเป็นต่อการได้รับผลลัพธ์แบบออร์แกนิก
ต่อไปนี้คือสิ่งที่ควรตรวจสอบ
- คุณต้องแน่ใจว่า Google และเครื่องมือค้นหาอื่นๆ ยังสามารถรวบรวมข้อมูลภาพที่โหลดแบบ Lazy Loading ของคุณได้ สามารถตรวจสอบได้โดยใช้เครื่องมือ "ดึงข้อมูลเหมือนเป็น Google" ใต้ส่วนการรวบรวมข้อมูลใน Google Search Console หากคุณเห็นภาพในซอร์สโค้ด แสดงว่าคุณพร้อมแล้ว
- คุณควรใช้แท็ก alt สำหรับรูปภาพของเว็บไซต์ของคุณ วิธีนี้จะช่วยให้เครื่องมือค้นหาทราบบริบทของรูปภาพและความเกี่ยวข้องกับเนื้อหาส่วนที่เหลือในเว็บไซต์ของคุณอย่างไร
บทสรุป
แม้ว่าการโหลดแบบขี้เกียจจะเป็นวิธีที่ดีในการปรับปรุงประสบการณ์ของผู้ใช้ สิ่งสำคัญคือต้องทำเช่นเดียวกันอย่างมีกลยุทธ์ ตัวอย่างเช่น คุณไม่ควรขี้เกียจโหลดรูปภาพที่ปรากฏบนส่วนหัวของเว็บไซต์ เนื่องจากรูปภาพเหล่านี้ต้องโหลดอย่างรวดเร็วจึงเป็นสิ่งสำคัญ
นอกเหนือจากนั้น คุณสามารถโหลดสื่อที่เหลือของเว็บไซต์ได้แบบขี้เกียจ การโหลดแบบขี้เกียจมีประโยชน์มากกว่าหนึ่งข้อ ปรับปรุงความเร็วไซต์ ลดการใช้แบนด์วิธ มอบประสบการณ์ผู้ใช้ที่ยอดเยี่ยม และปรับปรุง SEO