วิธีวิเคราะห์ผลลัพธ์จาก Google PageSpeed ​​Insights

เนื่องจาก Google จะเพิ่มอันดับให้กับเว็บไซต์ที่รวดเร็ว คุณจึงอาจต้องการทำความเข้าใจเพิ่มเติมเกี่ยวกับข้อมูลเชิงลึกของ Google PageSpeed ​​หรือไม่

…และไม่แปลกใจเลยที่มันทำให้สับสน!

บทความนี้จะช่วย

เหตุใดความเร็วหน้าเว็บไซต์จึงมีความสำคัญ

Google ต้องการมอบประสบการณ์การใช้งานที่ดีที่สุดแก่ผู้ใช้

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

Google เพิ่งประกาศว่า Web Vitals หลักจะถูกนำมาใช้เป็นส่วนหนึ่งของอัลกอริทึมการจัดอันดับในปี 2021 โดย Web Vitals หลักเหล่านี้เป็นตัวบ่งชี้ความเร็วและความเร็วที่ผู้คนสามารถโต้ตอบกับเพจของคุณได้

โดยทั่วไปสำหรับตารางด้านล่างนี้ คุณไม่สามารถ 'สีแดง'

Google PageSpeed ​​Insights คืออะไร

เป็นเครื่องมือฟรีของ Google ที่ให้คุณป้อน URL ของหน้าเว็บและทำการทดสอบอย่างรวดเร็วเพื่อตรวจสอบเมตริกต่างๆ ที่เกี่ยวข้องกับประสิทธิภาพ

เครื่องมือนี้จะให้คะแนนหน้าเว็บของคุณตั้งแต่ 0 ถึง 100 คะแนน คะแนนไม่ได้เกี่ยวกับความเร็วจริงๆ คุณสามารถปรับปรุงคะแนนได้ หากคุณเคยใช้คำแนะนำทั่วไปจาก Google เกี่ยวกับการปรับปรุงความเร็ว

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

นี่คือสิ่งที่ได้รับทางเทคนิคและผลลัพธ์ที่เข้าใจยากเล็กน้อย

คุณตีความผลลัพธ์อย่างไร?

สิ่งแรกที่คุณจะเห็นหลังจากทำการทดสอบคือคะแนนประสิทธิภาพ (เดสก์ท็อปและอุปกรณ์เคลื่อนที่) สำหรับหน้าที่วิเคราะห์

ซึ่งจะเป็นตัวเลขระหว่าง 0 ถึง 100

• 0 ถึง 49 – นี่มันแย่ คุณไม่ต้องการให้คะแนนของคุณเป็น 49 หรือต่ำกว่า
• 50 ถึง 89 – ไม่เป็นไร แต่ยังมีช่องว่างให้ปรับปรุง
• 90 ถึง 100 – หากคุณอยู่ในระดับนี้ แสดงว่าคุณอยู่ในหนังสือที่ดี

เมื่อคุณเลื่อนลงมา คุณจะเห็นว่าอะไรเป็นสาเหตุให้เกิดคะแนนสูงหรือต่ำ:

หมายเหตุ: ดูตัวบ่งชี้สีก่อนแต่ละส่วน:

• สีเขียว แปลว่า เร็ว
• สีส้ม แปลว่า ปานกลาง
• สีแดง แปลว่า ช้า

นี่คือความหมายของแต่ละส่วนเหล่านี้:

เนื้อหาแรกFul Paint

นี่คือเวลาที่ใช้ตั้งแต่การนำทางไปยังหน้าจากเบราว์เซอร์จนถึงเวลาที่เนื้อหาเริ่มแสดงผล

โดยพื้นฐานแล้ว จะเป็นตัวบ่งชี้ว่าหน้ากำลังเริ่มโหลด

ตัวอย่างเช่น อาจเป็นเพียงการเปลี่ยนสีซึ่งเป็นสีพื้นหลังของหน้า รูปภาพที่แสดง หรือข้อความบางส่วน

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

แนวทางปฏิบัติ:

ถึงเวลาโต้ตอบ

พารามิเตอร์นี้แสดงให้เห็นว่าหน้าเว็บสามารถโต้ตอบได้เร็วเพียงใด

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

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

แนวทางปฏิบัติ:

เวลาบล็อกทั้งหมด

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

นี่คือเวลาบล็อกทั้งหมด!

เป็นเรื่องดีที่จะทราบว่าผู้คนไม่สามารถทำสิ่งต่างๆ เช่น การคลิกเมาส์ การแตะหน้าจอ หรือการกดคีย์เวิร์ดก่อนที่เว็บไซต์จะโต้ตอบได้

งานยาวคืองานที่บล็อกคุณเป็นเวลานานกว่า 50 มิลลิวินาที

สิ่งใดที่เกิน 50ms ถือเป็นเวลาบล็อก

หากไม่มีงานยาว คุณจะเห็นเวลาบล็อก 0 ซึ่งเป็นสิ่งที่คุณเห็นในสถิติด้านบน

