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

Lesson1:Performanceを改善する

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

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

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


このブログはAMP HTMLで構成されています。
おそらく、モバイル時の通信環境でも待ち時間が比較的少なくなっていると思います。

AMPとは、webサイトを超高速で表示させるための技術です。
googleが開発したフレームワークを利用することで、実現が可能です。

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

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

始める前に現状を把握


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

ブログ評価ツールLighthouseを使ってUXを向上させる
サイトの改善に役に立つレポートを提示してくれるlighthouseを使ってUXを向上させる計画です。この狙いはアクセス数の向上、直帰率の軽減、1ユーザーあたりのセッション数の向上です。...

トップページのTips

記事ページのTips

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

最適化の結果

トップページのスコア

記事ページのスコア

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

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

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

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


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

ただ、その他の指標はほぼ改善して赤文字が消えました。

点数は下がったのですが、これで設定を戻してしまっても意味がないと判断しました。

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

Social Share
series
【 Lighthouse100点を目指す! 】
ChaosBoy

テーマは「脱・思考停止」。
コメントはtwitterでお気軽に。