【Lighthouse】公開した1枚のウェブページを改善してみた

01-24-2021

Web デザインの勉強も兼ねて一枚のウェブページを作った

ついでに Chrome のLighthouseを使ってページの監査をしてみたら、一部改善点があった

今回はウェブページを公開してから 2 点指摘されたことを改善した

表示する画像の最適化

まず、Lighthouse から表示している画像の読み込みで指摘を受けた
Serve images in next-gen formats

要するに、 png や jpeg 形式の画像データを使うのではなく、イメージのロードが早くなる webp 形式のデータを使おうという指摘だった

webp といえば、IE 以外のブラウザでほとんど対応されている画像形式らしい
Can I use… Support tables for HTML5, CSS3, etc | webp

png や jpeg から webp へ変換する方法は簡単で、 cwebp というコマンドを使うことで、変換ができる
Creating WebP Images with the Command Line

基本的には以下のように使えば変換ができる

cwebp -q 変換後の画像のクォリティー 変換する画像のパス -o 変換後の画像のパス

# example
cwebp -q 50 ./img/test.png -o ./img/test.webp

変換してみた感想は、クォリティーを 50 に指定しても目では画像の劣化が感じられなかった

SEO 関連でサイトの description が設定されておらず、キーワードに合わせた検索エンジンの結果に表示されやすくなるために設定した
Document does not have a meta description

<meta
  name="description"
  content="夜にだけ開くカモカフェ。開店日はいまのところ、未定です"
/>

ここまでの修正を反映し、再度Lighthouseをかけてみたら、見事に 100 点が取れた

なるほど、lighthouseで指摘されたことを直したら、100点になった
PWAはそもそも対応してないから0だけど pic.twitter.com/Kkv9cMj42L
— カモ@1月はGatsbyブログをつくる生活 (@camomile_cafe) January 24, 2021

今後、他にも指摘される点があるたびにちょっとずつ改善していきたい