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

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

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

Google Developers

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

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

簡単に自分のブログの評価やスコアを計測できます。
今どんな状態かを調べてくれます。

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

chromeのdevtoolのなかにあるlighthouseというツール
chromeの右端にある縦に●が３つ並んだところから「開発者ツール」で、devtoolを起動できます。

上部のいくつかあるタブのなかのAuditsを開いて、一番下にあるボタン、Run auditsを押すと解析がスタートします。
設定は特に何もしなくて大丈夫です。

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

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

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

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

/index.html

{.col-12.mx-auto}

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の恩恵でしょうか。

Lighthouseの良さは、明確で具体的な改善案を提示してくれることです。

Lighthouseの出す提案に沿って、解決していくだけで、着実にスコアを上げることが可能というわけです。

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

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