Google Lighthouseはサイト改善の要|SEOにも対応

日々頑張ってサイトを運営している方にこそ使っていただきたいのですが、Googleが提供しているツール「Lighthouse(ライトハウス)」がとても便利です。

 

サイト読み込み速度やユーザビリティの改善案、おまけにSEOの改善案と、サイトパフォーマンスの改善・向上に必要なことを提案してくれる便利ツールです。しかも完全無料で使えます(さすがGoogle)。

 

スコアリングしたいサイト上でLighthouseを起動する、という使い方になります。とても簡単なので、解説していきますね。

 

現時点では日本語対応されていませんが、翻訳機能を使えば問題ないかと思います。

 

 

Google Lighthouseはサイト改善の要|SEOにも対応

 

Google LighthouseはGoogle Chrome拡張機能でリリースされています。なのでまずはChromeにインストールする所から始めましょう。

 

Lighthouse - Chrome ウェブストア
Lighthouse – Chrome ウェブストア

 

インストールしたら、スコアリングしたいサイト上でLighthouseを起動していきます。右上のパズルのようなアイコンをクリックして、Lighthouseを選択して「Generate report」をクリックしましょう。

 

Lighthouseの起動
「Generate report」をクリック

 

サイトの検証が始まります。検証はおよそ1分以内で終わります。なんかやけに滲んで見にくいと思いますが、元々滲んでいたんです。

 

サイトの検証中

 

検証が終わると、「パフォーマンス」「アクセシビリティ」「ベストプラクティス」「SEO」のスコアが表示されます。

 

画面をスクロールしていくと、各項目におけるスコアの改善案が色々と書かれてあるのが分かります。これらを参考にしてサイト改善を行っていきましょう。

 

Lighthouseの計測結果

 

また、スコアを計測したい項目を絞ったり、検証デバイスをPC版ページ版とモバイル版で切り分けたりできます。画像の右上の歯車マークをクリックして、チェックボックスにチェックを入れたり外したりしましょう。

 

例:検証デバイスをモバイル版にする
検証デバイスをモバイル版にする

 

検証結果
モバイル版ページの検証結果

 

例:検証デバイスをPC版ページの版にする
検証デバイスをPC版ページの版にする

 

検証結果
PC版ページの検証結果

 

「パフォーマンス」「アクセシビリティ」「ベストプラクティス」「SEO」のスコアを計測できると書きましたが、それぞれの意味をちょっと解説していきます。

 

パフォーマンス

 

サイトの表示速度を改善させるために必要なこと | リュウセイブログにて紹介した「Google PageSpeed Insights」と似たようなものです。

 

SEOにも重大に関わる「サイト表示速度」の問題点と改善策が分かる項目ですね。

 

Google PageSpeed Insightsと合わせて活用してみましょう。

 

アクセシビリティ

 

ユーザーがよりアクセスしやすいサイト作りにするための改善策について提案してくれる項目です。

 

低視力のユーザーが見ても分かるような色使いやボタンの装飾など、ユーザーに配慮したサイトになっているかどうか。

 

一言で言うならば「ページの使い勝手」ですね。詳しくはアクセシビリティ  |  Web  |  Google Developersを参照してください。

 

ベストプラクティス

 

よく分かんないですが、低解像度の画像についての改善策を提案してくれます。レスポンシブ画像を提供する

 

SEO

 

SEOとは「Search Engine Optimisation」の略で、検索結果にページを上位表示させるための施術全般を指す言葉です。

 

SEOチェックツールとしても使えますが、無料なのでそこまで精度には期待できません。簡易的なチェックとして使うのが良いでしょう。

 

SEOと言えば、これからの時代はMFI(モバイルファーストインデックス)です。

 

サイトがモバイルフレンドリーかどうか一撃で判定してくれるツール | リュウセイブログにて紹介しているツールも合わせて使うと、よりサイト改善におけるヒントを得られるはずですよ。

 

プログレッシブウェブアプリ

 

もう一つ、プログレッシブウェブアプリ(PWA)という項目もあります。

 

これは、モバイル向けのWebサイトをアプリのように使える仕組みのことを指します。

 

PWAに対応させると、アプリのダウンロードを必要とせずに、ホーム画面へのアイコン追加が可能になります。また、Webサイト内でホーム画面への追加を訴求するバナーを表示させることも出来ます。

 

これが何故Lighthouseに出てくるかと言うと、PWAを実装することでWebサイトのコンテンツがキャッシュ(Webデータを端末に一時保存)され、サイト表示速度が高速になるからです。

 

更に更に、オフラインでサイトを閲覧できるようになるので、よりユーザーが利用しやすいWebサイトとなるわけですね。

 

このPWAですが、WordPressで実装させることができます。やり方は下記の記事を参考にしてみてください。

 

WordPressにPWAを実装する方法【Googleも推奨】 | リュウセイブログ

 

 

まとめ

 

Lighthouseはあくまでサイト改善のためのヒントが得られるだけのツールです。実際には自分で改善を行っていく必要があるので、時間はかかると思いますが一つずつ調べながらやっていくしかありません。

 

スコアを100点にするのはほぼ不可能なので、明らかな問題点から優先的に解決していき、細かい部分は無視しても構いません。

 

気になるライバルサイトでLighthouseを起動させ、サイト分析に役立てるという使い方も効果的ですね。

 

それでは、ここまで読んでいただきありがとうございました。

チャオ(・∀・)

 

PS.
記事が参考になったら、ぜひRSS登録お願いします!毎日更新しているので、RSSとの相性バツグンですよ(・∀・)♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です