JSDC 2020 回顾 - AMP 最佳实践

AMP & the missing parts Google doesn't tell

讲者简报讲者在 MordernWeb 分享对 AMP 基本介绍的简报讲者在去年 JSDC 分享以 AMP 实作 PWA 的影片

讲者目前在 Yahoo 担任 F2E。这次的内容，在以对 AMP 有开发经验的前提下，提出一些议题以及最佳实践等。所以可以先看讲者之前在公开场合中分享的内容来认识 AMP。

由 Google 推出的 AMP，主要是可以透过 preload 跟 cache 机制，打造在 Mobile 上也能顺畅操作的 Web 应用，并且与自家的搜寻引擎可以紧密结合，让内容可以有效呈现。

Google SERPs

接着讲者介绍今年 Google 在 SEO 上有做了甚么机制。第一个机制是行动网站优先索引。第二个是 Core Web Vitals。Google 会根据使用者体验中产生的痛点，替网站量化为以下三个评分标準。这些标準也会影响到 SEO 的排名。

LCP(Largest Contentful Paint): Viewport 中，最大一块的元素绘製出来的时间。建议数值在 2.5 秒内FID(First Input Delay ): 从 Javascript 载入到使用者可以和页面互动的时间。建议数值在 100 毫秒内CLS(Cumulative Layout Shift): 中文翻作版面飘移。资料在渲染时，版面会因此移动的幅度。建议数值在 0.1内

AMP 最佳实践

Google 提出的 SEO 机制，以 AMP 就能达成这些机制的要求。讲者接续以开发情境分享实务上如何最佳化 AMP。

Rendering performance

<!-- 在runtime载入完amp core code，才初始化amp相关元素 --><script async src="https://cdn.ampproject.org/v0.js"></script><!-- Set Viewport to be mobile frendly --><meta    name="viewport"    content="width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover"/><!--     指定 link tag 的 rel 属性提示浏览器提前下载资源，以达到优化效能的效果    preconnect 告诉浏览器：「这个网页将会下载这个 资源，请先建立好连线」    dns-prefetch 跟 preconnect 类似，差别在于只提示浏览器预先处理 DNS lookup --><link rel="preconnect" href="https://cdn.ampproject.org" crossorigin /><link rel="dns-prefetch" href="https://cdn.ampproject.org" /><!-- 透过 embed style tag 注入样式，节省 request 的数量，并且加速 Render Tree 的Parsing --><style amp-custom>    /* custom style start from here */    .subject-unit {        content-visibility: auto;        ...;    }</style><!-- 分别以async载入需要的extension script，进行 FID 优化--><script    async    src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"    custom-element="amp-bind"></script><script    async    src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"    custom-element="amp-carousel"></script><!-- AMP的元件都有个 layout 的 attribute，在 Render Tree 完成当下就可以计算出元件的宽高，进行 CLS 优化--><amp-carousel layout="responsive" ...> ... </amp-carousel>

CSS limitation

今年 AMP 宣布由原本 50K 大小限制，提升到 75K。讲者很建议实作 dark mode，提升使用者体验。

Google 最近也尝试在 desktop 的搜寻结果显示由 AMP 实作的页面。因此样式上也可以添加 RWD 相关的设定。

Form /Link & A11y

让有官能障碍的使用者和机器人能了解当前页面，并且可以顺畅操作或解析。

<form>    <!-- 设置label -->    <label for="input-name"> input your name: </label>    <input type="text" id="input-name" type="text" />    <!-- 在按钮和连结上设置aria-label -->    <button role="button" aria-label="submit"></button>    <!-- 在连结上设置title -->    <a        href="product_detail.html"        title="click to visit product detail"        aria-label="click to visit product detail"    >        <img src="product_image.png" alt="produt image" />    </a></form>

在点击图片的感应区，不要只侷限在图片大小，而是往外扩展一定空间。

Image Resource

Google 的图片和影片搜寻是重点发展项目之一。在 AMP 实作中，以 amp-img 元件来取代一般的 img tag 来拥有以下好处 -

runtime 时，在元件进入 viewport 时才初始，具备 lazy-load 的效果享受 attribute layout 的好处，定出在页面上的宽高，防止 CLS 被扣分透过 alt 让使用者知道图片的意涵或内容，但要简单明了，不然会被当 spam透过设置 srcset，让浏览器根据解析度，选择最适合的图片来源呈现提升搜寻关联，有机会显示在图片的搜寻结果上

<amp-img    layout="responsive"    width="100"    height="100"    src="https://cdn.com/image_1x.jpg"    srcset="    https://cdn.com/image_1x.jpg 1x,    https://cdn.com/image_2x.jpg 2x,    https://cdn.com/image_3x.jpg 3x  "    alt="images fulfill mult display ratio"></amp-img>

Fancy & Maintenance

解决页面资讯上的时间落差，让 AMP 页面的内容可以更即时呈现。

使用 amp-list + amp-mustache 元件，实践资讯即时呈现，并且可 infinite scroll 显示更多资料的效果。

<amp-list    src="ws_listings.php"    width="auto"    height="200"    items="."    single-item    load-more="auto"    template="template-listing">    <amp-list-load-more load-more-button>        <a> 更多结果 </a>    </amp-list-load-more></amp-list><template id="template-listing" type="amp-mustache">    <ul class="listings">        {{#hits}}        <li class="listings__li">            <div class="item-card">                <p>{{title}}</p>                ...            </div>        </li>        {{/#hits}}    </ul></template>

Remote SD(Structured Data) fetching

在实务上，同样的资讯内容可能会有多个形式存在，例如有 web 版、mobile web 版、导流用的 amp 版等等。。透过 Remote SD fetching，可以让 SD 维持一致性与正确性。

Payment friendly

透过 amp-iframe 元件和浏览器提供的 Payment Request API 实作出让使用者跨站也能一致的支付体验功能。

<!-- 在 amp-iframe 加入 allowpaymentrequest 打开支付绑定的功能--><amp-iframe    height="44"    class="payment"    allowpaymentrequest    sandbox="allow-scripts allow-same-origin allow-top-navigation allow-modals"    layout="fixed-height"    frameborder="0"    src="https://your-domain.com/amp-payment-request-api-inner.html?_=RANDOM"></amp-iframe>