スマホページ高速表示のための、ＣＳＳ圧縮方法まとめ

今回は、読み込み速度を速くしてwebページ（特にスマホ版）を高速表示するために、ＣＳＳをエディットしてみます。 絵はぱくたそさんからお借りしました。なぜＣＳＳの圧縮するとよいのか・どのような方法があるのか、をチェックしていきます。

なぜＣＳＳの圧縮が必要か？

googleのPageSpeed Insights（ページ表示速度測定）での調整する項目に、『ＣＳＳのサイズ縮小』というのがあります。画像や動画にくらべたらサイズは小さいから（数キロバイト～数十キロバイト）ＰＣ回線ではそれほど気になる項目ではありません。

しかしスマホページ表示速度測定に関しては、『キャッシュ・javascript読み込み』などと並んで、速度にかなり影響を与える項目となっています。特にこのサイト（ワードプレスタイプ）は、カスタマイズ前のテーマによって、『外部読み込みＣＳＳが超長い』というのがあったので、いろいろな方法でＣＳＳを小さくしてみます。

いろいろなＣＳＳの圧縮・縮小方法

いらない機能のレイアウト制御するＣＳＳを削る（ワードプレステーマ・ブログテンプレート）

ワードプレステーマ・ブログテンプレートなどをカスタマイズするとき使えるテクです。 例えば、『検索フォームいらないかな』となったとします（ＳＳＬ化したんでつけてもイイけど）。その部分のレイアウトを制御している部分をカットします。

RSSもメニューにリンク貼ったので、ボタンのCSS（10行くらい）をカットしました。また、wpのカレンダーも使用していないのでCSSをカットしています。『実は必要だった』とかならないように、注意しながら作業を進めます。

ＣＳＳの書き方を短く変える

例えばこのサイト（ワードプレス・スティンガーテーマをカスタマイズ）にある『blogbox』というところを見てみます。 もともとのＣＳＳはこんな感じでした。記事タイトル下の日付などをくくっている枠ですね。

.blogbox {　 border-top-width: 1px; border-top-style: solid; border-top-color: #666666; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #666666; margin-bottom: 20px; padding: 5px;}

しかし『点線枠で全部くくってもイイかな』ということで、このように短縮。borderのwidth,style.colorはまとめて書けます。（dottedは点線。solidは通常の線。）

.blogbox { border: 1px dotted #666666; margin-bottom: 20px;padding: 5px;}

同様にpaddingやmarginなども、以下のように短縮しました（上・右・下・左と、時計回りに書く）。

padding-top: 15px; padding-right: 10px; padding-bottom: 12px; padding-left: 10px; ↓ padding: 15px 10px 12px 10px;

ＣＳＳをgzipファイルにしてサイズ小さくする

ＣＳＳをgzipファイルにして、上記のhtaccessで読み込ませて、読み込みサイズを小さくするというのもやりました。

行ったあとは、『Gzipチェッカー』でヘッダーをチェックし、gzipが読み込まれているかをチェックします。 https://lab.syncer.jp/Tool/Gzip-Checker/

あとがき

上記のテクは、このぶろぐやお仕事サイト・お取引先さまに発注いただいたサイトなどに使っていました。 このぶろぐに関しても、初期のテーマをただ設定して、ヘッダーにpngとかデカい画像つけたり、javascriptでくるくる回るタグクラウドウィジェットやってたときよりは、スマホ版もかなり高速化しています（スマホページスピードが昔４５点でした笑）。

今回はサイズ縮小がメインでしたが、非同期読み込みとかもやってみたいと思います。