好きなことを広く浅く学んでいくブログ

【LiteSpeed Cache】表示崩れを回避しつつCSSを非同期ロードする方法

WRITER
 
Litespeedcache-option
この記事を書いている人 - WRITER -
パソコンに関する最新デバイスやアクセサリーなど集めるのが好きです。興味をもったことは徹底的に調べつくす性格。海外向けの物品販売サイトも運営しています。
詳しいプロフィールはこちら

ども。いつもPageSpeed Insightsの点数を気にしているsQuirlyです。

今回は、Google先生に叱られないよう、良点数をキープしつつCSSの最適化に挑んでみました。

 

CSSの非同期ロードをするとロード時に表示崩れが発生

PageSpeed Insightsの最適化項目の1つに、”スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する”というものがあります。

これは、CSSやJavaScriptをHTML内にインライン化・非同期ロード・フッターへ移動することによって解決しますが、ものによっては不具合が発生します。

特にLiteSpeed Cacheでは、”CSSを非同期ロード”をオンにすることにより、ページ読込み時に表示崩れが発生します。なので、オフにしている方も多いのではと思います。

LiteSpeed Cashe最適化項目"CSSを非同期ロード"

“CSSを非同期ロード”をオンにすると。。。

CSS非同期ロードによる表示崩れ

ページロード時にスタイルが崩れる

 

ですが、”CSSを非同期ロード”をオフにすると、ページロードは正常な動作になりますが、今度はGoogle先生から「CSSが読み込みをブロックしているから何とかしろ!」叱られてしまいます。

レンダリングブロック

「レンダリングをブロックしているCSSをどうにかしろ!」と叱られる

そこで、”CSSを非同期でロード”しつつページロード時に表示崩れが発生しないように対策します。

 

スタイル関連の非同期ロードを無効化する

「要は、”style.css”だけ非同期ロードから除外すればいいんでしょ?」ということで、それを行う方法を以下に記述します。

下記方法はあくまでもHTML・CSS・PHPに詳しくない自分がGoogle先生から叱られないために行った処置です。他に最善な策は他にもあると思いますので調べてみてください。

〇”CSSを非同期ロード”をオンにする

LiteSpeed Cacheの設定画面 [5]最適化 にて“CSSを非同期ロード”をオンにします。その後、“変更を保存”をクリック。

CSS非同期ロードオン

[5]最適化 より”CSSを非同期ロード”をオンにします。



〇テーマのスタイルシート内容をコピーする

FTPソフト(FFFTP)などを使って使用中のテーマファイル内のstyle.cssをダウンロードします。

ダウンロードしたCSSを開いて内容をコピーします。

FFFTPを使ったテーマスタイルシートのダウンロード

FTPソフトなどを使って使用中テーマのCSSをダウンロード

スタイルシートのコードコピー

スタイルシートのコードをコピー

また、この時点でコード内の不要な部分(コメントなど)を削除すると尚良いです。



〇”重要なCSSルール”に貼り付け

LiteSpeed Cacheの設定画面にもどり、[6]チューニング”重要なCSSルール”欄にコピーした内容を貼り付けします。”変更を保存”のクリックも忘れずに。

重要なCSSルール記述

”重要なCSSルール”内にコピーしたコードを貼り付け

 

「FTPソフト使ったこと無いから他の方法で教えやがれ!」って方は下記方法を行っても、一応Google先生からは叱られなくなります。

〇ブラウザでデベロッパーツールを立ち上げ

ブラウザーにて自分のサイトを開いた状態でF12キーを押し、デベロッパーツールを起動します。

ブラウザーにてデベロッパーモード起動

ブラウザーで自分のサイトを開き、デベロッパーツールを起動



〇CSSのコードをコピー

Chromeの場合は、”Sources”→”サイトのドメイン”→”min”→”〇〇〇〇〇.css”と進み、内容をコピーします。

デベロッパーツールのコードコピー(chrome)

デベロッパーツールよりスタイルシートのコードをコピー

 

Firefoxの場合は、スタイルエディターより〇〇〇〇〇.cssの内容をコピーします。デベロッパーツールのコードコピー(Firefox)LiteSpeed Cacheで縮小化や結合を行っていない場合は”style.css”を探し出してコードをコピーしましょう。


〇”重要なCSSルール”に貼り付け

LiteSpeed Cacheの設定画面にもどり、[6]チューニング”重要なCSSルール”欄にコピーした内容を貼り付けします。”変更を保存”のクリックも忘れずに。

重要なCSSルール記述

”重要なCSSルール”内にコピーしたコードを貼り付け

 

見出しまとめ2

  • ”CSSの非同期ロード”をオンにするとページロード時に表示崩れが発生する
  • ”CSSの非同期ロード”をオフにするとPageSpeed Insightsの”レンダリングをブロック”に引っかかる
  • ”CSSの非同期ロード”をオンにしつつ”重要なCSSルール”にテーマのスタイルシート内容を記載することで回避が可能

Google先生から叱られるとSEO的にも響く部分があるのかな?と思っているので、些細な点数アップではありますけど改善を怠らずにやっていきたいと思います!

 

余談

”重要なCSSルール”欄に記述されている、

CSSを非同期ロードを有効にする場合は、折り畳まれたコンテンツのクリティカルなCSSルールを指定します。

の意味が分からなくてずっとCSSまでの絶対パスを入れてたと言う恥ずかしい話(笑)

”CSSルール”←ココ重要!URLじゃないから!

 

 

この記事を書いている人 - WRITER -
パソコンに関する最新デバイスやアクセサリーなど集めるのが好きです。興味をもったことは徹底的に調べつくす性格。海外向けの物品販売サイトも運営しています。
詳しいプロフィールはこちら










- Comments -

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

Copyright© Stealth Blog , 2024 All Rights Reserved.