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

更新: 2024/02/16 1978文字

今回は、読み込み速度を速くしてwebページ(特にスマホ版)を高速表示するために、CSSをエディットしてみます。なぜCSSの圧縮するとよいのか・どのような方法があるのか、をチェックしていきます。

なぜCSSの圧縮が必要か?

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

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

いろいろなCSSの圧縮・縮小方法

いらない機能のレイアウト制御するCSSを削る(WordPressテーマ・ブログテンプレート)

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

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

CSSの書き方を短く変える

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

.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;

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

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

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

あとがき

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

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


【カテゴリ】- CSS
【タグ】-

関連記事