ประสิทธิภาพการตรวจสอบ

เพราะเหตุใดและอะไร

คุณคงเคยได้ยินสิ่งดีๆ มากมายที่เทคนิค Progressive Web App ทำให้เว็บไซต์ของคุณได้ คุณอาจจะอยากเข้าร่วมและเพิ่มฟีเจอร์ของ PWA โดยตรง แบบนั้นเป็นไปได้ แต่คุณจะ ดีขึ้นมากหากใช้ฟีเจอร์ "PWA แบบพร้อมใช้งาน" ก่อน

ไม่มีเวทมนตร์ของ PWA จะแก้ปัญหาอย่างการบล็อก JavaScript หรือภาพที่ไม่ชัดได้ PWA ต้องมีรากฐานที่มั่นคง

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

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

หากคุณมีเวลาเพียง 5 นาที...

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

หากคุณมีเวลาเพียง 30 นาที...

Lighthouse อาจยังเป็นจุดเริ่มต้นที่ดีที่สุด แต่คุณสามารถบันทึกผลลัพธ์จากเครื่องมืออื่นๆ ได้หากมีเวลาเพิ่มขึ้นอีกเล็กน้อย

  • แผงความปลอดภัยของ Chrome DevTools: การใช้งาน HTTPS
  • แผงเครือข่ายเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome: เวลาโหลด ขนาดทรัพยากรและจำนวนคำขอสำหรับ HTML, CSS, JavaScript, รูปภาพ, แบบอักษร และไฟล์อื่นๆ
  • ตัวจัดการงานของ Chrome: หากเว็บไซต์ของคุณใช้ CPU ปริมาณมากหรือหน่วยความจำมากกว่าแอปอื่นๆ อย่างต่อเนื่อง คุณอาจต้องแก้ปัญหาหน่วยความจำรั่วไหล การทำงาน หรือปัญหาการโหลดทรัพยากร อย่าลืมทดสอบเว็บไซต์ในอุปกรณ์ที่เป็นตัวแทนของผู้ใช้
  • WebPagetest: ประสิทธิภาพของตำแหน่งและประเภทการเชื่อมต่อต่างๆ, การแคช, เวลาต่อไบต์แรก, การใช้ CDN
  • PageSpeed Insights: ประสิทธิภาพในการโหลด ต้นทุนข้อมูล และการใช้ทรัพยากร รวมถึงข้อมูลรายงานประสบการณ์ของผู้ใช้ Chrome ที่ไฮไลต์สถิติประสิทธิภาพจริง
  • ตารางสรุปสถิติความเร็วและเครื่องคำนวณผลกระทบ: เปรียบเทียบความเร็วเว็บไซต์กับแอปเทียบเท่า และประมาณโอกาสสร้างรายได้ที่เป็นไปได้ในการเพิ่มความเร็วเว็บไซต์

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

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

หากคุณพบว่าเครื่องมือมากมายชวนสับสน...

ลองดูคำแนะนำของเรา: วิธีคำนึงถึงเครื่องมือเพิ่มความเร็ว

หากไม่มี ให้ใช้ Lighthouse เพื่อตรวจสอบสิ่งต่อไปนี้

กลุ่มเป้าหมาย ผู้มีส่วนเกี่ยวข้อง บริบท

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

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

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

ทดสอบ บันทึก แก้ไข ทำซ้ำ

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

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

ความคิดเห็น