LightHouse対策をしてみました

LightHouseはGoogleが提供するChromeのPlugInです。ebサイトのスピードやアクセシビリティなどをスコアで表示することができます。NUXTを使ってホームページを刷新して満足していたのですが、試しに実行してみると以下のようなスコアでした。

lighthouse1

さすがにPerformanceのスコアが13というのはマズイ!と思い、いろいろできる範囲で改善に取り組みました。

  • 画像ファイルの圧縮率、サイズの見直し
  • 画像のaltタグやroleタグの付与
  • 画像の読み込みをLazyLoading(vue-lazyload)の適用
  • sitemap.xmlの動的生成(@nuxtjs/sitemap)
  • googleアナリティクスの追加(@nuxtjs/google-analytics)
  • googleMapをAPIからiframeへ変更
  • inputのlabel追加
  • ページのtitleを動的に変更
  • 生徒さんの声のアニメーションの削除
  • 要素へのdefer/async属性の追加

1週間くらい空き時間をみつけて試行錯誤してみました。結果は以下の通りです。
lighthouse4

まだ改善の余地はありますが、当初のような悲惨な状況ではなくなりました。Vue.js(NUXT)を使っているおかげで、いろいろなプラグインを使うことができました。あとはもっと検索順位があがることを祈るばかりです。