スマホの表示が遅い|フォントを止めて比べ、公開ページで確認した記録

スマホの表示が遅い|フォントを止めて比べ、公開ページで確認した記録

スマホで表示が遅いときは、フォントのファイルを止めた場合と比べると、通信量と表示までの秒数にフォントがどれだけ関わっているかが分かります。

設定を変えたあとは、公開されているページで、変えた内容が効いているかを確かめます。

結果を先に書くと、最初の作業では効いておらず通信量が増え、キャッシュを消したあとに、公開ページで効いていると確認されました。

この記事の言葉を、先に分けておきます。「止める」は、比べるための条件として、フォントのファイルを読み込まないようにすることです。「外す」は、WordPressのフォントライブラリ(サイトに使うフォントを管理する機能)から、フォントを取り除く操作です。

AKITOYOは、AIのClaudeと一緒に、自分のサイトのフォントと表示の速さを見直していました。

2026年10月13日の記録にある測定では、記事ページの点数が、デスクトップの100点に対して、スマホは58点でした。

同じサイトで見た目をそろえた作業の全体は、固定ページの帯画像とスマホの折り返しにまとめています。

自分のサイトをAIと直す話は、次の7本です。1〜3はサイトを持つ前の基礎、4〜7はスマホの見た目と速さを直した記録です。

  1. ホームページとブログとLPの違い|目的別の正しい使い分け方
  2. 独自ドメインとは何か|ホームページを持つべき理由をわかりやすく解説
  3. ホームページ制作を依頼するときに知っておきたい制作側と依頼側の役割分担
  4. AIが作った帯の画像が合わない|作った理由を聞いて9枚作り直した
  5. スマホで横スクロールが出ないか確かめる|幅の範囲で行数を測った記録
  6. スマホメニューのSNSリンク|文字からアイコン2つへ、ずれを測った
  7. スマホの表示が遅い|フォントを止めて比べ、公開ページで確認した記録(この記事)
この記事のアクションプラン(1つだけ)

スマホの表示が遅いときは、フォントのファイルを止めた場合と止めない場合の通信量を比べましょう。設定を変えたあとは、公開ページで効いているかを確かめましょう。

Claudeが、遅い回線とCPUを模した条件で、フォントのファイルを止めて比べました。記事ページの通信量は、1,376KBから341KBになりました。

最初の作業では、フォントを外す操作が公開側(訪れた人が見る側)でまだ効いておらず、記事ページの通信量は4,607KBに増えました。

AKITOYOが応急版のコード(急ぎの直しとして貼るコード)を貼り、キャッシュ(一時保存)を消したあと、公開ページで効いていることが確認されました。

そのあと、Claudeは、大きく良くなったと報告しました。

フォントを止めて比べ、端末のフォントに決め、悪化と応急版を経て、公開ページで効いていると確認されるまでの流れです。

図1:フォントを止めて比べ、端末のフォントに決め、悪化と応急版を経て、公開ページで効いていると確認されるまでの流れです。

この記事は、2026年10月13日の出来事を、当時の記録をもとに2026年10月29日にまとめたものです。

このブログについて
本記事はaki7199.com 編集部(AI)が、AKITOYO本人の記録と発言をもとに一部編集した定点観測記録です。編集部は、AKITOYO本人の実際のAI活用や判断を記録しています。本人のプロフィールを先にご覧いただくと、以下の内容を自分に近い場面として読みやすくなります。編集部について詳しくはこちらからご覧ください。
目次

スマホの表示が遅い ― 止めて比べた通信量

記事ページは、遅い回線とCPUを模した条件でフォントのファイルを止めた場合、通信量が1,376KBから341KBになりました。

記録の教訓には、ウェブフォントは1本で数MBになりうる、と事実として書かれています。

ウェブフォントとは、サイトの文字の形のデータを、ネットから読み込んで使うフォントです。

KBとMBは、データの大きさの単位です。1MBは、およそ1,000KBです。

PageSpeed Insightsは、ページの表示の速さを、点数と秒数で見せる測定の道具です。

2026年10月13日の記録には、そのスマホの測定が、4つのページについて書かれています。

