Zenn
🚴

lighthouseスコアを改善するためにやったこと5つ

2021/10/03に公開
Firebase
Nuxt
パフォーマンス
tech

背景

  • ポートフォリオのスコアがズタボロだったので改善することにしました
  • どんな構成のPJでもあり得る汎用的な話がほとんどですが、一部Nuxt.js+firebase特有の悩み・解決方法を記載しています。
  • 実際の改善率はこんな感じ。

測定方法

  • Devtoolにあるので、それを使います。localhostでも使えて便利です。
  • Chrome拡張もあります。こっちはlocalhostでは使えません。

やったこと

imgにwidth/height/altを付与する　【Perfomance, Accessibillity】

Image elements do not have explicit width and height
Image elements do not have [alt] attributes

  • これによって『ロード後のガタつき』を避けることができて、Perfmanceのスコアが上がる
<img class="topImg" width="820" height="420" alt="トップ画像" src="/top/aza2109.png">
  • 横幅にあわせて自動スケールしたい場合は、下記のようなCSSを設定すればOK。
.topImg {
  max-width: 100%;
  height: auto;
}

画像webpにする【Perfomance】

Serve Images In Next-Gen Formats

  • 変換方法は色々あるが、今回はcwebpの使い方と複数の画像をWebPに一括変換する方法 | iwb.jpを参考に、cwebpを利用して変換。
  • ちょっとSafariの対応具合が怖いので、フォールバックはまだいれておいて良さげ。（Big Sur以降は大丈夫らしいが、諸事情でアプデしない・できない人とかいると思うので） 
<picture>
　　<source type="image/webp" srcset="/top/aza2109.webp">
　　<img class="topImg" width="820" height="420" alt="トップ画像" src="/top/aza2109.png">
</picture>
  • ちなみに動いてるかの確認法法としてはDevtoolのElementsでimgタグのsrcにカーソルを重ねた時に、Current sourceがwebpファイルになっていればOK。pngのままだったので、ちょっと混乱した。

pngやjsにキャッシュ期間を設定する【Perfomance】

Serve static assets with efficient cache policy

  • Nuxt.jsはnpm startで提供する場合と、静的ファイルを提供する場合で対処が変わるので注意。

npm startの場合

  • nuxt.config.jsに下を設定するだけ。終わり。
render: {
  static: {
    maxAge: 31536000
  }
},

静的ファイルの場合

  • firebaseなどを使って静的ファイルを配信する場合、上記の方法は効かない。
    • 『開発サーバーで起動する時の配信オプション』がnpm startの場合のやり方っぽい
  • 今回はfirebaseなので、firebase.jsonにheadersオプションを付与する
    • 基本的にビルドごとにクエリ文字列の類をつけるはずなので、長めで良いはず。
"headers": 
  [ 
    {
      "source": "**/*.@(jpg|jpeg|gif|png|svg)",
      "headers": [{
        "key": "Cache-Control",
        "value": "max-age=31536000"
      }]
    },
    {
      "source": "_nuxt/*.js",
      "headers": [{
        "key": "Cache-Control",
        "value": "max-age=31536000"
      }]
    },
    {
      "source": "**/@(manifest|payload).js",
      "headers": [{
        "key": "Cache-Control",
        "value": "max-age=31536000"
      }]
    }
  ]

buttonにarea-labelを付与する【Accessibillity】

Buttons do not have an accessible name

  • これはハンバーガーメニューのボタンだった。buttonタグがVuetifyの中だったので、Vuetifyを解除してaria-labelを付与。
<button class="menuButton" aria-label="menu-button" @click.stop="drawer = !drawer">
  <span class="menu-btn" />
</button>

jsを軽くする【Perfomance】

Eliminate render-blocking resources

  • 上記メッセージへの直接的な対処ではないと思うが、必要のない読み込みなどが多かったので全体的に対処した。
  • Nuxt.jsの場合は下記のようにscriptsにanalyzeオプションをつけてビルドすると、jsのバンドルサイズの割合画像を得ることができる。
  "scripts": {
    "dev": "nuxt",
    <<中略>>
    "analyze": "nuxt build --analyze"
  },
  • 対処前は残してないのでこれは対処後画像だが、いやこのライブラリがこんなに大きいのおかしいやろとか、改善点を視覚的にぱっと発見できるので、1度表示してみると良さげ

おわりに

  • 最初の画像の再掲だが、パフォーマンスが44→８２、アクセシビリティが６８→９７とかなり改善できた。
  • パフォーマンスやアクセシビリティに関して、lintのように『より良い書き方がある』と気づきやすい世界観になってるのはすごく良い。lintの公式に楽べて、どういう書き方をすればいいのか？というサジェストがわかりづらいとは感じたが、調べるキッカケのキーワードをくれるだけでもすごいありがたい。
  • 個人的には↓のキャプチャで表示してくれるのがすごい好き。最初はもっと明らかにガタつくのがキャプチャから見て取れてたので、かなり改善されたのが見て取れるのは気持ちいい。
  • 仕事はどうしても機能追加の案件が多いので、自分の成果物に残念パフォーマンスなブツがあったのは良い機会になってよかった（まえむき
    • 多分lighthouseの点検項目も定期的に更新されると思うので、半期に1回改善くらいでやってみようと思う。年末くらいにまたやって、面白そうなネタにできそうならまた投稿します

Discussion