การทดสอบประสิทธิภาพโดยใช้ GTmetrix

เผยแพร่แล้ว: 2022-03-29

ภาพรวม

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

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

GTmetrix

GTmetrix เป็นเครื่องมือออนไลน์ที่ช่วยให้คุณวิเคราะห์ความเร็วและประสิทธิภาพของเว็บไซต์ของคุณ

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

เมื่อเข้าสู่ระบบแล้วคุณจะพบกับมุมมองด้านล่าง:

ภายในฟิลด์ URL คุณจะต้องกรอกที่อยู่เว็บไซต์ของคุณที่นี่

ใต้ปุ่ม "วิเคราะห์" คุณจะเห็นเมนูแบบเลื่อนลง "ตัวเลือกการวิเคราะห์" คลิกแล้วคุณจะเห็นตัวเลือกที่แสดงด้านล่าง:

รูปแบบการทดสอบ

URL ทดสอบใน: คุณสามารถระบุตำแหน่งเซิร์ฟเวอร์ที่คุณต้องการทำการทดสอบได้ที่นี่ “แวนคูเวอร์ แคนาดา” มักจะเป็นภูมิภาคเริ่มต้นเมื่อเข้าสู่ระบบ

การใช้: คุณสามารถระบุเบราว์เซอร์ที่จะใช้ได้ที่นี่ เบราว์เซอร์เริ่มต้นมักจะเป็น Chrome

ด้วย: คุณสามารถระบุประเภทการเชื่อมต่อที่จะใช้ได้ที่นี่ ค่าดีฟอลต์คือ "Unthrottled Connection" แต่คุณสามารถตั้งค่าตัวเลือกอื่น ๆ ที่มีให้ในเมนูแบบเลื่อนลง

ตัวเลือก

สร้างวิดีโอ: เมื่อเปิดใช้งาน จะเป็นการสร้างวิดีโอที่แสดงวิธีการโหลดหน้าเว็บ และคุณสามารถใช้เพื่อแก้ปัญหาการโหลดหน้าเว็บได้

Adblock Plus: เมื่อเปิดใช้งาน มันจะปิดการใช้งานโฆษณาจากการโหลดระหว่างการทดสอบ

ตัวเลือกขั้นสูง

ตัวเลือกเหล่านี้จำเป็นเฉพาะในกรณีที่คุณต้องการเพิ่มคุณสมบัติ เช่น การตรวจสอบสิทธิ์ HTTP คุกกี้ หรือหากคุณต้องการอนุญาตหรือบล็อก URL บางรายการ

เมื่อคุณตั้งค่าที่ต้องการแล้ว คุณสามารถดำเนินการวิเคราะห์ URL ที่คุณกรอกโดยคลิกที่ปุ่ม "วิเคราะห์" ถัดจากฟิลด์ URL

ผลการดำเนินงาน

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

เพื่อทำให้รายงานข้างต้นกระจ่างขึ้น:

GTmetrix เกรด

นี่คือคะแนนคะแนนเฉลี่ยของประสิทธิภาพและโครงสร้างไซต์ของคุณ

เว็บไวทัล

ส่งคืนคะแนนประสิทธิภาพของเมตริกประสิทธิภาพของ Google Lighthouse

ด้านล่างส่วนด้านบน เรามีแท็บบางส่วนที่ใช้แสดงตัวอย่างคะแนนเหล่านี้เพิ่มเติม

สรุป

ที่นี่ GTmetrix แสดงให้เห็นถึงประเด็นหลักบางประการของการวิเคราะห์ที่ดำเนินการ

ภายในเซ็กเมนต์ Speed ​​Visualization เรามีภาพรวมเกี่ยวกับวิธีการโหลดส่วนต่างๆ ภายในหน้า

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

ในส่วน รายละเอียด หน้า แสดงขนาดหน้าของหน้าที่วิเคราะห์รวมถึงจำนวนคำขอทั้งหมดในหน้า

ขนาดหน้าประกอบด้วยไฟล์ที่ใช้ภายในหน้า ซึ่งรวมถึงไฟล์ต่างๆ เช่น รูปภาพ ไฟล์ JS ไฟล์ CSS และอื่นๆ ที่หน้าเว็บของคุณสามารถใช้ได้

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

ประสิทธิภาพ

การวัดประสิทธิภาพ

เรามาดูกันว่าเมตริกทั้ง 6 ของ Lighthouse มีการทำงานอย่างไร

First Contentful Paint (FCP): วัดระยะเวลาที่เบราว์เซอร์ใช้ในการแสดงเนื้อหาชิ้นแรกภายในหน้าเว็บของคุณ ค่าระหว่าง 0 ถึง 1.8 น่าจะดีพอ

ดัชนีความเร็ว (SI): ส่งกลับระยะเวลาที่ใช้ในการโหลดและแสดงส่วนที่มองเห็นได้ของหน้าเว็บ ค่าระหว่าง 0 ถึง 1.3 น่าจะดี

