制作
スマホで重い・崩れる。表示速度の測り方と、直す順番
お困りごとスマホで見ると表示が崩れる・とにかく重い
「スマホで重い」は体感で直そうとすると迷子になります。計測 → 影響の大きい順、が原則です。
測り方
- PageSpeed Insights（無料）にURLを入れる。モバイルのスコアと「改善できる項目」を見る
- Core Web Vitals のうち、まずLCP（主要コンテンツの表示時間）を2.5秒以下にすることを目標にする
- 実機でも確認。Wi-Fiを切り、モバイル回線で開いてみる
直す順番
1. 画像（いちばん効く）
- 表示サイズの2倍を超える巨大画像を、適正サイズに縮小
- 形式をWebPに変換
- ファーストビュー外の画像に遅延読み込み（loading=“lazy”）
多くのサイトは、ここだけでLCPが1〜2秒縮みます。
2. 読み込みの優先順位
- Webフォントの読み込みで本文表示が待たされていないか（font-display: swap）
- ファーストビューに関係ないCSS・JSを後回しに
3. スクリプト
- 使っていないプラグイン、タグマネージャ内の古いタグを削除
- チャットや広告タグは遅延読み込み
崩れる場合
速度とは別問題です。ビューポート設定の有無、固定幅（px）指定、はみ出す要素をブラウザの開発者ツールで特定します。
計測レポートの作成と、改善の優先順位づけは無料でお出しします。