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

はじめに

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

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

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

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

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

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

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

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

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

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

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

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

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)

今後追記予定

今後追記予定

この時点では「不良」や「改善が必要」のページがまだ一定数存在しており、目標達成には程遠い状況でした。

施策を積み重ねることで、全体的に数値は改善しつつありますが、依然として「不良」・「改善が必要」ページの解消にはもう少し時間がかかる見込みです。