Performance Audit: Lighthouse Score, Angular Bundle Size

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

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

%%{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

แนวคิดสำคัญ

• 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

Mermaid Diagram: Audit Workflow

%%{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
วัดซ้ำ"]

Code Example

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

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

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

// 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

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

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

กลับสัปดาห์ที่ 15