ページ スマホの点数 表示まで 最大の表示
トップ 77点 1.5秒 5.6秒
記事 58点 7.4秒 9.3秒
自己紹介 60点 6.5秒 8.0秒
お問い合わせ 55点 12.3秒 17.6秒

表1:PageSpeed Insights(スマホ)の点数と秒数です。記録に書かれた数字をそのまま並べています。

記録が「表示まで」「最大の表示」と書くのはトップだけです。ほかの3ページの秒数も同じ順と読んで並べました(編集部の読み)。

点数は高いほど、秒数は短いほど、速いことを表します。

同じ測定で、デスクトップ(パソコン向け)の点数は、記事ページが100点でした。

原因の切り分けとして、次の比較がされました。

Claudeは、遅い回線とCPU(機器の中で計算をする部品)を模した条件で、フォントのファイルを止めた場合と比べました。

記事ページの表示までは、6.8秒から2.0秒になりました。フォントを止めると、通信量は1,376KBから341KBになりました。

この数字は、遅い回線とCPUを模した条件での比較です。

記録の数字から編集部が計算すると、減った分は1,035KBで、全体の約75%です。

ユイ
PageSpeed Insightsの数字と、Claudeが比べた数字は、同じ測り方ですか?

記録の見立てでは、測り方が違います。

表1のとおり、同じ記事ページの表示までは、PageSpeed Insightsで7.4秒、Claudeの比較(フォントを止めない場合)で6.8秒です。

記録の見立ては、数字を前と後の差を見るために使い、数字そのものを比べすぎない、というものです。

この比較では、記事ページの通信量の大半が、フォントのファイルでした。

フォントの統一 ― 端末のフォントを使う案

記録には、フォントを外して端末のフォントを使う案を、AKITOYOが決めたと書かれています。

フォントライブラリとは、WordPressでサイトに使うフォントを管理する機能です。ここでの「統一」は、サイトの文字の書体をそろえることで、「統一先の書体」は、そろえる先の書体を指す記録の言葉です。どの書体かは、この記事では扱いません。

記録の見立ての欄には、この案の前に、次の3つが書かれています。

  • 遅さの主因は、フォントライブラリにあるウェブフォントで、1本が約1MBです。
  • 統一先の書体は1本が約2.2MBなので、そのまま統一すると、さらに悪くなります。
  • 外部のフォント配信の小分け配信で試しても、記事の表示までは5.1秒で、まだ遅かったとあります。

端末のフォントを使う案は、フォントライブラリのフォントを外し、端末にもともと入っているフォントを順に使う、というものです。

この案の項目には、AKITOYOの言葉として、次の一言が書かれています。

AKITOYO
速さは正義

※記録に書かれた言葉のままです。この記事の本人の台詞は、すべて原文のとおりです。

ユイ
端末のフォントを使うと、何が変わるんですか?

端末のフォントは、パソコンやスマホにもともと入っている文字の形です。ネットから読み込むデータはいりません。

この案は、ネットから読み込むフォントのデータをなくす案です(編集部の説明)。

記録の教訓にも、見た目の好みより、スマホの表示速さが先に効く、と事実として書かれています。

この案で貼る作業の中身は、記録に次のように書かれています。

  • サイトの追加CSS(見た目の指定を足す場所)に、1行を足します。
  • フォントライブラリのフォントを、2つ外します。
  • 見た目と速さを、測り直します。

公開ページの確認 ― 外す操作が効いていなかった

記録は、最初の作業のあとの測定で、記事ページの通信量が1,376KBから4,607KBに増えたと書いています。

なぜなら、追加CSSの1行は反映されましたが、フォントを外す操作は公開側でまだ効いていなかったからです。

記録によると、その結果、統一先の書体の2本が配信されました。

最初の作業のあとの測定では、スマホの点数が次のとおりでした。

ページ 変える前 最初の作業のあとの測定
記事 58点 55点
自己紹介 60点 54点
お問い合わせ 55点 55点
トップ 77点 67点

表2:スマホの点数です。変える前の点数と、最初の作業のあとの測定の点数を、記録に書かれた数字のまま並べています。

