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

 

関連記事

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

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

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

記事を読む

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

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

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

記事を読む

スマホ検索の順位変動はまだ?

モバイルフレンドリー要素が組み込まれる日時について

今日という日。4/21はGoogleが宣言したXデーです。(Xデーという言葉が合っているかは別と

記事を読む

内部リンクの最適化方法は?

内部リンクを最適化しよう(実務者用ハイレベル)

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

記事を読む

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

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

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

記事を読む

Google検索に引っかからない時の対処法

検索に引っかからない時、サイト管理者が確認すべきこと

あなたのサイト(ホームページ)やブログが検索エンジンに引っかからない場合、このポストにそいチ

記事を読む

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

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

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

記事を読む

コンテンツSEOの意味は?

コンテンツSEOとは何か?言葉の意味(定義)や概要

パンダアップデート、ペンギンアップデート、ハミングバードによってブラックハットなSEOを行っ

記事を読む

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

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

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

記事を読む

alt属性の最適化でSEO効果は?

alt属性にSEO効果を期待するなかれ

alt属性について誤った理解をされているケースが散見されますが、alt属性は写真や画像が表示

記事を読む

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

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

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