CSS・JavaScript・HTML縮小(圧縮)するツールと方法

CSS・JavaScript・HTML縮小(圧縮)するツールと方法

Googleが提供している速度の提案ツールPageSpeed Insightsで説明しているCSS・JavaScript・HTML縮小(圧縮)する為のツールとその方法・手順の説明を致します。GoogleさんはCSS・JavaScript・HTML コードを縮小すると、データ サイズを大きく削減でき、ダウンロードや解析の速度を向上させることができます。とおっしゃっているので、そうしましょう。内部SEOになります。※圧縮される場合は必ずバックアップを取りましょうね。

 

スポンサーリンク



CSS・JavaScript・HTMLを縮小する(圧縮)するとは

縮小(圧縮)するとはGoogleはこの様におっしゃっています。難しい事は書いてないのでそのまま理解出来ると思います。

リソースの圧縮(ミニファイ)とは、余分なスペース、改行、インデントなどの不要なバイトを取り除くことです。HTML、CSS、JavaScript を圧縮すると、ダウンロード、解析、実行時の速度を向上させることができます。また、CSS と JavaScript の場合、変数名を変更することでファイル サイズをさらに削減できます。ただし、それに合わせて HTML を更新し、セレクタが動作し続けるようにしてください。

縮小(圧縮)の重要な部分を抜粋するとCSSとJavaScript は変数名を変更も視野に入れて変更して下さい。変更したらHTMLに関連しているその変数名を適用し直して下さい。そうしないと動作不良(最悪フリーズ)・レイアウト崩れが起きますよと言う事です。

 

CSS・JavaScript・HTML縮小(圧縮)する時の注意

CSS・JavaScript・HTML縮小(圧縮)する時の注意点が有ります。その注意は凄く重要な事になります。キチンと把握して注意して下さい。圧縮前はコードが分かり易く記述されています。例で上げると以下の書き方になります。又圧縮後のコードも記載しておきますので見比べて下さい。

圧縮前のコード記述

//分かり易く・読み易く改行スペースを多く使いすぐ見て理解出来る
@media screen and (min-width: 780px) {
  .widget h1 {
     font-size: 16px;
  }
}

圧縮後のコード記述

//一切無駄なスペース・改行が削除され区切りが分かりません。
@media screen and (min-width:780px){.widget_recent_entries .post-date,.widget_rss .rss-date,.widget_rss .rssSummary,.widget_rss cite{font-size:13px}}

まだ1つのコード記載なので理解は出来ますが、これが30項目40項目とかになるともうお手上げです。全て改行無く・スペース無くです。そこでこれは絶対なのですが、縮小(圧縮)する際は2つのファイルを残す様にして下さい。その2つのファイルは以下の項目になります。

  • データとして使用するファイル 縮小(圧縮)するファイル
  • 編集用として使用するファイル 縮小(圧縮)しないファイル

この2つが無いとスタイルを変更したい時等にまずファイルの並び替えから作業をする必要が有ります。とても無駄な時間が出来ます。そしてCSS・JavaScript・HTMLのコードの記述のミスに繋がりますので絶対2つのファイルを残す事をお勧めします。

 

Googleが推奨する解決方法

HTMLの縮小(圧縮)

HTMLの縮小(圧縮)はGoogleからの説明にもう付け加える事が無い説明文になります。そのままですブラウザChromeの拡張機能を使用します。

HTML の圧縮では、PageSpeed Insights の Chrome 拡張機能を使って、HTML コードの最適化されたバージョンを生成できます。HTML ページに対して解析を実行し、[Minify HTML] ルールを確認します。[See optimized content] をクリックすると、最適化された HTML コードが表示されます。

ブラウザのダウンロードがまだの方はこちらから取得して下さい。その他人気ブラウザの紹介もしています。

ウェブブラウザ人気一覧 ダウンロード方法とバージョンアップと特長

では詳しくダウンロードの説明からしていきます。

PageSpeed Insights の Chrome 拡張機能のダウンロード・インストール

