LiteSpeed Cacheを使用している人は要注意?Googleフォントが一部ウェイトしか出力されない!?
サイト高速化のために導入されることが多い
LiteSpeed Cache(以下、LSC)。
とても便利なプラグインですが、
今回ちょっとした落とし穴にハマりました。
それが、
Googleフォントの一部ウェイト(おそらくnormalウェイト)しか読み込まれない問題。
自作テーマで遭遇したそんなトラブルを共有します。
LiteSpeed Cacheとは?
LiteSpeed Cacheは、
- ページキャッシュ
- CSS / JSの最適化
- 画像最適化
- 遅延読み込み
- データベース最適化
などをまとめて管理できる、
かなり優秀な高速化プラグインです。
サーバーがLiteSpeed系の場合は特に相性が良く、
導入しているサイトも多いと思います。
「とりあえず入れておけば速くなる」
と言われることもあるくらいです。
こいつは便利DA!HAHA!
ただし。
設定項目が多い。
つまり、
思わぬところに影響が出ることもあります。
過信するべからず。
自作テーマで遭遇したトラブル
今回の現象はこちら。
LINE Seed JP がどこをいじってもウェイト400しか読み込まれない
Googleフォントで
- 100
- 400
- 700
- 800
などを指定しているのに、
実際に表示されるのは 400のみ。
↓実際に入れてたコード
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=LINE+Seed+JP:wght@100;400;700;800&display=swap">CSSは間違っていない。
テーマ側の記述も正しい。
それでも太字が効かない。
さらに厄介だったのがこれ。
WPログイン時は正常、非ログイン時は400のみ
Why?なぜ?
なので開発中は全く気が付きませんでした…
これはもう、「キャッシュだな」と思いました。
原因はLiteSpeed Cacheの設定だった
結論から言うと、
「Google フォントを非同期に読み込む」がオンになっていたことが原因でした。
LiteSpeed Cacheには
Googleフォントの読み込みを最適化する設定があります。
その中の
Google Fonts を非同期で読み込むが有効になっていました。
(LiteSpeed Cache > ページの最適化 > [3]HTML の設定 の下の方)
これにより、
- 指定したウェイトが正しくプリロードされない
- 一部ウェイトのみ読み込まれる
という挙動になっていたようです。
AIに<head>ソースを投げて確認した話
今回は念のため、
実際の <head> の出力ソースをAIに投げて確認しました。
「ちゃんと複数ウェイト読み込まれてる?」
と聞いてみると、
- 読み込みURLのパラメータ
- 実際に生成されているlinkタグ
- preloadの状態
を整理してくれたので、
設定の怪しさに気づけました。
高速化系のトラブルは、
見た目だけでは原因が追いづらい
のでソース確認はやっぱり大事です。
まとめ
LiteSpeed Cacheはとても便利です。
- サイト高速化に貢献する
- 設定次第で大きく改善できる
- 管理もしやすい
ただし、
最適化=正義ではない
ということもあります。
特に、
- Googleフォント
- CSS結合・最適化
- JS遅延読み込み
あたりは、
思ってもみないところで表示崩れや挙動不良が起きることがあります。
「なぜか一部だけ効かない」
というときは、
- キャッシュを疑う
- 最適化設定を一旦オフにする
- 非ログイン状態で確認する
この3つを試すと、
だいたい犯人が見えてきます。
便利なツールほど、ちゃんと理解して使いましょう。
私の場合は LiteSpeed Cache でしたが同じようなツールは他にもあると思います。
同じようなトラブルに遭遇した方の少しでも参考になればと思います。
ではでは。
