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

      2021/02/16   1994文字

今回は、読み込み速度を速くしてwebページ(特にスマホ版)を高速表示するために、CSSをエディットしてみます。

絵はぱくたそさんからお借りしました。なぜCSSの圧縮するとよいのか・どのような方法があるのか、をチェックしていきます。

なぜCSSの圧縮が必要か?

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

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

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

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

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

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

CSSの書き方を短く変える

例えばこのサイト(ワードプレス・スティンガーテーマをカスタマイズ)にある『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点でした笑)。

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


【カテゴリ】 - webサイト高速表示
【タグ】 -

  関連記事

スマホページ高速表示のための、CSS圧縮方法まとめ
【WPテーマを軽くカスタマイズ】プチ静的化して、データベースアクセスやPHPファイルをへらしつつ同じデザインで
【ロリポwordpress高速表示でSP90超えろ】ロリポップサーバーで『コンテンツキャッシュ機能』提供開始・設定方法と効果のチェック
【PHPパフォーマンス】モジュールモード5.6と、CGIモード7.1どちらが快適に利用できた?→モジュール5.6です。ベストは7.3モジュールかも
ページ高速表示~正規URLとリダイレクトで、速度スコアが10点近く違う件
【wordpress限界高速化】Pjax技術を使ってサイトを高速表示するプラグインと、エラーの対処
CSSを限界圧縮してヘッダーに書くと、表示速度は速くなるの?(fc2ぶろぐで実験)
【サイト表示速度】googleのスマホ向け速度チェックツールで、表示速度/秒数を計測
【WordPress高速化プラグイン】Speed Up-JavaScript To Footerで、表示速度を速くする方法
【WordPressモバイル高速化】pagespeed insightsモバイルスコアが大きく低下→原因はgoogle、お前だ(アドセンス自動広告)
【WPサイト高速表示】ロリポWPコンテンツキャッシュで、速度の変動があるようです(不安定)
【重くて邪魔】WordPressのblock-libraryのCSSを読み込まなくする方法(wp deregister script関数・functions.php)