ミサキ
お問い合わせのページだけは、55点のまま変わっていません。

最大の表示は、記事で9.3秒(表1の編集部の読み)から25.5秒に、トップで5.6秒から16.3秒に延びました。

デスクトップの点数も、記事ページで100点から76点に下がりました。

この測定のあと、AKITOYOはClaudeにこう質問しました。

AKITOYO
遅くなった?

Claudeは「はい、遅くなりました」と答え、原因は手順の順番の説明が足りなかったことだと認めました。

記録の教訓は、事実として、設定を変えたことと、公開側で効いたことは別だと書いています。

応急版と回復 ― キャッシュを消したあとの測り直し

AKITOYOが応急版のコードを貼り、キャッシュを消したあと、Claudeが測り直し、大きく良くなったと報告しました。

キャッシュとは、一度読み込んだ内容を、あとで早く出せるように、一時的にためておく仕組みです。

この質問のあと、AKITOYOは応急版のコードを貼り、サーバーとテーマの両方のキャッシュを消しました。

公開ページで効いていることも、この場面で確認されています。

そのあと、Claudeが測り直し、「大きく良くなりました」と報告しています。

この報告は、Claudeの言葉です。回復のあとの数字は、記録に書かれていません。

この場面で、AKITOYOは次の問いも出しています。

AKITOYO
これは Google で評価されるのか
ミサキ
この会話では答えが出ていない、と記録に書かれています。

1時間ほどあと、AKITOYOは次のように確認しています。

AKITOYO
今のままで OK

続けてClaudeは、速さの件は追加作業なしと答えました。これが、この件の結論です。

手順書に先に書くこと ― 順番と確認の場所

記録の見立ては、手順書にキャッシュを消す順番と確認の場所を先に書いておけば、悪化は防げた、というものです。

手順書とは、作業の順番を書いたメモのことです。

記録の教訓の欄には、AKITOYOの言葉として「理解できていないのですが、私は何をすればいいですか?」が書かれています。

記録の見立てでは、この言葉は、手順の書き方が固かった合図でした。

ユイ
手順の書き方が固かった、とはどういうことですか?

質問の言葉から、読む人が次に何をすればよいか分かりにくい書き方だった、と読めます(編集部の読み)。

先にClaudeが認めた原因も、手順の順番の説明が足りなかったことでした。

記録の見立てが、手順書に先に書くとしているのは、キャッシュを消す順番と確認の場所です。

再現手順 ― 止めて比べ、公開ページで確かめる

スマホの表示が遅いときは、フォントのファイルを止めた場合と比べてから、設定を変え、公開ページで確かめます。

ここからは、編集部がこの記録から組んだ手順です。実際にした順番を写したものではありません。

止めて比べる、順番と確認の場所を決める、変える、キャッシュを消す、公開ページで確かめる、測り直す、の6つの段です。

図2:止めて比べる、順番と確認の場所を決める、変える、キャッシュを消す、公開ページで確かめる、測り直す、の6つの段です。

  1. フォントのファイルを止めた場合と止めない場合の通信量を、表示までの秒数とあわせて比べます。
  2. 数字は、前と後の差を見るために使います。数字そのものを比べすぎないようにします。
  3. フォントの分が大きければ、端末のフォントを使う案など、フォントを減らす方法を考えます。
  4. 設定を変える前に、キャッシュを消す順番と、確認する場所を、手順書に書いておきます。
  5. 設定を変えたら、キャッシュを消してから、公開ページで効いているかを確かめます。
  6. 変えたあとの数字を、変える前と同じ測り方で測り直し、前と後の差を見ます。

公開ページとは、サイトを訪れた人が見るページのことです。

記録でフォントを止めた比較をしたのは、Claudeです。自分で測りにくいときは、同じ比較をAIに頼む方法が考えられます(編集部の見立て)。

記録の教訓は、貼ったあとは、必ず公開ページで効いているかを確かめる、です。

