Webサイトのパフォーマンスチューニング

EWMファクトリーのWebサイト運用チームのメンバーの気付きや学びを発信しています。今回は、Webサイトのパフォーマンス改善に取り組んだ事例をご紹介します。

経緯

弊社で管理しているWebサイトが、Google Search Consoleでクロール申請をした結果、「クロール済み　インデックス未登録」になり、なかなか検索で上がってこなかった為、SEO対策の一環としてパフォーマンスチューニングをすることになりました。

聞いた話によると、近年Googleのクローラーによる評価が厳しくなっているそうです。

実際に、Googleのジョン・ミューラー氏もこのように述べています。

“クロールやインデックスをグーグルは休んだりはしない。常に実行している。もし管理サイトがクロール／インデックスされていないとしたら、それは次のことを意味する。

グーグルは、あなたのサイトよりも重要だと感じるサイトをクロール／インデックスすることを優先した対策としては、「重要なサイトを見逃している」とグーグルに納得させるようにしなければならない。”

基本的に弊社ではフロントエンドチームやアプリチームなどで対応するのですが、貴重な体験だったため、手を挙げて手伝わせていただくことになりました。

パフォーマンスチューニングとは

パフォーマンスチューニングとは、簡単にいうと、Webサイトの表示速度を上げるためにとる施策のことを指します。Webサイトを表示する速度が遅くなることによって、ユーザーの離脱率が増え、サイトを閲覧してもらえなくなる可能性が高くなるため、どれだけ商品がよくてもそのサイトから購入されることは少なくなります。

Googleが2017年に公表している離脱率に関するデータによれば、

ページの読み込み時間が1〜3秒の場合、離脱率は32%、1〜5秒の場合は90%、1〜6秒の場合は106%、1〜10秒の場合は123%上昇することが報告されています。

参考サイト：Find out how you stack up to new industry benchmarks for mobile page speed

つまり、Webサイトの表示速度が低いことは、そのWebサイトの評価も低いということに直結します。

表示速度を上げるための主な施策としては、

画像や動画のファイルサイズを抑える
HTMLやCSSファイルのサイズを圧縮する
遅延ロードを設定する

などが挙げられます。

実際に取り組んだこと

問題点

今回パフォーマンスチューニングする必要があったサイトの問題点は、

画像容量が重い（.jpg、.png）
CSSやJSファイルが最適化されていない
ウェブフォントをCDN経由で使用している

などが挙げられました。

今回はとりあえずGoogle Chromeの検証ツールのLighthouseでスコアをあげることを目標としました。

ちなみに、この時のスコアをLighthouseで3回測定した結果、

で、平均35.7でした。

取り組み

まずはアプリチームの方に、

画像ファイルのWebp化＆圧縮
最初に表示されない画像とJSファイルの遅延読み込み

を実施していただき、この時点でスコアは50くらいまで上がりました。やはりWebpは軽量なので、かなり効果がありました。

続いて、私の方で、

CSS、JSファイルの最小化
KV付近の画像の事前読み込み
ウェブフォントをサブセット化し、セルフホスティング

を実施しました。

特に効果を感じたのは、ウェブフォントをサブセット化し、セルフホスティングしたことで、スコアにもかなり変化がありました。

ウェブフォントのサブセット化、セルフホスティング

Webフォントとは、Webサイト上でCSSを使って自由にフォントを表示するための技術である。PCに依存しない技術として注目されており、CSS3の普及に伴いWebフォントの開発が進んでいる。Webデサインにあったフォントを利用できる事や、デザイン性の高い文字も画像ではなく、文字で記述できるので SEO 的に有利であるなどメリットがある。

参考サイト：Webフォントとは

簡単にいうと、どんな環境でも見ることができるおしゃれなフォントです。

おしゃれなだけでなく、ちゃんと文字としてマークアップできる為、Webページをきちんと内容のある文書とすることができます。

ただ、デメリットとして、日本語フォントだと必要のない文字まで全て読み込んでしまうので、読み込みに時間がかかり、表示速度を低下させる原因になってしまいます。

そこで、使用しているウェブフォントをダウンロードし、サーバーに設置することで、読み込み時間を短縮しようと考えました。

ここで問題になってくるのが、ウェブフォントのライセンスに則っているかということです。サーバーに設置・サブセット化するにあたり、関係してくるのが、「再配布」「改変」です。

フォントファイルをサーバにアップロードすると、インターネット上にフォントを公開している状態と変わらないので「再配布」にあたる可能性があります。

また、「フォントのサブセット化」も、.woffから.otfや.woff2に変換する必要があるので、「改変」に当たる可能性があります。

参考サイト：フォントをサーバーにアップしてWebフォントとして使う手順と方法を解説

設置しようとしているウェブフォントがこれらに抵触しないかを調べる必要があります。

上記がクリアできたので、サブセット化しようと考えました。