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

2020-06-11

(LastUpdated: 2020-06-11)

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

  1. Lesson1:Performanceを改善する
  2. AMPでもスピード改善の余地はある
  3. 始める前に現状を把握
  4. AMPを更に高速化する
  5. AMPランタイムを優先して読み込ませる
  6. 最適化の結果
  7. まとめ:とりあえず改善できたが課題が残る

Lesson1:Performanceを改善する

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

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

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

子猫がシーツの上からこちらを見つめる画像 このブログはAMP HTMLで構成されています。 AMPとはwebサイトを超高速で表示させるための技術です。

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

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

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

始める前に現状を把握

openと書かれた黒板のような素材のボード スコアに関しては以下の記事を参照してみてください

トップページの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は行頭ではない場所に書くようにしよう。

最適化の結果

octcatのステッカーが貼られたmacをあやつる人の画像

トップページのスコア

{.col-12.mx-auto}

記事ページのスコア

{.col-12.mx-auto}

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

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

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

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

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

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

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


タグに関連づけられた記事

AM2

JAMstacなブログにまつわる、技術的なことなどを記録しています。