การสร้างเว็บไซต์ที่มีประสิทธิภาพและยืดหยุ่นและมีต้นทุนด้านข้อมูลต่ำมีวัตถุประสงค์หลักหลายประการ
คุณจำเป็นต้องตรวจสอบสำหรับแต่ละวัตถุประสงค์
วัตถุประสงค์ | เพราะเหตุใด | สิ่งที่ต้องทดสอบ |
---|---|---|
มั่นใจได้ถึงความเป็นส่วนตัว ความปลอดภัย และความสมบูรณ์ของข้อมูล รวมถึงเปิดใช้ 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 เพื่อแสดงเนื้อหาและเลย์เอาต์ที่แตกต่างกันสําหรับอุปกรณ์แต่ละประเภท คุณอาจต้องทดสอบฮาร์ดแวร์จริงโดยใช้การแก้ไขข้อบกพร่องระยะไกล ไม่ใช่แค่การจำลองอุปกรณ์
ตรวจสอบหน่วยความจำและโหลดของ CPU
โปรดเก็บบันทึกการใช้งานหน่วยความจำและ CPU ก่อนทำการเปลี่ยนแปลง
ใน Chrome คุณสามารถเข้าถึงตัวจัดการงานจากเมนูหน้าต่าง นี่เป็นวิธีง่ายๆ เพื่อตรวจสอบ ข้อกำหนดของหน้าเว็บ
ทดสอบประสิทธิภาพการโหลดครั้งแรกและการโหลดที่ตามมา
Lighthouse, WebPagetest และ Pagespeed Insights มีประโยชน์ในการวิเคราะห์ความเร็ว ต้นทุนด้านข้อมูล และการใช้ทรัพยากร นอกจากนี้ WebPagetest จะตรวจสอบการแคชเนื้อหาแบบคงที่ เวลาต่อไบต์แรก และในกรณีที่เว็บไซต์ใช้ CDN อย่างมีประสิทธิภาพ
บันทึกผลลัพธ์
- WebPagetest: ผลการทดสอบโดยแต่ละรายมี URL ของตนเอง
- PageSpeed Insights: ออนไลน์ เครื่องมือ PageSpeed Insights ตอนนี้มีข้อมูลรายงานประสบการณ์ของผู้ใช้ Chrome ที่ไฮไลต์สถิติประสิทธิภาพจริง
- Lighthouse: บันทึกรายงานจากแผงการตรวจสอบเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โดยคลิกปุ่มดาวน์โหลดดังนี้
ทดสอบข้อกําหนดหลักของ Progressive Web App
Lighthouseช่วยให้คุณทดสอบความปลอดภัย ฟังก์ชันการทำงาน ความสามารถเข้าถึงได้ง่าย ประสิทธิภาพ และประสิทธิภาพเครื่องมือค้นหา โดยเฉพาะอย่างยิ่ง Lighthouse จะตรวจสอบว่าเว็บไซต์ของคุณใช้ฟีเจอร์ของ PWA เช่น โปรแกรมทำงานของบริการและไฟล์ Manifest ของเว็บแอปได้หรือไม่
Lighthouse ยังทดสอบว่าเว็บไซต์มอบประสบการณ์การใช้งานแบบออฟไลน์ที่ยอมรับได้หรือไม่
คุณสามารถดาวน์โหลดรายงาน Lighthouse เป็น JSON ได้ หรือถ้าใช้ส่วนขยาย Lighthouse ของ Chrome ก็แชร์รายงานเป็น GitHub Gist ได้โดยคลิกที่ปุ่มแชร์ เลือก "เปิดในโปรแกรมดู" แล้วคลิกปุ่มแชร์อีกครั้งในหน้าต่างใหม่แล้ว "บันทึกเป็น Gist"
ใช้ข้อมูลวิเคราะห์ การติดตามกิจกรรม และเมตริกธุรกิจเพื่อติดตามประสิทธิภาพในชีวิตจริง
หากทำได้ ให้เก็บบันทึกข้อมูลการวิเคราะห์ไว้ก่อนที่จะใช้การเปลี่ยนแปลงใดๆ ได้แก่ อัตราตีกลับ เวลาบนหน้าเว็บ หน้าที่ออก หรืออะไรก็ตามที่เกี่ยวข้องกับข้อกำหนดทางธุรกิจของคุณ
หากเป็นไปได้ ให้บันทึกเมตริกธุรกิจและเมตริกทางเทคนิคที่อาจได้รับผลกระทบ เพื่อให้เปรียบเทียบผลลัพธ์หลังจากทำการเปลี่ยนแปลงได้ ตัวอย่างเช่น เว็บไซต์อีคอมเมิร์ซอาจติดตามคำสั่งซื้อต่อนาทีหรือบันทึกสถิติสำหรับการทดสอบความเครียดและความอดทน ค่าใช้จ่ายสำหรับพื้นที่เก็บข้อมูลแบ็กเอนด์, ข้อกำหนดของ 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