เลื่อนเค้าโครงสะสม

การเปลี่ยนเลย์เอาต์คือเมื่อมีการแสดงองค์ประกอบภาพบนหน้าจอ แต่จากนั้นจะย้าย

ตัวอย่างเช่น คุณกำลังอ่านข่าวและมีการเปลี่ยนแปลงเลย์เอาต์เพื่อให้ตำแหน่งที่บทความข่าวเปลี่ยนไป

นี่เป็นพฤติกรรมที่ไม่คาดคิดจากมุมมองของผู้ใช้

ยิ่งคะแนนสูงก็ยิ่งแย่

ดัชนีความเร็ว

นี่เป็นสิ่งที่เข้าใจยาก แต่มีค่า

ลองนึกภาพ 2 เว็บไซต์ที่โหลดทั้งสองใน 1.5 วินาที

หากคุณเรียกดู 2 เว็บไซต์ที่แสดงในภาพด้านบน อันไหนจะโหลดเร็วกว่ากัน?

ทั้งสองโหลดเต็มใน 1.5 วินาที แต่เนื่องจากไซต์แรกเริ่มแสดงองค์ประกอบบางอย่างก่อนหน้านี้ ดูเหมือนว่าผู้ใช้จะเร็วกว่า

หากคุณวัดเวลาในการโหลดก็เท่ากัน

ดัชนีความเร็วเป็นคะแนนที่คำนวณโดยพิจารณาจากความรวดเร็วในการโหลดเว็บไซต์อย่างเต็มที่

การบันทึกวิดีโอของการโหลดจะใช้เพื่อแสดงภาพเมื่อมีการโหลดบิต

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

กระบวนการนี้ซ้ำสองสามครั้ง

เวลาจะขึ้นอยู่กับสิ่งที่ผู้ใช้มองเห็นบนหน้าจอเท่านั้น (วิวพอร์ต) มันไม่สำคัญว่าสิ่งที่อยู่ครึ่งหน้าล่าง

ดังนั้น… เป็นการดีที่จะลองใช้วิวพอร์ตที่แตกต่างกัน

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

ยิ่งต่ำยิ่งดี

ระบายสีเนื้อหาที่ใหญ่ที่สุด

นี่คือเวลาที่องค์ประกอบที่ใหญ่ที่สุดของหน้าแสดงผลอย่างสมบูรณ์

เมื่อหน้าโหลด องค์ประกอบแรกจะกลายเป็นองค์ประกอบที่ใหญ่ที่สุด แต่จะถูกแทนที่เมื่อมีการเพิ่มองค์ประกอบที่ใหญ่กว่า

องค์ประกอบสุดท้ายของหน้าอาจเป็นองค์ประกอบที่ใหญ่ที่สุดของหน้า (เช่น รูปภาพขนาดใหญ่) หรืออาจไม่ใช่

หมายเหตุ: เราไม่ได้พูดถึงว่าต้องใช้พื้นที่บนหน้าจอเท่าใด

นี่คือตัวอย่าง 2 ตัวอย่าง

เวลาตั้งแต่เว็บไซต์เริ่มแสดงจนถึงเวลาที่มีการแสดงภาพสุดท้ายบนหน้าจะถือเป็นการระบายสีเนื้อหาที่ใหญ่ที่สุด นี่เป็นเพราะภาพกินพื้นที่มากที่สุดบนหน้า!

แต่…

ในกรณีด้านล่าง รูปภาพ 'Instagram' เป็นภาพที่ใหญ่ที่สุด ดังนั้นสีที่มีเนื้อหามากที่สุดคือเมื่อโหลดหน้าจอสุดท้ายที่สอง

หน้าจอสุดท้ายลดราคา สิ่งที่เพิ่มลงในหน้าจอนั้นก็คือ 'ปุ่ม Google Play' ซึ่งเป็นภาพที่เล็กกว่า 'Instagram'

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

แนวทางปฏิบัติ:

โอกาส

ส่วนโอกาสจะแสดงคำแนะนำที่อาจช่วยปรับปรุงเวลาในการโหลดหน้า

คำแนะนำแต่ละข้อยังแสดงการลดเวลาในการโหลดหน้าเว็บโดยประมาณหากคุณนำคำแนะนำไปใช้

การวินิจฉัย

การวินิจฉัยเน้นแนวปฏิบัติที่ดีที่สุดในการพัฒนาเว็บที่คุณควรพิจารณานำไปใช้

อย่างไรก็ตาม แม้ว่าคุณจะทำการปรับปรุงเหล่านี้ จะไม่ส่งผลโดยตรงต่อคะแนนประสิทธิภาพของเพจของคุณ

สรุป

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

เครื่องมืออย่าง Google PageSpeed ​​​​Insights มีประโยชน์อย่างเหลือเชื่อเพราะจะแสดงตำแหน่งที่จะเริ่มต้นและประเด็นที่ควรมุ่งเน้นเพื่อเพิ่มประสิทธิภาพเว็บไซต์ของคุณ

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