デザイナーでもできるLighthouseスコア改善

Ateam Finergy Inc. Advent Calendar 2021の22日目 を担当いたします。

## はじめに
Google は様々な要因によって検索ランキングを決定していますが、2021年6月中旬頃から Core Web Vitals (コアウェブバイタル) の各指標が、要因の一部として影響することになりました。

https://developers.google.com/search/blog/2021/04/more-details-page-experience

今回、その Core Web Vitals の改善に役立つツールとして Lighthouse (ライトハウス) を利用し、指標別の改善実例をご紹介できればと思います。

## Core Web Vitals のおさらい
Core Web Vitalsとは、 Webサイトの健全性を示す重要指標 のことです。
これらの重要指標を改善するためには、Googleが提供しているツールなどを使用し、UXを改善する必要があります。
Core Web Vitals の 重要指標は以下の3つです。

### 1. LCP（Largest Contentful Paint）
ページ内で、記事ページであれば アイキャッチ画像 など、
`最重要の要素が読み込まれるまでの待機時間` を示します。

### 2. FID（First Input Delay）
ページ内で、クリック / キー押下 / マウス押下 / タッチ操作など、
`ユーザーが行動を起こせるまでの待機時間` を示します。

### 3. CLS（Cumulative Layout Shift）
ページ内で、読み込みに応じて発生する予期せぬレイアウトのズレなど、
`視覚的な安定性を測定する指標` を示します。

## Lighthouse とは
Googleは、Core Web Vitals の重要指標である LCP / FID / CLS を測定するツールを複数提供しており、その中の一つが Lighthouse というツールです。

> Lighthouse はオープンソースの自動化されたツールでウェブアプリの品質向上に役立ちます。 このツールは Chrome 拡張機能として実行するか、コマンドラインから実行できます。 Lighthouse に監査したい URL を指定して実行すると、ページに対する集中的なテストを実行してパフォーマンスに関するレポートを生成できます。 今後は弱点を検出するテストを利用して、アプリの品質改善の指針を得られるようになります。

https://developers.google.com/web/tools/lighthouse/?hl=ja


## Lighthouse の指標
Lighthouseでは、以下の5つの指標が計測できます。

### 1. Performance
ページの読み込みや、ユーザーの操作で発生するレスポンスの速さなど、
`ページスピードに関する評価`を示します。


### 2. Accessibility
テキストや背景色が適切なコントラストか、HTML構造が正しく設定されているかなど、
`ユーザー / 検索エンジンのロボットに対して、最適な作りになっているかの評価`を示します。


### 3. Best Practices
ページの安全性や、非推奨な技術を使っていないかなど、
`モバイルに対応したサイトの品質に関する評価`を示します。


### 4. SEO
モバイルフレンドリーかどうか、検索エンジンがコンテンツを理解できるかなど、
`基本的なSEOに関する評価`を示します。


### 5. Progressive Web App
`サイトを PWA化 する上で必要なチェックリストを基にした対応項目`を示します。
→ （PWA化 しない場合は計測不要）


## Lighthouse の使い方
##### 今回は、 Chromeブラウザ の デベロッパーツール から使用します。
→ （拡張機能 / コマンドラインからも使用可能）
##### 該当のページで デベロッパーツール を開き、 「Lighthouse」タブ があるので選択します。
→ （余計な影響が無いよう、シークレットモードで実行します）
##### 「Categories」 から、 計測したい指標 のみを選択します。
→ （計測したい指標 のみに絞ることで、計測時間を短縮できます）
##### 「Device」 から、 SP版 を計測したいので 「Mobile」 を選択します。
→ （PC版 を計測したいときは 「Desktop」 を選択します）
##### 「Generate Report」 をクリックすると、すぐに計測が始まります。
![lighthouse.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534817/1abb6fc1-d4e7-4a52-9d3b-bbcefdcda444.png)

##### 計測が終わると、スコアと共に、改善項目の詳細が英文で表示されます。
→ （改善するヒントとして、記載の英文や「Lean more」のリンク先を参照し、指摘内容を理解して改善していきます）
![計測後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534817/cbe2a38f-5dfa-fb0a-7aa9-59f28c4952e8.png)


## Lighthouseスコア 指標別の改善実例
### Performance
##### 指摘内容
![Performance.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534817/d3a9e477-426d-9d12-315d-aa6dc96e21fc.png)

```
次世代フォーマットで画像を提供する

WebPやAVIFなどの画像形式は、多くの場合、PNGやJPEGよりも優れた圧縮を提供します。
これは、ダウンロードが高速でデータ消費が少ないことを意味します。
```
##### 改善策
指摘されている画像を、PNG や JPEG ではなく、次世代フォーマット で提供すれば改善できます。
WebP などでの提供が難しい場合でも、画像圧縮により多少スコアを改善できます。


### Accessibility
##### 指摘内容
![Accessibility.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534817/d7637b5c-917d-7c45-1a35-084400a3abd6.png)

```
背景色と前景色には十分なコントラスト比がありません。

低コントラストのテキストは、多くのユーザーが読むのが難しいか不可能です。
```

##### 改善策
背景色 や 前景色 を適切なコントラストに変更すれば改善できます。
具体的な色のコントラスト については、こちらのサイトが参考になりました。

https://lab.syncer.jp/Tool/Color-Contrast-Checker/


### Best Practices
##### 指摘内容
![Best Practices.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534817/a8ef608c-1d7b-847c-e71e-11273dad65a7.png)

```
クロスオリジンの宛先へのリンクは安全ではありません

パフォーマンスを向上させ、セキュリティの脆弱性を防ぐために、外部リンクに `rel =" noopener "`または `rel =" noreferrer "`を追加します。
```

##### 改善策
外部リンクの aタグ に `rel="noopener"` または `rel="noreferrer"` を追加することで改善できます。


### SEO
##### 指摘内容
![SEO.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534817/d653f115-6b8c-ecc7-5078-2773f4b6787a.png)

```
画像要素には[alt]属性がありません

有益な要素は、短くて説明的な代替テキストを目指す必要があります。空のalt属性を使用すると、装飾要素を無視できます。
```

##### 改善策
画像に alt を入れることで解消できます。


### Progressive Web App
（今回、Progressive Web App 指標に対する実例は省略させていただきます。）


## まとめ
以上、いかがだったでしょうか？

私たちのWebサービスでも、まだLighthouseスコアでオール100点を取れておりませんが、一つ一つ指摘内容を確認して改善していくことで、より良いWebサービスにしていきたいと思っています。

UX改善 による Core Web Vitals の向上は、検索ランキング や ユーザーの離脱率の低下にも関わってきますので、Lighthouse などのツールを活用し、早めにできるだけ改善を進めていきましょう！