サイトを「高速化」させるために、CSSから不要物を取り除く

web

 サイトの読み込み速度を高速化させる方法は、様々。
 その中でも今回は「CSSに魔法をかけて」高速化 させるための方法に絞って書いていく。
 たったそれだけで、スピードテストの数値はかなり上がる。
 是非、この記事を読んで、試してほしい。
 それでは、行ってみよう。

サイトを高速化させるためには、「CSS」から「不要物」を取り除けばいい——

サイトを高速化させるためには、「CSS」から「不要物」を取り除けばいい——

 タイトルどおり。不要な物は、不要。
 ということで、CSSにある不要物は全て削除しよう。

具体的に何が不要なのか。

 不要なものをザックリ言うと、以下。

  • 改行
  • 半角スペース
  • コメント(メモ)

 この3つは、不要だから全て削除しよう。
 つまり、1行にするということ。(ディスプレイサイズの関係で視覚的には1行にはならないが、実際は改行がないから1行になる)

 でも、1つ1つ消していっては大変だ。時間がかかりすぎる。
 じゃあ、どうすればいいのか。

魔法をかけろ。不要物は「一瞬」で消失する——

魔法をかけろ。不要物は「一瞬」で消失する——

 そう、魔法をかけてしまえばいい。
 魔法をかければ、一瞬で、改行、スペース、コメントは消失する。

魔法とは何なのか。

 魔法 = ツール(ソフト)

 便利なことに、上記の不要物だけを自動で全て消してくれるツールが、この世には存在する。

 その、ツールの名は……『CSS Minifier』。

高速化魔法『CSS Minifier』を使うために必要な作業——

高速化魔法『CSS Minifier』を使うために必要な作業——

 CSS Minifierとは、『syncer』が提供するCSS高速化ツールのこと。
 ありがたいことに、完全無料。
 使うために必要な作業、これと言ってない。
 あえて言うならば……コピペ。

 まずは、以下のURL(syncerのサイト)へ行こう。

syncerのサイトは、こちら。

syncerのサイト。(CSS Minifierが使えるページ)

 行くと、左側に「縮小前のコード」という項目がある。
 そこにCSSのコードをそのまま全てコピペしてしまおう。
 以上で、準備は完了。

あとは魔法を使うだけ。「高速化」は、すぐ目の前——

あとは魔法を使うだけ。「高速化」は、すぐ目の前——

 コピペが終わったら、以下のようになる。

 「Minifyをする」というボタンをクリックしよう。これが魔法。
 すると、不要物は全て消失する。

 右側「縮小後のコード」のコードが、完成品。
 見てわかる通り、不要物が全て綺麗に消えてる。
 後は、そのまま全部コピーして、CSSファイルに貼り付けよう。

「CSS高速化」の注意点——

「CSS高速化」の注意点——

 不要物を消すとサイトの読み込み速度は速くなる。
 だがしかし、それにはデメリットが存在する。
 それは……メンテナンスが「鬼コース」になること。

 コードが1行になってしまう。
 大事なメモも消えてしまう。
 見づらいし、わけわかんない。
 管理は、実質的に不可能。

じゃあ、どうやって管理すればいいのか——

じゃあ、どうやって管理すればいいのか——

 答えはシンプル。
 メンテナンス用のCSSと、サーバーアップ用のCSS、2つ保存しておけばいい。
 バックアップ用、メンテナンス用、サーバーアップ用、で管理すれば全く問題はないだろう。

 以上で、「サイトを高速化させるために、CSSから不要物を全て消失させる方法」を終了とする。

 これで問題は全て解決しただろう。あなたの要望は叶ったハズ。
 同じように悩んでる人がいたら、すぐに助けてやってほしい。
 こんなことに悩んで大事な時間を使ってほしくない。
 そういうこともあり、この記事を書いた。

 無料でギブされたモノを、誰かに無料でギブする。
 そのギブの連鎖が人類にとって、とても重要なこと。
 是非とも、この方法を、教えてあげてほしい。

 それでは、しばしの別れ。

広告