小規模サイトの表示速度改善メモ：第３回 ファーストビューに重い機能を詰め込まない
はじめに
小規模サイトの表示速度改善メモ、第3回は「ファーストビューに重い機能を詰め込まない」という話です。
これまで、WordPressを毎回動かさないためのキャッシュや、画像最適化について触れてきました。
ただ、表示速度はあとから画像を圧縮したり、キャッシュを設定したりするだけで決まるものではありません。
ページを作る段階でファーストビューに重い機能を詰め込んでしまうと、その後の調整だけでは改善しにくくなることがあります。
第3回では、軽量化テクニックそのものではなく、設計・ディレクション段階で「最初に何を見せるか」を絞る考え方について整理します。
ディレクションを行うWeb制作者、小規模企業サイトを提案・改善する方、サイトに「もっと動きが欲しい」「動画を入れたい」と相談される方向けの内容です。
ファーストビューは「全部見せる場所」ではない
小規模サイトのトップページでありがちなのは、
- 会社の雰囲気も見せたい
- サービスも見せたい
- キャンペーンも見せたい
- お知らせも見せたい
- 動画も見せたい
- SNSも見せたい
- 地図も見せたい
……と、全部盛りになって、ファーストビューが重くなるパターンです。
あとから画像圧縮をしたり、キャッシュを設定したりしても、ファーストビュー自体に重い要素が多ければ、改善には限界があります。
どれだけ作り込んだサイトでも、表示されるまでに時間がかかると、内容を見てもらう前に離脱される可能性があります。
ファーストビューは、すべての情報を置く場所ではなく、ユーザーに「このサイトで何が分かるか」を伝える入口として整理しましょう。
例えば、トップページの最初に次のような要素をすべて入れると、初期表示は重くなりやすくなります。
- メインビジュアルのスライダー
- 背景動画
- Google Maps
- SNSタイムライン
- 複数種類のWebフォント
- スクロールアニメーション
- チャットウィジェット
一つひとつはよくある機能でも、重なると読み込み量が増えます。
そのため、ファーストビューでは「最初に伝えるべきコピーと画像」に絞り、地図やSNS、動画などは必要な場所で読み込む形にした方が、サイト全体の体感は軽くなります。
特に小規模サイトでは、ファーストビューに多くの役割を持たせすぎると、表示速度だけでなく、メッセージの分かりやすさも落ちやすくなります。まずは「誰に、何を伝えるページなのか」が伝わる状態を作り、そのうえで必要な演出を足す方が、提案としても説明しやすくなります。
重い機能は「使うか」より「最初に置くか」で考える
この記事で挙げる機能は、使ってはいけないものではありません。
問題になりやすいのは、「必要だから使う」のではなく、「見栄えをよくしたい」「情報を全部置いておきたい」という理由で、ファーストビューにまとめて載せてしまうことです。
ファーストビューで優先したいのは、派手さよりも次の3点です。
- 何のサイトか分かる
- 誰に向けた内容か分かる
- 次にどこを見ればよいか分かる
この3点が伝わるのであれば、必ずしもスライダーや動画、地図、SNS埋め込みを最初から表示する必要はありません。
そのため、制作・改善の段階では「この機能を使うかどうか」だけでなく、「最初に表示する必要があるか」を分けて考えることが重要です。
アクセス情報はアクセスページへ、SNSはリンクや下部導線へ、動画はサムネイル＋再生ボタンへ、というように、置き場所や読み込み方を変えるだけでも、初期表示の負荷を抑えられる場合があります。
スライダーは便利そうに見えて、重くなりやすい
スライダーは、複数の情報を同じ場所に入れられるため便利に見えます。
手軽に動きを出せるため、見た目を華やかにしやすい点もメリットです。
しかし、表示速度の面では、複数枚の画像やスライダー用のJavaScriptを読み込む必要があり、初期表示の負荷になりやすい要素です。
また、ユーザーが2枚目、3枚目まで見るとは限りません。重要な情報をスライダーの後ろに置いてしまうと、見てもらえない可能性もあります。
画像の内容に統一感があればまだ整理しやすいですが、複数の訴求が並ぶことで、何を最も伝えたいのかが弱くなる場合もあります。
スライダーでなければならない理由が明確でない場合は、次のような代替案も検討できます。
- 重要な1枚の画像に絞る
- 静止画＋短いコピーにする
- 複数訴求はファーストビュー下にカードで並べる
- キャンペーンはお知らせ枠に分ける
- 動きが必要な場合は、CSSアニメーションを活用する
動画背景は印象的だが、読み込み負荷と視認性に注意する
動画背景は見た目のインパクトを出しやすい一方で、ファイル容量が大きくなりやすく、初期表示の負荷になりやすい要素です。
また、音声付き動画は自動再生できない場合があり、ミュート再生や省データ設定、ブラウザ側の制限によって、意図した見え方にならないこともあります。
動画背景を常に再生していると、画面内に動きが出続けることになります。 テキストの視認性が落ちたり、気が散って必要な情報にたどり着けないことも。
そのサイトが誰に見られるのか、どのような環境で閲覧されるのかも踏まえて判断する必要があります。
- 静止画にする
- 動画サムネイル＋再生ボタンにする
- 短く軽い動画だけにする
- スマホでは静止画に切り替える
会社紹介動画などはファーストビューではなく下部でもよいでしょう。 動画を見たいユーザーに、落ち着いて再生してもらいやすくなります。
Google Mapsは最初から埋め込まなくてもよい
小規模企業サイトでは、トップページ上部にGoogle Mapsを埋め込むケースもあります。
トップページ下部ならともかく、ファーストビューや上部に地図を直接埋め込む必要は少ないです。
外部スクリプトやiframeの読み込みが発生すると、外部サービス側の読み込み状況にも左右されるため、サイト側だけではコントロールしづらい要素になります。
トップでは住所・最寄駅・地図ページへのリンクで足りる場合が多いですし、地図はユーザーが必要な時に見ればよいもので、アクセス情報ページに置けば十分です。
BtoCサイトなど、スマホユーザーが大半であれば、Google Mapsの埋め込みよりも、Google Mapsへのリンクの方がユーザーにとって利便性が高いケースが多いです。
どうしても地図での説明が必要な場合は、
- 静的な地図画像
- 「アクセス」ページでのみ埋め込み
- クリック後に地図を読み込む
といった実装を検討してください。
SNS埋め込みは外部読み込みが増えやすい
SNS埋め込みは、サイト運営側が「最新情報を自動で出したい」と言いやすい要素です。
SNSは、写真でサービスや企業の雰囲気を伝えたり、キャンペーン情報を気軽に発信したりしやすい媒体です。
ホームページのお知らせ更新は負担でも、SNSなら更新しやすいというケースもあります。そのため、SNSフィードを埋め込むことで「このサイトや企業は今も動いている」と伝えやすくなります。
しかし、SNS側の読み込み遅延や仕様変更、障害などがあると、サイト側ではコントロールしづらいボトルネックになります。
その他、デザインがサイトと馴染まない場合もあります。 埋め込みがなくてもリンクや最新投稿への導線で代替することもできます。
- SNSへのリンクだけにする
- 最新投稿を手動で数件紹介する
- 必要なページだけに埋め込む
- クリック後に読み込む
運用はとても手軽になりますが、表示速度とはトレードオフになる点を踏まえて検討してください。
Webフォントは使い方を絞る
Webフォントは見た目に効く一方で、読み込みと描画に影響します。
Google FontsやAdobe FontsなどのWebフォントサービスはCDNを通じて配信されることが多く、配信基盤自体は整っています。
ただし、外部ファイルを追加で読み込むことに変わりはありません。特に日本語Webフォントは文字数が多く、ファイルサイズが大きくなりやすいため、使い方には注意が必要です。
また、基本的には太さや幅ごとにフォントファイルが異なるので、細かくウェイトを指定したデザインではデータ量が多くなります。
そのため、全体に何種類ものWebフォントを使用するのは避けた方が良いです。
- 「400」「700」の2パターンなどに太さを絞る、またはバリアブルフォント（※）を選ぶ
- 使用している文字だけを読み込む「サブセット」に対応しているサービスを利用する
font-display: swapなどで表示待ちを避ける
※バリアブルフォントは、太さや幅などを1つのフォントファイル内で調整できる形式です。複数のウェイトを個別に読み込むより効率的になる場合がありますが、ファイルサイズや対応状況はフォントによって異なります。
現在は各OSのシステムフォントも読みやすくなっているため、本文はシステムフォントを使い、見出しやアクセント部分だけWebフォントを使う、といった選択も検討できます。
アニメーションは「意味のある動き」に絞る
アニメーションは、制作側でもやりすぎが起きやすいです。
スクロールアニメーションを多用すると、JavaScriptの処理や描画負荷が増えやすくなります。 要素が出るまで待たされると、情報取得の妨げとなります。
高価格帯のサービスや、寛いでいる時間の中でゆっくりと閲覧するサイトであれば、リッチなアニメーションやゆったりとした演出は、ブランディングとして有用です。 しかし、スキマ時間で閲覧されるサイトや比較検討されるサービスでは、過剰なアニメーション演出が情報取得の妨げとなり、選択肢から外される場合もあります。
- 重要な導線だけに使う
- フェード・スライド程度に抑える
- 初期表示に必要な要素は隠しすぎない
prefers-reduced-motionに配慮する- CSSの軽いトランジションなどで済む範囲に抑える
など、使用する箇所は限定し、「見せたい情報へ視線を導く」ために使うことを意識しましょう。
初期表示で本当に必要なものを決める
ファーストビューに置くには重たい要素をまとめてきました。 本当に必要なものを決める基準として、以下を意識すると迷いにくいです。
- 初めて来た人に最初に伝えるべき内容か
- ファーストビューでなければ見てもらえない情報か
- スマホで見たときに本当に必要か
- サイトの目的に直結するか
- 更新・保守の負担が増えすぎないか
クライアントから「動画を入れたい」「もっと動きを出したい」と相談された場合は、単にできる・できないで判断するのではなく、次のように確認すると整理しやすくなります。
- その機能は、最初に表示される必要があるか
- 代替表現でも目的を達成できないか
- スマホ閲覧時にも同じ演出が必要か
- 更新や差し替えの運用負担は増えないか
- 表示速度より優先する理由があるか
この確認を挟むことで、見た目の要望と表示速度のバランスを取りやすくなります。
まとめ
ファーストビューは、サイトの印象を決める重要な場所です。
そのため、スライダーや動画背景、アニメーションなどを使って印象的に見せたくなることもあります。
しかし、小規模サイトでは、表示速度や更新のしやすさ、スマホでの見やすさも重要です。
重い機能をすべて避ける必要はありませんが、最初に表示する必要があるものと、後から見てもらえばよいものは分けて考えた方がよいでしょう。
ファーストビューでは、まず「誰に、何を伝えるページなのか」が伝わる状態を優先しましょう。
そのうえで、必要な演出だけを選ぶことが、表示速度と分かりやすさの両方につながります。
次回は「外部タグ・計測タグは、入れるほどサイトが重くなる」をテーマに、使っていないタグ整理の重要性や必要なページだけで読み込む考え方に触れる予定です。
シリーズ記事
- 小規模サイトの表示速度改善メモ：第１回 WordPressを毎回動かさないためのキャッシュの考え方
- 小規模サイトの表示速度改善メモ：第２回 まず見直したい画像最適化の基本
- 小規模サイトの表示速度改善メモ：第３回 ファーストビューに重い機能を詰め込まない（←この記事）
