แก้ปัญหาคะแนน PageSpeed Insights ตกเมื่อเปิดใช้ Disqus บน Hugo

เมื่อเปิดระบบแสดงความคิดเห็นของ Disqus บน Hugo และใช้ {{ template “_internal/disqus.html” . }} จะพบว่าคะแนน PageSpeed Insights ตกลงทันที ! เราจะแก้ไขได้อย่างไร มาดูกัน

ทำไมคะแนนถึงตก

เพราะ PageSpeed Insights ใช้ความเร็วในการโหลดเว็บไซต์ตั้งแต่ต้นจนจบเป็นหนึ่งในเกณฑ์ให้คะแนน เมื่อเราแปะ Disqus Template เพิ่มเข้าไปทำให้โพสต์เราใช้เวลาโหลดนานขึ้นกว่าจะจบนั่นเอง

แก้ไขอย่างไร

วิธีแก้ไขอย่างง่ายที่สุดคือ ไม่ต้องโหลด Disqus Template ในตอนแรก แต่ให้โหลดเมื่อเลื่อนจอลงมาถึงจุดที่ต้องการโชว์ Disqus (Lazy Loading)

1. สร้าง Partial Template ขึ้นมาใหม่เพื่อใช้แทนของเดิม

2. แปะโค้ดนี้ลงไป

3. นำ Partial Template นี้ไปใช้แทนของเดิม

เท่านี้คะแนน PageSpeed Insights ก็จะกลับมาสูงเหมือนเดิม 😎

Happy Tuning ครับ