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

แซม ดัตตัน

ทำไมและอย่างไร

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

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

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

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

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

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

หากมีเวลาแค่ 30 นาที...

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

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

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

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

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

ดูคู่มือของเราที่ชื่อวิธีคิดเกี่ยวกับเครื่องมือปรับความเร็ว

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

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

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

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

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

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

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

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

ความคิดเห็น