Bạn là một chuyên gia về hiệu suất web. Phân tích trang web này và cung cấp
đề xuất tối ưu hóa mà một nhà thiết kế có thể hiểu và
nhà phát triển có thể triển khai ngay.
## Đầu vào
- **URL trang web:**
- **Các vấn đề đã biết hiện tại:** [optional — "slow on mobile", "images are huge"]
- **Điểm mục tiêu:** [optional — "LCP under 2.5s, CLS under 0.1"]
- **Lưu trữ:** [Vercel / Netlify / custom server / don't know]
## Khu vực phân tích
### 1. Đánh giá các chỉ số quan trọng của trang web
Đối với mỗi số liệu, hãy giải thích:
- **Nó đo lường những gì** (bằng ngôn ngữ đơn giản)
- **Điểm hiện tại** (tốt / cần cải thiện / kém)
- **Điều gì gây ra tỷ số**
- **Cách khắc phục** (các bước cụ thể, có thể thực hiện được)
Số liệu:
- LCP (Nội dung có nội dung lớn nhất) — "nội dung chính xuất hiện nhanh như thế nào?"
- FID/INP (Tương tác với lần sơn tiếp theo) — "nó phản hồi các lần nhấp chuột nhanh như thế nào?"
- CLS (Thay đổi bố cục tích lũy) — "nội dung có nhảy lung tung trong khi tải không?"
### 2. Tối ưu hóa hình ảnh
- Liệt kê mọi hình ảnh lớn hơn mức cần thiết
- Đề xuất thay đổi định dạng (PNG→WebP, không nén→nén)
- Xác định việc triển khai hình ảnh đáp ứng bị thiếu
- Gắn cờ hình ảnh đang tải trong màn hình đầu tiên mà không có gợi ý ưu tiên
- Đề xuất ứng viên lười tải
### 3. Tối ưu hóa phông chữ
- Kích thước tệp phông chữ và chiến lược tải
- Cơ hội tập hợp con (bạn có cần tất cả 800 glyph không?)
- Chiến lược hiển thị (hoán đổi, tùy chọn, dự phòng)
- Đề xuất Tự lưu trữ so với CDN
### 4. Phân tích JavaScript
- Phân tích kích thước gói (cái gì nặng?)
- Tỷ lệ phần trăm JavaScript không được sử dụng
- Tập lệnh chặn kết xuất
- Tác động kịch bản của bên thứ ba
### 5. Phân tích CSS
- Phần trăm CSS không được sử dụng
- Bảng định kiểu chặn kết xuất
- Cơ hội trích xuất CSS quan trọng
### 6. Lưu vào bộ nhớ đệm & phân phối
- Tiêu đề bộ đệm hiện có và chính xác không?
- Sử dụng CDN
- Đã bật tính năng nén (gzip/brotli)?
## Định dạng đầu ra
### Tóm tắt nhanh (dành cho khách hàng/các bên liên quan)
3-4 câu: hiện trạng, vấn đề lớn nhất, mong đợi cải thiện.
### Lộ trình tối ưu hóa
| Ưu tiên | Vấn đề | Tác động | Nỗ lực | Cách khắc phục |
|----------|-------|--------|--------|----------|
| 1 | ... | Cao | Thấp | |
| 2 | ... | ... | ... | ... |
### Cải thiện điểm số mong đợi
| Số liệu | Hiện tại | Sau khi thắng nhanh | Sau khi tối ưu hóa hoàn toàn |
|--------|----------|-----------------|-----------------------|
| Hiệu suất | ... | ... | ... |
| LCP | ... | ... | ... |
| CLS | ... | ... | ... |
### Đoạn mã triển khai
Đối với 5 cách khắc phục hàng đầu, hãy cung cấp mã hoặc cấu hình sẵn sàng sao chép-dán.
