テーマ Simplicity の CSS における @import url の削除

このブログは、WordPressのテーマは、Simplicityを使用しています。
そしてサーバーは、WPXレンタルサーバーで運用しているので、mod_pagespeed モジュールを使用して高速化することができます。

Simplicityを使用していて、mod_pagespeed を ON にしても、PageSpeed Insights で修正を促される部分があったので、その改善方法をメモとして残しておきます。

修正内容と改善点

環境

WordPressテーマ:Simplicity
mod_pagespeed設定:ON

PageSpeed Insights からの指摘事項

  • /css/feedly.css
  • /css/blog-card.css
  • /css/extension.css
  • /css/other.css
  • /css/sns.css
  • /css/media.css
  • /css/narrow.css
  • /css/other-mobile.css

に対して、

  • スクロールせずに見えるコンテンツのレンダリングをブロックしているCSSを排除する (次のCSS配信を最適化して下さい)
  • ブラウザのキャッシュを活用する
  • 圧縮を有効にする
  • CSSを縮小する

の指摘を受けています。

指摘を受けた原因

Simplicityでは開発効率を上げるためにモジュール化を行っており、指摘を受けたCSSは全て他のCSSから @import url されたファイルです。
おそらく、@import url された CSS に対しては、mod_pagespeed の力が及ばないものと推定します。
そして、実際に以下の対処にて上記の指摘は全て解決し、スコアも向上します。

モバイル パソコン 備考
対処後 79 93 指摘事項が解決
対処前 70 89

テーマファイルの修正

CSS内での @import url を削除し、PHP内で、<link rel=”stylesheet” …. > にて読み込むように変更します。

(1) header-css.php への追記

(2) header-css-mobile-responsive.php への追記

(3) style.css から削除

(4) mobile.css から削除

(5) responsive.css から削除

PageSpeed Insights 結果全文 – 対処後

改善後-モバイル

改善後-パソコン

PageSpeed Insights 結果全文 – 対処前

改善前-モバイル

改善前-パソコン