AMP Page Experience Guide で AMP を高速化する

4 min読了の目安(約3900字TECH技術記事

AMP Fest で AMP の速度改善チェックツールが公開されたので早速使ってみました

https://blog.amp.dev/2020/10/13/meet-amps-page-experience-guide/

AMP Page Experience Guide

https://amp.dev/ja/page-experience/

使い方は URL を入力して解析ボタンをクリック

今回はダルシムのフレーム表の AMP ページで試しました

https://enjoy-sfv-more.com/amp/frames/dhalsim

Core Web Vitals

Firebase Functions の Express でレンダリングをしているからか、読み込み速度が結構遅いです

提示された改善案

解析が終わると速度改善の案が表示されます

AMP Optimizer の使用

AMP Optimizer の使用を提案されます

https://amp.dev/ja/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/

AMP ランタイムのプリロード

AMP 関連の JS のプリロードが提案されます

<link as="script" href="https://cdn.ampproject.org/v0.js" rel="preload">

すべてのリソースの読み込み可能にする

モバイル フレンドリー テストツールで確認すると、グーグルの広告が読み込めずこの改善案が表示されていました

https://search.google.com/test/mobile-friendly?url=https%3A%2F%2Fenjoy-sfv-more.com%2Famp%2Fframes%2Fdhalsim

侵入型インタースティシャルの使用の回避

AMP-AD で広告を入れいているので手動で問題がないか確認を進められます

改善

AMP ランタイムのプリロード

自分のサイトではいろいろ読み込んでいたので全て対応しました

<link as="script" href="https://cdn.ampproject.org/v0.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-list-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-bind-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-selector-0.1.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" rel="preload">
<link as="script" href="https://cdn.ampproject.org/v0/amp-ad-0.1.js" rel="preload">

対応後はインタラクティビティ(TBT)が改善され、良好になりました

AMP Optimizer の使用

AMP Optimizer の対応をしていきます

対応方法はいろいろありますが、フレーム表の AMP のページは Firebase Functions で Express でレンダリングしているので、AMP 公式のチュートリアルを見ながら導入していきます

https://amp.dev/ja/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/node-amp-optimizer/

インストール

npm install @ampproject/toolbox-optimizer

render 関数のコールバックでオプティマイザを実行します

const AmpOptimizer = require("@ampproject/toolbox-optimizer");
const ampOptimizer = AmpOptimizer.create();

app.get("/amp/frames/:characterEnName", (req, res) => {
  const character = characters.getCharacterByEnName(req.params.characterEnName);
  if (character) {
    res.status(200).render(
      "amp/frame",
      {
        characterId: character.id
      },
      async (err, html) => {
        const optimizedHtml = await ampOptimizer.transformHtml(html);
        res.send(optimizedHtml);
      }
    );
  } else {
    res.status(404);
  }
});

対応後は何故か CLS のスコアが上がりました🤔

AMP Optimizer の対応をしたら「JavaScript Module バージョンの AMP ランタイムの使用」が新しく対応策として提示されるので対応してみました

https://www.npmjs.com/package/@ampproject/toolbox-optimizer#experimentesm

const ampOptimizer = AmpOptimizer.create({
  experimentEsm: true
});

対応後は TBT の速度があがりましたが、注意書きに書かれている通り、AMP ページが無効になったので対応したのですが外しました😇

テストツールでもエラーになる
https://search.google.com/test/amp

まとめ

結局対応したのは、preloadAMP Optimizer の2つだけでした

AMP キャッシュが効くとはいえ、AMP ページの読み込み速度も改善を提示されたので、Eleventy などで SSG して改善しようと思います