このサイトで利用させていただいているWordPressテーマ、「Simplicity」の開発版「1.6.6」が公開されました。
今回もいくつかの修正や追加・変更がなされているのですが、その中に「style.min.css」ファイルを追加というのがあります。
この「style.min.css」は既存の「style.css」と置き換えて利用する事で、Simplicityを高速化する事ができるそうです。
というわけで、「Simplicity 1.6.6」を適用し、「style.min.css」を利用した場合のサイト表示速度を計測してみました。
目次
Simplicity 1.6.6 開発版
Simplicity の公式サイト、および1.6.6の詳しい説明がされている記事はこちらになります。
Simplicity1.6.6公開。feedlyカウント取得エラー修正、ウィジェット追加など
記事の冒頭に主な変更点が挙げられていますが、その中に
@importをできるだけまとめた「style.min.css」ファイルを追加
という項目があります。
「style.min.css」では、style.css内で9つ読み込まれていた@importにまとめたファイルです。
Simplicityは、少しでも高速化したい場合は、デフォルトの「style.css」を削除して、「style.min.css」ファイルを「style.css」にリネームしてご利用ください。
記事の後半にこの追加について書かれており、上記のように説明されていました。
サイトの表示速度にかかわることですし、せっかくですので「style.min.css」を利用し、「PageSpeed Insights」と「GTmetrix」に通してみました。
PageSpeed Insights
「style.min.css」適用前
「style.min.css」適用後
はっきりと数値が向上してますね。
適用前に「修正が必要」とされていた中のcssファイル数が減ったためか、適用後は「修正を考慮」に。
「修正を考慮」に表示されていた「CSSを縮小する」が「ルールに合格」に含まれました。
「style.min.css」の利用は効果的なようです。
GTmetrix
「style.min.css」適用前
「style.min.css」適用後
「Page Speed Grade」は同じ数値ですが、「YSlow Grade」が向上しました。
「Page load time」も若干速くなりました。
「style.min.css」利用時の効果は間違いなさそうです
体感できるほどの差があるわけではないですが、実際に計測してみると「style.min.css」を利用した時の方がスコアが高くなるのは間違いなさそうです。
だとすれば常に「style.min.css」を利用するようにしてもいいかなと思いますが、1.6.6公開記事のあとがきにはこう書かれています。
というのも、開発中はやはりファイルを分けてあったほうが開発しやすいですし、フォーラムなどで不具合報告があったときにも、不具合の出ているサイトのソースから問題箇所を見つけるのも楽だからです。
現状このサイトでは、開発版を随時適用して利用させていただいていますし、そもそも元の「style.css」でも充分なサイト表示速度が出ています。
なので安定版適用時は別としても、開発版を適用している間は「style.min.css」にあまり固執せず、元の「style.css」の利用をベースにしながら、様子を見ていこうかなと思います。
「style.min.css」を適用してみるにあたって、サイトの表示に不具合が出ていないか確認はしたつもりですが、もしどこかで不具合が出てしまっていた場合はすいません。
