🚀Kiểm tra tốc độ tải trang bằng🔧Developer Tools

🚀 Cách kiểm tra nhanh

1️⃣ Mở Developer Tools

• Nhấn F12

• Chọn tab Network

2️⃣ Bật Disable Cache

Tích vào:

✅ Disable cache

để giả lập người dùng mới truy cập website.

3️⃣ Reload trang

Nhấn:

Ctrl + F5

hoặc nút Refresh.

---

📊 Các thông số cần xem

🔢	📋 Chỉ số	💡 Ý nghĩa
1️⃣	Finish	Tổng thời gian tải xong toàn bộ file
2️⃣	DOMContentLoaded	HTML tải xong và DOM được tạo
3️⃣	Load	Trang tải hoàn tất
4️⃣	Requests	Tổng số request
5️⃣	Transferred	Dung lượng tải thực tế
6️⃣	Size	Tổng dung lượng tài nguyên
7️⃣	Waterfall	Biểu đồ từng file tải

---

🔥 Xem file nào làm chậm

Trong tab Network:

• Click cột Time

• Sắp xếp giảm dần

Sẽ thấy:

app.js      2.5s
banner.jpg  1.8s
style.css   0.2s

File nào lâu nhất sẽ lộ ngay.

---

📈 Chuyên nghiệp hơn: Lighthouse

Trong F12:

Lighthouse → Analyze page load

Sẽ chấm điểm:

• 🚀 Performance

• ♿ Accessibility

• 🔍 SEO

• ✅ Best Practices

Ví dụ:

Performance: 96/100
SEO: 100/100
Accessibility: 92/100

---

🎯 Nếu đang quản trị web PHP/Laravel

Tab Network còn giúp phát hiện:

• Query SQL chậm

• API phản hồi chậm

• Ảnh quá lớn

• CSS/JS chưa minify

• CDN lỗi

• Cache chưa hoạt động

Ví dụ:

GET /products
Waiting (TTFB): 2.8s

=> Server hoặc database đang chậm.

---

⭐ Mẹo của dân tối ưu web

Ngoài Network, mở:

Performance → Record

Sau đó:

1. Bấm Record

2. Refresh trang

3. Chờ tải xong

4. Stop

Bạn sẽ thấy:

• thời gian render

• thời gian chạy JavaScript

• layout shift

• FPS

• CPU usage

Đây là công cụ mà các lập trình viên frontend chuyên nghiệp thường dùng để tìm nguyên nhân trang bị lag dù server rất nhanh.

╔══════════════════════╗

║ ⚡ Made by AI ⚡ ║

╚══════════════════════╝