AMP Page Experience Guide で AMP を高速化する
AMP Fest で AMP の速度改善チェックツールが公開されたので早速使ってみました
AMP Page Experience Guide
使い方は URL を入力して解析ボタンをクリック
今回はダルシムのフレーム表の AMP ページで試しました
Core Web Vitals
Firebase Functions の Express でレンダリングをしているからか、読み込み速度が結構遅いです
提示された改善案
解析が終わると速度改善の案が表示されます
AMP Optimizer の使用
AMP Optimizer の使用を提案されます
AMP ランタイムのプリロード
AMP 関連の JS のプリロードが提案されます
<link as="script" href="https://cdn.ampproject.org/v0.js" rel="preload">
すべてのリソースの読み込み可能にする
モバイル フレンドリー テストツールで確認すると、グーグルの広告が読み込めずこの改善案が表示されていました
侵入型インタースティシャルの使用の回避
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 公式のチュートリアルを見ながら導入していきます
インストール
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 ランタイムの使用」が新しく対応策として提示されるので対応してみました
const ampOptimizer = AmpOptimizer.create({
experimentEsm: true
});
対応後は TBT の速度があがりましたが、注意書きに書かれている通り、AMP ページが無効になったので対応したのですが外しました😇
テストツールでもエラーになる
まとめ
結局対応したのは、preload と AMP Optimizer の2つだけでした
AMP キャッシュが効くとはいえ、AMP ページの読み込み速度も改善を提示されたので、Eleventy などで SSG して改善しようと思います
Discussion