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

スポンサーリンク

関連記事

上位表示されない!困った!

サイトやブログが上位表示されない時、初めに確認すべき5つのこと

あなたのサイトやブログは上位表示していますか? サイト全体で狙っているキーワード、ページ単

記事を読む

こんなSEO企業が理想だね

理想のSEO企業とは?見極めるための4つの視点

皆さんはSEO企業と一緒に仕事をする際、どのような点を考慮しているでしょうか。 ミスマッチを避

記事を読む

コンテンツ設計には、検索意図と本質的な希望の把握が大切

コンテンツ設計におけるサーチインテント(検索意図)と本質的な希望の違い

最近では、ウェブサイトの構築・メディアサイトの構築時に、各キーワードの検索数や難易度、ページ単位

記事を読む

コンテンツSEOセミナー開催しました(過去形)

コンテンツSEOセミナーへのご参加ありがとうございました。

昨日(2015年2月24日火曜日)コンテンツSEOセミナーを開催させて頂きました。 急な開

記事を読む

コンテンツの文字数とSEO効果

コンテンツSEOには文字数は重要?

さあ!頑張ってコンテンツを自社で作ろう! となった際、多くの方が一番初めに疑問思うのが文字

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

プログレッシブ エンハンスメントとは?

プログレッシブ エンハンスメントとは?Googleの推奨するサイト構築法

2014年10月末にGoogleはウェブマスター向けに技術に関するウェブマスター向けガイドラ

記事を読む

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

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

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

記事を読む

h1タグにキーワード入れるとSEO効果あるの?

h1タグのSEO効果。実験してみたらこうだったな話

タイトルタグの重要性は調査するまでもなく超重要ですが、見出しタグの効果はどうも実感できないと

記事を読む

スポンサーリンク
スポンサーリンク
2017年のSEOトレンド
2017年のSEOトレンド予測と重点対策ポイント

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

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

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

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

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

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

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

WordPressの一覧ページSEO
WordPressサイトの一覧ページ(アーカイブページ)のSEOについて(noindexの扱いなど)

今回はWordPressのお話です。 オウンドメディア、コンテン

→もっと見る

PAGE TOP ↑