サイトの表示スピードを上げるぞ!CSS・js圧縮、画像最適化でどの位早くなるかな?
公開日:
:
最終更新日:2015/06/08
SEO
ブラウザからサイトを閲覧する際には、CSS(カスケーディング・スタイル・シート)やjs(ジャバスクリプト)ファイルを読み込む場合が多いです。
レイアウトを担当するcssと、動きなどを担当するjs。
それぞれのファイルを軽量化することで、どこまでサイトの表示スピードは改善されるか、テストをしてみます。
軽量化ってどういうこと?
ここでは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
記事ページ
最適化後
ブログTOP
記事ページ
分かりづらいので、対比表
最適化前 読込時間/ファイルサイズ |
最適化後 読込時間/ファイルサイズ |
|
ブログTOP | 6.91/675.2KB | 6.82/671.9KB |
記事ページ | 4.96/885.2KB | 3.76/876.5KB |
地味すぎる改善結果となりました。
まとめ
ページのサイズを軽量化すると表示スピードは改善されるという当たり前すぎる超王道的な改善作業です。
ここでは、cssやjsの圧縮と画像の圧縮をご紹介しました。
画像が多いサイトでは是非トライして頂きたい内容でした。
関連記事
-
-
トップダウンペナルティー(TDP)とトップページが上位表示しない場合の対処法
YSTのトップダウンペナルティー、Googleのトップダウンペナルティーで大慌てなサイト管理
-
-
ドアページとはスパム行為なの?
ドアページを大量に生成し検索エンジン経由でのアクセスを得ようとするサイト管理者は今でこそほと
-
-
SEO効果の高い【良い記事】と【悪い記事】
どうも。忙しぶって記事更新をしない高橋です。 約1ヶ月ぶりです。 今回は、記事(≒コンテ
-
-
SEOとサーバーの関係性。SEOに強いサーバーはあるのか?
SEO知識を高めることに多くの時間や費用を掛けているサイト管理者であるにも関わらず、そのサイ
-
-
ブラックハットSEOの手法を正しく理解して欲しい(切実に)
当ブログでは、内部ソースの最適化やコンテンツの最適化をテーマにした記事や、サイトの表示速度に関す
-
-
地域名でSEO!ドアウェイページが一掃されてチャンス到来?
商圏エリアが限られるビジネスをされている方々に朗報です。 地域に根ざした商売をする方にとってプ
-
-
検索エンジンシェアをアンケートとって調べてみた
先日検索エンジンの利用調査アンケートを実施しました。 簡単に言えば「どこの検索エンジンを使
-
-
相互リンクをSEO効果目的でするとペナルティーを受けるのか?2015年現在
サイトを立ち上げて間もない頃、少しでも効果があればと相互リンク獲得に躍起になるサイトオーナー
-
-
リスティング広告とSEO対策どちらが優れているか?
リスティング広告とSEOのどちらを採用すべきかについて考えていきましょう。 まず設問を全否
-
-
リンクネットワークとは?SEOスパムに無意識に参加するリスク
知らずにリンクネットワークとつながり、手動スパム判定を受けることのないよう注意が必要です。
- PREV
- 目的にあったSEO業者の選び方
- NEXT
- SEOテキスト広告って?テキストリンク広告の選び方