ダウンロード・インストールして説明と想ったのですがインストール先下記の様なコメントが・・・・和訳すると”ブラウザchromeの拡張機能のPageSpeed Insightsは今推奨出来ません。オンライン版だけ使ってね。”と 不具合!!解消され次第説明致します。アリゴリズムの変化対応???

 

HTMLを縮小する(圧縮)する PageSpeed Insights

HTMLを縮小する(圧縮)する PageSpeed Insights

 

他の方法も有るのですがそれは最後にします。HTMLは少し置いといてCSSの縮小(圧縮)の説明を致します。

 

CSSとJavascriptの縮小(圧縮)

CSSの縮小(圧縮)ツール

Googleが推奨するCSSの縮小(圧縮)ツールは以下の様に説明させています。コマンドツールになります。

CSS の圧縮では、YUI Compressor と cssmin.js を使用できます。

Javascriptの縮小(圧縮)ツール

Googleが推奨するJavascriptの縮小(圧縮)ツールは以下の様に説明させています。こちらもコマンドツールになります。

JavaScript の圧縮では、Closure Compiler、JSMin、YUI Compressor を使用できます。これらのツールを使用して開発ファイルを圧縮し、名前を変更して、本番ディレクトリに保存するビルド プロセスを作成できます。

CSSとJavascriptの縮小(圧縮)の共通で推奨されている圧縮ツールが複数有りますね。CSSとJavascriptで共通に推奨されているツールが有ります。それはYUI Compressor になります。何個もツールを持ちたくないので、この圧縮ツール YUI Compressor だけの使用の説明を致します。上記でも説明しましたがコマンドツールになります。

YUI Compressor

 

YUI Compressor 圧縮ツールの前準備(ダウンロード)

YUI Compressor のリンク先にジャンプします。画面下にダウンロード項目があるのでYUI Compressor -2.4.8.jarをダウンロードします。保管場所はお好きな所でOKです。

 

CSS・JavaScript・HTML縮小(圧縮)するツール YUI Compressor

CSS・JavaScript・HTML縮小(圧縮)するツール YUI Compressor

 

YUI Compressor 圧縮ツールの使い方

ダウンロード後 YUI Compressor  をコマンドプロンプトで縮小(圧縮)したいCSS・Javascriptを指定してやれば縮小(圧縮)する事が出来ます。難しくないのでちょちょいと縮小(圧縮)やっちゃいましょう。

Windowsの場合スタートすべてのプログラムアクセサリコマンドプロンプトを選択します。

 

CSS・JavaScript・HTML縮小(圧縮)するツールと方法 YUI Compressor コマンド2

CSS・JavaScript・HTML縮小(圧縮)するツールと方法 YUI Compressor コマンド2

 

私の場合起動開始と同時に <C:¥Users¥ユーザー名> が表示されています。CドライブのUsersファイルのユーザー名のファイルの階層に今なっている事が分かります。

 

CSS・JavaScript・HTML縮小(圧縮)するツールと方法 YUI Compressor コマンド1

CSS・JavaScript・HTML縮小(圧縮)するツールと方法 YUI Compressor コマンド1

 

頭に cd をつけて YUI Compressor を保存した場所まで指定します。私の場合デスクトップに保存したのでコマンドの書き方は以下の様になります。

cd Desktop

 

CSS・JavaScript・HTML縮小(圧縮)するツールと方法 YUI Compressor コマンド3

CSS・JavaScript・HTML縮小(圧縮)するツールと方法 YUI Compressor コマンド3

 

階層に移動する事が成功すれば <C:¥Users¥ユーザー名>→<C:¥Users¥ユーザー名¥Desktop> と今の階層に表示が書き変わります。次に縮小(圧縮)ツール YUI Compressor を実行させます。書き方は以下の様になります。

java -jar yuicompressor-2.4.8.jar style.css > new_style.css

 

CSS・JavaScript・HTML縮小(圧縮)するツールと方法 YUI Compressor コマンド4

CSS・JavaScript・HTML縮小(圧縮)するツールと方法 YUI Compressor コマンド4

 

