งบประมาณด้านประสิทธิภาพก้อนแรก

Milica Mihajlija

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

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

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

การวิเคราะห์เบื้องต้น

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

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

คุณจะเห็น Lighthouse ใต้แผงการตรวจสอบใน Chrome DevTools ดำเนินการตรวจสอบในแต่ละหน้าในหน้าต่างผู้มาเยือน เพื่อบันทึก 2 ครั้งดังนี้

• First Contentful Paint (FCP)
• เวลาในการโต้ตอบ (TTI)

ลองมาดูเครื่องมือค้นหาเฉพาะทางอย่าง Doggos.com เป็นตัวอย่าง Doggos.com มีเป้าหมายที่จะจัดทำดัชนีทุกสิ่งที่เกี่ยวข้องกับสุนัขบนอินเทอร์เน็ต และหน้าที่สำคัญที่สุดคือหน้าแรกและหน้าผลการค้นหา ต่อไปนี้คือตัวเลข FCP และ TTI ที่วัดสำหรับเว็บไซต์บนเดสก์ท็อปและอุปกรณ์เคลื่อนที่

การวิเคราะห์การแข่งขัน

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

หากไม่แน่ใจว่าจะดูเว็บไซต์ใด ให้ลองใช้เครื่องมือต่อไปนี้

1. คีย์เวิร์ด "ที่เกี่ยวข้อง:" ของ Google Search
2. ฟีเจอร์เว็บไซต์ที่คล้ายกันของ Alexa
3. SimilarWeb

หากต้องการดูภาพสมจริง ให้ลองค้นหาคู่แข่ง 10 รายขึ้นไป

งบประมาณสำหรับเหตุการณ์สำคัญเกี่ยวกับระยะเวลา

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

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

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

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

สำหรับ Doggos.com งบประมาณที่แก้ไขจะมีลักษณะดังนี้

รวมเมตริกต่างๆ

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

• เมตริกที่อิงตามจำนวน
• เมตริกที่อิงตามกฎ

งบประมาณสำหรับเมตริกที่อิงตามจำนวน

ไม่ว่าคุณจะคำนวณน้ำหนักหน้าเว็บรวมจำนวนเท่าใด พยายามส่งทรัพยากรเส้นทางที่สำคัญ (บีบอัด/ย่อ) ไม่เกิน 170 KB ซึ่งรับประกันว่าเว็บไซต์ของคุณจะทำงานเร็วแม้จะใช้อุปกรณ์ที่มีราคาไม่แพงและ 3G ที่ช้า

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

ต่อไปนี้คือตัวอย่างงบประมาณ TTI

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

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

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

งบประมาณสำหรับเมตริกที่อิงตามกฎ

เมตริกที่อิงตามกฎที่มีประสิทธิภาพมากคือคะแนนของ Lighthouse Lighthouse ให้คะแนนแอปของคุณใน 5 หมวดหมู่และหนึ่งในนั้นคือประสิทธิภาพ คะแนนประสิทธิภาพคำนวณจากเมตริกที่แตกต่างกัน 5 รายการ รวมถึง First Contentful Paint และ Time to Interactive

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

จัดลำดับความสำคัญ

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

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

ขั้นตอนถัดไป

ตรวจสอบว่ามีการบังคับใช้งบประมาณด้านประสิทธิภาพตลอดทั้งโปรเจ็กต์และรวมไว้ในกระบวนการบิลด์