logo blog.kpping.me

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

💬 ความคิดเห็น: 0   🏷️ geek   #disqus #pagespeed #insights #score #hugo #คะแนน #lazyloading

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

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

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

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

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

  1. สร้าง Partial Template ขึ้นมาใหม่เพื่อใช้แทนของเดิม
touch layouts/partials/disqus-thread.html
view raw fix-disqus-page-speed-score-on-hugo-01.txt hosted with ❤ by GitHub
  1. แปะโค้ดนี้ลงไป
<div id="disqus_thread" style="min-height: 100px;">
<div id="disqus_thread_loader">กำลังโหลดความคิดเห็น ..</div>
</div>
<script type="text/javascript">
var disqus_config=function(){this.page.identifier="{{ .Page.File.UniqueID }}"},disqus_observer=new IntersectionObserver(function(e){var s,t;e[0].isIntersecting&&(s=document,(t=s.createElement("script")).async=!0,t.src="//{{ .Site.DisqusShortname }}.disqus.com/embed.js",t.setAttribute("data-timestamp",+new Date),(s.head||s.body).appendChild(t),disqus_observer.disconnect())},{threshold:[0]});disqus_observer.observe(document.querySelector("#disqus_thread"));
</script>
view raw disqus-thread.html hosted with ❤ by GitHub
  1. นำ Partial Template นี้ไปใช้แทนของเดิม
{{ partial "disqus-thread.html" . }}
view raw fix-disqus-page-speed-score-on-hugo-03.txt hosted with ❤ by GitHub

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

 

Happy Tuning ครับ