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

関連記事

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

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

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

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

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

https://pasolack.com/wordpress/autoptimize/

Autoptimizeの設定でチェックを入れるだけで解決

Autoptimize preload 追加 01

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

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

このテキストエリアは本来はインライン用のクリティカルなCSSを入力するためのフィールドですが、何も入力しない場合はAutoptimizeで生成されたCSSをpreloadするだけと言う挙動になります。

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

クリティカルなインライン用CSSをちゃんと生成する場合

https://jonassebastianohlsson.com/criticalpathcssgenerator/

Autoptimize クリティカルCSS 作成

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

子テーマで設定したスタイルシートだけでも十分?

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

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

関連記事

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL