WordPressプラグイン『Autoptimize』のCSSにpreload属性を付ける方法

目次⇔

AutoptimizeのCSS自体が「レンダリングを妨げるリソースの除外」に引っかかる

WordPress高速化に欠かせないプラグインの一つであるAutoptimizeですが、Autoptimizeが生成したキャッシュ用のCSSファイルは初期設定ではpreload属性が付いていません。

Pagespeed Insightsでチェックをかけるとpreload属性がないために『レンダリングを妨げるリソースの除外』の警告が出ます。

この解決方法が少し分かりにくかったので記事にしました。

Autoptimizeの基本的な使い方に関しては以下の記事が詳しいのでそちらを参照してください。

WordPress管理画面の『設定』→『Autoptimize』→『高度な設定を表示』で省略されている設定を表示。

『CSS のインライン化と遅延』にチェックを入れて、下のテキストエリアには何も入力せずに『変更を保存』するとAutoptimizeで生成されたCSSファイルにpreload属性がついてPagespeed Insightsの警告を回避できます。

このテキストエリアは本来はインライン用のクリティカルなCSSを入力するためのフィールドですが、

何も入力しない場合はAutoptimizeで生成されたCSSをpreloadするだけと言う挙動に変わります。

ただし、CSSがキャッシュされていない環境では一瞬CSSが何も適用されていない画面が表示されるため結構見苦しいのが難点。

上記サイトにアクセスし、サイトのURLとサイトで使っている全てのCSSを貼り付けて『Create Critical Path CSS』をクリックするとクリティカルなCSSを生成してくれる…のですが、それなりに長いCSSになります。

文字の色やリンクの色などは子テーマで設定していることが多いと思うので、子テーマのCSSのみインライン化して貼り付けておけばCSSが読み込まれていない状況でもそこまで見苦しくならないのではないでしょうか。

Pagespeed Insightsのスコアや強制リロード時の見栄えと相談しつつ調整するのがベストですが、とりあえずこのブログは子テーマのCSSのみインライン化の方向で落ち着きました。