スマホでホームページが遅いとき、画像を圧縮する前に数える4つ

診療を終えたあと、自分のホームページをスマホで開くと、写真が出るまでに間があります。パソコンでは気にならないのに、外出先の電波では待たされます。原因が写真なのか、契約しているサーバーなのか、自分の端末なのかが分かりません。

僕は新潟でホームページを作っています。制作の料金は料金と進め方に出していますが、遅さの理由は作り直さなくても分かることが多いので、この記事では測り方だけを書きます。

先に、同じことで困っている人が何を疑っているかを数えました。Yahoo!知恵袋で表示の遅さに関する質問を20件開き、そのうち速さ・重さの相談だった19件を数えたところ、サイトを運営・制作する側からの質問は12件、そのうち7件が原因を画像だと考えていました。画像の「枚数」に触れていた質問は、19件のうち1件だけです。

そして自分のサイト47ページを測ったところ、いちばん重いページを作っていたのも、1枚の写真の重さではなく枚数でした。

<!-- def --> 遅延読み込みとは、画面にまだ入っていない画像を、読み手がそこまで動かした時点で読み込ませる指定のことです。HTMLの画像タグに loading="lazy" と書きます。

遅いと感じたとき、最初に疑われているのは何か

2026年9月7日、Yahoo!知恵袋を3つの語で検索しました。件数は画面に表示された概数です。

• 分母は、実際に質問ページを開いた20件です。表示された件数は検索結果の概数で、全部を読んではいません
• 上から順にたどり、1つ目の語は1ページ目の10件と2ページ目の1件、2つ目の語は1ページ目の10件を開きました。2つ目の語の1件は1つ目の語と同じ質問だったため、実数は20件です
• 3つ目の語「スマホ サイト 重い」は、上位10件のタイトルが端末の動作やアプリの相談に寄っていたので、集計には入れていません
• 質問文はそのまま引用せず、要約しています
• 投稿年は2005年から2026年まで散らばっていました。2015年以降は4件です

開いた20件のうち1件は検索結果に出ないという別の相談だったので、残る19件を数えました。

立場で分けると、サイトを運営・制作する側が12件、見る側が7件でした。画像を疑った7件は、7件とも運営・制作する側からの質問です。見る側の7件は、回線や自分の端末を疑ったものが4件で、サイトの中身に触れた質問はほとんどありませんでした。

見る側がサイトを疑わないという点は、そのまま自分の商売にはね返ります。遅いページに当たった人は、原因をこちらのサイトだと考えないまま、戻るボタンを押して別の医院を探します。

運営側の12件を読むと、対策として出てくるのは写真を小さく保存する話に集中していました。枚数に触れていたのは、トップページに画像が46個あり合計2.8メガバイトあると書いた1件だけです。その質問に付いた回答は、圧縮ではなく画像タグに幅と高さを書いているかを確かめる内容でした。

自分のサイト47ページをどう測ったか

2026年9月7日、公開しているファイルをそのまま読み、ページごとに次の4つを数えました。速度測定サービスは使っていません。

• HTMLそのもののバイト数
• 画像タグ、スクリプトタグ、スタイルシートの読み込みの本数
• そのページが読む画像ファイルの実サイズの合計（重複と、スタイルシートの背景画像を含めて数え、実物が無いものは参照切れとして別に数えました）
• HTMLと画像とCSS・JSを足した、1回の表示ぶんの合計

対象は固定ページ9枚と記事38本の合わせて47ページです。測っていないものも書いておきます。回線の速度と、実際に何秒で表示されたかは測っていません。そのため、この記事に秒数は出てきません。

47ページの画像タグは合計339枚で、実物が無い参照切れは0件でした。

重かったのはどのページか

webp形式に対応したブラウザで開いた場合の、1ページあたりの合計です。

47ページの中央値は333.8KB、平均は528.8KBでした。1メガバイトを超えたのは上の3ページだけで、記事38本は中央値327.5KB、いちばん重い記事でも649.7KBです。

いちばん重いコラム一覧は、記事のサムネイル38枚を1ページでまとめて読んでいました。この38枚だけで4,560KBです。1枚ずつは中央値120.6KB、最大でも172.2KBなので、1枚を軽くしても効きません。効くのは、1ページで何枚読ませるかのほうです。

もう1つ、形式による差も出ました。写真50枚はjpgとwebpの両方を置いてあり、jpgの合計18.0メガバイトに対してwebpの合計は2.9メガバイトです。同じ絵で84%減っています。webpに対応していないブラウザで開くと、トップは7,290KB、モニターのご案内は7,053KBになります。

画像を圧縮する前に数える4つ

自分のサイトで数えた結果を、そのまま並べます。枚数と書き方の話が3つで、1枚の重さの話は1つだけです。

1. そのページが1回で読む画像の数

