AMP不是性能优化工具，而是通过禁用自定义JS、限制CSS体积、强制资源懒加载等硬性约束来间接提升加载速度的性能导向内容发布协议。

AMP 不能直接解决移动加速，它只是在特定约束下强制产出轻量 HTML 的一种发布规范。 真正影响加载速度的是资源体积、网络请求、渲染阻塞和客户端执行开销——AMP 通过禁用部分能力来间接压低这些指标，但代价是交互灵活性与开发自由度。它不是性能优化工具，而是一套“性能导向的内容发布协议”。

为什么 AMP 页面通常加载更快

AMP 页面快，不是因为用了什么黑科技，而是靠三重硬性限制换来的：

• 所有 <script> 标签必须带 async，且禁止自定义 JS（只允许 AMP 运行时和白名单扩展）
• CSS 必须内联，且总大小不能超过 75000 字节；禁止 @import、!important、selector * {} 等高开销写法
• 图片、视频、广告等外部资源必须用 <amp-img>、<amp-video> 等定制标签，自带懒加载、尺寸预声明和资源优先级调度

这些规则让 AMP 页面天然规避了移动端最常见的性能雷区：阻塞渲染的 JS、未压缩的巨幅 CSS、无宽高的图片导致的布局抖动、第三方脚本无序注入等。

AMP 在真实移动场景下的局限性

它快的前提是“你愿意交出控制权”。一旦页面需要以下能力，AMP 就开始失灵或退化：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 用户登录态管理：AMP 不支持 document.cookie 或 localStorage，依赖 <amp-access> + 后端鉴权，复杂度陡增
• 动态表单提交：原生 <form> 被禁用，必须用 <amp-form>，且仅支持 GET 和 CORS POST，无法处理上传、多步验证等逻辑
• 首屏外交互：比如点击展开 FAQ、切换商品 SKU、实时搜索建议——这些都得靠 <amp-bind> + JSON 数据源，开发成本远高于普通 Vue/React 组件
• CDN 缓存不可控：Google AMP Cache 会自动托管并优化你的页面，但国内访问不到；自建 AMP CDN 又失去缓存分发优势，实际加载并不比普通静态页快

替代 AMP 的更务实方案

如果你的目标是“让移动用户更快看到内容”，与其迁移到 AMP，不如直接优化现有 HTML：

• 用 preload 提前拉取关键字体和首屏图片：<link rel="preload" as="image" href="hero.jpg">
• 图片强制声明 width/height，配合 loading="lazy" 和现代格式（avif / webp）
• 把首屏 CSS 内联，其余用 media 属性条件加载（如 print、prefers-reduced-motion）
• 用 IntersectionObserver 替代 scroll 事件做懒加载，避免强制同步布局
• 服务端开启 Brotli 压缩、HTTP/2 多路复用、TLS 1.3，这些对移动弱网的实际收益远超 AMP 规范本身

AMP 的核心价值，其实是为内容平台（如新闻聚合、电商导购）提供一套可审核、可缓存、可预渲染的标准化页面模板。如果你不是这类场景，硬套 AMP 往往是用工程复杂度换微小的 LCP 改善，得不偿失。

真正容易被忽略的点是：AMP 验证器通过 ≠ 移动体验好。一个合法的 AMP 页面仍可能因后端接口慢、图片未裁剪、字体过大而卡在白屏。性能问题永远在代码之外——网络、服务端、资源分发链路上。