ポートフォリオサイトをLighthouseで計測して直していく
概要
・Web系へ転職を目指しながら、趣味でVue（今回はNuxt3）を触ってる初学者です。（本業はJavaで業務システム作ってます。）
・今回、ポートフォリオサイトを作成し今まで無視していたLighthouseに着目したよ。
・自分の学習、振り返りのために書いてます。（なので、TechではなくIdeaにさせていただきます。Ideaでも微妙ですがそこは優しめで・・・。）
対象読者
・初学者の奮闘を楽しめる方。
・Nuxt3（Vue）を使ってパフォーマンスを向上させたい方。
対象のサイト
今回、私が作ったサイトはポートフォリオサイトとなります。
要件としては、下記になっているためバックエンドがないシンプルなサイトになっています。
・私の自己アピールができること
・過去に作ったWebサイトをまとめたい
使用したフレームワークやツールは下記となります。
- Nuxt3
- Pinia
- TailwindCSS
- Github
デプロイしたサイトが下記になります。
本題（Lighthouseの結果から）
:::alert
・localhostで測定しています！
・index.vueで測定しています！
:::
これを高いとみるか低いとみるかは人それぞれだと思いますが、
バックエンドがない静的なサイトを考慮すると低いな・・・というのが正直な感想です。
SEOに関してはCSRなので仕方がないにしても、パフォーマンスの低さは目立つので直していきたいと思います👀
ユーザー補助
ユーザー補助とは、アクセシビリティのことみたいです。
老若男女や障がいを問わず誰でも快適に使えるサイトを目指そうということですね。
ここらへんはデジタル庁さんがスーパー分かりやすく教えてくれました。ありがとう。
というわけで、指摘された中でいくつかピックしました！
ドキュメントに<title>要素が指定されていません
指摘のタイトル通り、HTMLのtitle要素が指定されていないため減点されたようです。
Nuxtのドキュメントに書いている通り、「nuxt.config.ts」の設定を行います。
ということで、下記のように設定しました。
※ title以外のメタ要素も設定しています。
app: {
head: {
charset: "utf-8",
viewport: "width=device-width,initial-scale=1",
title: "Tanuki Moon",
meta: [{ name: "description", content: "たぬきむーんのポートフォリオサイトです。" }],
}
設定したメタ要素
- charset : 文字コード
- title : ページのタイトル
- viewport : ウェブコンテンツのウィンドウ領域
- description : ブラウザで検索した時に表示される概要
引用
ただ、これだけだと画面遷移しても同じタイトルのままなので、各ページに設定する必要があります。
<script setup>
useHead({ title: "Tanuki Moon - Home" });
</script>
今回はtitleだけ変更していますが、他のmeta要素も個別に設定できそうです・・・！
ただ、今回はCSRで作っているので「右クリック→ページのソースを表示する」で確認すると
titleはconfigで設定した文字列になっていました。
とはいえ、SEOも謎多きため影響があるか分かりませんが・・・。（あるかもですが、僕には分かりませんゴメンナサイ）
リンクに識別可能な名前が指定されていません
これはなんぞや🤔？って感じです。
英語にすると、「Links do not have a discernible name」らしい。
ということでstackoverflow先生で回答があったのでペタリ。
どうやら、「aria-label」属性をきちんと付けないとダメだぞ！って指摘のようです。
表面的な解答だけなので、なぜ付けないといけないのかを少し学習しました。
アクセシビリティの説明で、老若男女や障がいを問わず誰でも快適に使えるということを説明しましたが、その目的を実現するための機能といったところです。
aria-label属性を付けることでスクリーンリーダーといった支援技術で正しく伝えることができるようです。
余談なのですが、私はスクリーンリーダーという技術を私はこの記事を書くまで知りませんでした。それに、HTMLなんて対して設定しなくてもいいだろとも思っていました、
しかし、今回アクセシビリティのことを調べるうちん、自分の知識の無さと考慮のなさを痛感してしました。
とはいえ、ここで立ち止まるというかはこれからもどんどん知識を増やしていってどんな方にも易しい（優しい）Webサイトを作れるように頑張っていきます👊
引用（デジタル庁さんのサイトにも書いてました・・・。改めて見直さないとだ。）
今回の指摘事項はTwitterやGithubのアイコンに対してでしたが、ボタンや文字列にも必要な要素だと思います。
また、aria-label以外にもアクセシビリティを向上させる属性はたくさんあるようなのできちんと把握する必要があると感じました。
指摘修正後の結果
表面上はほぼ満点に近くなりました🎉🎉🎉🎉🎉🎉
ただし、注意点があってLighthouseは全てを見てくれるわけではありません。
このことに関してはLighthouseも指摘してくれています。
パフォーマンス
最も実感ができる項目かもしれません。
ページの読込速度や画像の表示などを計測してくれて点数化されます。
この項目が低いとユーザーが離れ、逆に快適だとユーザーが定着してくれそうですね。
とはいえ、この項目はコンテンツが増えるほどパフォーマンスは落ちそうですので
奥が深い項目だなと思います。
そして、私は61点・・・単純なサイトなのに低い😇と思ってました。
localhostの注意点
localhostで測定すると、おそらくバンドル化していない？ようで点数が大幅にダウンします。
そのため、firebaseDeployを使ってデプロイした後測定すると・・・
パフォーマンスが80点まで上がりました🎉🎉🎉🎉🎉
指摘事項としては、主に画像最適化に関することでした。
ということで指示通り画像を出力し直して再度測定したところ・・・
92点😇😇
パフォーマンスに関しては、画像,JSファイルといった面が評価されるようです。
今回作成したサイトは画像が1つしかないのですぐ評価が緑になりましたが、ECサイトやコーポレートサイトだと大変そうですね・・・。
最後は早足になりましたが以上になります！
Lighthouseを意識してこれからもサイトを作っていきますb
Discussion