AMPを最適化して更に高速化する！

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

Lesson1：Performanceを改善する

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

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

AMPでもスピード改善の余地はある

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

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

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

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

始める前に現状を把握

スコアに関しては以下の記事を参照してみてください

トップページのTips

{.col-12.mx-auto}

記事ページのTips

{.col-12.mx-auto}

AMPを更に高速化する

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

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

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

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

AMPランタイムを優先して読み込ませる

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'},

Tips for nuxt.js

普通に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は行頭ではない場所に書くようにしよう。

最適化の結果

トップページのスコア

{.col-12.mx-auto}

記事ページのスコア

{.col-12.mx-auto}

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

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

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

まとめ：とりあえず改善できたが課題が残る

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

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

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