好的，我们开始今天的讲座。今天的主题是 AMP (Accelerated Mobile Pages)，加速移动页面。我们将深入探讨什么是 AMP，它的工作原理，优点和缺点，以及你是否需要使用它。
什么是 AMP？
AMP 是一种由 Google 发起的开源 HTML 框架。它的目标是提高移动网页的加载速度，从而改善用户体验。简单来说，AMP 是一种更轻量级的 HTML 版本，它限制了某些 HTML 标签和 JavaScript 的使用，并强制执行某些性能最佳实践。
AMP 的核心组成部分
AMP 框架由三个核心部分组成：
-
AMP HTML: AMP HTML 本质上是带有自定义属性和限制的 HTML。 某些 HTML 标签（例如
<script>）是被禁止的，而其他标签（例如<img>）则需要使用 AMP 提供的替代品（例如<amp-img>）。 -
AMP JS: AMP JS 库负责管理 AMP 页面的资源加载和渲染。 它确保页面以高性能的方式呈现。 AMP JS 库的主要职责包括：
- 异步加载所有外部资源: 防止任何外部资源阻塞页面渲染。
- 预先计算所有元素的大小: 在资源加载之前确定元素的大小，避免页面布局跳动。
- 禁用慢速 CSS 选择器: 避免使用影响性能的 CSS 选择器。
- 沙盒化所有 JavaScript: 限制第三方 JavaScript 的执行，防止它们影响页面性能。
-
AMP Cache: AMP Cache 是一个可选的代理缓存，用于缓存 AMP 页面并从全球网络提供它们。 Google 运行一个公共的 AMP Cache，其他公司也可以运行自己的 AMP Cache。 通过使用 AMP Cache，页面可以更快地加载，因为它们是从离用户更近的服务器提供的。
AMP 的工作原理
AMP 的工作流程大致如下：
- 创建 AMP 页面: 开发者使用 AMP HTML 创建一个页面的 AMP 版本。
- 验证 AMP 页面: 开发者使用 AMP 验证器验证 AMP 页面是否符合 AMP 规范。
- Google 发现 AMP 页面: Google 通过
<link rel="amphtml">标签在标准 HTML 页面中发现 AMP 页面。 - Google 缓存 AMP 页面: Google 将 AMP 页面缓存到其 AMP Cache 中。
- 用户访问 AMP 页面: 当用户通过 Google 搜索或其他渠道访问 AMP 页面时，Google 从 AMP Cache 提供页面。
AMP HTML 的限制和要求
正如前面提到的，AMP HTML 并不是普通的 HTML。 它有一些限制和要求，需要开发者遵守。 以下是一些最重要的限制和要求：
- 不允许使用自定义 JavaScript: AMP 禁止使用自定义 JavaScript。 只能使用 AMP 提供的组件。
- 所有外部资源必须异步加载: 所有外部资源（例如图像、脚本、样式表）必须异步加载。
- 必须指定元素的大小: 所有图像、视频和广告必须指定宽度和高度。
- CSS 必须内联或使用
<style amp-custom>标签: 外部 CSS 样式表是不允许的。 CSS 必须内联到<style amp-custom>标签中，并且大小不能超过 75KB。 - 必须使用 AMP 提供的组件来处理某些功能: 例如，必须使用
<amp-img>标签来显示图像，而不是<img>标签。 - 必须使用 AMP 验证器验证页面: 在发布 AMP 页面之前，必须使用 AMP 验证器验证页面是否符合 AMP 规范。
AMP 的优点
- 更快的页面加载速度: 这是 AMP 最主要的优点。 通过限制某些 HTML 标签和 JavaScript 的使用，并强制执行某些性能最佳实践，AMP 可以显著提高移动网页的加载速度。
- 改善用户体验: 更快的页面加载速度可以改善用户体验，降低跳出率，提高用户参与度。
- 提高搜索引擎排名: 虽然 Google 声称 AMP 不是一个直接的排名因素，但更快的页面加载速度和更好的用户体验可以间接提高搜索引擎排名。
- 更容易被 Google 发现: Google 优先展示 AMP 页面，这可以提高页面的可见性。
- 支持 AMP Cache: AMP Cache 可以进一步提高页面加载速度，并降低服务器负载。
AMP 的缺点
- 限制性强: AMP 的限制性非常强，这使得开发者很难创建复杂的交互式页面。
- 学习曲线陡峭: AMP 有自己的一套规则和组件，开发者需要学习这些规则和组件才能创建 AMP 页面。
- 开发成本高: 由于 AMP 的限制性强，开发者可能需要花费更多的时间和精力来创建 AMP 页面。
- 维护成本高: 由于 AMP 的规则和组件可能会发生变化，开发者需要定期维护 AMP 页面，以确保它们符合 AMP 规范。
- Vendor Lock-in: 某种程度上，你依赖于 Google 的 AMP 规范，可能不太容易迁移到其他技术。
何时应该使用 AMP？
以下是一些适合使用 AMP 的场景：
- 新闻网站: 新闻网站通常需要快速加载页面，以满足用户对新闻的即时需求。
- 博客: 博客通常包含大量的文本和图像，AMP 可以帮助博客更快地加载。
- 电子商务网站的产品页面: 电子商务网站的产品页面通常包含大量的图像和信息，AMP 可以帮助产品页面更快地加载。
- 任何需要快速加载的移动网页: 如果你的网站的移动网页加载速度很慢，那么可以考虑使用 AMP。
何时不应该使用 AMP？
以下是一些不适合使用 AMP 的场景：
- 复杂的 Web 应用程序: AMP 的限制性强，不适合创建复杂的 Web 应用程序。
- 需要大量自定义 JavaScript 的页面: AMP 禁止使用自定义 JavaScript，因此不适合需要大量自定义 JavaScript 的页面。
- 已经优化过的移动网页: 如果你的网站的移动网页已经优化得很好，那么可能不需要使用 AMP。
如何实现 AMP？
实现 AMP 的步骤大致如下：
- 创建 AMP HTML 页面: 创建一个 AMP HTML 页面，并确保它符合 AMP 规范。
- 验证 AMP 页面: 使用 AMP 验证器验证 AMP 页面是否符合 AMP 规范。
- 将 AMP 页面链接到标准 HTML 页面: 在标准 HTML 页面中添加
<link rel="amphtml">标签，指向 AMP 页面。 - 将标准 HTML 页面链接到 AMP 页面: 在 AMP 页面中添加
<link rel="canonical">标签，指向标准 HTML 页面。 - 提交 AMP 页面到 Google Search Console: 将 AMP 页面提交到 Google Search Console，以便 Google 可以发现并索引 AMP 页面。
AMP 验证器
AMP 验证器是一个用于验证 AMP 页面是否符合 AMP 规范的工具。 可以通过多种方式使用 AMP 验证器：
- 浏览器扩展: AMP 验证器有一个浏览器扩展，可以在 Chrome 和 Firefox 中使用。
- 在线工具: AMP 验证器有一个在线工具，可以在浏览器中访问。 地址是
https://validator.ampproject.org/ - 命令行工具: AMP 验证器有一个命令行工具，可以在终端中使用。
AMP 组件示例
下面是一些常用的 AMP 组件示例：
<amp-img>: 用于显示图像。
<amp-img src="images/example.jpg" alt="Example Image" width="600" height="400" layout="responsive"></amp-img><amp-video>: 用于显示视频。
<amp-video width="640" height="360" layout="responsive" controls>
<source src="videos/example.mp4" type="video/mp4">
<source src="videos/example.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video.</p>
</amp-video><amp-ad>: 用于显示广告。
<amp-ad width="300" height="250" type="adsense" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="yyyyyyyyyy"></amp-ad><amp-carousel>: 用于创建轮播图。
<amp-carousel width="480" height="270" layout="responsive" type="slides">
<amp-img src="images/slide1.jpg" width="480" height="270" alt="Slide 1"></amp-img>
<amp-img src="images/slide2.jpg" width="480" height="270" alt="Slide 2"></amp-img>
<amp-img src="images/slide3.jpg" width="480" height="270" alt="Slide 3"></amp-img>
</amp-carousel><amp-analytics>: 用于跟踪页面访问情况。
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>AMP 的替代方案
除了 AMP 之外，还有其他一些可以提高移动网页加载速度的替代方案：
- Progressive Web Apps (PWA): PWA 是一种使用现代 Web 技术来构建类似原生应用程序的 Web 应用程序的方法。 PWA 可以离线工作，具有推送通知功能，并且可以添加到主屏幕。
- 优化网站性能: 可以通过优化网站性能来提高移动网页的加载速度。 这包括优化图像、压缩代码、使用 CDN 等。
- 响应式设计: 响应式设计可以确保网站在所有设备上都能正常显示，包括移动设备。
- 服务端渲染 (SSR): 服务端渲染可以在服务器端渲染页面，然后将渲染好的 HTML 发送到客户端。 这可以提高首次加载速度。
一个简单的 AMP HTML 页面示例
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://example.com/original-page.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>My AMP Page</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 {
font-family: sans-serif;
}
h1 {
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My AMP Page</h1>
<p>This is a simple AMP page.</p>
<amp-img src="images/example.jpg" alt="Example Image" width="600" height="400" layout="responsive"></amp-img>
</div>
</body>
</html>需要注意的点
<!doctype html>: 必须是 HTML5 文档类型。<html amp>或<html ⚡>: 必须包含amp或⚡属性，以表明这是一个 AMP 页面。<link rel="canonical" href="https://example.com/original-page.html">: 指向原始 HTML 页面的规范链接。<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">: viewport 元数据，用于控制页面的缩放。<script async src="https://cdn.ampproject.org/v0.js"></script>: AMP JS 库。<style amp-boilerplate>...</style>: AMP 样板代码，用于在 AMP JS 库加载之前隐藏页面内容。<noscript><style amp-boilerplate>...</style></noscript>: 如果浏览器禁用了 JavaScript，则显示页面内容。<style amp-custom>...</style>: 自定义 CSS 样式。
表格总结 AMP 的优缺点
| 特性 | 优点 | 缺点 |
|---|---|---|
| 页面加载速度 | 显著提升，改善用户体验 | 对复杂交互支持有限，可能需要简化页面功能 |
| 用户体验 | 更快的加载速度通常带来更好的用户体验 | 开发和维护成本可能较高，特别是对于已经存在的网站 |
| SEO | 间接提升，更快的页面加载速度和更好的用户体验有助于提高排名 | 限制性强，需要学习新的 AMP 规范和组件 |
| 资源消耗 | 优化资源加载，减少数据消耗 | Vendor Lock-in，依赖于 Google 的 AMP 规范，迁移困难 |
| 开发难度 | 相对简单，但需要熟悉 AMP 组件和规范 | 需要维护两个版本的页面（标准 HTML 和 AMP），增加维护负担 |
| 适用场景 | 新闻网站、博客、内容型网站，需要快速加载和良好移动体验的页面 | 复杂的 Web 应用程序、需要大量自定义 JavaScript 的页面、已经优化良好的移动网页 |
一些更高级的主题
- AMP Story: 一种用于创建沉浸式视觉叙事体验的 AMP 组件。
- AMP Email: 一种用于创建交互式电子邮件的 AMP 规范。
- AMP for Ads: 一种用于加速广告加载速度的 AMP 技术。
- Signed Exchanges (SXG): 一种用于在不改变 URL 的情况下提供 AMP 内容的技术。
对 AMP 的一些看法
AMP 最初是为了解决移动网页加载速度慢的问题而设计的。 在当时，AMP 在提高移动网页加载速度方面确实发挥了重要作用。 然而，随着 Web 技术的不断发展，AMP 的一些优势已经不再那么明显。 现代 Web 技术（例如 PWA 和服务端渲染）也可以提供类似的性能提升，而且更加灵活和开放。
同时，AMP 的一些限制和缺点也越来越明显。 例如，AMP 的限制性强，使得开发者很难创建复杂的交互式页面。 AMP 的开发成本和维护成本也比较高。
因此，在决定是否使用 AMP 时，需要权衡其优点和缺点，并根据自己的实际情况做出选择。
代码示例：AMP 页面集成 Google Analytics
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>AMP Page with Google Analytics</title>
<link rel="canonical" href="https://example.com/your-page">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<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>
/* Your custom styles here */
</style>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<h1>Welcome to my AMP page</h1>
<p>This page is tracked with Google Analytics.</p>
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your Google Analytics Tracking ID
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
</body>
</html>代码解释：
- 引入
amp-analytics组件:<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>这一行代码是引入 Google Analytics 的关键。 它告诉 AMP 页面需要使用amp-analytics组件。 - 配置
amp-analytics组件:<amp-analytics type="googleanalytics">标签声明我们要使用 Google Analytics。<script type="application/json">标签包含 Google Analytics 的配置信息。 vars部分:"account": "UA-XXXXX-Y"这里你需要将UA-XXXXX-Y替换成你自己的 Google Analytics Tracking ID。triggers部分:"trackPageview": { "on": "visible", "request": "pageview" }这个配置表示当页面变为可见时（即加载完成），发送一个 pageview 事件到 Google Analytics。
总结与建议
AMP 提供了一种优化的移动网页体验，特别是在页面加载速度方面。 然而，它的限制性以及现代 Web 技术的进步，使得在决定是否采用 AMP 时需要进行仔细的评估。 选择 AMP 应该基于你的具体需求，例如你的网站类型，你的目标用户，以及你的开发资源。 考虑 AMP 的替代方案，例如 PWA 和网站性能优化，也是很重要的。最终，选择正确的方案将取决于你对速度、灵活性和开发成本的权衡。