{"id":37996,"date":"2026-03-24T19:12:40","date_gmt":"2026-03-24T12:12:40","guid":{"rendered":"https:\/\/dps.media\/?p=37996"},"modified":"2026-03-24T19:12:43","modified_gmt":"2026-03-24T12:12:43","slug":"optimize-pagespeed-with-ai-agent-guide-for-juniors","status":"publish","type":"post","link":"https:\/\/dps.media\/en\/optimize-pagespeed-with-ai-agent-guide-for-juniors\/","title":{"rendered":"Optimize PageSpeed with AI Agents \u2014 A Guide for Juniors"},"content":{"rendered":"<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Google+Sans:wght@400;500;700&family=Google+Sans+Mono:wght@400;500;700&display=swap');\n\n#dps-isolated-root * { margin: 0; padding: 0; box-sizing: border-box; font-family: inherit; }\n\n#dps-isolated-root {\n  --bg:      #f8f9fb;\n  --bg2:     #ffffff;\n  --bg3:     #f1f3f7;\n  --border:  #e2e6ed;\n  --border2: #c8d0dc;\n  --green:   #0d7a55;\n  --green-bg:#e6f4ef;\n  --green-bd:#b2d8c8;\n  --amber:   #b45309;\n  --amber-bg:#fef3e2;\n  --amber-bd:#f6d49a;\n  --red:     #c0152a;\n  --red-bg:  #fde8eb;\n  --blue:    #1a56c4;\n  --blue-bg: #e8effc;\n  --blue-bd: #bad0f5;\n  --text:    #111827;\n  --text2:   #374151;\n  --text3:   #6b7280;\n  --mono: 'Google Sans Mono', 'Courier New', monospace;\n  background: var(--bg);\n  color: var(--text);\n  font-family: 'Google Sans', 'Segoe UI', sans-serif;\n  line-height: 1.6;\n  min-height: 100vh;\n  overflow-x: hidden;\n}\n\n#dps-isolated-root .dps-i-wrap {\n  max-width: 960px;\n  margin: 0 auto;\n  padding: 0 24px;\n}\n\n\/* HERO *\/\n#dps-isolated-root .dps-i-hero {\n  background: #fff;\n  border-bottom: 1px solid var(--border);\n  padding: 64px 24px 56px;\n  position: relative;\n  overflow: hidden;\n}\n#dps-isolated-root .dps-i-hero-grid {\n  position: absolute; inset: 0;\n  background-image:\n    linear-gradient(rgba(13,122,85,0.05) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(13,122,85,0.05) 1px, transparent 1px);\n  background-size: 36px 36px;\n  pointer-events: none;\n}\n#dps-isolated-root .dps-i-hero-inner { max-width:960px; margin:0 auto; position:relative; }\n#dps-isolated-root .dps-i-badge {\n  display: inline-flex; align-items:center; gap:8px;\n  background: var(--green-bg); border:1px solid var(--green-bd);\n  border-radius:4px; padding:5px 12px;\n  font-family:var(--mono); font-size:11px; color:var(--green);\n  letter-spacing:0.1em; text-transform:uppercase;\n  margin-bottom:24px; animation:dps-fadein .5s ease both;\n}\n#dps-isolated-root .dps-i-badge-dot {\n  width:6px; height:6px; border-radius:50%; background:var(--green);\n  animation:dps-pulse 2s ease infinite;\n}\n@keyframes dps-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.6)} }\n@keyframes dps-fadein { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }\n\n#dps-isolated-root .dps-i-h1 {\n  font-family:'Google Sans',sans-serif;\n  font-size:clamp(1.9rem,4.5vw,3rem); font-weight:700;\n  line-height:1.18; letter-spacing:-.025em; color:var(--text);\n  margin-bottom:18px; animation:dps-fadein .55s .08s ease both;\n}\n#dps-isolated-root .dps-i-h1-accent { color:var(--green); }\n#dps-isolated-root .dps-i-hero-desc {\n  font-size:1.05rem; color:var(--text2); max-width:620px;\n  line-height:1.75; margin-bottom:36px;\n  animation:dps-fadein .55s .16s ease both;\n}\n#dps-isolated-root .dps-i-hero-meta {\n  display:flex; gap:36px; flex-wrap:wrap;\n  animation:dps-fadein .55s .24s ease both;\n}\n#dps-isolated-root .dps-i-meta-item { display:flex; flex-direction:column; gap:3px; }\n#dps-isolated-root .dps-i-meta-val { font-family:var(--mono); font-size:1.6rem; font-weight:700; color:var(--green); }\n#dps-isolated-root .dps-i-meta-label { font-family:var(--mono); font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.1em; }\n\n\/* MASTER PROMPT BANNER *\/\n#dps-isolated-root .dps-i-master-banner { background:var(--green); }\n#dps-isolated-root .dps-i-master-inner {\n  max-width:960px; margin:0 auto; padding:20px 24px;\n  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;\n}\n#dps-isolated-root .dps-i-master-label { font-size:.9rem; font-weight:600; color:#fff; }\n#dps-isolated-root .dps-i-master-sub { font-size:.78rem; color:rgba(255,255,255,.75); margin-top:2px; font-family:var(--mono); }\n#dps-isolated-root .dps-i-master-btn {\n  display:inline-flex; align-items:center; gap:8px;\n  background:#fff; color:var(--green); border:none; border-radius:6px;\n  padding:10px 20px; font-family:'Google Sans',sans-serif;\n  font-size:.88rem; font-weight:700; cursor:pointer; white-space:nowrap;\n  transition:background .15s,transform .15s; flex-shrink:0;\n}\n#dps-isolated-root .dps-i-master-btn:hover { background:#e6f4ef; transform:translateY(-1px); }\n#dps-isolated-root .dps-i-master-btn.dps-copied { background:#d4f0e4; color:#0a6044; }\n#dps-isolated-root .dps-i-master-src { display:none; }\n\n\/* WARN \/ INFO *\/\n#dps-isolated-root .dps-i-warn {\n  margin:32px 0;\n  background:var(--amber-bg); border:1px solid var(--amber-bd);\n  border-left:3px solid var(--amber); border-radius:6px;\n  padding:14px 18px; display:flex; gap:12px; align-items:flex-start;\n}\n#dps-isolated-root .dps-i-warn-icon { font-size:17px; flex-shrink:0; line-height:1.5; }\n#dps-isolated-root .dps-i-warn-text { font-size:.84rem; color:var(--amber); line-height:1.65; font-family:var(--mono); }\n#dps-isolated-root .dps-i-warn-text strong { color:#92400e; font-weight:700; }\n\n#dps-isolated-root .dps-i-info {\n  margin-top:12px; background:var(--blue-bg);\n  border:1px solid var(--blue-bd); border-radius:5px;\n  padding:10px 14px; font-family:var(--mono);\n  font-size:.78rem; color:var(--blue); line-height:1.65;\n}\n\n\/* SECTION *\/\n#dps-isolated-root .dps-i-section { padding:56px 0; border-bottom:1px solid var(--border); }\n#dps-isolated-root .dps-i-section-label {\n  font-family:var(--mono); font-size:10px; letter-spacing:.15em;\n  text-transform:uppercase; color:var(--text3); margin-bottom:6px;\n}\n#dps-isolated-root .dps-i-h2 {\n  font-family:'Google Sans',sans-serif; font-size:1.55rem;\n  font-weight:700; color:var(--text); margin-bottom:28px; letter-spacing:-.01em;\n}\n#dps-isolated-root .dps-i-h2-line {\n  display:inline-block; width:28px; height:2px;\n  background:var(--green); vertical-align:middle; margin-right:10px;\n}\n\n\/* STEPS *\/\n#dps-isolated-root .dps-i-steps { display:flex; flex-direction:column; gap:6px; }\n#dps-isolated-root .dps-i-step {\n  background:var(--bg2); border:1px solid var(--border);\n  border-radius:8px; overflow:hidden; transition:border-color .2s,box-shadow .2s;\n}\n#dps-isolated-root .dps-i-step:hover { border-color:var(--border2); box-shadow:0 2px 8px rgba(0,0,0,.06); }\n#dps-isolated-root .dps-i-step.dps-open { border-color:var(--green-bd); box-shadow:0 2px 12px rgba(13,122,85,.08); }\n#dps-isolated-root .dps-i-step-header {\n  display:flex; align-items:center; gap:14px;\n  padding:16px 18px; cursor:pointer; user-select:none;\n}\n#dps-isolated-root .dps-i-step-num {\n  font-family:var(--mono); font-size:10px; font-weight:700; color:var(--green);\n  background:var(--green-bg); border:1px solid var(--green-bd);\n  border-radius:4px; padding:3px 8px; flex-shrink:0; letter-spacing:.06em;\n}\n#dps-isolated-root .dps-i-step-title { font-size:.95rem; font-weight:600; color:var(--text); flex:1; }\n#dps-isolated-root .dps-i-step-arrow { font-size:11px; color:var(--text3); transition:transform .22s; flex-shrink:0; }\n#dps-isolated-root .dps-i-step.dps-open .dps-i-step-arrow { transform:rotate(180deg); }\n#dps-isolated-root .dps-i-step-body { display:none; padding:0 18px 20px 52px; border-top:1px solid var(--border); }\n#dps-isolated-root .dps-i-step.dps-open .dps-i-step-body { display:block; }\n#dps-isolated-root .dps-i-step-body-inner { padding-top:16px; }\n\n\/* CHECKLIST *\/\n#dps-isolated-root .dps-i-checklist { display:flex; flex-direction:column; gap:10px; margin-top:10px; }\n#dps-isolated-root .dps-i-check-item {\n  display:flex; align-items:flex-start; gap:10px;\n  font-size:.875rem; color:var(--text2); line-height:1.55;\n}\n#dps-isolated-root .dps-i-check-mark {\n  width:17px; height:17px; border-radius:50%;\n  border:1.5px solid var(--green-bd); background:var(--green-bg);\n  display:flex; align-items:center; justify-content:center;\n  flex-shrink:0; margin-top:2px;\n}\n#dps-isolated-root .dps-i-check-mark-inner { width:6px; height:6px; border-radius:50%; background:var(--green); }\n#dps-isolated-root .dps-i-check-item strong { color:var(--text); }\n#dps-isolated-root .dps-i-check-item code {\n  font-family:var(--mono); font-size:.78rem;\n  background:var(--bg3); border:1px solid var(--border);\n  border-radius:3px; padding:1px 5px; color:var(--text);\n}\n\n\/* LINT GRID *\/\n#dps-isolated-root .dps-i-lint-grid {\n  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px;\n}\n#dps-isolated-root .dps-i-lint-card {\n  background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:12px 14px;\n}\n#dps-isolated-root .dps-i-lint-lang {\n  font-family:var(--mono); font-size:10px; font-weight:700;\n  text-transform:uppercase; letter-spacing:.1em; color:var(--text3); margin-bottom:6px;\n}\n#dps-isolated-root .dps-i-lint-cmd {\n  font-family:var(--mono); font-size:.78rem; color:var(--blue);\n  background:var(--blue-bg); border:1px solid var(--blue-bd);\n  border-radius:4px; padding:5px 9px; display:block; line-height:1.5;\n}\n\n\/* GATES *\/\n#dps-isolated-root .dps-i-gates { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }\n#dps-isolated-root .dps-i-gate {\n  background:var(--bg2); border:1px solid var(--border);\n  border-radius:8px; padding:20px; position:relative; overflow:hidden;\n}\n#dps-isolated-root .dps-i-gate::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; }\n#dps-isolated-root .dps-i-gate-1::before { background:var(--amber); }\n#dps-isolated-root .dps-i-gate-2::before { background:var(--blue); }\n#dps-isolated-root .dps-i-gate-3::before { background:var(--green); }\n#dps-isolated-root .dps-i-gate-label { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:7px; font-weight:700; }\n#dps-isolated-root .dps-i-gate-1 .dps-i-gate-label { color:var(--amber); }\n#dps-isolated-root .dps-i-gate-2 .dps-i-gate-label { color:var(--blue); }\n#dps-isolated-root .dps-i-gate-3 .dps-i-gate-label { color:var(--green); }\n#dps-isolated-root .dps-i-gate-name { font-size:.93rem; font-weight:700; color:var(--text); margin-bottom:6px; }\n#dps-isolated-root .dps-i-gate-who { font-size:.78rem; color:var(--text3); font-family:var(--mono); line-height:1.6; }\n\n\/* PRIORITY *\/\n#dps-isolated-root .dps-i-priority-list { display:flex; flex-direction:column; gap:8px; }\n#dps-isolated-root .dps-i-prio-item {\n  display:flex; align-items:center; gap:16px;\n  background:var(--bg2); border:1px solid var(--border);\n  border-radius:8px; padding:14px 18px; transition:border-color .18s,transform .18s;\n}\n#dps-isolated-root .dps-i-prio-item:hover { border-color:var(--border2); transform:translateX(4px); }\n#dps-isolated-root .dps-i-prio-rank { font-family:var(--mono); font-size:1.3rem; font-weight:700; min-width:32px; text-align:center; }\n#dps-isolated-root .dps-i-prio-rank-1 { color:var(--red); }\n#dps-isolated-root .dps-i-prio-rank-2 { color:var(--amber); }\n#dps-isolated-root .dps-i-prio-rank-3 { color:var(--blue); }\n#dps-isolated-root .dps-i-prio-rank-4 { color:var(--green); }\n#dps-isolated-root .dps-i-prio-content { flex:1; }\n#dps-isolated-root .dps-i-prio-name { font-size:.93rem; font-weight:600; color:var(--text); margin-bottom:3px; }\n#dps-isolated-root .dps-i-prio-desc { font-size:.78rem; color:var(--text3); font-family:var(--mono); }\n#dps-isolated-root .dps-i-prio-impact {\n  font-family:var(--mono); font-size:.7rem; padding:3px 9px;\n  border-radius:4px; border:1px solid; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap;\n}\n#dps-isolated-root .dps-i-impact-critical { color:var(--red); border-color:#fbb6c0; background:var(--red-bg); }\n#dps-isolated-root .dps-i-impact-high { color:var(--amber); border-color:var(--amber-bd); background:var(--amber-bg); }\n#dps-isolated-root .dps-i-impact-med { color:var(--blue); border-color:var(--blue-bd); background:var(--blue-bg); }\n#dps-isolated-root .dps-i-impact-low { color:var(--green); border-color:var(--green-bd); background:var(--green-bg); }\n\n\/* PROMPT CARDS *\/\n#dps-isolated-root .dps-i-prompts { display:flex; flex-direction:column; gap:14px; }\n#dps-isolated-root .dps-i-prompt-card {\n  background:var(--bg2); border:1px solid var(--border); border-radius:8px; overflow:hidden;\n}\n#dps-isolated-root .dps-i-prompt-header {\n  display:flex; align-items:center; justify-content:space-between;\n  padding:9px 14px; background:var(--bg3); border-bottom:1px solid var(--border);\n}\n#dps-isolated-root .dps-i-prompt-tag { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--text3); }\n#dps-isolated-root .dps-i-copy-btn {\n  font-family:var(--mono); font-size:10px; color:var(--green);\n  background:var(--green-bg); border:1px solid var(--green-bd);\n  border-radius:4px; padding:3px 10px; cursor:pointer;\n  letter-spacing:.05em; transition:background .15s;\n}\n#dps-isolated-root .dps-i-copy-btn:hover { background:#cdeee2; }\n#dps-isolated-root .dps-i-copy-btn.dps-copied { background:var(--green); color:#fff; border-color:var(--green); }\n#dps-isolated-root .dps-i-prompt-body {\n  padding:16px; font-family:var(--mono); font-size:.79rem;\n  color:var(--text2); line-height:1.8; white-space:pre-wrap; background:#fdfdfe;\n}\n#dps-isolated-root .dps-i-prompt-kw { color:var(--green); font-weight:700; }\n#dps-isolated-root .dps-i-prompt-str { color:var(--blue); }\n#dps-isolated-root .dps-i-prompt-warn { color:var(--red); font-weight:700; }\n\n\/* OUTPUT *\/\n#dps-isolated-root .dps-i-output-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }\n#dps-isolated-root .dps-i-output-card {\n  background:var(--bg2); border:1px solid var(--border);\n  border-radius:8px; padding:16px 18px; display:flex; gap:14px; align-items:flex-start;\n}\n#dps-isolated-root .dps-i-output-icon { font-size:20px; flex-shrink:0; line-height:1.3; }\n#dps-isolated-root .dps-i-output-name { font-family:var(--mono); font-size:.79rem; font-weight:700; color:var(--text); margin-bottom:4px; }\n#dps-isolated-root .dps-i-output-desc { font-size:.78rem; color:var(--text3); line-height:1.5; }\n\n\/* ROLLBACK *\/\n#dps-isolated-root .dps-i-rollback { display:flex; flex-direction:column; position:relative; }\n#dps-isolated-root .dps-i-rollback::before {\n  content:''; position:absolute; left:13px; top:24px; bottom:24px;\n  width:1px; background:var(--border2);\n}\n#dps-isolated-root .dps-i-rb-item { display:flex; align-items:flex-start; gap:16px; padding:12px 0; position:relative; }\n#dps-isolated-root .dps-i-rb-dot {\n  width:28px; height:28px; border-radius:50%;\n  background:var(--red-bg); border:1.5px solid #fbb6c0;\n  display:flex; align-items:center; justify-content:center;\n  flex-shrink:0; font-family:var(--mono); font-size:10px; font-weight:700; color:var(--red); z-index:1;\n}\n#dps-isolated-root .dps-i-rb-content { padding-top:3px; }\n#dps-isolated-root .dps-i-rb-title { font-size:.9rem; font-weight:600; color:var(--text); margin-bottom:4px; }\n#dps-isolated-root .dps-i-rb-desc { font-size:.8rem; color:var(--text3); font-family:var(--mono); line-height:1.6; }\n\n\/* FOOTER *\/\n#dps-isolated-root .dps-i-footer { padding:36px 0; text-align:center; }\n#dps-isolated-root .dps-i-footer-text { font-family:var(--mono); font-size:.75rem; color:var(--text3); }\n#dps-isolated-root .dps-i-footer-brand { color:var(--green); font-weight:700; }\n\n\/* RESPONSIVE *\/\n@media (max-width:640px) {\n  #dps-isolated-root .dps-i-gates,\n  #dps-isolated-root .dps-i-output-grid,\n  #dps-isolated-root .dps-i-lint-grid { grid-template-columns:1fr; }\n  #dps-isolated-root .dps-i-step-body { padding-left:18px; }\n  #dps-isolated-root .dps-i-hero { padding:44px 24px 36px; }\n  #dps-isolated-root .dps-i-master-inner { flex-direction:column; align-items:flex-start; }\n}\n<\/style>\n\n<div id=\"dps-isolated-root\">\n\n  <!-- HERO -->\n  <div class=\"dps-i-hero\">\n    <div class=\"dps-i-hero-grid\" aria-hidden=\"true\"><\/div>\n    <div class=\"dps-i-hero-inner dps-i-wrap\">\n      <div class=\"dps-i-badge\">\n        <div class=\"dps-i-badge-dot\" aria-hidden=\"true\"><\/div>\n        SOP v1.1 \u2014 Claude Code Agent\n      <\/div>\n      <div class=\"dps-i-h1\">\n        Optimization <span class=\"dps-i-h1-accent\">PageSpeed<\/span><br>\n        with AI Agent \u2014<br>\n        Guide for Juniors\n      <\/div>\n      <div class=\"dps-i-hero-desc\">\n        Standard procedure for running Claude Code agent to optimize Lighthouse scores for WordPress themes. Includes approval gates, lint checks before deployment, and rollbacks \u2014 no fear of breaking the live site.\n      <\/div>\n      <div class=\"dps-i-hero-meta\">\n        <div class=\"dps-i-meta-item\">\n          <span class=\"dps-i-meta-val\">7<\/span>\n          <span class=\"dps-i-meta-label\">Implementation Steps<\/span>\n        <\/div>\n        <div class=\"dps-i-meta-item\">\n          <span class=\"dps-i-meta-val\">3<\/span>\n          <span class=\"dps-i-meta-label\">Approval Gate<\/span>\n        <\/div>\n        <div class=\"dps-i-meta-item\">\n          <span class=\"dps-i-meta-val\">lint<\/span>\n          <span class=\"dps-i-meta-label\">Pass before FTP<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- MASTER PROMPT BANNER -->\n  <div class=\"dps-i-master-banner\">\n    <div class=\"dps-i-master-inner\">\n      <div>\n        <div class=\"dps-i-master-label\">\ud83d\ude80 Master Prompt \u2014 Send directly to Claude Code<\/div>\n        <div class=\"dps-i-master-sub\">A single prompt, the agent runs the full flow: audit \u2192 lint \u2192 fix \u2192 gate \u2192 verify<\/div>\n      <\/div>\n      <button class=\"dps-i-master-btn\" id=\"dps-master-copy-btn\" aria-label=\"Copy master prompt to Claude Code\">\n        <span aria-hidden=\"true\">\ud83d\udccb<\/span> Copy Master Prompt\n      <\/button>\n    <\/div>\n  <\/div>\n\n  <!-- HIDDEN SOURCE FOR MASTER PROMPT -->\n  <div class=\"dps-i-master-src\" id=\"dps-master-prompt\" aria-hidden=\"true\">=== PAGESPEED OPTIMIZATION AGENT \u2014 MASTER PROMPT ===\\nLive URL: [URL_LIVE]\\nTheme path: \/wp-content\/themes\/[THEME_NAME]\\nFTP host: [FTP_HOST] | user: [FTP_USER]\\n(Only use FTP credentials after Gate 2 is approved)\\n\\nSTEP 1 \u2014 AUDIT\\n\u2013 Remind user to disable cache plugins and confirm X-Cache: MISS before running\\n\u2013 Run Lighthouse mobile + desktop for the live URL\\n\u2013 Export reports: lighthouse-before-mobile.report.json and lighthouse-before-desktop.report.html\\n\u2013 Map each error to specific files in the theme, listing top 10 issues by impact\\n\\nSTEP 2 \u2014 PLAN (STOP \u2014 wait for Gate 1 approval)\\n\u2013 Propose fixes ONLY within the theme, NO changes to layout or functionality\\n\u2013 DO NOT add\/remove JS\/CSS from external domains\\n\u2013 Fix in order: LCP \u2192 TBT \u2192 CLS \u2192 INP\\n\u2013 List every file to be modified, what will be changed, and why\\n\u2013 Write \u201cWaiting Gate 1 approve\u201d and wait for confirmation\\n\\nSTEP 3 \u2014 LOCAL FIX + LINT (after Gate 1 approval)\\n\u2013 Modify files locally according to the approved plan\\n\u2013 After modifying, run lint\/syntax checks:\\n  * PHP:  php -l [file.php] for all modified PHP files\\n  * CSS:  npx stylelint [file.css]\\n  * JS:   npx eslint [file.js]\\n\u2013 If lint reports errors \u2192 fix all \u2192 rerun until clean pass\\n\u2013 Report lint results (pass\/fail per file) and patch list\\n\u2013 Write \u201cWaiting Gate 2 approve\u201d and wait for confirmation\\n\\nSTEP 4 \u2014 FTP DEPLOY (after Gate 2 approval)\\n\u2013 Backup remote files to: \/wp-content\/themes\/backup\/[YYYY-MM-DD]\/\\n\u2013 Upload lint-passed files via FTP\\n\u2013 Verify live HTML after upload\\n\\nSTEP 5 \u2014 VERIFY (STOP \u2014 wait for Gate 3 approval)\\n\u2013 Purge cache, run Lighthouse mobile + desktop again\\n\u2013 Record results in SEO_AUDIT[YYYY-MM-DD].md\\n  (before\/after scores, fixed\/unfixed errors, modified files, rollback path)\\n\u2013 If any score decreases: report immediately, DO NOT auto-rollback\\n\u2013 Write \u201cWaiting Gate 3 approve\u201d\\n\\nMANDATORY CONSTRAINTS:\\n\u2013 Do not modify any layout or functionality\\n\u2013 Do not add\/remove assets from external domains\\n\u2013 Do not FTP until lint passes cleanly\\n\u2013 Do not skip approval gates<\/div>\n\n  <!-- WARNING -->\n  <div class=\"dps-i-wrap\">\n    <div class=\"dps-i-warn\">\n      <div class=\"dps-i-warn-icon\" aria-hidden=\"true\">\u26a0<\/div>\n      <div class=\"dps-i-warn-text\">\n        <strong>LINT GATE:<\/strong> After local fixes, the agent must run lint\/syntax checks on all modified files. FTP to live is only allowed when all lint checks pass cleanly. No exceptions.\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- STEPS -->\n  <div class=\"dps-i-wrap\">\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">Workflow<\/div>\n      <div class=\"dps-i-h2\"><span class=\"dps-i-h2-line\" aria-hidden=\"true\"><\/span>Step-by-step process<\/div>\n      <div class=\"dps-i-steps\" id=\"dps-steps-container\">\n\n        <div class=\"dps-i-step dps-open\" data-step=\"0\">\n          <div class=\"dps-i-step-header\" role=\"button\" aria-expanded=\"true\" tabindex=\"0\">\n            <span class=\"dps-i-step-num\">STEP 01<\/span>\n            <span class=\"dps-i-step-title\">Disable cache \u2014 confirm MISS before audit<\/span>\n            <span class=\"dps-i-step-arrow\" aria-hidden=\"true\">\u25bc<\/span>\n          <\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-body-inner\">\n              <div class=\"dps-i-checklist\">\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>Disable plugin cache: <strong>LiteSpeed \/ WP Rocket \/ SG Optimizer<\/strong>.<\/span>\n                <\/div>\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>If cannot disable: enable <strong>Development Mode<\/strong> + purge all cache + purge CDN.<\/span>\n                <\/div>\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>Confirm via response header: must see <code>X-Cache: MISS<\/code> 5px <code>cf-cache-status: MISS<\/code> before running Lighthouse.<\/span>\n                <\/div>\n              <\/div>\n              <div class=\"dps-i-info\">\ud83d\udca1 DevTools \u2192 Network tab \u2192 reload \u2192 check document request headers. If HIT, purge again.<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"dps-i-step\" data-step=\"1\">\n          <div class=\"dps-i-step-header\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">\n            <span class=\"dps-i-step-num\">STEP 02<\/span>\n            <span class=\"dps-i-step-title\">Create narrow-scope FTP account for theme<\/span>\n            <span class=\"dps-i-step-arrow\" aria-hidden=\"true\">\u25bc<\/span>\n          <\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-body-inner\">\n              <div class=\"dps-i-checklist\">\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>Create FTP user <strong>pointing only to the theme folder<\/strong>: <code>\/wp-content\/themes\/theme-name<\/code><\/span>\n                <\/div>\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>Permissions: read\/write within theme. Do not allow access to <code>\/plugins<\/code>, <code>\/uploads<\/code>, <code>wp-config.php<\/code>.<\/span>\n                <\/div>\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>Save credentials in <strong>secret manager<\/strong>. Only paste into prompt after Gate 2 approval.<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"dps-i-step\" data-step=\"2\">\n          <div class=\"dps-i-step-header\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">\n            <span class=\"dps-i-step-num\">STEP 03<\/span>\n            <span class=\"dps-i-step-title\">Fix local \u2192 lint\/syntax check \u2192 pass then FTP<\/span>\n            <span class=\"dps-i-step-arrow\" aria-hidden=\"true\">\u25bc<\/span>\n          <\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-body-inner\">\n              <div class=\"dps-i-checklist\">\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>Clone\/download theme to local. Agent modifies local files according to approved plan.<\/span>\n                <\/div>\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span><strong>Why fix local first?<\/strong> To catch syntax errors before deployment \u2014 avoiding PHP fatal errors, CSS parse fails, or broken JS that whitescreens the live site immediately after FTP.<\/span>\n                <\/div>\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>After finishing fixes: <strong>run lint on all modified files<\/strong>. Only request Gate 2 + FTP when all pass cleanly.<\/span>\n                <\/div>\n              <\/div>\n              <div class=\"dps-i-lint-grid\">\n                <div class=\"dps-i-lint-card\">\n                  <div class=\"dps-i-lint-lang\">PHP<\/div>\n                  <code class=\"dps-i-lint-cmd\">php -l file-name.php<\/code>\n                <\/div>\n                <div class=\"dps-i-lint-card\">\n                  <div class=\"dps-i-lint-lang\">CSS<\/div>\n                  <code class=\"dps-i-lint-cmd\">npx stylelint style.css<\/code>\n                <\/div>\n                <div class=\"dps-i-lint-card\">\n                  <div class=\"dps-i-lint-lang\">JS<\/div>\n                  <code class=\"dps-i-lint-cmd\">npx eslint script.js<\/code>\n                <\/div>\n              <\/div>\n              <div class=\"dps-i-info\">\ud83d\udeab Lint reports error \u2192 fix \u2192 rerun \u2192 pass \u2192 then request Gate 2 approval and FTP.<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"dps-i-step\" data-step=\"3\">\n          <div class=\"dps-i-step-header\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">\n            <span class=\"dps-i-step-num\">STEP 04<\/span>\n            <span class=\"dps-i-step-title\">Run Lighthouse audit \u2014 map errors to files<\/span>\n            <span class=\"dps-i-step-arrow\" aria-hidden=\"true\">\u25bc<\/span>\n          <\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-body-inner\">\n              <div class=\"dps-i-checklist\">\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>Run both <strong>mobile + desktop<\/strong>, export JSON and HTML reports.<\/span>\n                <\/div>\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>If staging has HTTP Basic Auth: pass <code>--extra-headers<\/code> in Lighthouse CLI.<\/span>\n                <\/div>\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>Map each error \u2192 <strong>exact file and line<\/strong> in the theme causing the issue.<\/span>\n                <\/div>\n              <\/div>\n              <div class=\"dps-i-info\">\ud83d\udcc1 Save: <code>lighthouse-before-mobile.report.json<\/code> and <code>lighthouse-before-desktop.report.html<\/code><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"dps-i-step\" data-step=\"4\">\n          <div class=\"dps-i-step-header\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">\n            <span class=\"dps-i-step-num\">STEP 05<\/span>\n            <span class=\"dps-i-step-title\">Agent writes plan \u2014 Gate 1 approval before fixing<\/span>\n            <span class=\"dps-i-step-arrow\" aria-hidden=\"true\">\u25bc<\/span>\n          <\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-body-inner\">\n              <div class=\"dps-i-checklist\">\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>Agent proposes fixes <strong>only within the theme<\/strong>, without changing layout or functionality.<\/span>\n                <\/div>\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span><strong>Must not<\/strong> add\/remove JS\/CSS from external domains. Only optimize assets already in the theme.<\/span>\n                <\/div>\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>Agent writes detailed plan \u2192 stop \u2192 <strong>Lead\/PM approve Gate 1<\/strong> \u2192 then start fixing.<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"dps-i-step\" data-step=\"5\">\n          <div class=\"dps-i-step-header\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">\n            <span class=\"dps-i-step-num\">STEP 06<\/span>\n            <span class=\"dps-i-step-title\">Lint pass + Gate 2 approval \u2192 FTP deploy<\/span>\n            <span class=\"dps-i-step-arrow\" aria-hidden=\"true\">\u25bc<\/span>\n          <\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-body-inner\">\n              <div class=\"dps-i-checklist\">\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>Agent reports <strong>lint pass results + patch list<\/strong> \u2192 Lead review \u2192 approve Gate 2.<\/span>\n                <\/div>\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>Backup remote files to <code>\/wp-content\/themes\/_backup\/YYYY-MM-DD\/<\/code> before overwriting.<\/span>\n                <\/div>\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>Upload FTP \u2192 verify live HTML to confirm correct deployment.<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"dps-i-step\" data-step=\"6\">\n          <div class=\"dps-i-step-header\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">\n            <span class=\"dps-i-step-num\">STEP 07<\/span>\n            <span class=\"dps-i-step-title\">Rerun Lighthouse \u2014 Gate 3 verify results<\/span>\n            <span class=\"dps-i-step-arrow\" aria-hidden=\"true\">\u25bc<\/span>\n          <\/div>\n          <div class=\"dps-i-step-body\">\n            <div class=\"dps-i-step-body-inner\">\n              <div class=\"dps-i-checklist\">\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>Purge cache, run Lighthouse mobile + desktop again.<\/span>\n                <\/div>\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>Record before\/after results in <code>SEO_AUDIT_YYYY-MM-DD.md<\/code>.<\/span>\n                <\/div>\n                <div class=\"dps-i-check-item\">\n                  <div class=\"dps-i-check-mark\"><div class=\"dps-i-check-mark-inner\"><\/div><\/div>\n                  <span>Client or QA approve Gate 3. If there is regression \u2192 report immediately, do not auto-rollback.<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- GATES -->\n  <div class=\"dps-i-wrap\">\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">Quality Control<\/div>\n      <div class=\"dps-i-h2\"><span class=\"dps-i-h2-line\" aria-hidden=\"true\"><\/span>3 Approval Gates<\/div>\n      <div class=\"dps-i-gates\">\n        <div class=\"dps-i-gate dps-i-gate-1\">\n          <div class=\"dps-i-gate-label\">Gate 1<\/div>\n          <div class=\"dps-i-gate-name\">Approve Plan<\/div>\n          <div class=\"dps-i-gate-who\">Reviewer: Lead \/ PM<br>Before agent starts modifying local code<\/div>\n        <\/div>\n        <div class=\"dps-i-gate dps-i-gate-2\">\n          <div class=\"dps-i-gate-label\">Gate 2<\/div>\n          <div class=\"dps-i-gate-name\">Approve Patch List<\/div>\n          <div class=\"dps-i-gate-who\">Reviewer: Lead \/ PM<br>After lint pass \u2014 before FTP to live<\/div>\n        <\/div>\n        <div class=\"dps-i-gate dps-i-gate-3\">\n          <div class=\"dps-i-gate-label\">Gate 3<\/div>\n          <div class=\"dps-i-gate-name\">Approve Results<\/div>\n          <div class=\"dps-i-gate-who\">Reviewer: Client \/ QA<br>After deploy \u2014 after re-measuring Lighthouse<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- PRIORITY -->\n  <div class=\"dps-i-wrap\">\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">Priority Order<\/div>\n      <div class=\"dps-i-h2\"><span class=\"dps-i-h2-line\" aria-hidden=\"true\"><\/span>What to fix first?<\/div>\n      <div class=\"dps-i-priority-list\">\n        <div class=\"dps-i-prio-item\">\n          <div class=\"dps-i-prio-rank dps-i-prio-rank-1\">1<\/div>\n          <div class=\"dps-i-prio-content\">\n            <div class=\"dps-i-prio-name\">LCP \u2014 Largest Contentful Paint<\/div>\n            <div class=\"dps-i-prio-desc\">Hero image missing preload, font blocking render<\/div>\n          <\/div>\n          <div class=\"dps-i-prio-impact dps-i-impact-critical\">Critical<\/div>\n        <\/div>\n        <div class=\"dps-i-prio-item\">\n          <div class=\"dps-i-prio-rank dps-i-prio-rank-2\">2<\/div>\n          <div class=\"dps-i-prio-content\">\n            <div class=\"dps-i-prio-name\">TBT \u2014 Total Blocking Time<\/div>\n            <div class=\"dps-i-prio-desc\">Render-blocking JS\/CSS \u2014 this is the main issue, not images<\/div>\n          <\/div>\n          <div class=\"dps-i-prio-impact dps-i-impact-high\">High<\/div>\n        <\/div>\n        <div class=\"dps-i-prio-item\">\n          <div class=\"dps-i-prio-rank dps-i-prio-rank-3\">3<\/div>\n          <div class=\"dps-i-prio-content\">\n            <div class=\"dps-i-prio-name\">CLS \u2014 Cumulative Layout Shift<\/div>\n            <div class=\"dps-i-prio-desc\">Elements missing width\/height, font swap causing layout shifts<\/div>\n          <\/div>\n          <div class=\"dps-i-prio-impact dps-i-impact-med\">Medium<\/div>\n        <\/div>\n        <div class=\"dps-i-prio-item\">\n          <div class=\"dps-i-prio-rank dps-i-prio-rank-4\">4<\/div>\n          <div class=\"dps-i-prio-content\">\n            <div class=\"dps-i-prio-name\">INP \u2014 Interaction to Next Paint<\/div>\n            <div class=\"dps-i-prio-desc\">Long JS tasks slowing down response when user clicks\/types<\/div>\n          <\/div>\n          <div class=\"dps-i-prio-impact dps-i-impact-low\">Low<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"dps-i-warn\" style=\"margin-top:18px;\">\n        <div class=\"dps-i-warn-icon\" aria-hidden=\"true\">\ud83d\udca1<\/div>\n        <div class=\"dps-i-warn-text\" style=\"color:var(--blue);\">\n          <strong style=\"color:#1e40af;\">Note:<\/strong> Don't let the agent focus on optimizing images while render-blocking JS is the cause of high TBT. Always read the Lighthouse report and fix in the correct priority order.\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- PROMPTS -->\n  <div class=\"dps-i-wrap\">\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">Copy-paste prompts<\/div>\n      <div class=\"dps-i-h2\"><span class=\"dps-i-h2-line\" aria-hidden=\"true\"><\/span>Step-by-step sample prompts<\/div>\n      <div class=\"dps-i-prompts\">\n\n        <div class=\"dps-i-prompt-card\">\n          <div class=\"dps-i-prompt-header\">\n            <span class=\"dps-i-prompt-tag\">Prompt 1 \u2014 Audit<\/span>\n            <button class=\"dps-i-copy-btn\" data-target=\"prompt-audit\" aria-label=\"Copy audit prompt\">Copy<\/button>\n          <\/div>\n          <div class=\"dps-i-prompt-body\" id=\"prompt-audit\"><span class=\"dps-i-prompt-kw\">Run<\/span> Lighthouse mobile AND desktop for URL: <span class=\"dps-i-prompt-str\">[URL_LIVE]<\/span>\nExport JSON and HTML reports. File name: <span class=\"dps-i-prompt-str\">lighthouse-before-mobile.report.json<\/span>, <span class=\"dps-i-prompt-str\">lighthouse-before-desktop.report.html<\/span>\nMap each error to a file in the theme <span class=\"dps-i-prompt-str\">\/wp-content\/themes\/[THEME_NAME]<\/span>. List the top 10 issues by highest impact.<\/div>\n        <\/div>\n\n        <div class=\"dps-i-prompt-card\">\n          <div class=\"dps-i-prompt-header\">\n            <span class=\"dps-i-prompt-tag\">Prompt 2 \u2014 Plan (Gate 1)<\/span>\n            <button class=\"dps-i-copy-btn\" data-target=\"prompt-plan\" aria-label=\"Copy plan prompt\">Copy<\/button>\n          <\/div>\n          <div class=\"dps-i-prompt-body\" id=\"prompt-plan\">Based on the audit report, write a fix plan: \u2013 Only fix within the theme, <span class=\"dps-i-prompt-warn\">DO NOT<\/span> change layout or functionality \u2013 <span class=\"dps-i-prompt-warn\">DO NOT<\/span> add or remove JS\/CSS from external domains \u2013 Fix in order: LCP \u2192 TBT \u2192 CLS \u2192 INP \u2013 List each file to be modified, what to modify, and why \u2013 <span class=\"dps-i-prompt-warn\">STOP<\/span> \u2014 write \u201cWaiting Gate 1 approve\u201d and wait for confirmation before modifying any files.<\/div>\n        <\/div>\n\n        <div class=\"dps-i-prompt-card\">\n          <div class=\"dps-i-prompt-header\">\n            <span class=\"dps-i-prompt-tag\">Prompt 3 \u2014 Local Fix + Lint<\/span>\n            <button class=\"dps-i-copy-btn\" data-target=\"prompt-lint\" aria-label=\"Copy lint prompt\">Copy<\/button>\n          <\/div>\n          <div class=\"dps-i-prompt-body\" id=\"prompt-lint\">Gate 1 approved. Fix files according to the plan on local. After fixing, <span class=\"dps-i-prompt-kw\">run lint<\/span> for all modified files: \u2013 PHP:  <span class=\"dps-i-prompt-str\">php -l [file-name.php]<\/span>\n\u2013 CSS:  <span class=\"dps-i-prompt-str\">npx stylelint [file-name.css]<\/span>\n\u2013 JS:   <span class=\"dps-i-prompt-str\">npx eslint [file-name.js]<\/span>\n\nIf lint reports errors \u2192 fix all \u2192 rerun until clean pass. Report lint results (pass\/fail per file) and the patch list of files to be deployed.\n<span class=\"dps-i-prompt-warn\">STOP<\/span> \u2014 write \u201cWaiting Gate 2 approve\u201d and wait for confirmation before FTP.<\/div>\n        <\/div>\n\n        <div class=\"dps-i-prompt-card\">\n          <div class=\"dps-i-prompt-header\">\n            <span class=\"dps-i-prompt-tag\">Prompt 4 \u2014 FTP Deploy (Gate 2)<\/span>\n            <button class=\"dps-i-copy-btn\" data-target=\"prompt-deploy\" aria-label=\"Copy deploy prompt\">Copy<\/button>\n          <\/div>\n          <div class=\"dps-i-prompt-body\" id=\"prompt-deploy\">Gate 2 approved. Perform: 1. Backup remote files to: <span class=\"dps-i-prompt-str\">\/wp-content\/themes\/backup\/[YYYY-MM-DD]\/<\/span>\n2. Upload lint-pass files via FTP: <span class=\"dps-i-prompt-str\">[FTP_HOST]<\/span> user: <span class=\"dps-i-prompt-str\">[FTP_USER]<\/span>\n3. Verify live HTML after upload 4. Report the list of uploaded files with rollback paths.<\/div>\n        <\/div>\n\n        <div class=\"dps-i-prompt-card\">\n          <div class=\"dps-i-prompt-header\">\n            <span class=\"dps-i-prompt-tag\">Prompt 5 \u2014 Verify (Gate 3)<\/span>\n            <button class=\"dps-i-copy-btn\" data-target=\"prompt-verify\" aria-label=\"Copy verify prompt\">Copy<\/button>\n          <\/div>\n          <div class=\"dps-i-prompt-body\" id=\"prompt-verify\">Purge cache. Run Lighthouse again (mobile + desktop) for URL: <span class=\"dps-i-prompt-str\">[URL_LIVE]<\/span>\nRecord results in: <span class=\"dps-i-prompt-str\">SEO_AUDIT[YYYY-MM-DD].md<\/span>\nMD file includes: before\/after scores \u00b7 fixed\/unfixed errors \u00b7 modified files \u00b7 rollback path. If any score drops: report immediately, <span class=\"dps-i-prompt-warn\">DO NOT<\/span> self-rollback.\n<span class=\"dps-i-prompt-warn\">STOP<\/span> \u2014 write \u201cWaiting Gate 3 approve\u201d.<\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- OUTPUT -->\n  <div class=\"dps-i-wrap\">\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">Mandatory Deliverables<\/div>\n      <div class=\"dps-i-h2\"><span class=\"dps-i-h2-line\" aria-hidden=\"true\"><\/span>Output must include<\/div>\n      <div class=\"dps-i-output-grid\">\n        <div class=\"dps-i-output-card\">\n          <div class=\"dps-i-output-icon\" aria-hidden=\"true\">\ud83d\udcca<\/div>\n          <div>\n            <div class=\"dps-i-output-name\">lighthouse-before-.report.json\/html<\/div>\n            <div class=\"dps-i-output-desc\">Lighthouse report before fixing, both mobile and desktop<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-output-card\">\n          <div class=\"dps-i-output-icon\" aria-hidden=\"true\">\ud83d\udcc8<\/div>\n          <div>\n            <div class=\"dps-i-output-name\">lighthouse-after-.report.json\/html<\/div>\n            <div class=\"dps-i-output-desc\">Lighthouse report after deploy, compared with before<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-output-card\">\n          <div class=\"dps-i-output-icon\" aria-hidden=\"true\">\u2705<\/div>\n          <div>\n            <div class=\"dps-i-output-name\">Lint pass report<\/div>\n            <div class=\"dps-i-output-desc\">Results of php -l \/ stylelint \/ eslint \u2014 must pass cleanly before FTP<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-output-card\">\n          <div class=\"dps-i-output-icon\" aria-hidden=\"true\">\ud83d\udcdd<\/div>\n          <div>\n            <div class=\"dps-i-output-name\">SEO_AUDIT_YYYY-MM-DD.md<\/div>\n            <div class=\"dps-i-output-desc\">Before\/after scores \u00b7 Fixed\/unfixed errors \u00b7 Modified files \u00b7 Rollback path<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-output-card\">\n          <div class=\"dps-i-output-icon\" aria-hidden=\"true\">\ud83d\udcbe<\/div>\n          <div>\n            <div class=\"dps-i-output-name\">_backup\/YYYY-MM-DD\/<\/div>\n            <div class=\"dps-i-output-desc\">Backup remote files before overwriting, within the theme folder<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- ROLLBACK -->\n  <div class=\"dps-i-wrap\">\n    <div class=\"dps-i-section\">\n      <div class=\"dps-i-section-label\">Troubleshooting<\/div>\n      <div class=\"dps-i-h2\"><span class=\"dps-i-h2-line\" aria-hidden=\"true\"><\/span>Rollback on regression<\/div>\n      <div class=\"dps-i-rollback\">\n        <div class=\"dps-i-rb-item\">\n          <div class=\"dps-i-rb-dot\">R1<\/div>\n          <div class=\"dps-i-rb-content\">\n            <div class=\"dps-i-rb-title\">Confirm regression<\/div>\n            <div class=\"dps-i-rb-desc\">Lighthouse after is lower than before \u2192 regression exists. Report to lead immediately, do not handle alone.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-rb-item\">\n          <div class=\"dps-i-rb-dot\">R2<\/div>\n          <div class=\"dps-i-rb-content\">\n            <div class=\"dps-i-rb-title\">Restore from backup<\/div>\n            <div class=\"dps-i-rb-desc\">Re-upload files in _backup\/YYYY-MM-DD\/ to FTP according to the list in MD.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-rb-item\">\n          <div class=\"dps-i-rb-dot\">R3<\/div>\n          <div class=\"dps-i-rb-content\">\n            <div class=\"dps-i-rb-title\">Purge cache + re-check<\/div>\n            <div class=\"dps-i-rb-desc\">Purge cache + CDN, verify X-Cache: MISS, run a quick Lighthouse to confirm rollback success.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"dps-i-rb-item\">\n          <div class=\"dps-i-rb-dot\">R4<\/div>\n          <div class=\"dps-i-rb-content\">\n            <div class=\"dps-i-rb-title\">Post-mortem<\/div>\n            <div class=\"dps-i-rb-desc\">Record cause in MD, update plan, return to Gate 1 with adjusted plan.<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- FOOTER -->\n  <div class=\"dps-i-wrap\">\n    <div class=\"dps-i-footer\">\n      <div class=\"dps-i-footer-text\">\n        SOP by <span class=\"dps-i-footer-brand\">DPS.MEDIA<\/span> \u00b7 Claude Code Agent Workflow v1.1 \u00b7 Internal use only\n      <\/div>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n\n  \/\/ ACCORDION\n  var steps = document.querySelectorAll('#dps-isolated-root .dps-i-step');\n\n  function closeAll() {\n    var i = 0;\n    while (i < steps.length) {\n      steps[i].classList.remove('dps-open');\n      var h = steps[i].querySelector('.dps-i-step-header');\n      if (h) { h.setAttribute('aria-expanded', 'false'); }\n      i++;\n    }\n  }\n\n  var j = 0;\n  while (j < steps.length) {\n    (function(step) {\n      var header = step.querySelector('.dps-i-step-header');\n      if (header) {\n        header.addEventListener('click', function() {\n          var isOpen = step.classList.contains('dps-open');\n          closeAll();\n          if (!isOpen) {\n            step.classList.add('dps-open');\n            header.setAttribute('aria-expanded', 'true');\n          }\n        });\n        header.addEventListener('keydown', function(e) {\n          if (e.key === 'Enter') { header.click(); }\n          if (e.key === ' ') { e.preventDefault(); header.click(); }\n        });\n      }\n    })(steps[j]);\n    j++;\n  }\n\n  \/\/ COPY HELPER\n  function doCopy(text, btn, labelOrig) {\n    function onSuccess() {\n      btn.textContent = '\u2713 Copied!';\n      btn.classList.add('dps-copied');\n      setTimeout(function() {\n        btn.textContent = labelOrig;\n        btn.classList.remove('dps-copied');\n      }, 1800);\n    }\n    if (navigator.clipboard) {\n      navigator.clipboard.writeText(text).then(onSuccess);\n    } else {\n      var ta = document.createElement('textarea');\n      ta.value = text;\n      document.body.appendChild(ta);\n      ta.select();\n      document.execCommand('copy');\n      document.body.removeChild(ta);\n      onSuccess();\n    }\n  }\n\n  \/\/ INDIVIDUAL COPY BUTTONS\n  var copyBtns = document.querySelectorAll('#dps-isolated-root .dps-i-copy-btn');\n  var k = 0;\n  while (k < copyBtns.length) {\n    (function(btn) {\n      btn.addEventListener('click', function() {\n        var el = document.getElementById(btn.getAttribute('data-target'));\n        if (el) { doCopy(el.innerText, btn, 'Copy'); }\n      });\n    })(copyBtns[k]);\n    k++;\n  }\n\n  \/\/ MASTER PROMPT BUTTON\n  var masterBtn = document.getElementById('dps-master-copy-btn');\n  var masterSrc = document.getElementById('dps-master-prompt');\n  if (masterBtn) {\n    if (masterSrc) {\n      masterBtn.addEventListener('click', function() {\n        doCopy(masterSrc.innerText.trim(), masterBtn, '\ud83d\udccb Copy Master Prompt');\n      });\n    }\n  }\n\n  \/\/ SCROLL REVEAL\n  var secs = document.querySelectorAll('#dps-isolated-root .dps-i-section');\n  if (window.IntersectionObserver) {\n    var obs = new IntersectionObserver(function(entries) {\n      var e = 0;\n      while (e < entries.length) {\n        if (entries[e].isIntersecting) {\n          entries[e].target.style.opacity = '1';\n          entries[e].target.style.transform = 'translateY(0)';\n          obs.unobserve(entries[e].target);\n        }\n        e++;\n      }\n    }, { threshold: 0.07 });\n    var s = 0;\n    while (s < secs.length) {\n      secs[s].style.opacity = '0';\n      secs[s].style.transform = 'translateY(20px)';\n      secs[s].style.transition = 'opacity 0.45s ease, transform 0.45s ease';\n      obs.observe(secs[s]);\n      s++;\n    }\n  }\n\n});\n<\/script>\n<style>\r\n.lwrp.link-whisper-related-posts{\r\n            \r\n            margin-top: 40px;\nmargin-bottom: 30px;\r\n        }\r\n        .lwrp .lwrp-title{\r\n            \r\n            \r\n        }.lwrp .lwrp-description{\r\n            \r\n            \r\n\r\n        }\r\n        .lwrp .lwrp-list-container{\r\n        }\r\n        .lwrp .lwrp-list-multi-container{\r\n            display: flex;\r\n        }\r\n        .lwrp .lwrp-list-double{\r\n            width: 48%;\r\n        }\r\n        .lwrp .lwrp-list-triple{\r\n            width: 32%;\r\n        }\r\n        .lwrp .lwrp-list-row-container{\r\n            display: flex;\r\n            justify-content: space-between;\r\n        }\r\n        .lwrp .lwrp-list-row-container .lwrp-list-item{\r\n            width: calc(33% - 20px);\r\n        }\r\n        .lwrp .lwrp-list-item:not(.lwrp-no-posts-message-item){\r\n            \r\n            max-width: 150px;\r\n        }\r\n        .lwrp .lwrp-list-item img{\r\n            max-width: 100%;\r\n            height: auto;\r\n            object-fit: cover;\r\n            aspect-ratio: 1 \/ 1;\r\n        }\r\n        .lwrp .lwrp-list-item.lwrp-empty-list-item{\r\n            background: initial !important;\r\n        }\r\n        .lwrp .lwrp-list-item .lwrp-list-link .lwrp-list-link-title-text,\r\n        .lwrp .lwrp-list-item .lwrp-list-no-posts-message{\r\n            \r\n            \r\n            \r\n            \r\n        }@media screen and (max-width: 480px) {\r\n            .lwrp.link-whisper-related-posts{\r\n                \r\n                \r\n            }\r\n            .lwrp .lwrp-title{\r\n                \r\n                \r\n            }.lwrp .lwrp-description{\r\n                \r\n                \r\n            }\r\n            .lwrp .lwrp-list-multi-container{\r\n                flex-direction: column;\r\n            }\r\n            .lwrp .lwrp-list-multi-container ul.lwrp-list{\r\n                margin-top: 0px;\r\n                margin-bottom: 0px;\r\n                padding-top: 0px;\r\n                padding-bottom: 0px;\r\n            }\r\n            .lwrp .lwrp-list-double,\r\n            .lwrp .lwrp-list-triple{\r\n                width: 100%;\r\n            }\r\n            .lwrp .lwrp-list-row-container{\r\n                justify-content: initial;\r\n                flex-direction: column;\r\n            }\r\n            .lwrp .lwrp-list-row-container .lwrp-list-item{\r\n                width: 100%;\r\n            }\r\n            .lwrp .lwrp-list-item:not(.lwrp-no-posts-message-item){\r\n                \r\n                max-width: initial;\r\n            }\r\n            .lwrp .lwrp-list-item .lwrp-list-link .lwrp-list-link-title-text,\r\n            .lwrp .lwrp-list-item .lwrp-list-no-posts-message{\r\n                \r\n                \r\n                \r\n                \r\n            };\r\n        }<\/style>\r\n<div id=\"link-whisper-related-posts-widget\" class=\"link-whisper-related-posts lwrp\">\r\n            <div class=\"lwrp-title\">Related Posts<\/div>    \r\n        <div class=\"lwrp-list-container\">\r\n                                <div class=\"lwrp-list lwrp-list-row-container lwrp-list-double-row\">\r\n                <div class=\"lwrp-list-item\"><a href=\"https:\/\/dps.media\/en\/tiktok-instant-page-super-fast-translation-page-in-advertising\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">TikTok Instant Page: Super fast landing page in advertising<\/span><\/a><\/div><div class=\"lwrp-list-item\"><a href=\"https:\/\/dps.media\/en\/build-facebook-zalo-community-for-small-brand\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">Building community (Community Marketing) on Facebook\/Zalo: Unique path for small Brands<\/span><\/a><\/div><div class=\"lwrp-list-item\"><a href=\"https:\/\/dps.media\/en\/comprehensive-marketing-package-service-in-ho-chi-minh-city\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">Comprehensive Marketing Service \u2013 A Complete Development Solution for Businesses<\/span><\/a><\/div>                <\/div>\r\n                            <div class=\"lwrp-list lwrp-list-row-container lwrp-list-double-row\">\r\n                <div class=\"lwrp-list-item\"><a href=\"https:\/\/dps.media\/en\/famous-cosmetics-brand-in-vietnam\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">Top 10 Most Famous Beauty KOCs and KOLs in Vietnam<\/span><\/a><\/div><div class=\"lwrp-list-item\"><a href=\"https:\/\/dps.media\/en\/types-of-affiliate-marketing-methods-to-make-money\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">Types of Affiliate Marketing Methods<\/span><\/a><\/div><div class=\"lwrp-list-item\"><a href=\"https:\/\/dps.media\/en\/guide-to-install-and-use-skill-wordpress-playground-wp-playground-high-level-ai-agent-tool\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">Installation and Usage Guide for WordPress Playground Skill (wp-playground) \u2013 The Ultimate AI Agent Tool<\/span><\/a><\/div>                <\/div>\r\n                <\/div>\r\n<\/div>","protected":false},"excerpt":{"rendered":"<p>SOP v1.1 \u2014 Claude Code Agent T\u1ed1i \u01b0u PageSpeed b\u1eb1ng AI Agent \u2014 H\u01b0\u1edbng d\u1eabn cho Junior Quy tr\u00ecnh chu\u1ea9n ch\u1ea1y Claude Code agent t\u1ed1i \u01b0u \u0111i\u1ec3m Lighthouse cho WordPress theme. C\u00f3 gate approve, lint check tr\u01b0\u1edbc khi deploy, c\u00f3 rollback \u2014 kh\u00f4ng s\u1ee3 l\u00e0m h\u1ecfng live site. 7 B\u01b0\u1edbc th\u1ef1c hi\u1ec7n 3 Gate approve [&hellip;]<\/p>","protected":false},"author":1,"featured_media":38000,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,1209],"tags":[],"class_list":["post-37996","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","category-ai-marketing"],"acf":[],"rankmath_keywords":{"primary":"","secondary":[""]},"yoast_keywords":{"primary":"","secondary":[]},"yoast_focuskw":"","rankmath_focuskw":"","seo_keywords":{"primary":"","secondary":[""]},"_links":{"self":[{"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/posts\/37996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/comments?post=37996"}],"version-history":[{"count":3,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/posts\/37996\/revisions"}],"predecessor-version":[{"id":37999,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/posts\/37996\/revisions\/37999"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/media\/38000"}],"wp:attachment":[{"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/media?parent=37996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/categories?post=37996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dps.media\/en\/wp-json\/wp\/v2\/tags?post=37996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}