AMPランタイムのpreload(先読み)とamp-boilerplateを使い、ベストプラクティスに即して実装してみました。
さて、劇的にスピード改善するのでしょうか？

Lighthouseの中でも重要な位置を占める指標である、performance。
一言で言えば、ページの表示が高速かどうか、です。
ページがロードされるのにかかる時間は、ユーザー体験に大きなマイナスとなります。

「ページが表示されるのに３秒以上かかると、半数以上の人が表示を待たずに離脱する」というのは有名な話です。

このブログはAMP HTMLで構成されています。
AMPとはwebサイトを超高速で表示させるための技術です。

おそらく、モバイル時の通信環境でも待ち時間が比較的少なくなっていると思います。

しかし、googleのブログで以下のような内容を発見。
Google Developers Japan: AMP をさらに高速化する方法
まだまだ最適化ができることを知りました。

今回はlighthouseのperformanceを使いながら、さらなるスピード改善を狙っていきます。

まずは上記のリンクをみて改善できるポイントを整理します。

やることはシンプルです。

• link rel=preloadを設定していく
• <style amp-boilerplate>でbody { visibility:hidden }を設定する

具体的なAMPへの落とし込みは、以下のサイトを見ながらフォロー。
Optimizing your hosted AMP pages – AMP
当然英語ですが、google翻訳で華麗に。

黄色のキャンバスに鉛筆が揃えて置かれる画像

rel=“preload” によるコンテンツの先読み | MDN

v0.js<script>タグをプリロードします
metaタグのlinkで先読みしたい要素（今回はjs）に対して、preloadを設定する
<link as=script href=https://cdn.ampproject.org/v0.js rel=preload>

jsのほうはいままでどおり、設定しておく
js => { "async src":'https://cdn.ampproject.org/v0.js', rel:'preload'},

普通にHTMLにmetaを書くならば以下でOK。
<link as=script href=htps://cdn.ampproject.org/v0.js rel=preload>

nuxtだと、こんな感じになる。
{ as:'script', rel:'preload', href:'https://cdn.ampproject.org/v0.js' },
しかし、nuxtでページに設定するとビルドエラーが出てしまった。

いくらか試行錯誤したら、以下で大丈夫だとわかった。
{ rel:'preload', as:'script', href:'https://cdn.ampproject.org/v0.js' },

link relでは、as=scriptは行頭ではない場所に書くようにしよう。

performanceのスコアは下がりましたね・・・
この原因はfirst meaningful paintとfirst contentful paintでしょう。
preloadをすることで、一度にドカンと表示されるような感じになっちゃいましたね。

参考にしたブログの記事では、この状況は見越しているようで、さらにSSRなどでfirst meaningful paintを補完するというような文脈で語られていました。

当然、改善している箇所もあります。
上記の２つの項目以外は、概ね改善しています。
特にEstimated Input Latencyに関しては、劇的に変化しています。

first Meaningful paintが鍵ですねぇ。
おそらく、bodyのvisibilityをoffにしているため表示がランタイムのロードを待つ形になっているせいだと思われます。

ただ、その他の指標はほぼ改善して赤文字が消えました。
点数は下がったのですが、これで設定を戻してしまっても意味がないと判断しました。

ここから、first ~ paintをどのように解決するのかを考えていく必要がありそうです。