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

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 ให้ใช้ แผงการครอบคลุม)
• ตรวจหาการใช้เนื้อหาอื่นๆ ที่เป็นปัญหา เช่น แบบอักษรสำหรับเว็บ (รวมถึงแบบอักษรของไอคอน)
• ตรวจสอบไทม์ไลน์ของเครื่องมือสำหรับนักพัฒนาเว็บเพื่อหาสิ่งที่บล็อกการโหลดหน้าเว็บ

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

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

แน่นอน พอดูแล้วรูปภาพก็กว้าง 1,600 พิกเซล ในขณะที่ความกว้างการแสดงผลสูงสุดขององค์ประกอบคือ 400 พิกเซลเท่านั้น เมื่อคลายการบีบอัด รูปภาพต้องใช้หน่วยความจำมากกว่า 4 MB ซึ่งมากในโทรศัพท์มือถือ การบันทึกรูปภาพอีกครั้งเป็น JPEG ที่กว้าง 800 พิกเซล (เพื่อรับมือกับความกว้างการแสดงผล 400 พิกเซลบนหน้าจอ 2 เท่า) และการเพิ่มประสิทธิภาพด้วย 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 เช่น โปรแกรมทำงานของบริการและไฟล์ Manifest ของเว็บแอปได้หรือไม่

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

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

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

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

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

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

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

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

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

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

    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 เพื่อเปรียบเทียบกับการปรับปรุงในภายหลัง

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

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

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

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

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