ホームページの写真が重くて表示が遅いときは、どうすればよいですか

「自分のお店のホームページを開くと、写真が出てくるまでに時間がかかる」というご相談をよくいただきます。
治療院・飲食店・サロンのホームページは、院内や店内、お料理や施術の様子など、写真を多く使うことが多く、その分だけ表示が遅くなりやすい傾向があります。

この記事では、表示が遅いとお客様にどう映るのか、多くの場合の原因、ご自身で確かめる方法、写真を軽くする基本の直し方、サーバーやWordPressが原因のときの見分け方を、専門用語をできるだけ使わずに説明します。

ホームページの表示が遅いと、お客様の目にどう映るのか

お客様の多くは、スマートフォンでお店を探し、検索結果や地図からホームページを開きます。
移動中や待ち時間のちょっとした合間に見ていることも多く、画面がなかなか表示されないと、待たずに戻ってしまいます。

戻ったお客様は、検索結果に並んでいる別のお店を開きます。
お店の内容を見ていただく前に、候補から外れてしまうことになります。

また、写真が途中まで表示されたまま止まっていたり、文字を読もうとしたところで写真が遅れて出てきて画面がずれたりすると、「古いホームページなのかな」「このお店は大丈夫かな」という印象を持たれやすくなります。
せっかくの院内やお料理の写真が、かえって不安のもとになってしまうのはもったいないことです。

多くの場合の原因は「写真の大きさ」にあります

表示が遅いホームページを拝見すると、原因の多くは、載せている写真のデータが大きすぎることにあります。

今のスマートフォンやデジタルカメラで撮った写真はとてもきめ細かく、1枚で数メガバイト（MB）のデータになることがよくあります。
印刷にも使える細かさですが、スマートフォンの画面に表示するには、そこまでの細かさは必要ありません。

撮ったままの写真をそのまま載せると、お客様のスマートフォンは、画面に必要な分の何倍ものデータを読み込むことになります。
トップページに大きな写真が切り替わって表示される仕掛け（スライドショー）があり、そこに撮ったままの写真が何枚も入っていると、特に遅くなりやすくなります。

ご自身で確かめる方法

Wi-Fiを切って、スマートフォンで開いてみる

まずは、お客様と同じ条件で見てみることが大切です。
ご自宅やお店のWi-Fiにつながっていると実際より速く表示されることがあるため、Wi-Fiを切って、携帯電話の回線でホームページを開いてみてください。

何度も開いているページは、スマートフォンに一時的に保存された分だけ速く表示されることがあります。
ブラウザの「プライベート」や「シークレット」と呼ばれる画面で開くと、初めて訪れたお客様に近い状態で確かめられます。

表示にかかる時間の目安

開いてから、文字や写真がひととおり表示されるまでの時間を、おおよそで数えてみてください。

• 1〜2秒ほどで主な文字と写真が出る：大きな問題はないと考えてよいでしょう
• 3秒を過ぎても写真が出てこない、白い画面が続く：お客様が待たずに戻ってしまうおそれがあります
• 写真が上から少しずつ表示される、下へ動かすと写真が遅れて出てくる：写真のデータが大きい可能性が高いです

写真の大きさを確かめる

パソコンをお使いの場合は、ホームページ上の写真を右クリックして「名前を付けて画像を保存」を選び、保存したファイルの大きさを見ると、1枚あたりのデータの大きさが分かります。
1枚で1MBを超える写真がいくつも見つかる場合は、写真が原因の一つと考えられます。

Googleが無料で提供している「PageSpeed Insights」というページにホームページのアドレスを入れると、表示を遅くしている原因の一覧を確かめることもできます。
専門用語の多い画面ですが、「画像」に関する項目がいくつも並んでいれば、写真が原因である可能性が高いと考えられます。

写真を軽くする基本の直し方

1. 写真のサイズを縮める

いちばん効果が大きいのは、写真を表示する大きさに合わせて縮めることです。
パソコンの画面いっぱいに表示する写真でも横幅2,000ピクセル程度あれば十分で、小さく並べる写真であれば、もっと小さくて構いません。

