ブログ評価ツールLighthouseを使ってUXを向上させる

2020-06-11

(LastUpdated: 2020-06-11)

このブログはあの手この手を使って、色々な試みを行っています。 実験的な要素も多分にあります。 今回は、ユーザー体験を向上させる試みを行ってみようと思います。 この狙いは 「アクセス数の向上」、「直帰率の軽減」、「1ユーザーあたりのセッション数の向上」 です。

  1. このブログのスコア
  2. chromeでLighthouseを使う
  3. Lighthouseでサイトのスコアを計測する
  4. まとめ:AMPサイトを更に最適化して高スコアをめざす

このブログのスコア

具体的な方法は、googleが提供するLighthouseというツールを活用して、それに則った改善を行うというものです。 Lighthouseを使うことで、とても気軽にサイトの評価・採点を行うことができます。

Lighthouse に監査したい URL を指定して実行すると、ページに対する集中的なテストを実行してパフォーマンスに関するレポートを生成できます。

Google Developers

googleが考えるユーザー体験やサイトの品質の指標に照らしてくれます。 客観的に見ても、ユーザーに対してプラスになることが多いように思うので、取り組む価値はあります。

副産物的な意味では、満たす項目が多いほどgoogleの検索結果などで優遇される可能性もありますね。

chromeでLighthouseを使う

木製の三角定規と白い大きなキャンバス 簡単に自分のブログの評価やスコアを計測できます。 今どんな状態かを調べてくれます。

ぜひ、試してみてください。

起動方法

chromeのdevtoolのなかにあるlighthouseというツール chromeの右端にある縦に●が3つ並んだところから「開発者ツール」で、devtoolを起動できます。 上部のいくつかあるタブのなかのAuditsを開いて、一番下にあるボタン、Run auditsを押すと解析がスタートします。 設定は特に何もしなくて大丈夫です。

  • Performance -> 表示スピードの速さが早いか
  • Progressive Web App -> この機能に即した仕様を満たしているか
  • Accesibility -> ユーザーが閲覧する上で不親切なところがないか
  • Best Practice -> いわゆるベストプラクティスが踏襲されているか
  • SEO -> SEOに適した仕様になっているか

上記の5項目について採点と、100に近づけるための改善内容を示してくれます。 ここで 提示してくれる改善内容がかなり具体的で、使えるものが多い です。 英語ですが、翻訳ツールでちょこちょこやればOKです。

Progressive Web App(PWA)などはサイトによっては、あまり重視しない項目もあるかと思います。 このブログでは、PWAに関してはあまり知識もなかったので、これを機に学んで可能な限り実装してみたいと思います。

Lighthouseでサイトのスコアを計測する

並んだ試験管にパープルの液体を注入している画像 今回はトップページと、記事のページを計測してみました。 表示される要素が大きく違うので、計測結果に違いがあると考えたためです。 このサイトの結果はこんな感じでした。

トップページのスコア

/index.html

{.col-12.mx-auto}

  1. Performance 👉 88
  2. Progressive Web App 👉 65
  3. Accesibility 👉 73
  4. Best Practices 👉 87
  5. SEO 👉 91

記事ページのスコア

記事ページ

{.col-12.mx-auto}

  1. Performance 👉 87
  2. Progressive Web App 👉 65
  3. Accesibility 👉 69
  4. Best Practices 👉 93
  5. SEO -> 91

初期値でそこそこ良いスコアが出ています😄 AMPの恩恵でしょうか。

まとめ:AMPサイトを更に最適化して高スコアをめざす

暗闇で輝くオレンジ色の光のサークルの画像 Lighthouseの良さは、明確で具体的な改善案を提示してくれることです。 Lighthouseの出す提案に沿って、解決していくだけで、着実にスコアを上げることが可能というわけです。

このブログもまだまだ改善の余地あり。

次回は、lighthouse最初の項目であり、最も重要なPerformanceの改善に取り組んでみます。


タグに関連づけられた記事

AM2

JAMstacなブログにまつわる、技術的なことなどを記録しています。