การอ่านผลการวิเคราะห์ Google PageSpeed Insights

หลังจากที่เช็คความเร็วเว็บไซต์ที่ Google PageSpeed Insights แล้ว เรามาดูว่าผลวิเคราะห์ที่ออกมานั้นแต่ละค่าคืออะไรกันบ้าง เพื่อที่เราจะได้นำไปปรับปรุง แก้ไขให้เว็บไซต์ของเราดีขึ้น ก่อนเริ่มดูผลวิเคราะห์ อยากให้ทราบก่อนว่าหน่วยเวลาจากผลวิเคราห์ที่ได้จากการทดสอบนี้จะมีค่าหน่วยเป็น ms ย่อจาก millisecond และ s ย่อจาก second โดยเทียบได้ดังนี้ 1 s (วินาที) = 1000 ms (มิลลิวินาที)

1. Performance Score

เป็นคะแนนภาพรวมการทำงานของเว็บไซต์ คะแนนที่ได้นี้มาจาก Lighthouse โดยจะรวบรวมและวิเคราะห์ข้อมูลบนหน้า page ที่ทดสอบ จากนั้นจะประมวลผลออกมาในรูปแบบคะแนน คะแนนนี้มีค่าตั้งแต่ 0-100 โดยผลคะโดยมีดังนี้
คะแนน 0-49 ถือว่าแย่
คะแนน 50-89 ต้องปรับปรุง
คะแนน 90-100 ดีเยี่ยม

2. Field Data

Field Data จะเป็นการวัดผลการแสดงหน้าเว็บไซต์ จะแสดงผลการวัด ได้แก่ First Contentful Paint (FCP), First Input Delay (FID), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS)

• First Contentful Paint (FCP)

เป็นค่าที่ใช้วัดตั้งแต่เริ่มโหลดหน้าเว็บจนถึงการแสดงเนื้อหาแรกปรากฎขึ้น เนื้อหานี้จะหมายถึงเค้าโครงเว็บไซต์ ตัวหนังสือและรูปภาพบางส่วน แต่ข้อมูลยังแสดงครบไม่หมด โดยมีผลการวัดดังนี้
เว็บไซต์ใช้เวลาโหลด 0-1,000 ms ดีมาก
เว็บไซต์ใช้เวลาโหลด 1,000 ms-3,000 ms ต้องปรับปรุง
เว็บไซต์ใช้เวลาโหลดเกิน 3,000 ms แย่

• First Input Delay (FID)

เป็นค่าเพื่อใช้วัดเวลาที่ผู้ใช้สามารถทำการตอบสนองกับหน้าเว็บไซต์ได้ เช่นการ click การเลื่อนหน้าเว็บไซต์ขึ้น-ลง โดยมีผลการวัดดังนี้
เว็บไซต์ใช้เวลาโหลด 0-100 ms ดีมาก
เว็บไซต์ใช้เวลาโหลด 100 ms-300 ms ต้องปรับปรุง
เว็บไซต์ใช้เวลาโหลดเกิน 300 ms แย่

• Largest Contentful Paint (LCP)

เป็นค่าที่ใช้วัดระยะเวลาตั้งแต่ web browser เริ่มเรียกข้อมูล ไปจนถึง content อะไรก็ตามที่มีขนาดใหญ่ที่สุด (ขนาดความจุ) เช่นรูปหรือไฟล์ที่ใหญ่ที่สุดจนเสร็จ โดยมีเกณฑ์การวัดดังนี้
เว็บไซต์ใช้เวลาโหลด 0-2,500 ms ดีมาก
เว็บไซต์ใช้เวลาโหลด 2,500 ms-4,000 ms ต้องปรับปรุง
เว็บไซต์ใช้เวลาโหลดเกิน 4,000 ms แย่

• Cumulative Layout Shift (CLS)

เป็นค่าเพื่อใช้วัดคะแนนรวมของ Layout ของหน้าเว็บในกรณีที่เกิดการกระพริบ กระตุกเลื่อน หน้าเพจ ที่ทำให้ผู้ใช้ไม่สามารถใช้งานหน้าเว็บไซต์ตามที่ต้องการได้ สำหรับเกณฑ์การให้คะแนน มีดังนี้
เว็บไซต์ใช้เวลาโหลด 0-0.1 ดีมาก
เว็บไซต์ใช้เวลาโหลด0.1-0.25 ต้องปรับปรุง
เว็บไซต์ใช้เวลาโหลดเกิน 2.5 ms แย่

