サイトの表示スピードを上げるぞ!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を進めるなら、活用したいツールを一挙にご紹介。 日頃の作業を効率よく進めるた

記事を読む

2016年最新SEOトレンドは、この4つをおさえるべし

2016年も始まって2週間。やっと今年1記事目の高橋です。 今年もよろしくお願いします。

記事を読む

検索エンジンに評価される良い記事とは?

SEO効果の高い【良い記事】と【悪い記事】

どうも。忙しぶって記事更新をしない高橋です。 約1ヶ月ぶりです。 今回は、記事(≒コンテ

記事を読む

URLにwwwはつけるべき?

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

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

記事を読む

SEO社内研修を選ぶなら

SEO研修で学ぶべき技術

今回は、SEO研修を導入する際に知っておくと良い点を分かりやすく説明したいと思います。 そ

記事を読む

サイトの信頼性を高めるページを整備しよう

ウェブサイトの信頼性向上を達成させ、アクセスを増やす方法

Googleの順位決定要素には、ウェブサイトの信頼性やウェブサイト管理者の信頼性を評価する考

記事を読む

404ページ設定は必要ですか?

SEOに効く404エラーページを作成しよう!WordPress設定の仕方も

古いページを削除したため404エラーが発生している場合や、誰かが張ってくれたリンクのパスが誤

記事を読む

サイトの表示速度を早くするには?

SEO効果あり!ページ表示速度の改善方法

サイトやブログの表示速度が遅い場合、大きなトラフィックの損失となっているかもしれません。

記事を読む

日本語のURLはSEO効果が高い?

SEO効果の高いURLの決め方。日本語?英語?数字?長さは?

もしあなたが、新規にホームページやブログを立ち上げるタイミングで、ドメインやファイル名の決定

記事を読む

URLの正規化って何?

URLの正規化はSEOの基本(wwwありなし・index.htmlありなしの統一)

今回のテーマは『URLの正規化』です。 運営開始から間もないサイトでも、運用歴の長いサイト

記事を読む

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

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

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