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

01-24-2021

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

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

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

表示する画像の最適化

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

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

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

pngjpeg から 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点が取れた

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