Largest Contentful Paint (LCP): คืนค่าระยะเวลาที่ใช้ในการแสดงเนื้อหาที่ใหญ่ที่สุดที่มองเห็นได้ภายในเพจของคุณ ช่วงระหว่าง 0 ถึง 1.2 จะดี

Time to Interactive(TTI): ส่งกลับระยะเวลาที่ใช้ก่อนที่หน้าเว็บจะถือว่ามีการโต้ตอบอย่างสมบูรณ์ ค่าระหว่าง 0 ถึง 2.4 จะไม่เป็นไร

Total Blocking Time(TBT): นี่คือช่วงเวลาที่เพจถูกบล็อก มิฉะนั้น ค่านี้สามารถกำหนดเป็นความแตกต่างของเวลาระหว่าง TTI และ FCP (TTI – FCP) ค่าระหว่าง 0 ถึง 150 ms จะดีมาก

การเปลี่ยนเลย์เอาต์สะสม: นี่คือการวัดการเคลื่อนไหวของเนื้อหาของเพจเมื่อเพจโหลดและมองเห็นได้ คะแนนระหว่าง 0 ถึง 0.1 น่าจะดีพอ

เวลาเบราว์เซอร์

ที่นี่ เราจะพบเมตริกอื่นๆ จำนวนหนึ่ง แต่ไม่มีผลต่อคะแนนประสิทธิภาพ

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

ระยะเวลาการเชื่อมต่อ: นี่คือระยะเวลาที่เบราว์เซอร์ใช้ในการเชื่อมต่อกับเซิร์ฟเวอร์และเข้าถึงหน้า

ระยะเวลาแบ็กเอนด์: นี่คือเวลาที่เซิร์ฟเวอร์ใช้เพื่อสร้างการตอบสนองต่อเบราว์เซอร์

Time to First Byte: นี่คือเวลาทั้งหมดที่ใช้ตั้งแต่เริ่มต้นคำขอจนถึงการรับไบต์แรกของการตอบกลับ มิฉะนั้นจะถูกมองว่าเป็นผลรวมของ (ระยะเวลาการเปลี่ยนเส้นทาง + ระยะเวลาการเชื่อมต่อ + ระยะเวลาแบ็กเอนด์)

DOM Interactive Time: แสดงเวลาที่เบราว์เซอร์ใช้ในการสร้างแผนผัง DOM

เวลาในการโหลดเนื้อหา DOM: หมายถึงเวลาที่ใช้สำหรับ DOM เพื่อให้พร้อมอย่างเต็มที่

First Paint: นี่คือระยะเวลาที่เบราว์เซอร์ใช้ในการเรนเดอร์ประเภทใดก็ได้

เวลาโหลด: สิ่งนี้เกิดขึ้นเมื่อประมวลผลเต็มหน้าและดาวน์โหลดทรัพยากร

เวลาที่โหลดเต็มที่: นี่คือการวัดเวลาที่ Onload เริ่มทำงานและเครือข่ายไม่ได้ใช้งานเป็นเวลา 2 วินาที

โครงสร้าง

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

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

น้ำตก

ส่วนนี้แสดงคำขอทั้งหมดที่โหลดบนเพจและลำดับที่โหลด

ภายในส่วนนี้ เราสามารถดึงข้อมูล เช่น ไฟล์ใดมีขนาดใหญ่และเวลาในการโหลดเต็มที่ใช้ ตลอดจนรหัสสถานะที่เซิร์ฟเวอร์ส่งคืน ในคำขอ URL ของโดเมนที่เกี่ยวข้อง

วีดีโอ

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

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

ประวัติศาสตร์

แท็บประวัติจะสร้างส่วนต่อประสานกราฟิกที่ให้การเปรียบเทียบระหว่างการทดสอบอย่างน้อยสองครั้งที่ดำเนินการ

สามกราฟจะแสดงที่นี่ ซึ่งรวมถึง:

ตัวชี้วัดหน้า : ให้การเปรียบเทียบของตัวชี้วัดประสิทธิภาพต่างๆ ระหว่างสองรายงาน เมตริกเหล่านี้บางส่วน ได้แก่ Time To First Byte, First Contentful Paint, Largest Contentful Paint, Onload Time, Time to Interactive และอื่นๆ อีกมากมาย

ขนาดหน้าและจำนวนคำขอ : สร้างการเปรียบเทียบระหว่างขนาดของหน้าและจำนวนคำขอภายในรายงานการทดสอบต่างๆ

คะแนนหน้า : ให้การเปรียบเทียบคะแนนกับรายงานต่างๆ ประกอบด้วยเกรด GTmetrix คะแนนประสิทธิภาพและคะแนนโครงสร้าง

บทสรุป

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