PageSpeed Insights เครื่องมือที่ Developer ควรรู้จัก ถ้าอยาก ‘เร่งสปีด’ เว็บไซต์

ไม่ว่าคุณจะเป็นเจ้าของธุรกิจที่มีเว็บไซต์เป็นส่วนสำคัญในการบริการลูกค้า หรือเป็น Developer ที่กำลังปวดหัวกับปัญหาเว็บไซต์ที่โหลดและทำงานได้ค่อนข้างช้า ซึ่งส่งผลเสียโดยตรงถึง UX (User Experience) ของเว็บไซต์ มีผลวิจัยที่รายงานสถิติออกมาว่าทุกวินาทีที่เพิ่มขึ้นในการโหลดเว็บไซต์จะทำให้มีโอกาสเสียผู้ใช้งานเพิ่มขึ้น 30% โดยเฉพาะสำหรับเว็บไซต์ที่มีกิจกรรมซื้อขายอย่าง E-​commerce ประสบการณ์ที่ช้าและไม่ลื่นไหลในการจับจ่ายบนเว็บไซต์ก็ส่งผลไปถึง conversion rate ที่ลดลงได้ นอกจากนั้นความเร็วในการโหลดเว็บไซต์ยังเป็นหนึ่งในปัจจัยสำคัญต่อการจัดอันดับ SEO อีกด้วย

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

PageSpeed Insights คืออะไร?

PageSpeed Insights เป็นเครื่องมือฟรีที่ช่วยรายงานประสิทธิภาพของเว็บไซต์ทั้งแบบสำหรับ desktop และมือถือ นอกจากนี้ยังช่วยในการแนะนำว่าควรปรับปรุงอะไรบ้างในการพัฒนาเว็บไซต์ วัดจากคะแนนต่างๆ เช่น performance score ซึ่งรันโดย Lighthouse และ analyze โดย lab data อีกทั้งยังมีการคิดจากคะแนน error ต่างๆรวมกัน ได้แก่ First Contentful Paint (FCP), First Input Delay (FID), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS) เป็นต้น

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

นอกจากนี้ PageSpeed Insights ยังสามารถบอก error อีกมากมาย ที่ช่วยบอกว่าเว็บไซต์ของเรานั้นควรปรับปรุงอะไรตรงไหนบ้าง

PageSpeed Insights ใช้งานยังไง?

1. เข้าไปที่ PageSpeed Insights จากนั้นพิมพ์เว็บไซต์หรือวางชื่อ url เว็บไซต์ที่เราต้องการวัด
2. คลิก ANALYZE
3. จากนั้นระบบก็จะแสดงให้เห็น score ของเว็บไซต์ รวมถึงรายงานปัญหาต่างๆ ที่ทำให้เว็บไซต์โหลดได้ช้า ซึ่งเราจะต้องนำปัญหาเหล่านี้ไป optimize

ต้องได้ Score เท่าไหร่ถึงนับว่าดี?

แล้วเกณฑ์ในการตัดเกรดคะแนนของ PageSpeed Insights เป็นอย่างไร คะแนนที่เว็บไซต์ของคุณประเมินออกมาได้จัดว่าอยู่ในเกณฑ์ไหน ตรงส่วนนี้ก็จะแบ่งเป็นสามกลุ่มใหญ่ๆ หากแสดงค่าเป็นสีเขียวหรือ 90 คะแนนขึ้นไปก็จะนับได้ว่าเว็บไซต์นั้นอยู่ในเกณฑ์ที่ดี ค่าสีส้มหรือคะแนนตั้งแต่ 50 – 90 ถือว่าอยู่ในระดับที่ยังต้องปรับปรุง สุดท้ายคือค่าสีแดงหรือคะแนนที่ต่ำกว่า 50 จะจัดอยู่ในเกณฑ์ที่ค่อนข้างแย่ ควรได้รับการแก้ไขอย่างเร่งด่วน

สำหรับใครที่ลองวัด score ของเว็บไซต์แล้วพบว่ายังมีคะแนนความเร็วไม่มากพอ และยังไม่รู้วิธีการแก้ error ต่างๆ ตามที่ PageSpeed Insights ชี้ให้เห็น ทาง Skooldio มีคอร์สออนไลน์ที่เปิดขึ้นมาใหม่เพื่อช่วยตอบโจทย์ปัญหานี้โดยเฉพาะในคอร์ส  PageSpeed Score Boost Up คอร์สเรียนที่ออกแบบมาสำหรับผู้ที่อยากแก้ปัญหาอย่างเร่งรัด ออกแบบวิธีเรียนง่ายๆ เพียงแค่นำปัญหาที่ PageSpeed Insights ระบุมา search หาในคอร์ส แล้วดูวิดีโอตามชื่อปัญหาสั้นๆ เพียงแค่ไม่กี่นาที ก็จะสามารถเข้าใจและลงมือแก้ไขปัญหานั้นได้ โดยใช้เครื่องมือที่ถูกต้อง ถูกสถานการณ์ นอกจากคุณจะสามารถลงมือ optimize เว็บไซต์ให้เร็วขึ้นได้แล้วยังมีความรู้ในการเขียนเว็บไซต์แบบ best practice เพื่อป้องกันบางปัญหาที่อาจแก้ไขได้ยากหากไม่มีการป้องกันในระดับพื้นฐานที่ดีพอ คอร์สเรียนสอนโดย คุณตั้ง วรัทธน์ วงศ์มณีกิจ Co-Founder & Chief Product Officer at Wisesight และ Google Developers Expert ด้าน Web Technologies

 

References

About PageSpeed Insights  |  Google Developers
https://wp-rocket.me