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

Lesson0:このブログのスコア

このブログはあの手この手を使って、色々な試みを行っています。
実験的な要素も多分にあります。
今回は、ユーザー体験(UX)を向上させる試みを行ってみようと思います。

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

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

Google Developers

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

  1. chromeでLighthouseを使う
  2. Lighthouseでサイトのスコアを計測する
  3. トップページのスコア
  4. 記事ページのスコア
  5. まとめ:AMPサイトを更に最適化して高スコアをめざす

副産物的な意味では、満たす項目が多いほど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

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

記事ページのスコア

記事ページ

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

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

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


Lighthouseの良さは、明確で具体的な改善案を提示してくれることです。
Lighthouseの出す提案に沿って、解決していくだけで、着実にスコアを上げることが可能というわけです。

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

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

the next
#amp

AMPでスクロール・インタラクションを実装したのでamp-position-observerについてまとめる。

AMPを最適化して更に高速化する!

サイトのAMP化を検討している方へ導入によるメリットとそうじゃない部分を解説します

3分でOK!AMPサイトにfacebookプラグインでコメント欄を設置する

AMPで「ページトップへ遷移する」ボタンを設置する方法とNuxt.jsでハマったところを解決

AMPでfadeやparallaxを簡単に実現できるamp-fx-collectionの使い方

Google Fonts+日本語をAMPサイトに導入する

AMPサイトでgoogle analyticsを設置する方法