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

スポンサーリンク

関連記事

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

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

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

記事を読む

背景色と文字色の推奨される明度差は?

SEOスパム?守るべき背景色と文字色の明度差

先日、googleガイドラインって何?Googleガイドラインを完結にまとめてみたにおいて、

記事を読む

スマホ最適化すると上位表示する?

スマホ最適化がSEO要素(順位決定要素)になる事が決定!

一言で言えば、「スマホ対応していると順位が上がる」というお話。 難しく言えば、モバイルフレ

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

コンテンツ最適化シートってなに?

コンテンツ最適化シートとは?(COS:Content Optimization Sheet)

オウンドメディアを立ちあげたい場合、自社サービスサイトのトラフィックを増やしたい場合、コンテ

記事を読む

URLにwwwはつけるべき?

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

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

記事を読む

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

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

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

記事を読む

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

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

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