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

シェアする

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

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

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

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

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

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

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

Before:GTMetrixのスタッツ

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

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

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

After:AMP化されたページ

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

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

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

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

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

AMP化でやったこと

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

Font Awesome廃止

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

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

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

ソーシャルプラグイン削除

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

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

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

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

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

CSSフレームワーク変更

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

  1. Sassなどではなく平書きのCSSであること
  2. 容量が小さいこと
  3. JSがない、またはナシでも動くこと

が基準でした。

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

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

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

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

スマホ用srcset画像の作成

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

結論

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

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

Bootstrap 4 フロントエンド開発の教科書
Bootstrap 4 フロントエンド開発の教科書
  • 著者 : 宮本 麻矢, 朝平 文彦
  • 価格 : ¥ 3,608
  • 単行本(ソフトカバー):480 ページ
  • 出版日 : 2018/08/25
  • 出版社 : 技術評論社