笑顔計画|デザイナー's WEB SITE

サイトの軽量化:CSS

2019.08.27

この記事は約3分で読めます。

Webフォント軽量化画像軽量化テキスト圧縮に引き続き最後はCSSファイル容量の圧縮(★印)。

 

  1. ウェブフォントの読み込み中もテキストを表示する(解決済み)
  2. 次世代フォーマットで画像を配信する(ブラウザ未対応が多いので今回は行わない)
  3. CSSを軽量化する★
  4. レンダリングを妨げるリソースを削除する
  5. 適切なサイズの画像を用意する(解決済み)
  6. テキストの圧縮を有効にする(解決済み)
  7. 不要なCSSを削除する★
  8. 画像を効率的にエンコードする(投稿がほとんどのサイトなので今回は行わない)
  9. ネットワーク ペイロードを過度に大きくしない(解決済み)
  10. 合理的なキャッシュポリシーで静的アセットを配信する(解決済み)

 

 

CSS|目次

 

CSSを軽量化する

HTMLもそうですが、CSSソースはできるだけきれいにするよう心がけています。
後々分かりやすいのもそうですし、コーディングする人はきれい&できるだけシンプルに書き上げたいと思う人も多いのではないでしょうか。
CSSをミニフィ(Minify)するためには、このサイトを利用しています。

cssminifier.com


左のInput CSSに自分の書いたCSSソースを貼り付けて[Minify]をクリックすれば、右のMinified Outputに圧縮されたファイルができます。
逆にMinifyファイルを元に戻したい場合はSYNCER CSSのコード整形ツールが便利かなと思います。
ただどちらをやるにしても自分で書いたコメントは消えるので、コメントが必要ならば原本をローカルで残しておいた方が良いと思います。

 

 

不要なCSSを削除する

これは先に書くと、ページ数が多いほどCSSの記述が増えやすい(そうでない人もいるかもしれませんが…)ので、「不要じゃない?」と思い削除すると、どこかで表示が崩れることもあります。注意が必要です。

ツールとしてはChromeの開発者ツールを利用するのが今一番多く書かれている内容だと思います。
検索すると多く出てくるので、私は割愛したいと思います。

オンラインツールもあります。

UnCSS Online!


左にHTMLソースと右にCSSを貼り付けて、[UNCSS MY STYLES!]をクリックすると、左のHTMLに使われていないCSSが削除されたCSSが下のYour shortened CSSに表示されます。
[COPY TO CLIPBOARD]をクリックすればCSSをコピーできます。

どちらもそうなんですが、1HTMLページに対し1CSSファイルなら、まるっと削除したもので問題ないと思います。
が大方は複数ページがあって、共通のCSSとページ毎のCSSがあるはず。
そうなると、「要らないのね!削除!」としてから表示がおかしくなることもあります。
それとかリセットCSS系でも網羅するために書かれた記述もあると思うので、たまたま使用していなかった記述かもしれません。

無駄だと思う人もいると思いますが、私の場合はリセット、共通部分、ページ毎部分のデザインに分けたCSSを作ってます。
ファイル管理が大変だという方は1ファイルでしょうし、多くても2ファイルぐらいでしょうか。
管理しやすければどんな方法でもいいと仕事してきて感じているので、自分なりの方法を選んでます。
で、なるべくコーディングの際に不要だとわかるものは削除しています。それでも不要な記述があったりしますけれどね。

 

修正後、再度Test My siteで確認

CSS軽量化については求められなくなりました。CSSの不要記述削除については、今後を考え残している部分もありますので、やや減ったぐらいです。

 

ここまで軽量化をやってきて、容量の重さは少し改善されました。
このサイトの最大の改善はWordpressのバージョンアップなのですが、これが今うまくいかずに悪戦苦闘しているところです。
おそらくそれによって読み込みが変わるはず、なのでうまくいったら再度Test My SiteやPageSpeed Insightsで確認してみたいと思います。

カテゴリ一覧へ戻る

コメントをどうぞ

メールアドレスは非公開です。お気軽にコメントください。全項目入力必須項目です。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

プライバシーポリシー

Copyright© 笑顔計画 All rights reserved.