第6回「A評価を目指せ！基本チェックから始める省エネ改善」（連載：脱炭素×サステナブルなウェブ運用のススメ）
1. はじめに：A評価は「特別な技術」ではない
ウェブサイトの二酸化炭素排出量を測定したあと、多くの現場で次のような課題が見えてきます。
- 思ったより数値が高い
- どこから改善すればよいか分からない
- 優先順位が決められない
評価改善は、必ずしも大掛かりな改修だけで実現するものではありません。基本的な最適化の積み重ねでも改善は可能です。ただし、効果を出しやすい順に進めるには、実務的な判断が重要です。
重要なのは、次の3点です。
- 無駄なデータ転送を減らす
- 処理効率を高める
- 継続的に改善できる構造にする
なお、本記事でいう「省エネ改善」とは、サーバーや通信のエネルギー消費を直接計測するものではなく、主にデータ転送量や配信負荷を抑えるための実務的な改善を指します。
2. 前提整理：軽量なページとは何か
本記事では、GreenSyncWeb®CO2の評価基準や当社の環境目標を踏まえ、軽量で環境負荷を抑えたウェブページの考え方を整理します。改善アクションについても、比較的着手しやすい内容を中心に紹介します。
当社の環境目標では、ウェブページ平均二酸化炭素排出量を0.15g以下／1PVとし、軽量設計の目安をページ容量600KB未満としています。この水準は、GreenSyncWeb®CO2におけるAまたはB評価相当を目安としています。
詳しくは、当社の環境目標をご参照ください。
まず押さえたい基本は、次の3点です。
- ページ容量を抑える
- 不要な外部通信を減らす
- 更新のたびに重くしすぎない運用を行う
評価を高めやすいページには、「ページ容量が小さい」「不要な通信が少ない」「構成が整理されている」という共通点があります。
3. チェックA：画像最適化（最も効果が大きい）
最優先で着手したい領域です。実務上、ページ容量を押し上げる最大の要因は、画像であることが少なくありません。
まず確認したいポイント
画像の容量・表示サイズ・形式が適正かを確認する。
基本チェック
- WebPまたはAVIFを使用しているか
- 表示サイズに対して、画像が大きすぎないか
- 初期表示に不要な画像まで、すぐ読み込んでいないか
改善アクション
- JPEGやPNGは、可能な範囲でWebPやAVIFへ変換する
- 表示サイズに適した画像を使い分け、必要に応じてsrcsetなどを設定する
- 画面初期表示に不要な画像には遅延読み込み（loading="lazy"）を設定する
画像最適化だけで大幅な削減が見込めるケースがあります。削減幅はサイト構成や環境によって異なりますが、まず最初に着手することを推奨します。
4. チェックB：CSS・JavaScriptの削減
次に効果が出やすいのがコードの軽量化です。見た目や機能を維持したまま、不要な読み込みを減らせるケースは多くあります。
まず確認したいポイント
必要なCSS・JavaScriptだけが読み込まれているかを確認する。
基本チェック
- 未使用CSSが含まれていないか
- JavaScriptが過剰に読み込まれていないか
- ライブラリ依存が多すぎないか
改善アクション
- 不要なCSSを削除する
- jQuery依存を見直す
- JavaScriptはdeferやasyncを活用して遅延読み込みする
注記：WordPressでは、テーマやプラグイン由来の肥大化が典型的な原因です。
5. チェックC：フォント最適化
フォントの読み込みも影響が大きい領域です。特に日本語サイトでは、フォントファイルがページ容量を押し上げることがあります。
まず確認したいポイント
日本語フォントの容量と読み込み本数を確認する。
基本チェック
- Webフォントを使用しているか
- フォントファイルが複数読み込まれていないか
- 日本語フルセットを読み込んでいないか
改善アクション
- システムフォントへ切り替える
- 必要なフォントだけに絞ってサブセット化する（使うフォントだけを抜き出すこと）
- フォントの読み込み数を減らす
日本語フォントは種類によって数MBに達するものもあり、最適化の優先度は高めです。
6. チェックD：外部リソースの見直し
外部通信は、見えにくい負荷の要因です。自社サーバー上のファイルだけを見ていると、全体の負荷を見落としやすくなります。
まず確認したいポイント
外部ドメインへの通信がどれだけ発生しているかを洗い出す。
基本チェック
- Google Fontsの使用状況
- 外部スクリプトの数
- 不要なトラッキングコードが残っていないか
- SNS埋め込みや広告タグが過剰でないか
改善アクション
- 外部リソースを削減する
- 可能なものはセルフホスティング化する（自社サーバー側にファイルを置くこと）
- タグを整理し、必要最小限に絞る
注記：フォントのライセンスによっては、セルフホスティングの可否を事前に確認してください。
外部リソースの多さは、遅延や表示不安定の原因にもなります。
7. チェックE：キャッシュと配信最適化
同じデータを何度も送らないことも重要です。ページそのものを軽くするだけでなく、再訪時の負荷を抑えることも改善につながります。
まず確認したいポイント
静的ファイルが再利用される設定になっているかを確認する。
基本チェック
- ブラウザキャッシュが設定されているか
- CDNが適切に使われているか
- キャッシュ無効化が頻発していないか
改善アクション
- Cache-Controlヘッダーを設定する
- CDNを導入する、または設定を見直す
- 静的ファイルを長期キャッシュ化する
キャッシュ設定は、表示速度の改善だけでなく、再訪時の無駄な通信削減にもつながります。
8. チェックF：ページ構造の整理
不要なHTML、過剰なDOM構造（HTMLの階層の深さ）、埋め込み部品の増加は、描画負荷や保守負荷を高める要因になります。
まず確認したいポイント
不要なラッパー要素や重複したマークアップがないかを確認する。
基本チェック
- DOM構造が過剰にネストされていないか
- 不要なHTMLが含まれていないか
- 不要なラッパー要素が増えていないか
- 埋め込みウィジェットや装飾要素が乱立していないか
改善アクション
- HTMLを簡素化する
- 不要要素を削除する
- 部品の使い回しを前提に軽量設計を見直す
構造を整理することは、表示負荷だけでなく、更新や保守のしやすさにもつながります。
9. 実務での優先順位：改善を進める順序
既存のウェブサイトの改善は、効果が大きく、着手しやすいものから進める方が効率的です。
おすすめの順序は以下の通りです。
- 画像最適化
- CSS・JavaScript削減
- 外部リソース整理
- フォント最適化
- キャッシュ設定
- 構造改善
特に、画像・コード・外部通信の3点は改善効果が見えやすく、初動として取り組みやすい項目です。運用時の更新で容量や通信量が増えれば、評価は維持しにくくなります。そこで重要になるのが、公開後の継続改善です。
10. チェックG：運用フェーズの継続改善
制作時に軽量化できても、運用の積み重ねによってその効果が失われることがあります。AまたはB評価相当を安定して維持するには、運用フェーズでの管理が欠かせません。
まず確認したいポイント
更新時に、容量や通信量を増やしすぎない運用ルールが機能しているかを確認する。
基本チェック
- 画像が適切に最適化されてアップロードされているか
- コンテンツ更新時に容量チェックをしているか
- 外部タグや埋め込みが追加されすぎていないか
- 定期的に測定しているか
改善アクション
- 運用ガイドラインを整備する
- アップロードルールを明文化する
- 更新時のチェック項目を設定する
- 定期測定を実施する
制作と運用の両方で取り組むことが、持続可能なウェブ運用につながります。
11. おさらい：チェックリスト一覧
本記事で紹介した改善チェックリストをまとめます。優先度の高い項目から順に確認してください。
チェックA：画像最適化
- WebPまたはAVIFを使用しているか
- 表示サイズに対して、画像が大きすぎないか
- 初期表示に不要な画像まで、すぐ読み込んでいないか
チェックB：CSS・JavaScriptの削減
- 未使用CSSが含まれていないか
- JavaScriptが過剰に読み込まれていないか
- ライブラリ依存が多すぎないか
チェックC：フォント最適化
- Webフォントを使用しているか
- フォントファイルが複数読み込まれていないか
- 日本語フルセットを読み込んでいないか
チェックD：外部リソースの見直し
- Google Fontsの使用状況
- 外部スクリプトの数
- 不要なトラッキングコードが残っていないか
- SNS埋め込みや広告タグが過剰でないか
チェックE：キャッシュと配信最適化
- ブラウザキャッシュが設定されているか
- CDNが適切に使われているか
- キャッシュ無効化が頻発していないか
チェックF：ページ構造の整理
- DOM構造が過剰にネストされていないか
- 不要なHTMLが含まれていないか
- 不要なラッパー要素が増えていないか
- 埋め込みウィジェットや装飾要素が乱立していないか
チェックG：運用フェーズの継続改善
- 画像が適切に最適化されてアップロードされているか
- コンテンツ更新時に容量チェックをしているか
- 外部タグや埋め込みが追加されすぎていないか
- 定期的に測定しているか
12. まとめ：A評価は「設計＋運用」で決まる
ウェブページの評価を高めるために重要なのは、単発の調整ではなく、軽量な構成を維持できる設計と運用を両立することです。
ポイントは次の2点です。
- 軽量設計
- 無駄を増やさない運用
測定して終わりではなく、可視化した結果を改善につなげることではじめて、持続可能なウェブ運用は実務として機能します。こうした継続的な改善の考え方は、GreenSyncWeb®が重視する持続可能なウェブ運用の方向性とも重なります。
次回でシリーズ最終回です。GreenSyncWeb®の今後の展望と、持続可能なウェブ運用をどのように未来へつなげていくかを整理します。
参考文献・出典