工務店のホームページを速く表示する方法｜施工写真の容量と読み込みの見直し

工務店のホームページは、施工事例の写真が多いため、ページの表示に時間がかかりやすくなります。見学会の告知を見てスマートフォンでページを開いた人が、写真が出るまで待てずに戻ってしまうと、予約の前に離れてしまいます。

この記事では工務店のホームページを速く表示するために、どこを確かめ、何を直すかを説明します。最初に施工写真のサイズと形式を見直し、次に遅延読み込み、動画と地図の埋め込みを確かめます。直す前と直した後は、PageSpeed Insightsで同じページを測って比べます。

ホームページの表示が遅くなる主な原因

工務店のホームページで表示が遅くなる原因は、写真、埋め込み、追加したツールの3つに分けて考えると探しやすくなります。

スマートフォンで撮った写真は、横の長さが数千ピクセルになることがあります。ホームページで表示する幅よりはるかに大きい写真を載せると、見えない部分の容量まで読み込むことになります。

PageSpeed Insightsでの確かめ方

表示の速さはGoogleのPageSpeed Insightsで確かめられます。ページのURLを入力すると、スマートフォンとパソコンそれぞれの結果が表示されます。工務店のホームページはスマートフォンで見る人が多いと考えられるため、まずスマートフォンの結果を見ます。

結果には2種類の情報があります。一つは実際に訪れた人の環境で集めたデータで、もう一つは決まった条件でページを読み込んで診断した結果です。訪れる人が少ないページでは、実際の環境のデータが表示されないことがあります。そのときは診断の結果と改善の提案を手がかりにします。データの種類と評価の見方は、PageSpeed Insightsについての説明で確認できます。

結果に出てくる指標のうち、Googleがページの使いやすさを測る指標として示している3つは、Core Web Vitalsと呼ばれます。主なコンテンツが表示されるまでの時間を表すLCP、操作への反応の速さを表すINP、読み込み中の表示のずれを表すCLSです。詳しくはCore Web Vitalsについての説明をご覧ください。

測るページはトップページだけにしません。施工事例の詳しいページ、イベント・見学会のページ、予約フォームのページも測ります。結果は測るたびに少し変わるため、直す前と後は同じページを同じ条件で何度か測って比べます。

施工写真のサイズと形式の見直し

写真を軽くするときは、大きさをそろえることと、形式を選ぶことの2つを行います。大きさはページで表示する最大の幅に合わせて縮小します。画面の細かいスマートフォンでもぼやけないよう、表示する幅より少し大きめに書き出す方法もあります。

形式は、JPEGより容量を小さくしやすいWebPやAVIFを使う方法があります。Googleの検索はWebPやAVIFの画像にも対応しています。画像の形式と代替テキストの書き方は、Google画像検索のSEOのベストプラクティスで確認できます。

圧縮を強くしすぎると、木の床の木目や外壁の質感がつぶれて見えます。書き出したら、元の写真と並べてスマートフォンの画面で見比べてください。写真の撮り方と使い分けは「工務店の施工写真を集客に生かす方法」で説明しています。

想定例として、広報担当が施工事例を1件公開する場面を考えます。使う資料はカメラマンから受け取った写真と、施工事例ページの下書きです。担当者は写真を本文の欄の幅に合わせて縮小し、WebPで書き出します。公開した後にPageSpeed Insightsでそのページを測り、改善の提案に画像の項目が残っていないかを確かめます。

遅延読み込みの使い方

遅延読み込みとは画面に表示されるまで写真を読み込まない仕組みです。HTMLのimgの指定にloading="lazy"を付けると、ブラウザが画面の外の写真を後から読み込みます。施工事例のページのように、下へ写真が続くページで使います。

ただし、ページを開いてすぐ見えるメイン写真には遅延読み込みを付けません。メイン写真の表示が遅れると、LCPの評価が下がることがあります。写真には幅と高さも指定しておくと、写真が読み込まれたときに文章が下へずれることを防げます。

動画と地図の埋め込み

ルームツアーの動画をページに埋め込むと、再生する前から動画を再生するための部品を読み込みます。トップページに複数の動画を並べている場合は、動画のサムネイル画像を表示し、押したときに再生画面を読み込む方法を検討します。動画を一つに絞り、ほかの動画は動画の一覧ページに分けるのも一つの方法です。

地図の埋め込みも、すべてのページに入れると読み込みが増えます。地図は会社概要やモデルハウスのページなど、場所を知りたい人が見るページに限ります。地図の埋め込みにもloading="lazy"を付けられます。

Instagramの投稿の埋め込みも、件数が多いと表示が遅くなります。新着の投稿を見せたい場合は、埋め込む件数を絞り、Instagramへのリンクを添えます。ポップアップや計測タグなど、あとから足したツールは使っていないものを外します。問い合わせの入口の置き方は「工務店のホームページで問い合わせを増やす導線」で紹介しています。

よくある質問

PageSpeed Insightsの点数はどこまで上げればよいですか

点数そのものを目標にするより、指標ごとの評価と改善の提案を見て、直せるものから直します。点数は測るたびに変わるため、同じ条件で比べてください。

古い施工事例の写真も直す必要がありますか

古い施工事例も検索から直接開かれることがあります。アクセスの多いページから順に写真を差し替えます。

まとめ

工務店のホームページを速く表示するには、施工写真を表示する幅に合わせて縮小し、WebPなどの軽い形式で載せることから始めます。画面の外の写真には遅延読み込みを使い、ページを開いてすぐ見えるメイン写真には使いません。動画と地図は必要なページに絞り、PageSpeed Insightsで直す前と後を同じ条件で比べてください。

e-GrantsのW-Studioは、工務店・住宅会社向けのセミオーダー型ホームページです。載せた画像は自動で軽量化し、WebPに変換します。施工事例やイベント・見学会のページも、はじめから備えています。工務店向けのサービス全体は工務店・住宅会社向け集客支援でご覧いただけます。