サイト表示速度を改善するときは、遅い箇所を測り、変更を一つずつ検証します。この記事では、ハッシンラボの2記事で不要CSSを整理した実例を紹介します。確認できたのはコード削減量と表示の保持です。速度や検索順位が改善したという測定結果ではありません。
実例：2記事の不要CSSを整理して比較した
CSSとは、文字の色や余白などを指定するコードです。例えば、削除した図解の装飾だけが本文に残る場合があります。2026年9月26日、当サイトの2記事で使用箇所を調べました。
| 対象記事 | 整理前の本文HTML | 整理後 | 削減量 |
|---|---|---|---|
| YouTubeハイプ記事 | 93,717バイト | 25,866バイト | 67,851バイト（約72.4%） |
| PR TIMES記事 | 34,496バイト | 28,192バイト | 6,304バイト（約18.3%） |
出典：当サイト編集部の2026年9月26日作業記録。WordPressに保存する本文HTMLをUTF-8で数えた値です。画像・テーマ・外部スクリプトを含むページ全体や、圧縮後の通信量ではありません。
比較対象：YouTubeハイプ記事、PR TIMES記事。変更後にPC表示と390px幅で代表箇所を確認しました。全画面幅・全端末の検証ではありません。
検証した手順と、削除せず残したもの
- 公開中の本文を取得し、CSSと本文の要素を照合しました。
- YouTube記事の大型CSSは235規則に分けて確認しました。
- 使用中の関連記事用7規則は、宣言と順序を保持しました。
- 未使用120規則と、不正なセレクタ108規則を除去しました。
- 本文、リンク、表、著者欄を保持しているか比較しました。
- 公開後に見出しと関連記事などの表示を確認しました。
セレクタとは、装飾を適用する対象の指定です。例えば、関連記事のリンクだけを選ぶ名前です。今回はHTMLタグがCSSへ混入し、無効になっている指定もありました。無効な指定を修復して有効にすると、見た目が変わるため注意が必要です。
コード削減と表示速度は別に測る
本文HTMLが小さくなっても、読み込み時間が同じ割合で短くなるとは限りません。画像、サーバー応答、外部タグなど別の要因もあるためです。今回の作業では、速度改善率を測っていません。
PageSpeed Insightsでは、実際の利用者から集めたデータと、条件を設定して測るデータを区別します。前者は利用環境を含む傾向、後者は原因を調べる手掛かりになります。対象ページに実利用データがない場合もあります。出典：GoogleのPageSpeed Insights解説（2026年9月26日確認）。
PageSpeed Insightsで測る手順
- PageSpeed Insightsを開き、確認したいページのURLを入力します。
- 分析を実行し、モバイルとパソコンの結果を分けて確認します。
- 実利用データが表示されるか確認し、測定日と結果を保存します。
- 改善候補を一つ選び、変更内容を記録します。
- 同じURLと端末区分で再測定します。一度の点数だけで結論を出さず、条件とばらつきも確認します。
測定画面の項目が変わる場合は、現行の案内に従ってください。この操作手順の紹介は、今回の2記事で速度改善を実測したという意味ではありません。
原因に合わせて改善箇所を選ぶ
- 画像が大きい場合：表示する大きさに合う寸法や形式を検討します。
- サーバー応答が遅い場合：ホスティングやキャッシュの設定を確認します。ログイン時の個別情報を誤って共有しない設定が必要です。
- JavaScriptの処理が重い場合：使っていない外部タグや機能を確認し、必要性を判断します。
- CSSが多い場合：今回の例のように適用先を調べ、未使用部分から整理します。
出典：Googleのウェブ高速化ガイド。変更後は速度だけでなく、画像・メニュー・フォームなどの動作も確認します。
自社サイトで取り組む順番
| 段階 | すること | 残す記録 |
|---|---|---|
| 測定 | 対象URL・端末条件をそろえて測る | 測定日・設定・結果 |
| 原因確認 | 画像・CSS・スクリプト・応答時間を調べる | 改善対象と根拠 |
| 小さく変更 | 一つの変更を適用する | 変更前のデータ・差分 |
| 確認 | 同じ条件で再測定し、実画面を見る | 測定結果・表示・操作 |
| 継続 | 実利用データの変化も後日確認する | 期間と他の変更内容 |
例えば、使われていない図解のCSSだけを整理するなら、画像やテーマまで同時に変えない方法があります。違いを比較しやすくし、表示が変わったときに原因を追えるようにするためです。
削除前に確認すること
- PCとスマホで用途が違うCSSではないか。
- メニューやタブを開いた時だけ使う指定ではないか。
- 他の記事やテーマと共有しているファイルではないか。
- 変更後も表、著者欄、リンクを操作できるか。
- 後続の編集を消さずに戻せる記録があるか。
プラグインを入れるだけで解決すると決めず、原因に合わせて選びます。画像の最適化を調べたい場合は、WordPress画像最適化の解説も参考になります。導入前には現在の機能や利用条件を確認してください。
表示速度とSEOの関係
Googleはページ体験を検索で考慮する一方、良い指標だけで上位表示を保証していません。内容が検索した人の疑問に答えるかも確認します。出典：Googleのページ体験ガイド（2026年9月26日確認）。
よくある質問
CSSを72.4%減らすと、表示も72.4%速くなりますか？
そのようには判断できません。今回の72.4%は一記事の本文HTMLの削減率です。
同じコードを他サイトでも削除できますか？
適用先はサイトごとに違います。実際の本文と動作を照合して判断します。
実例だけで検索順位への効果が分かりますか？
分かりません。期間を置いたデータと、同時期の変更も含めた確認が必要です。
更新履歴・検証範囲
2026年9月26日更新。一般的な高速化の説明に、自社2記事のCSS整理を比較した検証記録を追加しました。測定単位・条件・未測定事項を明記しています。
