サイトの表示スピードを上げるぞ!CSS・js圧縮、画像最適化でどの位早くなるかな?

公開日: : 最終更新日:2015/06/08 SEO

   
 
   

サイトの表示スピードを早くしたい!
ブラウザからサイトを閲覧する際には、CSS(カスケーディング・スタイル・シート)やjs(ジャバスクリプト)ファイルを読み込む場合が多いです。
レイアウトを担当するcssと、動きなどを担当するjs。
それぞれのファイルを軽量化することで、どこまでサイトの表示スピードは改善されるか、テストをしてみます。

軽量化ってどういうこと?

ここではcssを例にあげて確認します。
まずは説明よりも実例を見てもらいましょう。

このブログのCSS圧縮前
このブログのCSS圧縮後

なんとなく違いが分かりましたか?
改行などがなくなり、ぎゅぎゅぎゅっとなったのが「圧縮後」です。

js(JavaScript)で多くのサイトが採用しているライブラリーとしてjqueryがあります。
こちらも、圧縮版と非圧縮版が公式で用意されています。
jquery公式サイト
圧縮前後ではファイルサイズが、277KB(前)・93.6KB(後)と大きく差があります。(ver1.11.2の場合)

画像の最適化ってどういうこと?

ここでいう画像の最適化とは、ブラウザでの表示完了速度を早める目的で画像のファイルサイズを小さくすることを指します。

画像のファイルサイズを軽くするということは画像が荒くなると考えるのが通常ですが、人の目では違いが分からない範囲で出来る限り軽くします。
このため、人の目で見てもほとんど近いが分からない画像の質を保ったまま、数十%のサイズ圧縮を行います。

CSSの圧縮用ツール

CSSやjsファイルを圧縮するには、http://refresh-sf.com/などが便利です。

このWEBツールは、説明が要らないほど簡単です。
ボックス内に現在の(圧縮前の)cssファイル内全文を貼り付けます。
ボックス右上にある、「CSS」ボタンをクリックしましょう。
これで、圧縮後データが表示されました。

あとは、最適な名前で保存しましょう。

画像の圧縮用ツール

こちらも便利なツールが有ります。
https://tinypng.com/が簡単で圧縮効果も優れています。
「Drop your .png or .jpg files here!」と書かれた枠内に画像をドラッグ&ドロップしましょう。
数秒で完成です。圧縮された画像をダウンロードしましょう。

ここまでの圧縮をこのブログに行ってみました。

どの程度効果が出たでしょうか。
今回はPingdomのスピードテストで測ってみました。
http://tools.pingdom.com/fpt/

最適化前

ブログTOP
Pingdom ブログTOP最適化前
記事ページ
Pingdom 記事ページ最適化前

最適化後

ブログTOP
Pingdom ブログTOP最適化後
記事ページ
Pingdom 記事ページ最適化後

分かりづらいので、対比表

最適化前
読込時間/ファイルサイズ
最適化後
読込時間/ファイルサイズ
ブログTOP 6.91/675.2KB 6.82/671.9KB
記事ページ 4.96/885.2KB 3.76/876.5KB

地味すぎる改善結果となりました。

まとめ

ページのサイズを軽量化すると表示スピードは改善されるという当たり前すぎる超王道的な改善作業です。
ここでは、cssやjsの圧縮と画像の圧縮をご紹介しました。
画像が多いサイトでは是非トライして頂きたい内容でした。

 

関連記事

タイトルの文字数が多いとSEOで不利?

SEO効果の高いタイトル文字数は?

ここでは、ページタイトルの文字数を取り上げます。 検索結果上でいかに高いクリック率を獲得す

記事を読む

ドアページでの集客はだめ?

ドアページとはスパム行為なの?

ドアページを大量に生成し検索エンジン経由でのアクセスを得ようとするサイト管理者は今でこそほと

記事を読む

リンクネットワークって何?

リンクネットワークとは?SEOスパムに無意識に参加するリスク

知らずにリンクネットワークとつながり、手動スパム判定を受けることのないよう注意が必要です。

記事を読む

SSLメールフォームにすると順位は上がる?

SSL導入でSEO効果アップ?順位アップ!?

今回は、はじめにメールフォームや決済情報入力ページをSSL化するとSEO効果があるのかについ

記事を読む

Googleのガイドラインとは?

Googleガイドラインって何?Googleガイドラインを完結にまとめてみた

この記事はGoogleのガイドラインに違反し、インデックス削除を含むペナルティを受けた人の役

記事を読む

相互リンク募集とかまだやってるの?

相互リンクを募集しているサイトと相互リンク?絶対ダメ!

もしあなたが、相互リンクを張り合ってくれるサイトを探しているなら、この記事を読んでから本当に

記事を読む

フラッシュサイトは検索結果から外される?

フラッシュ利用サイトは順位が落ちる?スマホ検索で【Flashを使用。お使いの端末で動作しない場合があります。】

今回のテーマは『フラッシュ(Flash)』です。 リッチなコンテンツを用意する上で重要

記事を読む

URLにwwwはつけるべき?

URLはwww.があったほうがSEO効果が高い?

一昔前、ウェブサイトは大企業しか作っていない頃のお話。 この頃はウェブサイトはwww.exam

記事を読む

失敗したSEO例

過去に失敗したSEO施策を7例あげます

弘法にも筆の誤りと言いますが、私のようなひよっこであれば、それはもう多くの失敗をする訳です。

記事を読む

2020年トレンド

2020年のSEOトレンド

明けましておめでとうございます。(いまさら!)毎年書いていた年始めのトレンド予測、1月も下旬です

記事を読む

 
 
no image
2022年サーチエンジンマーケティングと周辺の話

明けましておめでとうございます。2022年です。前回から2年経過です

2020年トレンド
2020年のSEOトレンド

明けましておめでとうございます。(いまさら!)毎年書いていた年始め

2019年のSEO
2019年のSEO。私が頑張りたい4要素。

昨年(2018年)は書くのを忘れました。今年は書いておこうと

Googleの個人名「ナレッジパネルの認証を受ける」の申請方法・編集

Googleで個人名検索をした際に表示される「ナレッジパネル

検索意図ドリル
コンテンツマーケティング関連本「検索意図ドリル」書きました。

ドリルを書きました。 「は?ドリル?あの漢字とかの?」 こ

→もっと見る

PAGE TOP ↑