サイトの表示スピードを上げるぞ!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の圧縮と画像の圧縮をご紹介しました。
画像が多いサイトでは是非トライして頂きたい内容でした。

スポンサーリンク

関連記事

ペンギンアップデート3.0[2014/10/17、18実施開始]で順位が下がった?上がった?

ペンギンアップデート3.0で影響について「リンクの話中心」

今回のポストは、昨週末にあったアップデートに関する内容です。 現状ではアップデート内容の確

記事を読む

優秀なSEOコンサルはこうあるべきだ

SEOコンサルなら強く発信し、意見は断定的であれ!

普段書かないようなポストを。 SEOとは、正解が見えないものです。ブラックボックスのアルゴ

記事を読む

SEOの要因に直帰率は含まれるの?

SEOとの関係性。直帰率が高い、離脱率が高いと順位は落ちる?

この記事では、一般的なWEBサイトやLPへオーガニック経由でアクセスがあった場合の直帰率や離

記事を読む

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

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

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

記事を読む

9月26日のパンダアップデートで順位が下落した?

2014/09/26のパンダアップデートについて(Googleアップデート)

もう10月ではありますが、僅かながらアップデートの影響を感じる点や、今後のアップデートの方向

記事を読む

モバイルフレンドリーで大きな影響は出た?

モバイルフレンドリー要素追加での検索順位変動[現在のSEOへの影響]

4/21の新要素追加から早いもので1週間が経過しました。 リリース直前での案内では数日から1週

記事を読む

リスティングとSEOどっちが費用対効果が良い?

リスティング広告とSEO対策どちらが優れているか?

リスティング広告とSEOのどちらを採用すべきかについて考えていきましょう。 まず設問を全否

記事を読む

エグジフ情報をGoogleは読んでるの?

検索エンジンはExif情報(画像ファイルのプロパティ)を取得しているかの実験

今回は画像ファイルにあるExif情報を検索エンジンは読み込み、検索結果を決定する上で使用して

記事を読む

順位変動はアップデートによるもの?

大きな順位変動2014-12-06 アップデートがあったのか?

ここ数日、順位に大きな変動が見うけられます。(2014/12/4~12/6付近で大きな変動が

記事を読む

2017年のSEOトレンド

2017年のSEOトレンド予測と重点対策ポイント

2017年に注力すべきSEO領域、新たにキャッチアップすべきSEO要素、SEOの歴史を振り返りな

記事を読む

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

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

2017年のSEOトレンド
2017年のSEOトレンド予測と重点対策ポイント

2017年に注力すべきSEO領域、新たにキャッチアップすべきSEO

SEOとキーワード数
SEOとキーワード数(メタタグ・タイトル・1ページ内)の正しい設計

この記事は、ご自身でサイト上位表示に取り組む方向けの内容です。

SEMって何?
SEMとは?SEOとの違い

ネット界隈はカタカナや3文字略称が頻繁に出てきます。 ここでは、

キーワードプランナーに仕様変更?
キーワードプランナーの不具合?稼働キャンペーンのないアカウントで検索数が正常に取得できない

今月の上旬に、キーワードプランナーに少し変更があったようです。

→もっと見る

PAGE TOP ↑