โดยแถบสีเขียว สีเหลือง สีแดง นั้นจะหมายถึงจำนวนเปอร์เซนต์เวลาในการโหลด โดยจะแบ่งเป็นดี ต้องปรับปรุง และแย่ ยกตัวอย่างเช่น ค่า FCP มีค่าเปอร์เซนต์เป็น 68%(เขียว), 28% (ส้ม) และ 4% (แดง) ตามลำดับ ซึ่งหมายความว่า 68% ของหน้าเพจใช้เวลาในการโหลดในระดับดี คือใช้เวลาน้อยกว่า 1s 14% ของหน้าเพจใช้เวลาในการโหลดในระดับที่ต้องปรับปรุง คือใช้เวลาตั้งแต่ 1s-3s และ 8% ของหน้าเพจใช้เวลาในการโหลดอยู่ในระดับแย่ คือใช้เวลามากกว่า 3s

โดยค่าเปอร์เซนต์ที่ดี ค่าแถบสีเขียวจะต้องมีค่ามากกว่า 75% ขึ้นไป

3. Lab Data

Lab Data เป็นข้อมูลจำลองความเร็วในการโหลดหน้าเว็บไซต์แบบประมาณการ โดยจะแสดงผลการวิเคราะห์ First Contentful Paint, Largest Contentful Paint, Speed Index, Cumulative Layout Shift, Time to Interactive, และ Total Blocking Time โดยแต่ละตัววัดจะแสดงเวลาและสีกำกับ ซึ่งแต่ละสีมีความหมายดังนี้
สีเขียว หมายถึง ดีมาก
สีส้ม หมายถึง ต้องปรับปรุง
สีแดง หมายถึง แย่

• First Contentful Paint (FCP)

เป็น Metric ที่ใช้วัดเวลาที่ Browser แสดงเนื้อหาตั้งแต่ข้อความแรกปรากฎขึ้น หรือ ตั้งแต่เริ่มเห็นภาพร่างของเว็บไซต์ แต่ยังไม่แสดงข้อมูลเว็บไซต์ทั้งหมดนะ

• Time to Interactive (TTI)

เป็น Metric ที่ใช้วัดเวลาตั้งแต่เริ่มโหลดหน้าเพจไปจนโหลดทั้งภาพ และข้อความต่างๆ จนครบ พร้อมจะที่ตอบสนองการใช้งานต่างๆ ของผู้ใช้ได้

• Speed Index

เป็น Metric ที่ใช้วัดความเร็วของการโหลดหน้าเว็บไซต์ อันนี้ถ้าตัวเลขยิ่งน้อยยิ่งดี เพราะนั่นหมายถึงเว็บไซต์ของคุณโหลดได้เร็ว

• Total Blocking Time (TBT)

เป็น Metric ที่ใช้วัดเวลาการรอ First Contentful Paint (FCP) และ Time to Interactive (TTI) ทำงาน

• Largest Contentful Paint (LCP)

เป็น Metric ที่ใช้วัดเวลาตั้งแต่พิมพ์ URL แล้วกด Enter ไปจนถึงการโหลด Element ที่มีขนาดที่ใหญ่ที่สุดจนเสร็จ ว่าใช้เวลาไปเท่าไหร่

• Cumulative Layout Shift (CLS)

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

4. Opportunities

เป็นรายละเอียดที่จะบอกว่า ที่เว็บไซต์ช้านั้นมาจากสาเหตุอะไรบ้าง และใช้เวลาไปเท่าไหร่ คุณสามารถนำข้อบกพร่องนั้นไปพัฒนาและปรับปรุงเว็บไซต์ เพื่อให้เว็บไซต์โหลดได้เร็วขึ้น

วิธีแก้ปัญหาที่พบบ่อย

1. วิธีแก้ปัญหา Remove unused CSS สำหรับ WordPress

2. วิธีแก้ปัญหา Remove unused JavaScript สำหรับ WordPress

3. การแก้ปัญหา Eliminate render-blocking Resources ใน WordPress

5. Diagnostics

เป็นคำแนะนำเพิ่มเติมว่าควรจะปรับปรุงในส่วนใดบ้าง เพื่อเพิ่มประสิทธิภาพให้กับเว็บไซต์ของคุณ