ページスピードインサイトで「CSSの最小化」の問題を改善する方法
PageSpeed Insightsで「改善できる項目」として、CSSの最小化という項目が表示された時の対処方法です。
CSSとは
Cascading Style Sheets（カスケーディング・スタイル・シート）の略
ウェブページのスタイルを指定するための言語です。
CSSが書かれたファイルの事をCSSファイルと呼びます。
詳細をクリックすると、
Minifying CSS files can improve your page load performance.
と、表示されます。
翻訳すると、
という事なので・・
どの様な改善を行えば良いかを説明していきます。
CSSの例
/* h1タグとh2タグの背景色の指定 */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}上記の記述では、h1 タグと h2 タグの背景色を#000000（黒）で表示する指定がされています。
上記の記述は、次のように簡略化することができます。
/* h1タグとh2タグの背景色の指定 */
h1, h2 { background-color: #000000; }h1 と h2 に同じスタイルを指定している場合、まとめる事ができます。
さらに圧縮・縮小をかけると、下記の様になります。
h1,h2{background-color:#000}1行目の /* h1タグと・・*/ は、メモ書きの役割なので実質不要です。
さらに、不要な半角スペースが無くなり、カラーコードも #000000 → #000 に短縮されています。セミコロン「；」もこの場合省略できるので消えてます。
この様な縮小されたCSSにすれば、「ページの読み込み速度が改善されますよ～」という事ですね。
オンライン上でCSSが圧縮できるサイト
よく使っているサイトを２つご紹介いたします。
使う前の注意点
- 圧縮前にバックアップを取る。
- 圧縮後のコードを100％信用しないこと。
- この記事の最後まで確認される事をおすすめします。
Online JavaScript/CSS/HTML Compressor
使い方
枠内にコードを貼り付けて「JavaScript」「CSS」「HTML」ボタンを押すだけです。
①上記で紹介したCSSコードを貼り付けて「CSS」ボタンをクリック。
②縮小されたCSSが表示されます。
出来上がったコードと、削減量が表示されます。
続いて・・
CSS Minifier (スタイルシートの圧縮)
https://syncer.jp/css-minifier
あらゆさんが運営するサイトのサービスです。（日本語対応）
こちらも使い方は同じです。
個人的に一番よく使わせていただいております。
出来上がったコードを別のCSSとして読ませてあげます。
例）
<link rel="stylesheet" type="text/css" href="/css/style.css"/>↑元の記述を下記↓の様にするのが一般的です。
<link rel="stylesheet" type="text/css" href="/css/style.min.css"/>圧縮・縮小時の注意点
コードによっては、圧縮後に崩れる（変化する）場合があります。
圧縮のコツ・ポイント
圧縮後にデザインが崩れる時は・・
別のCSS圧縮サービスを利用する。
「CSS 圧縮」で検索すると色々出てきます。
該当部分だけ手動で圧縮（縮小）する
崩れたCSSが判る場合は、手動で縮小することをおすすめいたします。
崩れた箇所が判らない場合
・デベロッパーツール（F12）などで調べると、ピンポイントでCSSの内容（変化）が判ります。
・どの様に変化したのかを「※ディフ チェッカー」などで調べるのもありです。（※後述します）
縮小したCSSコードを整形するサービス
https://lab.syncer.jp/Tool/CSS-PrettyPrint/
★合わせてブックマークしておきたいページです。
こちらを使って、崩れた箇所を「ディフ チェッカー」などで調べるのにも使えます。
https://msstyle.jp/memo/diffchecker/圧縮後にページスピードインサイトで再チェック
合格した監査に表示されれば、この課題はクリアです。
参考になれば幸いです。