講者目前在 Yahoo 擔任 F2E。這次的內容，在以對 AMP 有開發經驗的前提下，提出一些議題以及最佳實踐等。所以可以先看講者之前在公開場合中分享的內容來認識 AMP。
由 Google 推出的 AMP，主要是可以透過 preload 跟 cache 機制，打造在 Mobile 上也能順暢操作的 Web 應用，並且與自家的搜尋引擎可以緊密結合，讓內容可以有效呈現。
接著講者介紹今年 Google 在 SEO 上有做了甚麼機制。第一個機制是行動網站優先索引。第二個是 Core Web Vitals。Google 會根據使用者體驗中產生的痛點，替網站量化為以下三個評分標準。這些標準也會影響到 SEO 的排名。
Google 提出的 SEO 機制，以 AMP 就能達成這些機制的要求。講者接續以開發情境分享實務上如何最佳化 AMP。
Yuri Tsai
<!-- 在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>
今年 AMP 宣布由原本 50K 大小限制，提升到 75K。講者很建議實作 dark mode，提升使用者體驗。
Google 最近也嘗試在 desktop 的搜尋結果顯示由 AMP 實作的頁面。因此樣式上也可以添加 RWD 相關的設定。
讓有官能障礙的使用者和機器人能了解當前頁面，並且可以順暢操作或解析。
<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>
在點擊圖片的感應區，不要只侷限在圖片大小，而是往外擴展一定空間。
Google 的圖片和影片搜尋是重點發展項目之一。在 AMP 實作中，以 amp-img 元件來取代一般的 img tag 來擁有以下好處 -
layout 的好處，定出在頁面上的寬高，防止 CLS 被扣分alt 讓使用者知道圖片的意涵或內容，但要簡單明瞭，不然會被當 spamsrcset，讓瀏覽器根據解析度，選擇最適合的圖片來源呈現<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>
解決頁面資訊上的時間落差，讓 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>
在實務上，同樣的資訊內容可能會有多個形式存在，例如有 web 版、mobile web 版、導流用的 amp 版等等。。透過 Remote SD fetching，可以讓 SD 維持一致性與正確性。
透過 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>
iThome鐵人賽
看影片追技術