แก้ไขเนื้อหาที่เป็น Lazy Load

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

โหลดเนื้อหาเมื่อเนื้อหาแสดงในวิวพอร์ต

เพื่อให้ Google เห็นเนื้อหาทั้งหมดในหน้า โปรดตรวจสอบว่าการใช้การโหลดแบบ Lazy Loading นั้นโหลดเนื้อหาที่เกี่ยวข้องทั้งหมดเมื่อมีการแสดงเนื้อหานั้นๆ ในวิวพอร์ต ต่อไปนี้เป็นตัวอย่างวิธีการตรวจสอบ

อย่าลืมทดสอบการใช้งาน

รองรับการโหลดที่ใส่เลขหน้าสำหรับการเลื่อนได้ไม่รู้จบ

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

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

ทดสอบ

หลังจากที่ตั้งค่าการนำไปใช้แล้ว ให้ตรวจสอบว่าทุกอย่างทำงานได้ถูกต้อง วิธีตรวจสอบอย่างหนึ่งก็คือการใช้สคริปต์ Puppeteer เพื่อทดสอบการใช้งานในเครื่อง Puppeteer เป็นไลบรารี Node.js ที่ใช้ควบคุม Chrome แบบ Headless คุณต้องใช้ Node.js จึงจะเรียกใช้สคริปต์ได้ ใช้คำสั่งต่อไปนี้เพื่อดูสคริปต์และเรียกใช้ 

git clone https://github.com/GoogleChromeLabs/puppeteer-examples
cd puppeteer-examples
npm i
node lazyimages_without_scroll_events.js -h

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

คุณอาจใช้เครื่องมือตรวจสอบ URL ใน Search Console เพื่อดูว่ารูปภาพทั้งหมดโหลดหรือไม่ก็ได้ ตรวจสอบภาพหน้าจอและ HTML ที่แสดงผลเพื่อให้แน่ใจว่ารูปภาพโหลดขึ้น