webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

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

      2021/02/16

今回は、読み込み速度を速くして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サイト高速表示
【タグ】 -

  関連記事

【PHPパフォーマンス】モジュールモード5.6と、CGIモード7.1どちらが快適に利用できた?→モジュール5.6です。ベストは7.3モジュールかも

今回は、管理人がやってみた実験『PHP・モジュールモード5.6と ...

【WordPressモバイル高速化】pagespeed insightsモバイルスコアが大きく低下→原因はgoogle、お前だ(アドセンス自動広告)

今回は、WordPressサイト(重い)の高速化に取り組んでいて ...

【重くて邪魔】WordPressのblock-libraryのCSSを読み込まなくする方法(wp deregister script関数・functions.php)

今回は、WordPressを新バージョンにしたときに、勝手に読み ...

【WPサイト高速表示】ロリポWPコンテンツキャッシュで、速度の変動があるようです(不安定)

今回は、サイト表示速度に関わるキャッシュ話題です。 以前ロリポサ ...

【wordpress限界高速化】Pjax技術を使ってサイトを高速表示するプラグインと、エラーの対処

今回は、『遅い』とされていた(過去形)wordpressサイトを ...

【ロリポwordpress高速表示でSP90超えろ】ロリポップサーバーで『コンテンツキャッシュ機能』提供開始・設定方法と効果のチェック

今回はサイトを高速表示するときに重要なポイントといえる『キャッシ ...

【WPテーマを軽くカスタマイズ】プチ静的化して、データベースアクセスやPHPファイルをへらしつつ同じデザインで

今回は管理人も利用しているWP(wordpress)サイトで、ち ...