Googleの検索結果の評価ランキングの一つに表示速度があります。表示速度を上げるためにHTTPリクエストの回数を極力減らすためにCSSファイルは一つにまとめた方がいいという話をよくききます。
そこで、実際のCSSファイルの管理体制などは横に置いておいて本当にCSSをまとめた方がいいのか検証したいと思います。
目次
検証方法
cssファイルを2つ用意します。1つは約10KBの物(以下、short.css),もう一つは約170KBの物(以下,long.css)
それぞれを6個のcssファイルに分割します。だいたい同程度のファイルサイズ数になるようにします。
元のファイルを読み込んだウェブページと分割したファイルすべてを読み込んだウェブーページを用意してPageSpeed Insightsでみてみます。
short.css
PageSpeed Insightでの結果がこれです。右上にモバイルの点数を合成しています。
複数ファイルに分割した場合
1つのcssファイルのみの場合
言われている通りcssファイルは一つにまとめた方が点数が高くなっています。
long.css
複数ファイルに分割した場合
1つのcssファイルのみの場合
。。。複数の方が微差ですが点数がいいですね。特にモバイル。
最近新しくできた表示速度を調べるTestMySiteでも確認したところ
左が分割、右が1ファイルです。
こちらでも分割した場合の方が早くなっています。
これからもう少し調べていこうと思います。