You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
15 KiB
107 lines
15 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "a203e560e58ccc6ba68bffc40c7c8676",
|
|
"translation_date": "2025-10-23T21:22:46+00:00",
|
|
"source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
|
|
"language_code": "th"
|
|
}
|
|
-->
|
|
# วิเคราะห์เว็บไซต์เพื่อประสิทธิภาพ
|
|
|
|
## ภาพรวมของงาน
|
|
|
|
การวิเคราะห์ประสิทธิภาพเป็นทักษะสำคัญสำหรับนักพัฒนาเว็บในยุคปัจจุบัน ในงานนี้ คุณจะทำการตรวจสอบประสิทธิภาพของเว็บไซต์จริงอย่างละเอียด โดยใช้ทั้งเครื่องมือในเบราว์เซอร์และบริการจากบุคคลที่สามเพื่อระบุปัญหาและเสนอแนวทางการปรับปรุง
|
|
|
|
งานของคุณคือการจัดทำรายงานประสิทธิภาพที่แสดงถึงความเข้าใจในหลักการของประสิทธิภาพเว็บ และความสามารถในการใช้เครื่องมือวิเคราะห์ระดับมืออาชีพอย่างมีประสิทธิภาพ
|
|
|
|
## คำแนะนำสำหรับงาน
|
|
|
|
**เลือกเว็บไซต์** สำหรับการวิเคราะห์ - เลือกหนึ่งในตัวเลือกต่อไปนี้:
|
|
- เว็บไซต์ยอดนิยมที่คุณใช้บ่อย (เว็บไซต์ข่าว โซเชียลมีเดีย อีคอมเมิร์ซ)
|
|
- เว็บไซต์โครงการโอเพ่นซอร์ส (GitHub pages เว็บไซต์เอกสาร)
|
|
- เว็บไซต์ธุรกิจท้องถิ่นหรือเว็บไซต์พอร์ตโฟลิโอ
|
|
- โครงการของคุณเองหรือผลงานจากการเรียนที่ผ่านมา
|
|
|
|
**วิเคราะห์ด้วยเครื่องมือหลากหลาย** โดยใช้วิธีการอย่างน้อยสามแบบ:
|
|
- **Browser DevTools** - ใช้แท็บ Performance ใน Chrome/Edge สำหรับการวิเคราะห์เชิงลึก
|
|
- **เครื่องมือวิเคราะห์ออนไลน์** - ลองใช้ Lighthouse, GTmetrix หรือ WebPageTest
|
|
- **การวิเคราะห์เครือข่าย** - ตรวจสอบการโหลดทรัพยากร ขนาดไฟล์ และรูปแบบการร้องขอ
|
|
|
|
**จัดทำรายงานผลการวิเคราะห์** ในรายงานที่ครอบคลุมซึ่งรวมถึง:
|
|
|
|
### การวิเคราะห์ตัวชี้วัดประสิทธิภาพ
|
|
- **การวัดเวลาโหลด** จากเครื่องมือและมุมมองต่างๆ
|
|
- **คะแนน Core Web Vitals** (LCP, FID, CLS) และผลกระทบของคะแนนเหล่านี้
|
|
- **การแยกทรัพยากร** แสดงว่าไฟล์ใดมีผลต่อเวลาโหลดมากที่สุด
|
|
- **การวิเคราะห์ Network Waterfall** ระบุทรัพยากรที่เป็นอุปสรรค
|
|
|
|
### การระบุปัญหา
|
|
- **ปัญหาประสิทธิภาพเฉพาะ** พร้อมข้อมูลสนับสนุน
|
|
- **การวิเคราะห์สาเหตุ** อธิบายว่าทำไมแต่ละปัญหาเกิดขึ้น
|
|
- **การประเมินผลกระทบต่อผู้ใช้** อธิบายว่าปัญหาส่งผลต่อผู้ใช้อย่างไร
|
|
- **การจัดลำดับความสำคัญ** ของปัญหาตามความรุนแรงและความยากในการแก้ไข
|
|
|
|
### ข้อเสนอแนะการปรับปรุง
|
|
- **การปรับปรุงที่เฉพาะเจาะจงและนำไปใช้ได้จริง** พร้อมผลกระทบที่คาดหวัง
|
|
- **กลยุทธ์การดำเนินการ** สำหรับการเปลี่ยนแปลงที่แนะนำ
|
|
- **แนวปฏิบัติที่ดีที่สุดในปัจจุบัน** ที่สามารถนำมาใช้ (lazy loading, compression เป็นต้น)
|
|
- **เครื่องมือและเทคนิค** สำหรับการติดตามประสิทธิภาพอย่างต่อเนื่อง
|
|
|
|
## ข้อกำหนดการวิจัย
|
|
|
|
**อย่าใช้เครื่องมือในเบราว์เซอร์เพียงอย่างเดียว** - ขยายการวิเคราะห์ของคุณโดยใช้:
|
|
|
|
**บริการตรวจสอบจากบุคคลที่สาม:**
|
|
- [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) - การตรวจสอบที่ครอบคลุม
|
|
- [GTmetrix](https://gtmetrix.com/) - ข้อมูลเชิงลึกด้านประสิทธิภาพและการปรับปรุง
|
|
- [WebPageTest](https://www.webpagetest.org/) - เงื่อนไขการทดสอบในโลกจริง
|
|
- [Pingdom](https://tools.pingdom.com/) - การติดตามประสิทธิภาพทั่วโลก
|
|
|
|
**เครื่องมือวิเคราะห์เฉพาะทาง:**
|
|
- [Bundle Analyzer](https://bundlephobia.com/) - การวิเคราะห์ขนาดไฟล์ JavaScript
|
|
- [เครื่องมือปรับปรุงภาพ](https://squoosh.app/) - โอกาสในการปรับปรุงทรัพยากร
|
|
- [การวิเคราะห์ Security Headers](https://securityheaders.com/) - ผลกระทบต่อประสิทธิภาพด้านความปลอดภัย
|
|
|
|
## รูปแบบการส่งงาน
|
|
|
|
สร้างรายงานแบบมืออาชีพ (2-3 หน้า) ที่รวมถึง:
|
|
|
|
1. **บทสรุปสำหรับผู้บริหาร** - ภาพรวมของผลการวิเคราะห์และข้อเสนอแนะ
|
|
2. **วิธีการ** - เครื่องมือที่ใช้และวิธีการทดสอบ
|
|
3. **การประเมินประสิทธิภาพปัจจุบัน** - ตัวชี้วัดและการวัดผลพื้นฐาน
|
|
4. **ปัญหาที่พบ** - การวิเคราะห์ปัญหาอย่างละเอียดพร้อมข้อมูลสนับสนุน
|
|
5. **ข้อเสนอแนะ** - กลยุทธ์การปรับปรุงที่จัดลำดับความสำคัญ
|
|
6. **แผนการดำเนินการ** - ขั้นตอนการปรับปรุงทีละขั้นตอน
|
|
|
|
**รวมหลักฐานภาพ:**
|
|
- ภาพหน้าจอของเครื่องมือและตัวชี้วัดประสิทธิภาพ
|
|
- แผนภูมิหรือกราฟแสดงข้อมูลประสิทธิภาพ
|
|
- การเปรียบเทียบก่อน/หลัง หากเป็นไปได้
|
|
- แผนภูมิ Network Waterfall และการแยกทรัพยากร
|
|
|
|
## เกณฑ์การประเมิน
|
|
|
|
| เกณฑ์ | ดีเยี่ยม (90-100%) | เพียงพอ (70-89%) | ต้องปรับปรุง (50-69%) |
|
|
| -------- | ------------------- | ----------------- | -------------------------- |
|
|
| **ความลึกของการวิเคราะห์** | การวิเคราะห์ที่ครอบคลุมโดยใช้เครื่องมือ 4+ พร้อมตัวชี้วัดที่ละเอียด การวิเคราะห์สาเหตุ และการประเมินผลกระทบต่อผู้ใช้ | การวิเคราะห์ที่ดีโดยใช้เครื่องมือ 3 ตัว พร้อมตัวชี้วัดที่ชัดเจนและการระบุปัญหาเบื้องต้น | การวิเคราะห์พื้นฐานโดยใช้เครื่องมือ 2 ตัว พร้อมความลึกที่จำกัดและการระบุปัญหาเล็กน้อย |
|
|
| **ความหลากหลายของเครื่องมือ** | ใช้เครื่องมือในเบราว์เซอร์ + บริการจากบุคคลที่สาม 3+ พร้อมการวิเคราะห์เปรียบเทียบและข้อมูลเชิงลึกจากแต่ละเครื่องมือ | ใช้เครื่องมือในเบราว์เซอร์ + บริการจากบุคคลที่สาม 2 ตัว พร้อมการวิเคราะห์เปรียบเทียบบางส่วน | ใช้เครื่องมือในเบราว์เซอร์ + บริการจากบุคคลที่สาม 1 ตัว พร้อมการเปรียบเทียบที่จำกัด |
|
|
| **การระบุปัญหา** | ระบุปัญหาประสิทธิภาพเฉพาะ 5+ พร้อมการวิเคราะห์สาเหตุอย่างละเอียดและผลกระทบที่วัดได้ | ระบุปัญหาประสิทธิภาพ 3-4 พร้อมการวิเคราะห์ที่ดีและการวัดผลกระทบบางส่วน | ระบุปัญหาประสิทธิภาพ 1-2 พร้อมการวิเคราะห์พื้นฐาน |
|
|
| **ข้อเสนอแนะ** | ให้ข้อเสนอแนะที่เฉพาะเจาะจงและนำไปใช้ได้จริง พร้อมรายละเอียดการดำเนินการ ผลกระทบที่คาดหวัง และแนวปฏิบัติที่ดีที่สุดในปัจจุบัน | ให้ข้อเสนอแนะที่ดีพร้อมคำแนะนำการดำเนินการบางส่วนและผลลัพธ์ที่คาดหวัง | ให้ข้อเสนอแนะพื้นฐานพร้อมรายละเอียดการดำเนินการที่จำกัด |
|
|
| **การนำเสนออย่างมืออาชีพ** | รายงานที่จัดระเบียบอย่างดี พร้อมโครงสร้างที่ชัดเจน หลักฐานภาพ บทสรุปสำหรับผู้บริหาร และรูปแบบที่เป็นมืออาชีพ | การจัดระเบียบที่ดี พร้อมหลักฐานภาพบางส่วนและโครงสร้างที่ชัดเจน | การจัดระเบียบพื้นฐาน พร้อมหลักฐานภาพที่จำกัด |
|
|
|
|
## ผลการเรียนรู้
|
|
|
|
เมื่อทำงานนี้เสร็จสิ้น คุณจะสามารถ:
|
|
- **ประยุกต์ใช้** เครื่องมือและวิธีการวิเคราะห์ประสิทธิภาพระดับมืออาชีพ
|
|
- **ระบุ** ปัญหาประสิทธิภาพโดยใช้การวิเคราะห์ที่ขับเคลื่อนด้วยข้อมูล
|
|
- **วิเคราะห์** ความสัมพันธ์ระหว่างคุณภาพโค้ดและประสบการณ์ผู้ใช้
|
|
- **แนะนำ** กลยุทธ์การปรับปรุงที่เฉพาะเจาะจงและนำไปใช้ได้จริง
|
|
- **สื่อสาร** ผลการวิเคราะห์ทางเทคนิคในรูปแบบมืออาชีพ
|
|
|
|
งานนี้ช่วยเสริมสร้างความเข้าใจในแนวคิดด้านประสิทธิภาพที่เรียนรู้ในบทเรียน พร้อมทั้งพัฒนาทักษะการปฏิบัติที่คุณจะใช้ตลอดอาชีพการพัฒนาเว็บของคุณ
|
|
|
|
---
|
|
|
|
**ข้อจำกัดความรับผิดชอบ**:
|
|
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ |