iT邦幫忙

0

JSDC 2020 回顧 - AMP 最佳實踐

jpeg

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 的排名。

svg

  1. LCP(Largest Contentful Paint): Viewport 中,最大一塊的元素繪製出來的時間。建議數值在 2.5 秒
  2. FID(First Input Delay ): 從 Javascript 載入到使用者可以和頁面互動的時間。建議數值在 100 毫秒
  3. 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 來擁有以下好處 -

  1. runtime 時,在元件進入 viewport 時才初始,具備 lazy-load 的效果
  2. 享受 attribute layout 的好處,定出在頁面上的寬高,防止 CLS 被扣分
  3. 透過 alt 讓使用者知道圖片的意涵或內容,但要簡單明瞭,不然會被當 spam
  4. 透過設置 srcset,讓瀏覽器根據解析度,選擇最適合的圖片來源呈現
  5. 提升搜尋關聯,有機會顯示在圖片的搜尋結果上
<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>

尚未有邦友留言

立即登入留言