SOP v1.1 — Claude Code Agent
Tối ưu PageSpeed
bằng AI Agent —
Hướng dẫn cho Junior
bằng AI Agent —
Hướng dẫn cho Junior
Quy trình chuẩn chạy Claude Code agent tối ưu điểm Lighthouse cho WordPress theme.
Có gate approve, lint check trước khi deploy, có rollback — không sợ làm hỏng live site.
LINT GATE: Sau khi sửa local, agent phải chạy lint/syntax check qua hết các file đã sửa.
Chỉ được FTP lên live khi tất cả lint pass sạch. Không có ngoại lệ.
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.
Nếu 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.💡 DevTools → Network tab → reload → xem header của document request. Nếu thấy HIT thì purge lại.
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 khi 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 trước khi deploy — tránh PHP fatal error, CSS parse fail, JS broken làm trắng trang live ngay sau khi FTP.
Sau khi sửa xong: chạy lint qua tất cả file đã sửa. Chỉ xin Gate 2 + FTP khi tất cả pass sạch.
PHP
php -l ten-file.phpCSS
npx stylelint style.cssJS
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.
STEP 04
Chạy Lighthouse audit — map lỗi sang file
Chạy cả mobile + desktop, xuất report JSON và HTML.
Nếu staging có HTTP Basic Auth: truyền
--extra-headers trong Lighthouse CLI.
Map từng lỗi → đúng file và dòng trong theme gây ra vấn đề.
📁 Lưu:
lighthouse-before-mobile.report.json và lighthouse-before-desktop.report.html
STEP 05
Agent viết plan — Gate 1 approve trước khi sửa
Agent đề xuất fix chỉ trong theme, không thay đổi giao diện hoặc chức năng.
Không được thêm/xóa JS/CSS từ external domain. Chỉ tối ưu asset đã có trong theme.
Agent viết plan chi tiết → dừng lại → Lead/PM approve Gate 1 → mới bắt đầu sửa.
STEP 06
Lint pass + Gate 2 approve → FTP deploy
Agent báo cáo kết quả lint pass + patch list → Lead review → approve Gate 2.
Backup remote files vào
/wp-content/themes/_backup/YYYY-MM-DD/ trước khi ghi đè.
Upload FTP → verify live HTML để xác nhận deploy đúng.
STEP 07
Lighthouse lại — Gate 3 verify kết quả
Purge cache, chạy Lighthouse mobile + desktop lần nữa.
Ghi kết quả before/after vào
SEO_AUDIT_YYYY-MM-DD.md.
Client hoặc QA approve Gate 3. Nếu có regression → báo ngay, không tự rollback.
Kiểm soát chất lượng
3 Gate Approve
Gate 1
Approve Plan
Reviewer: Lead / PM
Trước khi agent bắt đầu sửa code local
Trước khi agent bắt đầu sửa code local
Gate 2
Approve Patch List
Reviewer: Lead / PM
Sau lint pass — trước khi FTP lên live
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
Sau deploy — sau khi đo Lighthouse lại
Thứ tự ưu tiên
Fix cái gì trước?
1
LCP — Largest Contentful Paint
Ảnh 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
Lưu ý: Đừng để agent mải tối ưu ảnh trong khi render-blocking JS mới là nguyên nhân làm TBT cao.
Luôn đọc Lighthouse report và fix đúng thứ tự priority.
Copy-paste prompts
Prompt mẫu từng bước
Prompt 1 — Audit
Run Lighthouse mobile AND desktop cho URL: [URL_LIVE]
Xuất report JSON và HTML.
Tên file: lighthouse-before-mobile.report.json, lighthouse-before-desktop.report.html
Map từng lỗi sang file trong theme /wp-content/themes/[TEN_THEME].
Liệt kê top 10 issues theo impact cao nhất.
Prompt 2 — Plan (Gate 1)
Dựa trên report vừa audit, viết plan fix:
– Chỉ fix trong theme, KHÔNG đổi giao diện hoặc chức năng
– KHÔNG thêm hoặc xóa JS/CSS từ external domain
– Fix theo thứ tự: LCP → TBT → CLS → INP
– Liệt kê từng file sẽ sửa, sửa gì, lý do tại sao
– DỪNG — ghi “Waiting Gate 1 approve” và chờ xác nhận trước khi sửa bất kỳ file nào.
Prompt 3 — Local Fix + Lint
Gate 1 đã approve. Sửa các file theo plan trên local.
Sau khi sửa xong, chạy lint cho tất cả file đã sửa:
– PHP: php -l [ten-file.php]
– CSS: npx stylelint [ten-file.css]
– JS: npx eslint [ten-file.js]Nếu lint báo lỗi → sửa hết → chạy lại cho đến khi pass sạch.
Báo cáo kết quả lint (pass/fail từng file) và patch list file sẽ deploy.
DỪNG — ghi “Waiting Gate 2 approve” và chờ xác nhận trước khi FTP.
Prompt 4 — FTP Deploy (Gate 2)
Gate 2 đã approve. Thực hiện:
1. Backup remote files vào: /wp-content/themes/_backup/[YYYY-MM-DD]/
2. Upload các file lint-pass lên FTP: [FTP_HOST] user: [FTP_USER]
3. Verify live HTML sau upload
4. Báo cáo danh sách file đã upload kèm rollback path.
Prompt 5 — Verify (Gate 3)
Purge cache. Run Lighthouse lại (mobile + desktop) cho URL: [URL_LIVE]
Ghi kết quả vào: SEO_AUDIT_[YYYY-MM-DD].md
File MD gồm: điểm trước/sau · lỗi đã fix/chưa fix · file đã sửa · rollback path.
Nếu bất kỳ điểm nào giảm: báo ngay, KHÔNG tự rollback.
DỪNG — ghi “Waiting Gate 3 approve”.
Deliverables bắt buộc
Output phải có
lighthouse-before-*.report.json/html
Report Lighthouse trước khi fix, cả mobile và desktop
lighthouse-after-*.report.json/html
Report Lighthouse sau deploy, so sánh với before
Lint pass report
Kết quả php -l / stylelint / eslint — phải pass sạch trước khi FTP
SEO_AUDIT_YYYY-MM-DD.md
Điểm trước/sau · Lỗi đã fix/chưa fix · File đã sửa · Rollback path
_backup/YYYY-MM-DD/
Backup remote files trước khi ghi đè, trong thư mục theme
Xử lý sự cố
Rollback khi có regression
R1
Xác nhận regression
Lighthouse after thấp hơn before → có regression. Báo lead ngay, không tự xử lý.
R2
Restore từ backup
Upload lại file trong _backup/YYYY-MM-DD/ lên FTP theo đúng danh sách trong MD.
R3
Purge cache + re-check
Purge cache + CDN, verify X-Cache: MISS, chạy Lighthouse nhanh để confirm rollback thành công.
R4
Post-mortem
Ghi nguyên nhân vào MD, cập nhật plan, quay lại Gate 1 với plan đã điều chỉnh.
