Luxeritas の子テーマ CSS 圧縮の仕組み

Luxeritas Minify and Compress CSS

Luxeritas を使っていただいてる方のサイトを見ると

子テーマの CSS を圧縮せずに使用してる人が多く見受けられる

子テーマの CSS や Javascript の圧縮は、Luxeritas 高速化の肝 の部分なので、Luxeritas で子テーマを使うなら、子テーマの CSS を圧縮してなんぼであり、正直言って 圧縮しないともったいない

なので「Luxeritas の子テーマ CSS 圧縮の仕組み」を解説しておく。

カスタマイズ画面で CSS を圧縮する設定にした場合の動作

子テーマ CSS 圧縮設定画面

↑ 上記の設定にするとどうなるのか?

  1. style.css はそのままで style.min.css が作られる

  2. 以降、自動的に style.min.css が読み込まれるようになる

  3. Luxeritas では、ブログ画面にアクセスがあった場合、常に style.css や luxech.js のタイムスタンプとサイズを監視しているので

  4. style.css に変更がなければ、そのままブログ表示

  5. デザインを変えるために style.css を書き換えてみた

  6. style.css に変更があれば、ブログ画面アクセス時に自動的に style.min.css が再構築されて新しい style.min.css でブログが表示される

  7. 試しにカスタマイズ画面で CSS を圧縮する設定を解除してみる

  8. style.min.css が削除されて、以降、自動的に style.css が読み込まれるようになる

圧縮プロセスは style.css に変更があった場合の最初の一回だけ。
読み込みは静的なファイルを読み込むだけなのでサーバーへの負荷もない。

style.css の変更は常に監視してるので、

style.css を書き換えても手動による再圧縮の必要もない

つまり、子テーマ CSS の圧縮は、

メリット以外はなく、何のデメリットもない

この動作は、「親と子の CSS を結合して圧縮する」の設定でも同じ。というか、HTTP リクエストを削減できるので結合しちゃった方がよい。

子テーマ CSS 圧縮・結合設定画面

とどのつまり

Luxeritas で子テーマを使う場合は、どんな状況であっても

「親と子の CSS を結合して圧縮する」

に設定するのがベスト。

なんでデフォルトで圧縮される設定になってないの?

Luxeritas を使用してる人が、必ずしも子テーマを使用してるとは限らないので、仕方なく無圧縮をデフォルトにしてるだけ。

Luxeritas

Posted by るな