Google基準で自社サイトのパフォーマンスがどのように評価されているかご存知でしょうか？
ウェブマスター向けガイドラインなどチェックするのも良いですが、もっと手軽な方法は無いか？そんな時におすすめしたいのがGoogleが提供するLighthouseを利用した自社サイトのチェック方法です。
この記事ではLighthosueの使い方をご紹介していきます。
ページ表示速度の見直しを！
この記事を書くに至った理由として、弊社サイトはWordpressで構築されているのですが、カスタマイズ済のテーマを利用しているため、多機能な反面不要なリソースを含みサイト表示速度が早くはありませんでした。
2018/7月にGoogleがSpeedUpdate（ページの表示速度が遅いWebサイトの表示速度に応じて段階的に悪影響を与える）という検索アルゴリズムのアップデートを発表しましたが、Webページの表示速度は今後さらに重要なSEO要因となる可能性が高いです。
例えば、検索表示順位に与えた影響が過去３番目に高かったとされるRankbrainは検索表示からページ閲覧まで、ユーザー行動をSEO要因として利用しています。
「RankBrain」とは、特定の検索クエリに最適と思われるページを、数十億のページから選び分けて検索結果をランキングするために使用している、Googleが開発した機械学習の技術を使った人工知能システムです。
引用：プロモニスタ AIでSEO対策が一変？「RankBrain」により高まるコンテンツ制作の重要性
そのためページ表示速度が遅く、ユーザーがページから離脱してしまっているWebサイトは大きなネガティブ要素となっている可能性があります。
Googleが過去に発表したデータによると、サイトの表示速度は直帰率に以下のように影響を与えることがわかっています。
引用: Google Find out how you stack up to new industry benchmarks for mobile page speed
- 表示速度が1秒から3秒へ落ちると、直帰率は32%上昇する
- 表示速度が1秒から5秒へ落ちると、直帰率は90%上昇する
- 表示速度が1秒から6秒へ落ちると、直帰率は106%上昇する
- 表示速度が1秒から10秒へ落ちると、直帰率は123%上昇する
グラフにすると表示速度毎秒につき下グラフのように直帰率に影響を与えます。※発表データにない4,7,8,9秒は表示速度に直帰率が比例すると仮定して算出・作成
表示速度〜6秒までが特に影響が大きく、毎秒10ポイント近く直帰率に影響を与えていることが分かります。
つまりサイト表示速度に課題を抱えているWebサイトは、表示速度の改善がボトルネックの大部分を占めている可能性があることを示しています。
Lighthouseで自社サイトのパフォーマンスをチェック
Lighthouse はGoogleが公式に提供するウェブアプリパフォーマンスをチェックするためのツールです。
利用する場合はChromeの拡張機能を利用すれば良いでしょう。こちらからChromeに追加・有効化し、自社ページを解析してみましょう。
Lighthouseレポート作成方法 (通常)
解析方法は簡単です。拡張機能を追加後に自社サイトでブラウザに追加されたLighthouseをクリックし「Generaterepot」をクリックするだけです。
解析中しばらく待つと英語でレポートが表示されますが、英語が苦手な場合はChrome「右クリック」→「日本語に翻訳」を試してみることをおすすめします。
Lighthouseレポート作成方法 (シークレットモードで利用する)
日頃からChromeを利用している方はLighthouse以外にもChrome拡張機能を利用してると思います。その場合他の拡張機能のせいでLighthouseの出力レポートに影響を及ぼす場合があります。
そのためシークレットモードでも同様にレポートを表示してみることをおすすめします。
シークレットモードでも拡張機能が利用できるようにするには、表示アイコンを右クリックし拡張機能を管理へ進みます。
移動をしたら[シークレットモードで実行を許可する]をONにします。
![[シークレットモードで実行を許可する]をONにする](https://palcool.com/public/wp-content/uploads/2019/03/234.jpg)
シークレットモードは以下のショートカットで表示できます。
- Windows、Linux、Chrome OS の場合: Ctrl+Shift+n キー。
- Mac の場合: ⌘+shift+n キー
PCとSP(モバイル)で別々にレポートを出力する
上記方法以外にも、Chromeのデベロッパーツールから「Audits」を利用するとPCとSPで表示を出し分けることが可能です。
デベロッパーツールは [ option + command + i ] で起動することが可能です。
デベロッパーツールを起動し「Audits」を選択し、DesktopまたはMobileを選択したのちに、「Run audis」で実行できます。
モバイル表示速度の改善には以下ツールもおすすめ
Lighthouseのみで十分ですが、より簡易的にモバイルページの表示速度を計測するサービスもGoogleから提供されていますので、一度試してみると良いでしょう。
使い方は簡単で、レポートを出力したいURLを入力して待つだけです。
サイトパフォーマンスの改善を実施
Lighthouseは「Performance」「Accessibility」「BestPractices」「SEO」という4つの観点でサイトを評価されます。
改善方法はWebサイトの構築方法によるため一概に言えませんが、サイト表示速度を改善するのであれば、以下項目の改善を目指します。
- サーバーとの通信回数を減らす
- サーバーとの通信量を減らす
- インフラを見直す
特に実行速度を改善する上ではHTML,CSS,Javascriptなどフロントエンドのリソースを重点的に見直しまたWordpressを利用している場合であれば、サイト高速化のための様々なプラグインが提供されているので、自社のサイトに合わせて導入すると良いでしょう。
不要なリソースを調べるには、デベロッパーツールで「CSS and JS code coverage」を実施して、プラグイン等で利用されていないリソースを探し当てると良いでしょう。
その他通信負荷を調べる場合はデベロッパーツールの[Performance]を利用するか「pingdom」などを試してみることもおすすめいたします。
弊社サイトの改善結果
当サイトはWordpressのテンプレートを利用して構築されていたため、不要なリソースを省くだけでも大幅にパフォーマンスが向上いたしました。Lighthouseでは下図のように数値が改善しました。
また改善で1番重視していたページ表示速度は、サーバーの負荷が軽い時には初回表示を6秒から1.9秒まで落とすことに成功しました。
今回改善に費やした作業時間は約1日でしたので、ここから更にパフォーマンス向上を目指していきたいと思います。
まとめ
いかがでしたでしょうか？次に実施する施策が明確に決まっていないのであれば、まずサイトの表示速度を改善することを強くおすすめします。
Palcoolではソースコード改善やインフラ改善などのテクニカルなアドバイスも実施しておりますので、もしお困りの部分が出てきましたら是非お気軽にご相談ください。
