【LiteSpeed Cache】表示崩れを回避しつつCSSを非同期ロードする方法
ども。いつもPageSpeed Insightsの点数を気にしているsQuirlyです。
今回は、Google先生に叱られないよう、良点数をキープしつつCSSの最適化に挑んでみました。
CSSの非同期ロードをするとロード時に表示崩れが発生
PageSpeed Insightsの最適化項目の１つに、”スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する”というものがあります。
これは、CSSやJavaScriptをHTML内にインライン化・非同期ロード・フッターへ移動することによって解決しますが、ものによっては不具合が発生します。
特にLiteSpeed Cacheでは、”CSSを非同期ロード”をオンにすることにより、ページ読込み時に表示崩れが発生します。なので、オフにしている方も多いのではと思います。
“CSSを非同期ロード”をオンにすると。。。
ページロード時にスタイルが崩れる
ですが、”CSSを非同期ロード”をオフにすると、ページロードは正常な動作になりますが、今度はGoogle先生から「CSSが読み込みをブロックしているから何とかしろ！」叱られてしまいます。
「レンダリングをブロックしているCSSをどうにかしろ！」と叱られる
そこで、”CSSを非同期でロード”しつつページロード時に表示崩れが発生しないように対策します。
スタイル関連の非同期ロードを無効化する
「要は、”style.css”だけ非同期ロードから除外すればいいんでしょ？」ということで、それを行う方法を以下に記述します。
〇”CSSを非同期ロード”をオンにする LiteSpeed Cacheの設定画面 [5]最適化 にて“CSSを非同期ロード”をオンにします。その後、“変更を保存”をクリック。 [5]最適化 より”CSSを非同期ロード”をオンにします。
〇テーマのスタイルシート内容をコピーする FTPソフト（FFFTP）などを使って使用中のテーマファイル内のstyle.cssをダウンロードします。 ダウンロードしたCSSを開いて内容をコピーします。 FTPソフトなどを使って使用中テーマのCSSをダウンロード スタイルシートのコードをコピー また、この時点でコード内の不要な部分（コメントなど）を削除すると尚良いです。 〇”重要なCSSルール”に貼り付け LiteSpeed Cacheの設定画面にもどり、[6]チューニングの”重要なCSSルール”欄にコピーした内容を貼り付けします。”変更を保存”のクリックも忘れずに。 ”重要なCSSルール”内にコピーしたコードを貼り付け
「FTPソフト使ったこと無いから他の方法で教えやがれ！」って方は下記方法を行っても、一応Google先生からは叱られなくなります。
〇ブラウザでデベロッパーツールを立ち上げ ブラウザーにて自分のサイトを開いた状態でF12キーを押し、デベロッパーツールを起動します。 ブラウザーで自分のサイトを開き、デベロッパーツールを起動 〇CSSのコードをコピー Chromeの場合は、”Sources”→”サイトのドメイン”→”min”→”〇〇〇〇〇.css”と進み、内容をコピーします。 デベロッパーツールよりスタイルシートのコードをコピー Firefoxの場合は、スタイルエディターより〇〇〇〇〇.cssの内容をコピーします。
〇”重要なCSSルール”に貼り付け LiteSpeed Cacheの設定画面にもどり、[6]チューニングの”重要なCSSルール”欄にコピーした内容を貼り付けします。”変更を保存”のクリックも忘れずに。 ”重要なCSSルール”内にコピーしたコードを貼り付け
- ”CSSの非同期ロード”をオンにするとページロード時に表示崩れが発生する
- ”CSSの非同期ロード”をオフにするとPageSpeed Insightsの”レンダリングをブロック”に引っかかる
- ”CSSの非同期ロード”をオンにしつつ”重要なCSSルール”にテーマのスタイルシート内容を記載することで回避が可能
Google先生から叱られるとSEO的にも響く部分があるのかな？と思っているので、些細な点数アップではありますけど改善を怠らずにやっていきたいと思います！
余談
”重要なCSSルール”欄に記述されている、
CSSを非同期ロードを有効にする場合は、折り畳まれたコンテンツのクリティカルなCSSルールを指定します。
の意味が分からなくてずっとCSSまでの絶対パスを入れてたと言う恥ずかしい話（笑）
”CSSルール”←ココ重要！URLじゃないから！
