答案：html AMP通过规范标签、禁用自定义JS、引入AMP JS库和缓存技术提升移动页面加载速度，需遵循AMP HTML标准并验证有效性，有助于SEO但非万能，未来将更开放并与PWA等融合。
HTML AMP 旨在加速移动页面加载速度，提升用户体验。简单来说，它通过限制某些 HTML 功能，并采用 AMP 缓存等技术，让你的移动页面飞起来。
解决方案
AMP 的实现主要分为以下几个步骤：
-
编写 AMP HTML： 这不是直接将你的普通 HTML 页面改头换面，而是需要遵循 AMP HTML 的规范。这意味着你需要使用 AMP 提供的特定标签和属性，例如
<amp-img>
代替
<img>
，
<amp-video>
代替
<video>
。同时，禁止使用自定义 JavaScript，只能使用 AMP 提供的组件。
立即学习“前端免费学习笔记（深入）”；
-
使用 AMP JS 库： 在你的 AMP HTML 页面中引入 AMP JS 库，它负责处理页面的渲染和加载。你可以通过
<script async src="https://cdn.ampproject.org/v0.js"></script>
引入。
-
验证 AMP HTML： AMP 页面必须通过验证才能被 AMP 缓存收录。你可以使用 AMP 验证器来检查你的页面是否符合规范。验证器可以在浏览器开发者工具中找到，也可以通过命令行工具运行。
-
配置 AMP 缓存： AMP 缓存会将你的 AMP 页面缓存在 google 的 CDN 上，从而加速页面加载速度。要让 AMP 缓存收录你的页面，你需要将你的 AMP 页面链接到你的普通 HTML 页面，并在普通 HTML 页面中添加 AMP 链接。
-
监控和优化： 使用 Google Search console 等工具监控你的 AMP 页面的性能，并根据需要进行优化。例如，你可以优化图片大小，减少 HTTP 请求，或者使用 AMP 提供的预加载功能。
AMP HTML 规范看起来比较严格，但实际上是为了确保页面的加载速度和用户体验。一开始可能会觉得有些麻烦，但一旦熟悉了 AMP 的规则，你会发现它其实很简单。
AMP HTML 页面到底长什么样？
一个最简单的 AMP HTML 页面可能看起来像这样：
<!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>Hello, AMP!</title> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <style amp-custom> body { background-color: white; } </style> </head> <body> <h1>Hello, AMP!</h1> <amp-img src="welcome.jpg" alt="Welcome" width="600" height="400" layout="responsive"></amp-img> </body> </html>
注意：
-
<!doctype html>
必须是
<!doctype html>
-
<html amp>
或
<html ⚡>
必须存在
-
<link rel="canonical" href="hello-world.html">
必须指向对应的普通 HTML 页面
-
<script async src="https://cdn.ampproject.org/v0.js"></script>
必须存在
-
<style amp-boilerplate>
和
<noscript><style amp-boilerplate>
必须存在
-
<style amp-custom>
必须存在，并且只能包含自定义的 css 样式
如何验证 AMP 页面是否有效？
验证 AMP 页面有效性有很多种方式：
- 浏览器开发者工具： 在 AMP 页面的 URL 后面加上
#development=1
，然后在浏览器开发者工具的 Console 面板中查看是否有错误信息。
- AMP 验证器扩展： 安装 AMP 验证器 chrome 扩展，它可以自动验证当前页面是否是有效的 AMP 页面。
- 命令行工具： 使用 AMP HTML 验证器命令行工具验证 AMP 页面。你需要先安装 node.js 和 npm，然后运行
npm install -g amphtml-validator
安装验证器。安装完成后，你可以使用
amphtml-validator your-amp-page.html
命令验证你的 AMP 页面。
AMP 对 SEO 有什么影响？
AMP 可以提高移动页面的加载速度，从而提升用户体验。Google 会将页面加载速度作为排名因素之一，因此 AMP 可以间接提升你的 SEO 排名。此外，AMP 页面在 Google 搜索结果中会显示 AMP 图标，这可以吸引更多的用户点击。
但需要注意的是，AMP 并不是万能的。如果你的网站已经做了很好的移动端优化，那么 AMP 可能不会带来太大的提升。此外，AMP 的限制也可能会影响你的网站功能和设计。所以，你需要根据你的实际情况来决定是否使用 AMP。
AMP 的未来发展趋势是什么？
AMP 正在不断发展和演进。未来，AMP 可能会更加开放和灵活，允许更多的自定义 JavaScript 和 CSS。同时，AMP 可能会与其他技术，例如 Progressive Web Apps (PWA)，更好地集成，从而提供更好的用户体验。 此外，AMP 也在探索更多应用场景，例如电子邮件和故事格式。
评论（已关闭）
评论已关闭