ประสิทธิภาพเป็นส่วนสำคัญของประสบการณ์ของผู้ใช้และส่งผลต่อเมตริกทางธุรกิจ คุณอาจคิดว่าหากคุณเป็นนักพัฒนาซอฟต์แวร์ที่ดี ก็คงได้เป็นเว็บไซต์ที่มีประสิทธิภาพดี แต่ความจริงก็คือประสิทธิภาพที่ดีแทบจะไม่ก่อให้เกิดผลข้างเคียงเลย เช่นเดียวกับสิ่งอื่นๆ ส่วนใหญ่ คุณต้องกำหนดให้ชัดเจนเพื่อให้บรรลุเป้าหมาย เริ่มต้นเส้นทางด้วยการกำหนดงบประมาณประสิทธิภาพ
คำจำกัดความ
งบประมาณด้านประสิทธิภาพคือชุดขีดจำกัดของเมตริกซึ่งส่งผลต่อประสิทธิภาพของเว็บไซต์ ซึ่งอาจเป็นขนาดรวมของหน้า เวลาที่ใช้ในการโหลดบนเครือข่ายมือถือ หรือแม้แต่จำนวนคำขอ HTTP ที่ส่งไป การกำหนดงบประมาณช่วยให้เริ่มบทสนทนาเรื่องประสิทธิภาพของเว็บได้ ใช้เป็นข้อมูลอ้างอิงในการตัดสินใจเกี่ยวกับการออกแบบ เทคโนโลยี และการเพิ่มฟีเจอร์ต่างๆ
การมีงบประมาณจะช่วยให้นักออกแบบคำนึงถึงผลลัพธ์ของรูปภาพที่มีความละเอียดสูงและจำนวนแบบอักษรสำหรับเว็บที่เลือกใช้ได้ นอกจากนี้ยังช่วยให้นักพัฒนาซอฟต์แวร์เปรียบเทียบวิธีการต่างๆ เกี่ยวกับปัญหาและประเมินเฟรมเวิร์กและไลบรารีตามขนาดและค่าใช้จ่ายในการแยกวิเคราะห์ได้ด้วย
เลือกเมตริก
เมตริกตามจำนวน ⚖️
เมตริกเหล่านี้มีประโยชน์ในช่วงเริ่มต้นของการพัฒนาเพราะจะไฮไลต์ผลกระทบของการรวมรูปภาพและสคริปต์จำนวนมาก และยังสื่อสารกับนักออกแบบและนักพัฒนาซอฟต์แวร์ได้ง่ายอีกด้วย
เราได้กล่าวถึงบางสิ่งที่คุณสามารถรวมไว้ในงบประมาณด้านประสิทธิภาพได้ เช่น น้ำหนักหน้าเว็บและจำนวนคำขอ HTTP แต่คุณสามารถแบ่งสิ่งเหล่านี้ออกเป็นข้อจำกัดที่ละเอียดยิ่งขึ้นได้ เช่น
- ขนาดสูงสุดของรูปภาพ
- จำนวนแบบอักษรเว็บสูงสุด
- ขนาดสูงสุดของสคริปต์ รวมถึงเฟรมเวิร์ก
- จำนวนทรัพยากรภายนอกทั้งหมด เช่น สคริปต์ของบุคคลที่สาม
แต่ตัวเลขเหล่านี้ไม่ได้บอกคุณมากนักเกี่ยวกับประสบการณ์ของผู้ใช้ หน้า 2 หน้าที่มีจำนวนคำขอเท่ากันหรือมีน้ำหนักเท่ากันอาจแสดงผลต่างกันได้ ขึ้นอยู่กับลำดับการส่งคำขอทรัพยากร หากมีการโหลดทรัพยากรสำคัญ เช่น รูปภาพหลักหรือสไตล์ชีตของหน้าใดหน้าหนึ่งในช่วงท้ายของกระบวนการ ผู้ใช้ก็จะรอนานขึ้นจึงจะเห็นเนื้อหาที่เป็นประโยชน์และจะมองว่าหน้าเว็บทำงานช้าลง หากส่วนที่สำคัญที่สุดในหน้าอื่นโหลดได้เร็ว พวกเขาอาจสังเกตไม่พบเลยหากส่วนที่เหลือในหน้าไม่โหลด
ด้วยเหตุนี้การติดตามเมตริกประเภทอื่นจึงเป็นสิ่งสำคัญ
ช่วงเวลาที่สำคัญ ⏱️
การจับเวลาเหตุการณ์สำคัญจะระบุเหตุการณ์ที่เกิดขึ้นระหว่างการโหลดหน้าเว็บ เช่น เหตุการณ์ DOMContentLoaded หรือ load ช่วงเวลาที่มีประโยชน์ที่สุดคือเมตริกประสิทธิภาพที่มุ่งเน้นผู้ใช้ ซึ่งจะบอกให้คุณทราบถึงประสบการณ์การโหลดหน้าเว็บ เมตริกเหล่านี้พร้อมใช้งานผ่าน API ของเบราว์เซอร์และเป็นส่วนหนึ่งของรายงาน Lighthouse
First Contentful Paint (FCP) จะวัดเมื่อเบราว์เซอร์แสดงเนื้อหาบิตแรกจาก DOM เช่น ข้อความหรือรูปภาพ
เวลาในการตอบสนอง (TTI) วัดระยะเวลาที่หน้าเว็บจะตอบสนองอย่างสมบูรณ์และตอบสนองต่อข้อมูลจากผู้ใช้ได้อย่างน่าเชื่อถือ เมตริกนี้เป็นเมตริกที่สำคัญมากที่ควรติดตามหากคุณคาดว่าผู้ใช้จะมีการโต้ตอบใดๆ ในหน้าเว็บ เช่น การคลิกลิงก์ ปุ่ม การพิมพ์ หรือการใช้องค์ประกอบแบบฟอร์ม
เมตริกตามกฎ 💯
Lighthouse และ WebPageTest จะคำนวณคะแนนประสิทธิภาพตามกฎแนวทางปฏิบัติแนะนำทั่วไปที่คุณใช้เป็นแนวทางได้ Lighthouse ยังให้คำแนะนำเพื่อการเพิ่มประสิทธิภาพที่ไม่ซับซ้อนอีกด้วย
คุณจะได้รับผลลัพธ์ที่ดีที่สุดหากคุณติดตามทั้งเมตริกประสิทธิภาพที่อิงตามปริมาณและที่เน้นผู้ใช้เป็นหลัก เน้นที่ขนาดชิ้นงานในช่วงเริ่มต้นของโปรเจ็กต์ แล้วเริ่มติดตาม FCP และ TTI โดยเร็วที่สุด
สร้างเกณฑ์พื้นฐาน
วิธีเดียวที่จะทำให้ทราบถึงสิ่งที่ได้ผลดีที่สุดสำหรับเว็บไซต์ก็คือการลองใช้จริง นั่นคือการค้นคว้าและทดสอบสิ่งที่คุณค้นพบ วิเคราะห์การแข่งขันเพื่อดูว่าคุณมีอันดับเป็นอย่างไร 🕵️
หากคุณไม่มีเวลาในการดำเนินการ ตัวเลขเริ่มต้นที่เหมาะสมต่อไปนี้จะช่วยคุณได้
- ใช้เวลาโต้ตอบไม่เกิน 5 วินาที
- ทรัพยากร important-path น้อยกว่า 170 KB (บีบอัด/ลดขนาด)
จำนวนเหล่านี้คำนวณจากอุปกรณ์พื้นฐานตามจริงและความเร็วเครือข่าย 3G ปัจจุบันการเข้าชมทางอินเทอร์เน็ตมากกว่าครึ่งเกิดขึ้นจากเครือข่ายมือถือ คุณจึงควรใช้ความเร็วเครือข่าย 3G เป็นจุดเริ่มต้น
ตัวอย่างงบประมาณ
คุณควรมีงบประมาณสำหรับหน้าเว็บประเภทต่างๆ บนเว็บไซต์ เนื่องจากเนื้อหาจะแตกต่างกันไป เช่น
- หน้าผลิตภัณฑ์ของเราต้องจัดส่ง JavaScript น้อยกว่า 170 KB บนอุปกรณ์เคลื่อนที่
- หน้าค้นหาของเราต้องมีรูปภาพบนเดสก์ท็อปน้อยกว่า 2 MB
- หน้าแรกของเราต้องโหลดและโต้ตอบได้ภายในเวลาไม่ถึง 5 วินาทีเมื่อใช้ 3G ที่ช้าบนโทรศัพท์ Moto G4
- บล็อกของเราต้องมีคะแนนมากกว่า 80 คะแนนในการตรวจสอบประสิทธิภาพ Lighthouse
เพิ่มงบประมาณด้านประสิทธิภาพลงในกระบวนการสร้าง
การเลือกเครื่องมือจะขึ้นอยู่กับขนาดของโปรเจ็กต์และทรัพยากรที่คุณใช้เพื่อทำงานนี้โดยเฉพาะได้ มีเครื่องมือโอเพนซอร์ส 2-3 อย่างที่จะช่วยคุณเพิ่มงบประมาณในกระบวนการสร้างได้ ดังนี้
หากมีรายการใดเกินเกณฑ์ที่กำหนดไว้ ให้ทำอย่างใดอย่างหนึ่งต่อไปนี้
- เพิ่มประสิทธิภาพฟีเจอร์หรือเนื้อหาที่มีอยู่ 🛠️
- นำฟีเจอร์หรือเนื้อหาที่มีอยู่ออก 🗑️
- ไม่เพิ่มฟีเจอร์หรือเนื้อหาใหม่ ✋⛔
ติดตามประสิทธิภาพ
การตรวจสอบว่าเว็บไซต์เร็วพอหมายความว่าคุณต้องคอยวัดผลหลังจากการเปิดตัวครั้งแรก การตรวจสอบเมตริกเหล่านี้อยู่เรื่อยๆ และการรับข้อมูลจากผู้ใช้จริงจะแสดงให้เห็นว่าการเปลี่ยนแปลงด้านประสิทธิภาพส่งผลต่อเมตริกธุรกิจที่สำคัญอย่างไร
สรุป
วัตถุประสงค์ของงบประมาณด้านประสิทธิภาพคือเพื่อให้มั่นใจว่าคุณมุ่งเน้นที่ประสิทธิภาพตลอดโปรเจ็กต์ และการตั้งงบประมาณไว้ตั้งแต่เนิ่นๆ จะช่วยป้องกันไม่ให้เกิดการย้อนกลับในภายหลัง หน้านี้ควรเป็นข้อมูลอ้างอิงเพื่อช่วยให้คุณทราบว่าควรใส่สิ่งใดในเว็บไซต์ แนวคิดหลักคือการกำหนดเป้าหมายเพื่อให้คุณสร้างสมดุลระหว่างประสิทธิภาพได้ดีขึ้นโดยไม่ส่งผลเสียต่อฟังก์ชันการทำงานหรือประสบการณ์ของผู้ใช้🎯
คู่มือถัดไปจะอธิบายการกำหนดงบประมาณประสิทธิภาพแรกด้วยขั้นตอนง่ายๆ ไม่กี่ขั้นตอน