ใช้เครื่องมือเพื่อวัดประสิทธิภาพ

Sam Dutton

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

คุณต้องมีการตรวจสอบสำหรับแต่ละวัตถุประสงค์

วัตถุประสงค์	เพราะเหตุใด	สิ่งที่ควรทดสอบ
รับประกันความเป็นส่วนตัว ความปลอดภัย และความสมบูรณ์ของข้อมูล รวมถึงเปิดใช้การใช้งาน API ที่มีประสิทธิภาพ	เหตุใด HTTPS จึงมีความสำคัญ	ใช้ HTTPS สำหรับหน้า/เส้นทางและเนื้อหาทั้งหมดของเว็บไซต์
ปรับปรุงประสิทธิภาพการโหลด	ผู้ใช้ 53% ออกจากเว็บไซต์ที่ใช้เวลาโหลดนานกว่า 3 วินาที	JavaScript และ CSS ที่โหลดแบบอะซิงโครนัสหรือเลื่อนเวลาได้ ตั้งเป้าหมายสำหรับเวลาในการตอบสนองและขนาดเพย์โหลด เช่น TTI ใน 3G กำหนดงบประมาณด้านประสิทธิภาพ
ลดน้ำหนักหน้าเว็บ	• ลดค่าใช้จ่ายด้านอินเทอร์เน็ตสำหรับผู้ใช้ที่มีแพ็กเกจอินเทอร์เน็ตแบบจำกัด • ลดข้อกำหนดด้านพื้นที่เก็บข้อมูลของเว็บแอป ซึ่งสำคัญอย่างยิ่งสำหรับผู้ใช้ที่ใช้อุปกรณ์สเปกต่ำ • ลดค่าใช้จ่ายในการโฮสต์และการแสดงผล • ปรับปรุงประสิทธิภาพ ความน่าเชื่อถือ และความยืดหยุ่นในการแสดงผล	กำหนดงบประมาณน้ำหนักหน้าเว็บ เช่น การโหลดครั้งแรกต่ำกว่า 400 kB ตรวจสอบ JavaScript ที่มีขนาดใหญ่ ตรวจสอบขนาดไฟล์เพื่อค้นหารูปภาพ สื่อ, HTML, CSS และ JavaScript ที่มีขนาดใหญ่เกินไป ค้นหารูปภาพที่สามารถโหลดแบบ Lazy Loading และตรวจสอบโค้ดที่ไม่ได้ใช้ด้วยเครื่องมือครอบคลุม
ลดคำขอทรัพยากร	• ลดปัญหาเวลาในการตอบสนอง • ลดค่าใช้จ่ายในการแสดงผล • ปรับปรุงประสิทธิภาพ ความน่าเชื่อถือ และความยืดหยุ่นในการแสดงผล	มองหาคำขอที่มากเกินไปหรือไม่จำเป็นสำหรับทรัพยากรประเภทใดก็ตาม เช่น ไฟล์ที่โหลดซ้ำๆ, JavaScript ที่โหลดหลายเวอร์ชัน, CSS ที่ไม่เคยใช้, รูปภาพที่ไม่เคยดู (หรืออาจโหลดแบบ Lazy Loading)
เพิ่มประสิทธิภาพการใช้หน่วยความจำ	หน่วยความจำอาจกลายเป็นจุดคอขวดใหม่ โดยเฉพาะในอุปกรณ์เคลื่อนที่	ใช้ตัวจัดการงานของ Chrome เพื่อเปรียบเทียบเว็บไซต์ของคุณกับเว็บไซต์อื่นๆ ในด้านการใช้งานหน่วยความจำเมื่อโหลดหน้าแรกและใช้ฟีเจอร์อื่นๆ ของเว็บไซต์
ลดภาระงานของ CPU	อุปกรณ์เคลื่อนที่มี CPU ที่จำกัด โดยเฉพาะอุปกรณ์ที่มีสเปกต่ำ	ตรวจสอบ JavaScript ที่มีขนาดใหญ่ ค้นหา JavaScript และ CSS ที่ไม่ได้ใช้ด้วยเครื่องมือครอบคลุม ตรวจสอบขนาด DOM ที่มากเกินไปและสคริปต์ที่ทำงานโดยไม่จำเป็นในการโหลดครั้งแรก มองหา JavaScript ที่โหลดในหลายเวอร์ชัน หรือไลบรารีที่หลีกเลี่ยงได้ด้วยการเปลี่ยนโครงสร้างภายในโค้ดเล็กน้อย

