<!--
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) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้