html实现AMP加速移动页面_html AMP加速移动页面开发配置【速查】-html教程-PHP中文网

amp不是优化开关而是硬性规则系统，必须100%合规才能被google amp cache收录并实现秒开，校验通过仅是前提，还需满足robots.txt放行、canonical页面200状态、amphtml链接无重定向等外部条件。

html实现amp加速移动页面_html amp加速移动页面开发配置【速查】

AMP 不是“开启就能加速”的开关，它是一套必须 100% 满足的硬性规则系统；你看到的“秒开”，几乎全部来自 https://yoursite-com.cdn.ampproject.org 这类 Google AMP Cache 节点，而不是你自己的服务器。

校验通过只是第一步，AMP Cache 是否收录还取决于三个外部条件：

robots.txt 不能屏蔽 AMP 路径（例如 Disallow: /amp/）
AMP 页面里 <link rel="canonical" href="/article"> 指向的非 AMP 页面，HTTP 状态码必须是 200，且响应头不能含 Cache-Control: no-store 或 no-cache
非 AMP 页面的 <link rel="amphtml" href="/amp/article"> 必须返回 200，不能是 301 → 302 → 200 多跳重定向

用 curl -I https://yoursite.com/amp/article 直接看响应头：如果没出现 AMP-Cache-Transform: google，说明根本没进缓存——这时候优化页面本身毫无意义。

AMP Validator 的报错不是警告，是硬拦截。Google Search、Bing、CDN 都只认通过验证的页面。常见“看着能用但实际失效”的错误：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<img src="a.jpg"> 缺 width 和 height 属性：AMP 不允许原生 <img>，必须用 <amp-img></amp-img>，且两个属性值都得是正整数（0 或空字符串也不行）
CSS 写在 <style amp-custom></style> 里，但总字节数超了 75000（注意是字节，不是 KB）；压缩后仍超标，会被 runtime 强制清空样式
写了 !important、@import、* {}、position: fixed 中任意一个，整个 <style amp-custom></style> 就被忽略
加了 <script>console.log(1)</script>：哪怕只是调试用，也会被 AMP 运行时直接移除，且导致 amp-bind 等扩展无法初始化

<amp-img></amp-img> 的行为和原生 <img> 有本质区别，参数必须按 AMP 调度逻辑填：

必须同时提供 width 和 height；若图片要响应式，用 layout="responsive"，此时宽高代表宽高比（如 width="16" height="9"）
不支持 srcset 和 sizes，响应式图需靠 media 属性 + 多个 <amp-img></amp-img> 切换
不支持 decoding="async"，这个由 AMP runtime 统一控制；手动加会触发 validator 报错：The attribute 'decoding' may not appear in tag 'amp-img'
懒加载是默认开启的，不需要、也不能写 loading="lazy"；写了反而报错

想实现点击切换 tab、展开菜单、表单反馈？别写 document.addEventListener —— AMP 运行时会忽略所有 DOM 操作。正确路径是：

先引入扩展：<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
给容器加 data-amp-bind 属性（漏写会导致 Binding failed 控制台报错）
用 [text]、[class]、[hidden] 这类绑定语法，表达式里禁止调用函数、访问 window 或 document
表单提交必须走 action-xhr，后端返回 JSON，不能返回 HTML 片段