Tìm hiểu Tối ưu PageSpeed với AI Agent — Hướng dẫn chuẩn dành cho Junior developer
SOP v1.1 — Claude Code Agent
Optimize PageSpeed sử dụng AI Agent — Hướng dẫn dành cho Người mới
Quy trình chuẩn chạy Claude Code agent tối ưu điểm Lighthouse cho WordPress theme. Đầy đủ gate approve, lint check sau khi deploy, có rollback — hoàn toàn không sợ làm hỏng live site.
7 Bước thực hiện | 3 Gate approve | Lint pass trước khi FTP
🚀 Master Prompt — Gửi thẳng vào Claude Code
Một prompt duy nhất, agent chạy toàn bộ flow: audit → lint → fix → gate → verify
📋 Copy Master Prompt
=== PAGESPEED OPTIMIZATION AGENT — MASTER PROMPT ===
URL live: [URL_LIVE]
Theme path: /wp-content/themes/[TEN_THEME]
FTP host: [FTP_HOST] | user: [FTP_USER]
(Chỉ dùng FTP credential sau Gate 2 đã approve)
BƯỚC 1 — AUDIT
Nhắc user tắt cache plugin và check X-Cache: MISS trước khi chạy
Run Lighthouse mobile + desktop cho URL live
Generate report: lighthouse-before-mobile.report.json và lighthouse-before-desktop.report.html
Map từng lỗi sang file chính xác trong theme, liệt kê top 10 issues dựa trên impact
BƯỚC 2 — PLAN (DỪNG — chờ Gate 1 approve)
Đề xuất fix CHỈ trong theme, KHÔNG đổi giao diện hoặc chức năng
KHÔNG xóa JS/CSS từ external domain
Fix priority: LCP → TBT → CLS → INP
Liệt kê từng file sẽ sửa, sửa gì, lý do why
Ghi "Waiting Gate 1 approve" và wait xác nhận
Workflow | Quy trình từng bước
STEP 01: Tắt cache — xác nhận MISS trước khi audit
Disable plugin cache: LiteSpeed / WP Rocket / SG Optimizer.
Trường hợp không disable được: bật Development Mode + purge all cache + purge CDN.
Xác nhận bằng response header: phải thấy X-Cache: MISS hoặc cf-cache-status: MISS trước khi chạy Lighthouse.
STEP 02: Tạo FTP account scope hẹp cho theme
Tạo FTP user chỉ trỏ vào thư mục theme: /wp-content/themes/ten-theme
Quyền: read/write trong theme. Không cho vào /plugins, /uploads, wp-config.php.
Lưu credential vào secret manager. Chỉ paste vào prompt sau Gate 2 approve.
STEP 03: Sửa local → lint/syntax check → pass mới FTP
Clone/download theme về local. Agent sửa file local theo plan đã approve.
Tại sao sửa local trước? Để bắt lỗi cú pháp sau khi deploy — tránh PHP fatal error, CSS parse fail, JS broken làm trắng trang live.
Lint Commands:
PHP: php -l ten-file.php
CSS: npx stylelint style.css
JS: npx eslint script.js
🚫 Lint báo lỗi → sửa → chạy lại → pass → mới được xin approve Gate 2 và FTP.
Kiểm soát chất lượng | 3 Gate Approve
Gate 1: Approve Plan — Reviewer: Lead / PM
Trước khi agent start sửa code local
Gate 2: Approve Patch List — Reviewer: Lead / PM
Sau lint pass — trước khi FTP lên live
Gate 3: Approve Kết Quả — Reviewer: Client / QA
Sau deploy — sau khi đo Lighthouse lại
Thứ tự ưu tiên | Fix cái gì trước?
1. LCP — Largest Contentful Paint
Image hero không có preload, font blocking render — Critical
2. TBT — Total Blocking Time
Render-blocking JS/CSS — đây mới là vấn đề chính, không phải ảnh — High
3. CLS — Cumulative Layout Shift
Element không có width/height, font swap gây giật layout — Medium
4. INP — Interaction to Next Paint
Long JS tasks làm chậm response khi user click/type — Low
💡 Xem chi tiết SOP tại DPS.Media
Copy-paste prompts | Prompt mẫu từng bước
Prompt 1 — Audit: Run Lighthouse mobile AND desktop cho URL: [URL_LIVE]
Generate report JSON và HTML. Map từng lỗi → đúng file và dòng trong theme.
Prompt 5 — Verify (Gate 3): Purge cache. Run Lighthouse lại
Ghi kết quả vào: SEO_AUDIT_[YYYY-MM-DD].md
Score trước/sau · lỗi đã fix/chưa fix · file đã sửa · rollback path.
Deliverables bắt buộc | Output phải có
📊 lighthouse-before-*.report.json/html
📈 lighthouse-after-*.report.json/html
✅ Lint pass report
📝 SEO_AUDIT_YYYY-MM-DD.md
💾 _backup/YYYY-MM-DD/
Xử lý sự cố | Rollback khi có regression
R1: Xác nhận regression — Lighthouse after thấp hơn before → báo lead ngay
R2: Restore từ backup — Upload lại file trong _backup/YYYY-MM-DD/
R3: Purge cache + re-check — Verify X-Cache: MISS, chạy Lighthouse quick
SOP by DPS.MEDIA · Claude Code Agent Workflow v1.1 · Internal use only