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

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

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

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

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

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

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

แผง Lighthouse ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

เดสก์ท็อป FCP TTI
หน้าแรก 1,680 มิลลิวินาที 5,550 มิลลิวินาที
หน้าผลลัพธ์ 2,060 มิลลิวินาที 6,690 มิลลิวินาที
การวิเคราะห์บนเดสก์ท็อปของ Doggos.com
อุปกรณ์เคลื่อนที่ FCP TTI
หน้าแรก 1,800 มิลลิวินาที 6,150 มิลลิวินาที
หน้าผลลัพธ์ 1,100 มิลลิวินาที 7,870 มิลลิวินาที
การวิเคราะห์บนอุปกรณ์เคลื่อนที่ของ Doggos.com

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

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

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

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

ภาพหน้าจอแสดงการค้นหาของ Google ที่มีคีย์เวิร์ดที่เกี่ยวข้อง

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

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

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

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

เว็บไซต์/หน้าแรก FCP TTI
goggles.com 880 มิลลิวินาที 3,150 มิลลิวินาที
Doggos.com 1,800 มิลลิวินาที 6,500 มิลลิวินาที
quackquackgo.com 2,680 มิลลิวินาที 4,740 มิลลิวินาที
ding.xyz 2,420 มิลลิวินาที 7,040 มิลลิวินาที
การวิเคราะห์ทางการแข่งขันของ Doggos.com ในเครือข่าย 3G
Doggo ที่คอมพิวเตอร์
ดูเหมือนว่า Doggos.com จะทำตามเมตริก FCP ได้ดี แต่ใน TTI กลับไม่ดีเลย

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

วัดระยะทาง เวลาปัจจุบัน งบประมาณ (เร็วกว่าการแข่งขัน 20%)
FCP 1,800 มิลลิวินาที 704 มิลลิวินาที
TTI 6,500 มิลลิวินาที 2,520 มิลลิวินาที
งบประมาณด้านประสิทธิภาพที่ทำให้ Doggos.com นำหน้าคู่แข่งได้

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

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

วัดระยะทาง เวลาปัจจุบัน งบประมาณเริ่มต้น (เร็วกว่าเวลาปัจจุบัน 20%) เป้าหมายระยะยาว (เร็วกว่าการแข่งขัน 20%)
FCP 1,800 มิลลิวินาที 1,440 มิลลิวินาที 704 มิลลิวินาที
TTI 6,500 มิลลิวินาที 5,200 มิลลิวินาที 2,520 มิลลิวินาที
งบประมาณด้านประสิทธิภาพของ Doggos.com ฉบับปรับปรุง

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

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

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

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

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

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

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

เครือข่าย อุปกรณ์ JS รูปภาพ CSS HTML แบบอักษร รวม งบประมาณเวลาจนถึงการโต้ตอบ
3G แบบช้า Moto G4 100 30 10 10 20 ประมาณ 170 KB 5 วิ
4G แบบช้า Moto G4 200 50 35 30 30 ประมาณ 345 KB 3 วินาที
WiFi เดสก์ท็อป 300 250 50 50 100 ประมาณ 750 KB 2 วิ

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

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

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

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

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

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

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

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

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

ข้อมูลการเผยแพร่อุปกรณ์จากรายงานประสบการณ์ของผู้ใช้ Chrome
ข้อมูลการเผยแพร่อุปกรณ์จากรายงานประสบการณ์ของผู้ใช้ Chrome

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

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