0%

Marketingウェブマーケティングブログ

Posted:2018.05.30

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

この記事の目次

今回はChromeの拡張機能であるLighthouseというツールを使って、ウェブサイトのパフォーマンスをトータルで確認していきたいと思います。これまでにもウェブサイトのパフォーマンスについてはいろんなツールを使ってみていきましたが、今回登場するLighthouseはGoogleの公式ということもあり、ウェブサイトの設計指針やSEOなどの観点からも、重要な指標になるのではないでしょうか。

 

LighthouseはChromeの拡張機能ですので、アドオンで追加するか、デベロッパーツールにも標準で搭載されているのですぐに利用することができます。

 

アドオンから利用する場合は、アドオンを追加し有効化されている状態で、ウィンドウ右上にある灯台のマークをクリックします。そうすると、Lighthouseのダイアログが表示されるので「Generate report」をクリックします。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

間も無くWebページのデバッグが始まります。デバッグが終わると解析結果が表示されますので、しばらく待機しましょう。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

ちなみにデベロッパーツールからLighthouseを利用する場合ですが、デベロッパーツールの「Audits」タブを選択し、中央に表示されている「Perform an audit…」のボタンをクリックします。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

同じく、Webページの解析が始まりますので、結果が出るまでしばらく待ちましょう。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

少し時間が経過するとLighthouseの解析結果がレポートとして表示されます。上部に大きく5つのスコアが表示されています。右から「Performance」「Progressive Web App」「Accessibility」「Best Practice」「SEO」となっています。満点が100点となっており、点数のレベルで緑から黄色、最低は赤と色分けで表示されています。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

WEBサイトのスピードを示す「Performance」

まずは、WEBサイト高速化のためには重要な指標となる「Performance」の項目です。ここでは表示速度の改善に向けたポイントがチェックされます。この数字がいいということはそれだけWEBサイトが高速であるということが言えます。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

評価に対しての具体的なチェックポイントと対策についてはこのように表示されています。(英語で書かれているので翻訳が必要ですね、、)

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

ウェブアプリの仕組みがあるかを見る「Progressive Web App」

これからのWEBサイトは、ブラウザの進化とともに、より機能が充実してくると予想されています。その中で推奨されているのが「Progressive Web App」です。つまり、WEBサイトにどれだけアプリに近い要素や仕組みが組み込まれているかというところをチェックします。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

この数値が高ければ、次世代のWEBサイトの仕様であり、アプリに近いものであると言えますね。ただし、専門的な知識が必要になってくるのでこのスコアを上げるのはハードルが高いでしょう。

 

ユーザーに親切な設計であるかを見る「Accessibility」

次は、デザイン的な観点も含まれるのですが、WEBサイトの情報やコンテンツがいかにユーザーへ伝わりやすいかをチェックされます。例えばコンテンツ内の要素のカラーコントラストなどが挙げられます。ですので、UIに関する知識が必要になってきます。また、ユーザーだけでなくクローラーに対しても情報が伝わりやすいかどうかもチェックの対象となります。タグの記述も厳密にする必要があります。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

この数値が高いということは、それだけユーザーの視点に合わせた構成で、クローラーへの対策も行われているということになります。

 

グーグルが推奨している指針をまとめた「Best Practice」

この項目ではグーグルが推奨しているWEBサイトの設計指針をまとめた内容になります。たとえばHTTP/2に対応しているかどうかや、不正なスクリプトを使用しないという基本的なところから、コンソールにエラーが無いなどもみられます。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

この項目は多岐に渡るのですが、ひとつずつ確実にクリアしていきたいですね。

 

内部SEO対策のチェック項目が並ぶ「SEO」

最後の項目では、SEOの観点から正しくウェブサイトが設計されているかをチェックしていきます。メタタグを揃えるところから、インデックスされる仕組みがあるか、また、モバイルフレンドリーであるかどうかも重要なポイントになります。

 

Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする

 

このスコアを上げることが内部SEO対策の効果的な方法であると言えますね。

 


 

今回は当サイトをチェックしてみましたが、まだまだ改善の余地はありそうですね。。とりあえず表示されていればウェブサイトとしての機能を果たしているかもしれませんが、将来のことを考えると、こういった細かい部分での完成度を高めていくことが、サイトの価値を上げる手段でもあるのではないでしょうか。

 

また後日、別記事にてこれらのスコアを上げるための施策をまとめていきたいと思います。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】