มีเครื่องมือและเทคนิคมากมายสำหรับการตรวจสอบเว็บไซต์ ดังนี้

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

ด้านล่างนี้ คุณจะได้ทราบว่าแนวทางใดเกี่ยวข้องกับการตรวจสอบแต่ละประเภท

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

บันทึกคำขอทรัพยากร: จำนวน ขนาด ประเภท และเวลา

จุดเริ่มต้นที่ดีในการตรวจสอบเว็บไซต์คือการตรวจสอบหน้าเว็บด้วยเครื่องมือเครือข่ายของเบราว์เซอร์ หากไม่แน่ใจว่าต้องทำอย่างไร โปรดดูคู่มือเริ่มต้นใช้งานแผงเครือข่ายเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เครื่องมือที่คล้ายกันมีให้บริการสำหรับ Firefox, Safari, Internet Explorer และ Edge

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

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

ฟีเจอร์หลักและเมตริกบางส่วนที่คุณควรตรวจสอบด้วยเครื่องมือเบราว์เซอร์มีดังนี้

• ประสิทธิภาพการโหลด: Lighthouse แสดงสรุปเมตริกการโหลด Addy Osmani ได้เขียนสรุปที่ยอดเยี่ยมเกี่ยวกับช่วงเวลาสำคัญของผู้ใช้สำหรับการโหลดหน้าเว็บ
• เหตุการณ์ในไทม์ไลน์สำหรับการโหลดและการแยกวิเคราะห์ทรัพยากร และการใช้งานหน่วยความจำ หากต้องการเจาะลึกยิ่งขึ้น ให้เรียกใช้การทำโปรไฟล์หน่วยความจำและ JavaScript
• น้ำหนักหน้าเว็บและจำนวนไฟล์ทั้งหมด
• จำนวนและน้ำหนักของไฟล์ JavaScript
• ไฟล์ JavaScript แต่ละไฟล์ที่มีขนาดใหญ่เป็นพิเศษ (เช่น เกิน 100 KB)
• JavaScript ที่ไม่ได้ใช้ คุณตรวจสอบได้โดยใช้เครื่องมือความครอบคลุมของ Chrome
• จำนวนและน้ำหนักรวมของไฟล์ภาพ
• ไฟล์ภาพแต่ละไฟล์ที่มีขนาดใหญ่เป็นพิเศษ
• รูปแบบรูปภาพ: มีรูปภาพ PNG ที่ควรเป็น JPEG หรือ SVG ไหม มีการใช้ WebP ร่วมกับฟอลแบ็กไหม
• มีการใช้เทคนิครูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ (เช่น srcset) หรือไม่
• ขนาดไฟล์ HTML
• จำนวนและน้ำหนักรวมของไฟล์ CSS
• CSS ที่ไม่ได้ใช้ (ใน Chrome ให้ใช้แผงความครอบคลุม)
• ตรวจสอบการใช้งานชิ้นงานอื่นๆ ที่มีปัญหา เช่น แบบอักษรเว็บ (รวมถึงแบบอักษรไอคอน)
• ตรวจสอบไทม์ไลน์ของ DevTools เพื่อหาสิ่งที่บล็อกการโหลดหน้าเว็บ

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

หมายเหตุ: คุณมักจะใช้เครื่องมือของเบราว์เซอร์เพื่อตรวจหาปัญหาได้ง่ายๆ เพียงตรวจสอบการตอบสนองของเครือข่ายและจัดเรียงตามขนาด ตัวอย่างเช่น ไฟล์ PNG ขนาด 349 KB ที่นี่ดูเหมือนว่าอาจเป็นปัญหา:

