seo - AMP - 《李俊扬的技术分享》

AMP的优点
- AMP 图片按需加载，只有当滚动条滚动到快要接近可视区域，才会渲染img
- AMP Cache
AMP的好处
AMP 图片优化
- 当前处于display: none的情况下，图片不会被加载
- webp支持
响应式图片

https://amp.dev/documentation/guides-and-tutorials/

AMP的优点

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
    <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>
  </head>
  <body>
    <h1 id="hello">Hello AMPHTML World!</h1>
  </body>
</html>

<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" height="400" layout="fixed-height"></amp-img>

AMP 图片按需加载，只有当滚动条滚动到快要接近可视区域，才会渲染img

AMP Cache

AMP 缓存是一种基于代理的内容传送网络 (CDN)，用于传送有效的 AMP 文档。AMP 缓存旨在：

仅提供有效的 AMP 网页。
让 AMP 网页能够安全且高效地预加载。
对内容执行额外的性能优化措施，以提升用户体验。

谁会请求缓存的AMP页面?
缓存的 AMP 网页会被各类平台（如 Google 搜索、Google 新闻和 Cloudflare）和移动应用访问。移动应用可通过网址（请参阅 Google 的 AMP URL API）或通过渐进式网页应用中的跨源 XHR（详情请见嵌入 AMP 网页并将其用作数据源）关联到缓存的 AMP 内容。
如何实现?
平台可通过或标记发现您的 AMP 内容，进而缓存该内容。例如，Google 搜索会抓取内容；对于任何已被识别出的有效 AMP 网页，系统都会自动将相应内容添加到 Google AMP 缓存中。

AMP的好处

快速加载
减少页面复杂度
Google搜索结果对AMP页面有预加载处理，更快地到达页面

AMP 图片优化

占位符和回退响应式图片

占位符可以用背景来做

.img-placeholder {
    background-size: 100%;
    background-image: url('placeholder.png');
}

当前处于display: none的情况下，图片不会被加载

无

webp支持

在以下示例中，我们使用该fallback属性告诉浏览器在不支持 WebP 格式时使用 JPEG 文件。

<amp-img alt="Mountains"
  width="550"
  height="368"
  layout="responsive"
  src="/static/inline-examples/images/mountains.webp">
  <amp-img alt="Mountains"
    fallback
    width="550"
    height="368"
    layout="responsive"
    src="/static/inline-examples/images/mountains.jpg"></amp-img>
</amp-img>

响应式图片

<amp-img alt="Hummingbird"
  src="/static/inline-examples/images/hummingbird-wide.jpg"
  width="640"
  height="457"
  srcset="/static/inline-examples/images/hummingbird-wide.jpg 640w,
            /static/inline-examples/images/hummingbird-narrow.jpg 320w"
  sizes="(min-width: 650px) 50vw, 100vw">
</amp-img>

AMP