スマートフォンで撮った写真は横幅が4,000ピクセル前後あることが多いため、縮めるだけでデータの大きさは数分の一になります。
保存するときの画質を少しだけ下げると、見た目はほとんど変わらないまま、さらに軽くなります。
写真の縮小は、パソコンに入っている写真の編集ソフトや、無料の縮小サービスでも行えます。

2. 写真に合った形式を選ぶ

写真のファイルには、いくつかの形式があります。

• JPEG（ジェイペグ）：写真に向いた形式で、多くの写真はこの形式で十分です
• PNG（ピング）：ロゴや文字の入った図に向いた形式で、写真をこの形式で保存すると重くなりがちです
• WebP（ウェッピー）：同じ見た目のまま、JPEGより軽くしやすい新しい形式で、今の主なブラウザで表示できます

写真がPNGで載っている場合は、JPEGやWebPに変えるだけで軽くなることがあります。

3. 必要な分だけ読み込む

ページの下のほうにある写真は、お客様が画面を下へ動かすまで読み込まないようにする設定があります。
最初に見える部分の表示が先に終わるため、お客様には速く表示されたように感じられます。

また、トップページのスライドショーの枚数を減らす、同じような写真を何枚も並べずに選んだ写真に絞る、といった見直しも効果があります。
写真を絞ると、お客様にとってもお店の魅力が伝わりやすくなります。

サーバーやWordPressの状態が原因のときの見分け方

写真を軽くしても遅い場合や、写真の少ないページまで遅い場合は、写真以外に原因があるかもしれません。
次のような様子があれば、ホームページを置いているサーバーや、WordPressの状態を疑います。

• 写真がほとんどないページでも、開くまでに時間がかかる
• 開いてから何も表示されない白い画面が、しばらく続く
• 時間帯によって、速いときと遅いときの差が大きい
• WordPressの管理画面も、ボタンを押すたびに待たされる

サーバーが原因の場合は、契約しているプランが古い、同じサーバーを使うほかのホームページの影響を受けている、といったことが考えられます。
レンタルサーバーの会社によっては、プランの変更や新しいサーバーへの移し替えで改善することがあります。

WordPressが原因の場合は、使っていない部品（プラグイン）が多く入っている、本体や部品が何年も更新されていない、サーバー側の仕組みが古い版のまま、といったことがよくあります。
更新を放置したときに起きることは、WordPressを更新せず放置すると危険ですかにまとめています。

自分で直すのが難しいときの相談先

写真の縮小や形式の変更は一枚ずつ差し替える必要があり、写真の多いホームページでは手間がかかります。
管理画面への入り方が分からない、制作会社に頼まないと写真を差し替えられない、という場合もあると思います。
その場合は、次の2つのどちらかを考えます。

WordPressのまま、表示の遅さを直す

今のホームページに大きな不満がない場合は、WordPressのまま、写真の軽量化や使っていない部品の整理を行う方法があります。
当方でも、表示速度の基本対策を含むWordPress 改修・保守プランをご用意しています。

写真を軽く扱える形に作り直す

スマートフォンでの見え方が古い、更新も長く止まっている、という場合は、作り直しも選択肢に入ります。
作り直しの際には、写真を表示する大きさに合わせて縮め、軽い形式に変え、必要な分だけ読み込む作りにします。

どちらが向いているかは、ホームページの状態によって変わります。
迷われる場合は、URLをお送りいただければ、今の状態を拝見したうえでお答えします。

まとめ

• 表示が遅いと、お客様は内容を見る前に戻ってしまい、別のお店を選びやすくなる
• 多くの場合の原因は、撮ったままの大きな写真をそのまま載せていること
• Wi-Fiを切ったスマートフォンで開き、3秒を過ぎても写真が出ないかを確かめる
• 写真は表示する大きさに縮め、写真に合った形式を選び、必要な分だけ読み込む
• 写真の少ないページまで遅いときは、サーバーやWordPressの状態を疑う