java -jar java言語でyuicompressor-2.4.8.jarを実行します。その対象のファイルが style.css になります。その実行結果(圧縮処理)を >new_style.css に保管しています。正常に処理されればデスクトップに圧縮されたcssファイル new_style.cssが存在しているハズです。又Javascriptを実行するのも上記方法で圧縮する拡張子がjaで有れば勝手にJavascriptとして縮小(圧縮)してくれると思います。

上記の記述する事により指定したファイルに縮小(圧縮)されたコードが保存され出力されます。以上でCSSとJavascriptの縮小(圧縮)する方法の説明を終わります。

 

Refresh-SFツールを使用して縮小(圧縮)する

CSS・JavaScript・HTMLの縮小(圧縮)をRefresh-SFツールで簡単に行う事が出来ます。正直これだけでも、もう十分かと思われます。下記リンクよりジャンプする事が出来ます。オンラインツールになりダウンロード不要になります。

Refresh-SF

操作は凄く簡単です。Inpt に対象の言語コードを入力(コピー貼り付け)して対象の言語をクリックすればそれだけで圧縮したコードに置き換わります。超簡単です!!

 

CSS・JavaScript・HTML縮小(圧縮)するツールと方法 Refresh-SFツール

CSS・JavaScript・HTML縮小(圧縮)するツールと方法 Refresh-SFツール

 

対象の言語をクリックすると画面が切り替わり縮小(圧縮)されたコードが表示されます。その縮小(圧縮)されたコードをコピーで切り取り対象のファイルに貼り付け完成です。Refresh-SFツール内で実行された圧縮をそのままCSSファイルとして保存する方法も有りますが、お勧めしないです。コピーで切り取った方がいいです。

 

CSS・JavaScript・HTML縮小(圧縮)するツールと方法 Refresh-SFツール1

CSS・JavaScript・HTML縮小(圧縮)するツールと方法 Refresh-SFツール1

 

以上でオンラインツールRefresh-SFの説明を終わります。凄く簡単なツールになりますので初心者の方はこちらから使用してもいいかも?しれません。お勧めです。

 

CSS・JavaScript・HTML縮小(圧縮)するツールと方法まとめ

CSS・JavaScript・HTML縮小(圧縮)するツールの2つのツールを紹介してきました。一つはコマンドツール・1つはオンラインツールになります。コマンドツールは内部SEOにとって結構使われるツールになりますので、少しは使い慣れる為にも使用していった方がいいとは思います。操作は慣れてしまえばそんなに難しい事は無いのでドンドン使用してスキルを磨いて行って下さい。この記事の説明は以上です。CSS・JavaScript・HTML縮小(圧縮)してPageSpeedスコアを上げてGoogleに少しでもよい評価を受けましょうね。

 

ここまで読んで頂いてありがとうございます。これからも分かり易い内部SEO・SEO対策ツールの説明をしていきたいと思いますのでどうぞ宜しくお願いします。

 

関連記事一覧

CSS 投稿記事を装飾して読み易い投稿ページにする
品質・画質を落とさずに画像JPEG・PNGを圧縮・最適化ツール 
SEO 誰でも出来る検索エンジン最適化出来る事をやればいい
SEO 検索エンジンと記事の質の関係が与える検索順位への影響力
SEO Googleランク付けをスムーズにする為に行う対策
内部SEO 画像に適切なフォーマットと圧縮を選ぶ方法と作業の効率化
レンダリングをブロック JavaScript・CSS を排除する方法
SEO対策 タイトルの付け方・書き方を制す者がWEBを制す
SEO対策 投稿記事を見直して検索順位を上げる手段・方法
SEO対策画像の効果的な使い方と貼り付け方でライバルに差をつける
検索キーワード 入力する項目を押さえて訪問者を大幅に増やす方法
WordPress 初心者の為のheader.php解説(説明)
SEO対策 header.php コードを見直し表示速度を上げる
Fetch as Google機能で最短でインデックス登録方法
CSS 見出しhの装飾をする オリジナル作成方法の説明
robots.txt 使い方と設置と必要な項目(作成・テスト・送信)
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です