ウェブサイトAMP化でレスポンスはどれだけ速くなる？

ウェブサイト高速化をサイト丸ごとAMP化で試してみました。

Googleの提供するSearch Consoleでもついに速度のグラフが出てきて、レスポンススピードをかなり気にしないと増えるトラフィックも増えない、という感じになってきました。

別でやっているサイトの1つが色々やっても今ひとつトラフィックが上がってこないので、テコ入れとしてサイトを丸々AMP化してみました。

そのサイトは情報検索型のサイトで、ニーズはあると思うのですがSearch Consoleで見ても狙ったキーワードで今ひとつ上がって来ていない。情報検索型サイトの常ですが、いきなり膨大にページが出来てしまう割には確認されるページ数が増えない＆他のサイトより上位に上がってこない、という・・・。

とはいえ、同じタイプのサイトが見当たらないので、独自性はあるのですが、その割には引っかからないので、何らかのテコ入れをするために「サイト丸ごとAMPで書き直したら劇的速度改善になるのでは？」と考えました。

ということでまずAMP化前、html表示でのサイトのGTMetrixのスタッツを見てみます。

html版？ページの全体的な評価はこんな感じでした。トップとかではなく検索結果のページなんですが、その割には読み込み2.2秒、トータルサイズも478KBとそこそこ良い結果です。すでに色んなものを削ぎ落とした後ではあります。

ウォーターフローだとこんな感じです。ところどころ接続待ちの肌色で棒が伸びてるところがありますね。

ちなみにPagespeed Insightだと48点です。

こちらがすでにライブになっているAMP化されたページのスタッツ。

ななななんと、読み込みは1.4秒でかなり改善されました。ページサイズは307KBで、あまり減った感じはないですが、それもそのはず、CSS周りなどは入れ替えをしていますが、コンテンツのコーディングはAMPやCSSに合わせただけで殆ど変わっていないためです。

最初にいくつかファイルをひっぱって、そこからちょっと息継ぎがあるのでそこが縮まればさらに速度改善しそうな・・・。にしてもウォーターフローが余裕で1ページに収まるくらいまで短縮されました。

html版はBootstrapベースだったのですが、AMPでMilligramに入れ替えた分のダイエットも結構あると思います。スコアはPageSpeedが95%のA、Yslowも88%でB、とかなりいい感じですね。

そしてなんとPagespeed Insightだと・・・92点！内容変えずにここまで数値が変わるのって珍しい気がする。

AMP化する前にやったことも先に挙げておきます。

Bootstrapと相性のいいFont Awesomeですが、サイト全体でソーシャルアイコンしか使っていなかったので廃止。ソーシャルアイコンをSVGに入れ替えました。

これでFont Awesome関連のCSSや、勝手に呼んでくるWebフォントもなくなりました。

SVGも単純なものはインライン化したりしています。

外部ファイルを呼ぶものは総じてGTmetrixやPageSpeedでは評価を下げます。フッタにいれていたソーシャルプラグイン、TwitterタイムラインやFacebookページの埋め込みをバサッときりました。

軽量化したいのと、そもそもそこ経由でフォロワーやシェアが増えていなかったので天秤にかけて外しました。

これは結構重要で、いいね！やツイートボタンもサイト上で押されている感じがなければ、さっさと外すかリンクに置き換えたほうが吉です。

ボタンは毎回押されないですが、外部ファイルからの読み込み遅延は毎回起こるので。

そしてAMP化でやったことです。

楽ちんで便利なBootstrapをやめて、Milligramという小さなCSSフレームワークに変えました。CSSフレームワークの要件は3つあって、

が基準でした。

単純にCSSフレームワークで楽に書きたい前提ですが、AMPはCSSをドキュメント内埋め込みしないと行けないので、1.のSassなどではないことは重要です。

実際にはmilligram.min.cssと自分用のstyle.cssをAMPのCSS指定タグ内でincludeしています。

AMPのCSSは50Kバイト以内、という制限があるので2.の容量が小さい、も重要です。

またJS利用のギミックは基本使っていないので、JSなしでも問題のないCSSフレームワークは・・・ということでmilligramになりました。

一応レスポンシブでPCとスマホ両対応の前提だったのですが、メインビジュアルなどで使う画像は1200pxくらいのでかいのを使ってました。まぁこれは直しとこう、ということで、一応半分サイズ(面積は1/4)の小さい画像をつかってamp-imgの中でsrcset指定して読み分けしています。

基本的に機能を落とすことなくAMP化できているので概ね満足で、あとはGoogleの反映待ちです。

また別運用でトラフィックがついているサイトもこの辺を参考に可能な限りスピードアップしてみたいな、と思っています。CSSのincludeやフレームワークのJS外しなどは普通に流用できそうだと思っています。