よりそうAdvent Calendar 2024

株式会社よりそう

2024年「よりそうお葬式」で対応したパフォーマンス改善のまとめ

Posted at 2024-12-25

現在、よりそうお葬式では、Nuxt3を使用した新基盤への移行作業を進めています💪
本記事では、この新基盤ページで今年実施したSEO対策についてまとめていきたいと思います。

はじめに

よりそうお葬式のページでは、暫定目標として次の状態を目指し、パフォーマンスのチューニングを行っています。

PC: 「不良」「改善が必要」ともに0件
SP: 「不良」0件

まだ完全に目標を達成できていませんが、引き続き試行錯誤を重ねています。本記事では、今年行った主な施策を振り返り、その効果を共有します。

フロントエンドの構成について

よりそうお葬式のフロントエンドは Nuxt + Vue.jsで作られています。
またUIフレームワークとしてVuetifyを導入して作成しています。

バンドルサイズ

バンドルサイズの分析

Nuxt3で用意されている npx nuxi analyze を使用してバンドルサイズを可視化し、分析を行いました。

可視化することで、容量が大きなプラグインや、無駄に読み込まれているコンポーネントがないかなど、問題点を洗い出しやすくなります。

プラグイン削除

プラグインを削減するために下記のような対応を行いました。

自前で代替えできるプラグインは削除
Chart.jsやSwiper.jsなど、リッチなUIを実現するために使用しているプラグインなどはデザインの見直しで削除できないか検討

Scoped SCSSの廃止

Scoped SCSSを使用していると、data-v-〇〇="" という属性が付与されていきます。
下記のルールを徹底するようコードを修正し、Scoped SCSSを削除し、HTMLの容量を削減しました。

{Vueで名付けたコンポーネント名}__{Block名}--{modify名}

また、ビルドされたソースコード上でコンポーネント名を検索することができるというメリットもあります。

Vuetifyのtree shakingの活用

Vuetifyの tree shaking 設定を行うことで、importされているコンポーネントのみをバンドルファイルに含めることができます。

Vuetifyコンポーネントの廃止

独自実装に置き換えた方がバンドルサイズを削減できそうな下記のUIコンポーネントは置き換えを行いました。

v-btn
v-card
v-img

レスポンシブ実装の見直し

SPとPCでそれぞれ要素を用意して、表示の切り替えを行なっている箇所が散見されていました。デザインと実装の見直しを行い、共通のDOMで実装するように変更し容量の削減を行いました。

/** 改善前 **/
<div class="d-pc">
PC用コンテンツ
</div>

<div class="d-sp">
SP用コンテンツ
</div>

/** 改善後 **/
<div>
PC・SP共通のコンテンツ
</div>

バナーの見直し

テキストや画像の組み合わせでデザインされていたバナーは、なるべく1枚の画像に置き換えてDOM容量を削減しました。

アイコンの見直し

Material Design Iconフォントを使用していましたが、プロジェクト上で使用しているアイコンは限られた数のみでした。

そのため、フォントの使用は廃止し、使用しているアイコンのみSVGで読み込み、容量を削減しています。

フォントのサブセット化

価格や電話番号など、数字と記号のみを使用する箇所については、fonttools を用いて必要な文字だけを含むフォントファイルをサブセット化しました。

バンドルサイズの削減結果

上記の施作を行なった結果、プロジェクト全体のバンドルサイズは 792KB → 465KB まで削減することができました。

対応前のバンドルサイズ(792KB)	現在のバンドルサイズ(465KB)

CLS対策

今後追記予定

その他対応