วัตถุประสงค์หลักในการสร้างเว็บไซต์ที่มีประสิทธิภาพและยืดหยุ่นโดยมีต้นทุนการถ่ายโอนข้อมูลต่ำมีอยู่หลายประการ
คุณต้องมีการตรวจสอบสำหรับวัตถุประสงค์แต่ละรายการ
วัตถุประสงค์ | เพราะเหตุใด | สิ่งที่ต้องทดสอบ |
---|---|---|
รักษาความเป็นส่วนตัว ความปลอดภัย และความสมบูรณ์ของข้อมูล รวมถึงเปิดใช้ 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 เพื่อแสดงชิ้นงานและเลย์เอาต์ที่แตกต่างกันสําหรับอุปกรณ์ต่างๆ คุณอาจต้องทดสอบกับฮาร์ดแวร์จริงโดยใช้การแก้ไขข้อบกพร่องจากระยะไกล ไม่ใช่แค่การจำลองอุปกรณ์
ตรวจสอบหน่วยความจำและภาระงานของ CPU
บันทึกการใช้งานหน่วยความจำและ CPU ก่อนทำการเปลี่ยนแปลง
ใน Chrome คุณสามารถเข้าถึงตัวจัดการงานได้จากเมนูหน้าต่าง วิธีนี้เป็นวิธีที่ง่ายในการตรวจสอบข้อกำหนดของหน้าเว็บ
![เครื่องมือจัดการงานของ Chrome ที่แสดงการใช้หน่วยความจำและ CPU สำหรับแท็บเบราว์เซอร์ที่เปิดอยู่ 4 แท็บ](https://web.dev/static/articles/performance-audit-tools/image/chrome-task-manager-showi-cc19e2f653383.png?hl=th)
ทดสอบประสิทธิภาพการโหลดครั้งแรกและครั้งต่อๆ ไป
Lighthouse, WebPagetest และ Pagespeed Insights มีประโยชน์ในการวิเคราะห์ความเร็ว ค่าใช้จ่ายของอินเทอร์เน็ต และการใช้ทรัพยากร WebPagetest จะตรวจสอบการแคชเนื้อหาแบบคงที่ เวลาในการตอบสนองครั้งแรก และดูว่าเว็บไซต์ของคุณใช้ CDN อย่างมีประสิทธิภาพหรือไม่
บันทึกผลลัพธ์
- 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"
![ภาพหน้าจอแสดงวิธีส่งออกรายงาน Chrome Lighthouse เป็นสรุป](https://web.dev/static/articles/performance-audit-tools/image/screenshot-showing-to-ex-53abe8ab0f048.png?hl=th)
ใช้ข้อมูลวิเคราะห์ การติดตามเหตุการณ์ และเมตริกธุรกิจเพื่อติดตามประสิทธิภาพในชีวิตจริง
หากเป็นไปได้ ให้บันทึกข้อมูลวิเคราะห์ไว้ก่อนทำการเปลี่ยนแปลง เช่น อัตราตีกลับ เวลาในการเข้าชมหน้าเว็บ หน้าออก ข้อมูลที่เกี่ยวข้องกับข้อกําหนดทางธุรกิจ
หากเป็นไปได้ ให้บันทึกเมตริกทางธุรกิจและทางเทคนิคที่อาจได้รับผลกระทบเพื่อให้คุณเปรียบเทียบผลลัพธ์หลังจากทําการเปลี่ยนแปลงได้ เช่น เว็บไซต์อีคอมเมิร์ซอาจติดตามคําสั่งซื้อต่อนาทีหรือบันทึกสถิติสําหรับการทดสอบความเครียดและความทนทาน ค่าใช้จ่ายในการจัดเก็บข้อมูลแบ็กเอนด์ ข้อกำหนดของ CPU ต้นทุนการแสดงผล และความสามารถในการรับมือกับปัญหามีแนวโน้มที่จะดีขึ้นหากคุณลดขนาดหน้าเว็บและคำขอทรัพยากร
หากยังไม่ได้ติดตั้งใช้งาน Analytics ตอนนี้ถึงเวลาแล้ว เมตริกและข้อมูลวิเคราะห์ทางธุรกิจเป็นตัวตัดสินขั้นสุดท้ายว่าเว็บไซต์ของคุณทํางานหรือไม่ ใช้การติดตามเหตุการณ์สําหรับการกระทําของผู้ใช้ เช่น การคลิกปุ่มและการเล่นวิดีโอ หากเหมาะสม นอกจากนี้ คุณอาจต้องติดตั้งใช้งานการวิเคราะห์เส้นทางเป้าหมาย ซึ่งเป็นเส้นทางที่ผู้ใช้ไปยัง "Conversion"
คุณสามารถติดตามความเร็วของเว็บไซต์ใน Google Analytics เพื่อดูว่าเมตริกประสิทธิภาพเชื่อมโยงกับเมตริกทางธุรกิจอย่างไร เช่น "หน้าแรกโหลดเร็วแค่ไหน" เทียบกับ "การเข้าชมผ่านหน้าแรกทําให้เกิดการขายไหม"
![ภาพหน้าจอแสดงความเร็วของเว็บไซต์ Google Analytics](https://web.dev/static/articles/performance-audit-tools/image/screenshot-showing-google-94579abbf511f.png?hl=th)
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 คุณจะได้รับบันทึกความเร็วในการโหลดคอมโพเนนต์หน้าเว็บจริง ซึ่งจะระบุได้ว่ารายการใดเร็วและรายการใดช้า บันทึกวิดีโอที่บันทึกไว้และภาพหน้าจอเพื่อเปรียบเทียบกับวิดีโอที่ปรับปรุงในภายหลัง
การเปรียบเทียบภาพก่อนและหลังแบบแสดงคู่กันอาจเป็นวิธีที่ดีในการแสดงให้เห็นถึงการปรับปรุง
มีอะไรอีกไหม
รับคะแนนความหนักของหน้าเว็บ (หากเกี่ยวข้อง) การทดสอบนี้สนุกดี แต่ก็เป็นวิธีที่ยอดเยี่ยมในการแสดงให้เห็นว่าโค้ดมีขนาดใหญ่เกินความจำเป็น หรือเพื่อแสดงให้เห็นว่าคุณได้ทำการปรับปรุงแล้ว
เว็บไซต์ของฉันมีค่าใช้จ่ายเท่าไรที่แสดงอยู่ด้านล่างเป็นแนวทางคร่าวๆ เกี่ยวกับค่าใช้จ่ายทางการเงินในการโหลดเว็บไซต์ในภูมิภาคต่างๆ
![ภาพหน้าจอจาก whatdoesmysitecost.com](https://web.dev/static/articles/performance-audit-tools/image/screenshot-whatdoesmysit-968e3d4361fa5.png?hl=th)
มีเครื่องมือแบบสแตนด์อโลนและออนไลน์อื่นๆ อีกมากมาย ดูได้ที่ perf.rocks/tools