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回測定した結果、

1. 36
2. 37
3. 34

で、平均35.7でした。

取り組み

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

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

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

続いて、私の方で、

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

を実施しました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

サブセット化

サブセット化は簡単に言うと、使わなさそうな文字は外して軽量化しようといったものです。

今回行った手順は、

1. ダウンロードした.woff2ファイルをサブセット化のため、otfに変換
2. サブセット化（JIS第1水準+常用漢字+ひらがなカタカナ英数字記号など）
3. 再度.woff2化
4. これをフォントの種類×使用する太さの数分繰り返す

といった流れでした。

サブセット化することにより、元の.woff2ファイルから約60%ほどサイズを減らすことができました。（1.08MB　→ 443KB）

反映結果

追加で行った施策を反映させ、Lighthouseで3回測定した結果、

1. 64
2. 62
3. 59

で、平均は61.67まで上がりました。

正直このスコアはそこまでいいものではありませんが、ひとまず対応できる範囲で最大限スコアを改善することができたと思います。

無事インデックス登録され、検索上位に表示されるようになったので、これ以上は改善しなくても大丈夫そうです。

ここから更にスコアをあげる場合は、

• HTTP1.1ではなくHTTP2を使用
• CSSやJSを分割し、必要な部分以外を遅延読み込み
• 適切なキャッシュの設定

などが挙げられます。

まとめ

今回はSEO対策のためのパフォーマンスチューニングを手伝わせていただいて、いろんなチームの方々に教わりながらスコアを改善することができました。

パフォーマンスチューニングは地道な作業が多いですが、ページの品質に関わってくる重要なことなので、可能であれば、設計段階から考慮するとパフォーマンスもいいサイトが制作できると思います。

コラボレーターの通常業務を超えて手を挙げて挑戦してみることによって、たくさんの知識とあまり関わることのないチームとも関わることができ、貴重な経験となりました。