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

Sam Dutton

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

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

วัตถุประสงค์	เพราะเหตุใด	สิ่งที่ต้องทดสอบ
รักษาความเป็นส่วนตัว ความปลอดภัย และความสมบูรณ์ของข้อมูล รวมถึงเปิดใช้ API ที่มีประสิทธิภาพ	เหตุผลที่ควรเลือกใช้ HTTPS	ใช้ HTTPS สำหรับหน้าเว็บ/เส้นทางและชิ้นงานทั้งหมดของเว็บไซต์
ปรับปรุงประสิทธิภาพการโหลด	ผู้ใช้ 53% ออกจากเว็บไซต์ที่ใช้เวลาโหลดนานกว่า 3 วินาที	JavaScript และ CSS ที่โหลดแบบไม่พร้อมกันหรือเลื่อนเวลา กําหนดเป้าหมายสําหรับเวลาในการโต้ตอบและขนาดเพย์โหลด เช่น TTI ใน 3G กําหนดงบประมาณด้านประสิทธิภาพ
ลดน้ำหนักหน้าเว็บ	• ลดค่าอินเทอร์เน็ตสำหรับผู้ใช้ที่มีแพ็กเกจอินเทอร์เน็ตแบบจำกัดปริมาณอินเทอร์เน็ตที่ใช้ได้ • ลดข้อกำหนดด้านพื้นที่เก็บข้อมูลของเว็บแอป ซึ่งสำคัญอย่างยิ่งสำหรับผู้ใช้ที่ใช้อุปกรณ์ที่มีสเปคต่ำ • ลดค่าโฮสติ้งและค่าการแสดงข้อมูล • ปรับปรุงประสิทธิภาพการแสดงข้อมูล ความน่าเชื่อถือ และความสามารถในการรับมือกับปัญหา	กำหนดงบประมาณน้ำหนักหน้าเว็บ เช่น การโหลดครั้งแรกต้องไม่เกิน 400 KB ตรวจสอบ JavaScript จำนวนมาก ตรวจสอบขนาดไฟล์เพื่อหารูปภาพ สื่อ HTML, CSS และ JavaScript ที่มีขนาดเกิน ค้นหารูปภาพที่อาจใช้การโหลดแบบเลื่อนเวลา และตรวจสอบโค้ดที่ไม่ได้ใช้ด้วยเครื่องมือการครอบคลุม
ลดคําขอทรัพยากร	• ลดปัญหาเกี่ยวกับเวลาในการตอบสนอง • ลดค่าใช้จ่ายในการแสดงโฆษณา • ปรับปรุงประสิทธิภาพ และความเสถียรของการแสดงโฆษณา	มองหาคำขอทรัพยากรทุกประเภทที่มากเกินไปหรือไม่จำเป็น เช่น ไฟล์ที่โหลดซ้ำๆ, JavaScript ที่โหลดหลายเวอร์ชัน, CSS ที่ไม่ได้ใช้, รูปภาพที่ไม่เคยดู (หรืออาจใช้การโหลดแบบเลื่อนเวลา)
เพิ่มประสิทธิภาพการใช้หน่วยความจำ	หน่วยความจําอาจกลายเป็นปัญหาคอขวดใหม่ โดยเฉพาะในอุปกรณ์เคลื่อนที่	ใช้เครื่องมือจัดการงานของ 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 Sniffing เพื่อแสดงชิ้นงานและเลย์เอาต์ที่แตกต่างกันสําหรับอุปกรณ์ต่างๆ คุณอาจต้องทดสอบกับฮาร์ดแวร์จริงโดยใช้การแก้ไขข้อบกพร่องจากระยะไกล ไม่ใช่แค่การจำลองอุปกรณ์

หมายเหตุ: คุณมักใช้เครื่องมือของเบราว์เซอร์เพื่อค้นหาปัญหาได้ง่ายๆ เพียงตรวจสอบการตอบสนองของเครือข่ายและจัดเรียงตามขนาด ตัวอย่างเช่น ไฟล์ 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 Tools และแหล่งข้อมูลในหลักพื้นฐานในการทำเว็บไซต์ (โดยเฉพาะส่วน "การลบล้างและการอัปเดตการตอบกลับที่แคชไว้")

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

• 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 โดยคลิกปุ่มแชร์ เลือก "เปิดในโปรแกรมดู" จากนั้นคลิกปุ่มแชร์อีกครั้งในหน้าต่างใหม่ แล้วเลือก "บันทึกเป็น 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 จํานวนมากสําหรับการวัดผลจริงแบบเรียลไทม์จากผู้ใช้จริง

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

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

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

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

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

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

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

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

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