memo

Lighthouse 測定によるWebのパフォーマンス改善メモ

imatomix
2018年9月23日 16:53

概要

  • Google製のウェブアプリのパフォーマンス測定ツール Lighthouse を使ってみた。
  • 各項目の測定値を上げるためにやったことをここにメモっておく。
  • 測定&改善したのは、今ご覧のこのサイト。

Lighthouse

image
Lighthouse は、オープンソースの自動化されたツールでウェブアプリの品質向上に役立ちます。(中略) ページに対する集中的なテストを実行してパフォーマンスに関するレポートを生成できます。

とのことで、以下の項目で評価&改善レポートを生成してくれる。
  • パフォーマンス
  • PWA対応状況
  • ベストプラクティス
  • アクセシビリティ
  • SEO対応状況

インストール

色々あるようだけど、Chrome 拡張機能が一番楽。

使い方

image
  • デベロッパーツールの Audits タブを開く
  • デバイスや評価項目などを選択し、 Run auditsボタンを押すだけ。

やったこと

基本的に Lighthouse 先生に言われた通りのことを行なった。

PWA 対応

Nuxt.js で 簡単 PWA の通り、PWA対応した。 ただ公式のモジュールを使っただけだが、するとしないでは評価の数値は全然違った。

画像には alt をつける

はい。ごめんなさい。「つけた方がいい」的な話は知ってましたが、ついサボってました。 今後つけていきたいと思います。でも、世の中結構つけてないところ多いですよね。

入力欄要素にはラベルをつける

<label></label>つけないといけないの？と思ったが、ラベルをつけるのにも色々あるらしい。
  • <label></label>を使う。
  • ラベルを可視化されたUI要素として表示したい時はこれ。
  • aria-labelを使う。
  • UI要素はいらない時はこれ。
  • aria-labelbyを使う。
  • 他の要素をラベルとして指定をする。

リンクにもラベルをつける

かしこまりました。方法は上に同じで、aria-label または aria-labelby で対応。

lazy-loading

vue-lazyload を使用して、一部の画像読み込みを遅延ロードにした。

asyncData

もともと Vue.js で作ったのを Nuxt.js に持ってきているので、いくつかのページで asyncData を使い忘れて、created などで API 叩いてデータ取得となっていた。単に僕のうっかり。
asyncData はコンポーネントがローディングされる前に呼び出され、データ取得からレンダリングまでの非同期処理をサーバーサイドで行えるので、パフォーマンスは上がる。

結果

image

とりあえず、上記の対応でこのような感じ。対応前は割と黄色だった。 もっとあげることは可能だが、いくつか悩みどころがある。

悩みどころ

次世代画像フォーマット

画像を次世代フォーマットで保存しようと言われる。例えば以下のフォーマット。
  • JPEG 2000
  • JPEG XR
  • WebP
おそらくこの対応をすれば、パフォーマンス値もほぼ100になると思う。ただ問題は、上記フォーマットはどれもサポートしているブラウザがバラバラだということ。自分のサイトでそれぞれのブラウザにそれぞれを用意するほどの熱量は、正直ない(笑。 今のやり方で圧縮率をあげるのも、、、一応デザイナーの意地で、質は落としたくない。

背景と文字のコントラスト

デザインの文脈は関係なく、背景色と文字の一定のコントラストを求められる。 以下をクリアすれば良いらしい。
このサイトではフッタのリンクのグレーをもっと黒くしろと。。。 そうすると今度はホバー字の文字色とのコントラストがつかなくなるのでいっそ色を取り入れるか。。。となってくる。
ただ、それ以前にこのグレーそんなに見にくい？

まとめ

勉強になりました。Lighthouse先生ありがとう。