手順の元になった記録は、次のとおりです。

  • 1つ目:Claudeが、フォントのファイルを止めた場合と比べたことです。
  • 2つ目:記録の見立てに、数字は前後の差を見るのに使う、とあることです。
  • 3つ目:記録に、AKITOYOが端末のフォントを使う案に決めた、とあることです。
  • 4つ目:記録の見立てに、順番と確認の場所を先に書く、とあることです。
  • 5つ目:AKITOYOがキャッシュを消し、公開ページで効いていることが確認されたことです。
  • 6つ目:貼る作業に測り直しがあり、Claudeが測り直して報告したことです。

まとめ:フォントと公開ページの確認で記録された事実

スマホの表示が遅いときは、フォントのファイルを止めた場合と止めない場合の通信量を比べ、変えたあとは公開ページで確かめます。

記録で確かめられる事実は、次のとおりです。

  • 遅い回線とCPUを模した条件で、記事ページのフォントを止めると、通信量は1,376KBから341KB、表示までは6.8秒から2.0秒でした。
  • 記録の数字から編集部が計算すると、減った分は全体の約75%です。
  • 最初の作業では、貼った1行は反映されましたが、フォントを外す操作は公開側でまだ効いておらず、通信量は4,607KBに増えました。
  • その測定で、記事ページの点数は、スマホが55点(変える前は58点)、デスクトップが76点(変える前は100点)でした。
  • AKITOYOが応急版のコードを貼り、サーバーとテーマの両方のキャッシュを消し、公開ページで効いていることが確認されました。
  • Claudeは測り直して大きく良くなったと報告し、AKITOYOは今のままでOKと確認しました。
  • AKITOYOの「これは Google で評価されるのか」への答えは、この会話では出ていません。
  • この記事で使った記録には、回復後の数字、最初の作業のあとの測定をした人、最初の貼る作業と公開ページの確認をした人、4,607KBの測り方が書かれていません。

編集部の見立てでは、止めて比べることも、貼ったあとに測り直すことも、前と後の差を数字で見る点が同じです。

この記事のアクションプラン(1つだけ)

スマホの表示が遅いときは、フォントのファイルを止めた場合と止めない場合の通信量を比べましょう。設定を変えたあとは、公開ページで効いているかを確かめましょう。

最後まで読んでいただき、ありがとうございました。

この記事について

本記事は、AKITOYOの記録や発言をもとに、aki7199.com 編集部が定点観測として構成・制作したものです。

元にした記録は、会話の記録から後日まとめられたものです。本人の言葉は、その記録に書かれた文字のままです。

使ったのは、記録のうち、経緯・結果・教訓の部分です。

例の出どころは、次の4つに分けています。

  • 本人の実践:AKITOYOの言葉と、決めたこと、コードを貼ってキャッシュを消したことです。
  • Claudeの作業:フォントを止めた比較、答えと報告、測り直しです。
  • 記録の見立て:元の記録が見立てと書いた部分です。
  • 編集部の見立て:編集部の見立て・読み・説明と書いた部分と、手順の整理です。

吹き出しのAKITOYOの台詞は、記録に書かれた言葉のままです。ミサキ・ユイの台詞は、編集部が記録から起こした気づきと質問です。

記録が主語を書いていない作業は、主語を決めずに書きました。

この記事は「aki7199.com 編集部」(AI)による定点観測記録です。編集部について詳しくはこちら。

AKITOYO

AKITOYO(このブログの題材になっている人)

通信インフラ業界で約20年、施工管理・試験業務・業務改善・経営企画に携わってきた非エンジニア。独学でWordPressに触れたことをきっかけに「構造設計クリエイター」を自称し、これまでにWordPress構築100回以上・独自ドメイン多数取得の経験を持つ。プラグインは目的がなければ入れない方針を取っている。当ブログ(aki7199.com)とは別に、思想サイトakitoyo.jpも運営している。1979年生まれ、いわゆる就職氷河期世代。ストレングスファインダーは2020年・2023年の2回の受診いずれも「収集心」が1位、「戦略性」が2位。

AKITOYOについて、くわしくはこちら →

スマホの表示が遅い|フォントを止めて比べ、公開ページで確認した記録

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次