47ページの画像タグは339枚、1ページの中央値は4枚でした。コラム一覧の45個だけが飛び抜けています。ページを開いた人が最初に見る範囲に、画像が何個並んでいるかを数えてください。

2. 同じ絵を軽い形式でも置いてあるか

固定ページには、jpgとwebpを切り替える指定が入っています。ところが記事38本にはこの指定が1か所もありません。記事の中の画像156枚は、すべてjpgのまま配っています。記事のサムネイルは1枚120KB前後なので影響は小さいのですが、固定ページと記事で方針が食い違っている状態です。

3. 画像1枚ずつに幅と高さが書いてあるか

339枚のうち、幅と高さの両方が書いてあったのは21枚でした。記事38本は0枚です。この指定が無いと、画像が届くまでブラウザが場所を空けられず、写真が出た瞬間に下の文章が押し下げられます。スマホで読んでいる人が、読んでいた行を見失う原因になります。写真の重さと違って、この修正はファイルを1バイトも変えません。

4. 画面の外の画像を後回しにしているか

339枚のうち301枚に遅延読み込みが指定されていました。付いていない38枚は記事の先頭画像で、こちらは loading="eager" と fetchpriority="high" を書いて、先に読ませる指定を入れています。ただしコラム一覧だけは、52枚すべてが遅延読み込みでした。先頭の画像を先に読ませる指定が、記事ページには入っていて一覧ページには入っていません。

測ったあとに、直す順番をどう決めたか

この記事の時点で、僕はまだ直していません。測っただけです。順番はこう考えています。

1. コラム一覧の枚数を減らす。1ページに38枚を並べる形をやめる
2. 記事ページの画像に幅と高さを書く。ファイルは変わらないので、写真の見た目に影響しない
3. 記事ページでもwebpを切り替えるようにする
4. コラム一覧の先頭画像だけ、遅延読み込みを外す

写真そのものの圧縮は入れていません。当サイトの写真は色の階調が落ちると見た目が変わるので、圧縮より先に枚数と指定を直します。この判断は、スマホで自分のサイトのヘッダーを測った記録やJavaScriptが止まったときの表示を測った記録と同じで、数えてから決めています。

自分のサイトで同じ数え方をしてほしい場合は、無料のサイト診断でお受けしています。上の4つを数えて、どのページの何枚が効いているかをお返しします。

よくいただく質問

表示が遅いかどうかは、どこで分かりますか

スマホの電波が弱い場所で自分のサイトを開き、写真が出るまで待つ回数を数えるのがいちばん早い方法です。数字で見たい場合は、この記事の4つを数えてください。専用のツールを入れなくても、ページのHTMLを表示すれば画像タグの数と指定は読み取れます。

写真を圧縮すれば解決しますか

1枚が数メガバイトある場合は効きます。ただし当サイトのように1枚120KB前後で、1ページに38枚並んでいる場合は、圧縮より枚数を減らすほうが効きます。まず1ページで何枚読んでいるかを数えてから決めてください。

幅と高さを書くと、レスポンシブの表示が崩れませんか

崩れません。HTMLに書く幅と高さは、CSSで比率を保つ指定と組み合わせれば、場所を先に確保するためだけに使われます。当サイトでは制作実績のページの20枚に入っています。

webpに変えると、古い端末で写真が消えませんか

切り替えの指定を使えば、対応していないブラウザにはjpgが届きます。当サイトの固定ページはこの形で、jpgとwebpの両方を置いてあります。片方だけを置き換えると、古い端末で写真が出なくなります。

制作会社に頼まないと直せませんか

幅と高さの指定と遅延読み込みは、HTMLの1行に書き足すだけなので、更新できる人がいれば社内で直せます。1ページに並べる枚数を減らす作業は、一覧の作り方そのものを変えるので、作った会社に相談してください。

まとめ｜ホームページがスマホで遅いときに数える4つ

2026年9月7日の実測です。

• Yahoo!知恵袋で開いた19件のうち、運営・制作する側の12件中7件が原因を画像だと考えていました。枚数に触れた質問は1件です
• 自分のサイト47ページで、1メガバイトを超えたのは3ページでした。いちばん重いコラム一覧は、サムネイル38枚で4,560KBです
• 画像タグ339枚のうち、幅と高さの両方が書いてあったのは21枚でした。記事38本は0枚です
• 遅延読み込みは301枚に付いていました。付いていない38枚は、先に読ませる指定を入れた記事の先頭画像です
• 参照切れは0件、回線速度と表示秒数は測っていません

数える順番は、枚数、形式、幅と高さ、遅延読み込みの4つです。写真の圧縮は最後で構いません。

自分の医院や事務所のサイトで同じ数え方をした結果を見たい場合は、無料のサイト診断からご連絡ください。制作の料金と進め方は料金と進め方に出しています。