reveal.js

# Performance Audit: Lighthouse Score, Angular Bundle Size

Lesson 3 - โปรเจกต์สุดท้าย Full-Stack Angular Application

**Performance Audit** คือการวัดและวิเคราะห์ประสิทธิภาพเว็บด้วยเครื่องมือ เช่น Google Lighthouse, Core Web Vitals และ Bundle Analyzer เพื่อหาจุดที่ทำให้โหลดช้า ใช้งานยาก หรือส่งผลต่อ SEO

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
 subgraph Era1["ยุคโหลดได้ก็พอ / Basic Web"]
 A["No Metrics ไม่วัดจริง"]
 end
 subgraph Era2["ยุค Performance Metrics"]
 B["Lighthouse Performance Accessibility SEO"]
 C["Core Web Vitals LCP FID CLS"]
 end
 subgraph Era3["ยุค Bundle Optimization"]
 D["stats-json ดู bundle"]
 E["Lazy Loading + Tree Shaking ลด initial load"]
 end
 A --> B --> C --> D --> E
</pre>

---

## แนวคิดสำคัญ

- **Google Lighthouse** ตรวจ Performance, Accessibility, SEO และ Best Practices
- **Core Web Vitals** ได้แก่ LCP < 2.5s, FID < 100ms, CLS < 0.1
- **`ng build --stats-json`** ใช้วิเคราะห์ Bundle Size
- **webpack-bundle-analyzer** แสดงว่า library ใดทำให้ bundle ใหญ่
- **Lazy Loading** แยก Bundle ตาม Route เพื่อลด Initial Load
- **Tree Shaking** ตัดโค้ดที่ไม่ถูกใช้
- **OnPush Change Detection** ลดการ re-render ที่ไม่จำเป็น
- **gzip/brotli** บีบอัดไฟล์บน Server

---

## ตาราง Core Web Vitals

| Metric | วัดอะไร | ค่าแนะนำ |
|---|---|---|
| LCP | เวลาที่ content หลักแสดง | < 2.5s |
| FID | เวลาตอบสนอง interaction แรก | < 100ms |
| CLS | ความกระโดดของ layout | < 0.1 |
| TBT | เวลาที่ main thread ถูก block | ยิ่งต่ำยิ่งดี |

---

## Mermaid Diagram: Audit Workflow

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
 A["Run Lighthouse วัดคะแนน"] --> B["Identify Bottleneck หาคอขวด"]
 B --> C["Analyze Bundle stats-json"]
 C --> D["Optimize lazy/tree/onpush"]
 D --> E["Enable Compression gzip/brotli"]
 E --> F["Re-test วัดซ้ำ"]
</pre>

---

## Code Example

```powershell
# build พร้อม stats สำหรับวิเคราะห์ bundle
ng build --configuration production --stats-json

# ติดตั้ง bundle analyzer แบบชั่วคราวและเปิดรายงาน
npx webpack-bundle-analyzer dist/my-app/stats.json

# ตัวอย่างการใช้งาน:
# ดูว่า package ใดมีขนาดใหญ่ แล้วพิจารณา lazy load หรือเปลี่ยน library
```

```ts
// lesson-list.component.ts
// ใช้ OnPush เพื่อลด change detection ที่ไม่จำเป็น
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

interface Lesson {
  id: number;
  title: string;
}

@Component({
 selector: 'app-lesson-list',
 template: `
 <ul>
 <li *ngFor="let lesson of lessons; trackBy: trackById">
 {{ lesson.title }}
 </li>
 </ul>
 `,
 changeDetection: ChangeDetectionStrategy.OnPush
})
export class LessonListComponent {
 @Input() lessons: Lesson[] = [];

trackById(index: number, lesson: Lesson): number {
    return lesson.id;
  }
}

// ตัวอย่างการใช้งาน:
// ส่ง array ใหม่เมื่อข้อมูลเปลี่ยน เพื่อให้ OnPush ตรวจเจออย่างถูกต้อง
```

---

## วิดีโอแนะนำ

- [YouTube: Angular Performance Lighthouse Bundle Size](https://www.youtube.com/results?search_query=Angular+performance+Lighthouse+bundle+size)

---

## กิจกรรมท้ายบท

1. รัน Lighthouse กับโปรเจกต์ final
2. บันทึกคะแนน Performance, Accessibility, SEO
3. วิเคราะห์ bundle ด้วย stats-json
4. เสนอ action 3 ข้อเพื่อเพิ่มคะแนน

---

## End

<a href="/web-programming/15-final-project/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>