画像ファイルサイズ調整、あるいはCSSのインライン化と読み込み非同期によるLCPの改善　～PageSpeed Insights（旧版）とGTmetrixを改善してみる（その３）

【2026年6月27日追記】
本連載は、KUSANAGI for ConoHa（1Gプラン）でPageSpeed InsightsとGTmetrixのスコア改善を図った過程です。
2016年に私がKUSANAGIを導入した直後、サイト高速化に初めてガチで取り組んだもの。
PageSpeed Insightsは旧版のものですが、対策そのものは参考になると思います。

2026年現在では、LCP改善の考え方として読み替えられます。

• ファーストビューの画像サイズを縮減する
• クリティカルCSSを分離してインライン化する

こちらの記事の続きです。

最新のPSI100については、こちらをお読みください。

謎の項目「表示可能コンテンツの優先順位を決定する」（旧PSI）

一番手こずった項目です。
説明ページ を読んでも、他のページと違って具体的にどうすればいいのかさっぱりわかりません。

説明ページのポイントは、

・リソースで使用されるデータの量を減らす。
・スクロールせずに見える範囲のコンテンツのサイズを削減する。

【2026年6月27日追記】
「スクロールせずに見える範囲のコンテンツ」はファーストビューのことです。

CSSコードの見直しをする

ここでLuxeritasを作った「るな 」さまのページを見てみる。

100-100、さすがです。
ということはLuxeritasの構造には問題ないことになる（当たり前ですが）。

トップページのコード、相当いじったしなあ……と見直してみます。
するとかなりのアラが。
セレクタの組み方間違えていたり、無駄な構成あったり。
一つ一つ自分で作るつもりで見直していきました。

その結果。

他にも検索してはあれやこれや試してみましたが、全然ダメ。
どうしようって感じでした。

PSIに指摘された原因判明！

しかし、サイト記事更新した後、PageSpeed Insightsで計測したところ……。

なぜか項目が消えていました。
たまたまではなく何回やっても消えています。
はて？
まあ消えたならいいこと。
次の記事を更新しよう。

次の記事を更新した後、

呆然としながらトップページを眺める。
しかしそこで原因に気づきました。

「表示可能コンテンツの優先順位を決定する」の原因はファーストビューにおける画像のファイルサイズ

ヒントは「記事を更新して注意が消えて、別の記事を更新したら注意が出たことでした。
つまり、

（当時の）本サイトは先頭固定記事を大きく表示するレイアウトにしています。

こんな感じ。
現在は「表示可能コンテンツの優先順位を決定する」が指摘されていません。
画像サイズは5kbです。

一方で、

この画像をサムネイルに使ったときは出ました。
前者に比べていかにも重そう。
画像サイズを調べてみると18kb。

つまり、単純に、

と言っても、圧縮してこれなのだからどうしようもない。
「サイトおしらせ」も兼ねて大きくしてあるので、このレイアウトはやめたくない。

ということで、「これでいい」と割り切りました。
サムネイルサイズ次第のものをこだわってもしかたありませんので。

ただ原因が判明して、すっきりはしました。

【2017/3/17追記】子テーマのstyle.cssファイルを分離する

「表示可能コンテンツの優先順位を決定する」はCSSが肥大化している場合にも生じます。
そのため別の方法でも解決できます。

ある程度カスタマイズしてstyle.cssが肥大化している場合（20kbくらい）、かつLuxeritasのCSS結合機能を使っている場合限定です。

それは、次の通り。

CSSを非同期で読み込ませる方法は、luxe.jsに次の記述をします。

(function(){
 var n = document.createElement('link');
 n.async = true;
 n.defer = true;
 n.type = 'text/css';
 n.rel = 'stylesheet';
 n.href = '【CSSファイルまでのパス】';
 var s = document.getElementsByTagName('script');
 var c = s[s.length - 1];
 c.parentNode.insertBefore(n, c);
})(document);

ファーストビューの必要な部分のCSS（＝クリティカルCSS）をインライン化するという手法が一般に知られてますが、その考えと近いです。
単に結合するだけだとファーストビューに不要な部分まで結合するので、その結果「表示可能コンテンツの優先順位を決定する」を注意をされます。
なので分離して、（結合圧縮された）style.min.cssの量を減らすわけです。

これと同じ現象はプラグインAutoptimizeでも生じます。
Autoptimizeの場合は結合から除外するcssを指定。
（Luxeritasと違い、何も指定しなければ全てのcssを結合する）
上記のスクリプトファイルを作成→実行すればいいです。

【2026年6月27日追記】
以前は本項目でCSSの圧縮についても記していました。
CSSについては圧縮が推奨されることも多いです。
ただしCSSの圧縮は、

• 表示が崩れる
• 可読性が落ちることにより保守性が下がる（テーマなどに自動圧縮機能がついてない場合）

なので圧縮する場合は、表示テストを行って異常がないことを確認してからをおすすめします。

まとめ

「表示可能コンテンツの優先順位を決定する」は、よくわからないって人多いみたいです。
有効な解決法の１つは「ファーストビューのサイズを単純に小さくすること」。
もし当サイトと同じく大きいサイズの画像を用いている場合は、小さいサイズのものに入れ替えて試してみてください。