wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

      2018/04/05

こんにちは、管理人@SS_mshpです。

今回は、読み込み速度を速くして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点でした笑)。

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

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

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

Message

メールアドレスが公開されることはありません。

  関連記事

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

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

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

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

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

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

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

今回は管理人も利用しているWP(wordpress)サイトで、ちょっとだ …

【WPプラグイン・サイト高速化】EWWW Image Optimizerで、画像をサクッと圧縮して表示を速くしよう

今回は、サイトの高速化で、画像を圧縮してくれるものを試します 画像サイズ …

Googleがスマホ表示速度をランキング要因にすると発表・サイト制作者/ユーザーの対策は?

今回は2018年1月に、Googleの検索順位に影響する内容が公式に発表 …

CSSを限界圧縮してヘッダーに書くと、表示速度は速くなるの?(fc2ぶろぐで実験)

今回は、サイトを高速表示するCSSの書き方についてです。 管理人が昔使っ …

【ワードプレスサイト高速化プラグイン】Speed Up-JavaScript To Footerで、表示速度を速くする方法

今回は、ワードプレスサイトの使い勝手(読者から見た)を向上させるプラグイ …

【サイト高速表示】ワードプレステーマ・stinger(5)のCSS軽量化!どれくらい小さくなる?

今回は、前回やったCSS縮小続きで、『書き方変えたり、いらない部分カット …

ページ高速表示~正規URLとリダイレクトで、速度スコアが10点近く違う件

今回は、リダイレクト処理における、ページ表示速度の変化を検証します。 題 …

【wpプラグイン】ワードプレスサイトで、スマホアクセス時だけ軽量テーマに切り替える方法

今回は、スマホでみるとワードプレスサイトがちょっと重い件について対策して …

【サイト表示速度】googleのスマホ向け速度チェックツールで、表示速度/秒数を計測

今回は、スマートフォンに特化した、サイトの表示速度チェックツールをご紹介 …