แน่นอนว่ารูปภาพมีความกว้าง 1,600 พิกเซล ในขณะที่ความกว้างสูงสุดขององค์ประกอบที่แสดงมีเพียง 400 พิกเซล เมื่อคลายการบีบอัด รูปภาพต้องใช้หน่วยความจำมากกว่า 4 MB ซึ่งถือว่ามากสำหรับโทรศัพท์มือถือ การบันทึกรูปภาพอีกครั้งเป็น JPEG ที่มีความกว้าง 800 พิกเซล (เพื่อให้สอดคล้องกับความกว้างในการแสดงผล 400 พิกเซลบนหน้าจอ 2x) และเพิ่มประสิทธิภาพด้วย ImageOptim ส่งผลให้ได้ไฟล์ขนาด 17 KB โดยเปรียบเทียบ PNG ต้นฉบับกับ JPEG ที่เพิ่มประสิทธิภาพแล้ว

ซึ่งถือว่าดีขึ้นถึง 95%

ตรวจสอบหน่วยความจำและภาระงานของ CPU

ก่อนทำการเปลี่ยนแปลง ให้บันทึกการใช้งานหน่วยความจำและ CPU ไว้

ใน Chrome คุณสามารถเข้าถึงตัวจัดการงานได้จากเมนูหน้าต่าง ซึ่งเป็นวิธีง่ายๆ ในการตรวจสอบข้อกำหนดของหน้าเว็บ

ตัวจัดการงานของ Chrome - ระวังการใช้หน่วยความจำและ CPU มากเกินไป

ทดสอบประสิทธิภาพการโหลดครั้งแรกและครั้งต่อๆ ไป

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

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

บันทึกผลลัพธ์

• WebPagetest: ผลการทดสอบแต่ละรายการมี URL ของตัวเอง
• PageSpeed ​​Insights: เครื่องมือ PageSpeed ​​Insights ออนไลน์ตอนนี้มีข้อมูลรายงานประสบการณ์ของผู้ใช้ Chrome ที่ไฮไลต์สถิติประสิทธิภาพในชีวิตจริง
• Lighthouse: บันทึกรายงานจากแผงการตรวจสอบเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โดยคลิกปุ่มดาวน์โหลด

  

ทดสอบข้อกำหนดหลักของ Progressive Web App

Lighthouse ช่วยคุณทดสอบความปลอดภัย ฟังก์ชันการทำงาน การช่วยเหลือพิเศษ ประสิทธิภาพ และประสิทธิภาพของเครื่องมือค้นหา โดยเฉพาะอย่างยิ่ง Lighthouse จะตรวจสอบว่าเว็บไซต์ของคุณใช้ฟีเจอร์ PWA เช่น Service Worker และไฟล์ Manifest ของเว็บแอปได้สำเร็จหรือไม่

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

คุณสามารถดาวน์โหลดรายงาน Lighthouse เป็น JSON หรือหากใช้ส่วนขยาย Lighthouse ของ Chrome ให้แชร์รายงานเป็น GitHub Gist โดยคลิกปุ่มแชร์ เลือก "เปิดใน Viewer" จากนั้นคลิกปุ่มแชร์อีกครั้งในหน้าต่างใหม่ แล้วเลือก "บันทึกเป็น Gist"

ส่งออกรายงานไปยัง Gist จากส่วนขยาย Lighthouse ของ Chrome โดยคลิกปุ่มแชร์

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

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

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

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

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

Google Analytics ใช้ข้อมูลจาก Navigation Timing API

คุณอาจต้องการบันทึกข้อมูลโดยใช้ JavaScript Performance API อย่างใดอย่างหนึ่งหรือเมตริกของคุณเอง เช่น

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

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

ประสบการณ์ในชีวิตจริง: การบันทึกหน้าจอและวิดีโอ

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

คุณอาจต้องการบันทึก Screencast ด้วย มีแอปบันทึก Screencast มากมายสำหรับแพลตฟอร์ม Android, iOS และเดสก์ท็อป (และสคริปต์ที่ทำแบบเดียวกัน)

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

การเปรียบเทียบก่อนและหลังแบบเคียงข้างกันเป็นวิธีที่ยอดเยี่ยมในการแสดงให้เห็นถึงการปรับปรุง

มีอะไรอีกไหม

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

What Does My Site Cost? ที่แสดงด้านล่างนี้จะให้คำแนะนำคร่าวๆ เกี่ยวกับค่าใช้จ่ายทางการเงินในการโหลดเว็บไซต์ในภูมิภาคต่างๆ

ยังมีเครื่องมือแบบสแตนด์อโลนและเครื่องมือออนไลน์อื่นๆ อีกมากมาย ลองดูที่ perf.rocks/tools