サイトの表示スピードを上げるぞ!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の圧縮と画像の圧縮をご紹介しました。
画像が多いサイトでは是非トライして頂きたい内容でした。
関連記事
-
激安料金のSEOサービスにはリスクが伴う
激安価格のSEOサービスはなぜ超低価格で販売が出来るのか。 このカラクリをご紹介します。
-
【SEO効果】日に数回更新するブログにping送信は必要か?
あなたの運営されているブログは日に0回~5回/日程度の更新頻度ですか? であれば、ping
-
検索エンジンはExif情報(画像ファイルのプロパティ)を取得しているかの実験
今回は画像ファイルにあるExif情報を検索エンジンは読み込み、検索結果を決定する上で使用して
-
リスティング広告とSEO対策どちらが優れているか?
リスティング広告とSEOのどちらを採用すべきかについて考えていきましょう。 まず設問を全否
-
モバイルフレンドリー要素追加での検索順位変動[現在のSEOへの影響]
4/21の新要素追加から早いもので1週間が経過しました。 リリース直前での案内では数日から1週
-
【SEO対策】札幌・帯広出張で感じた地方のウェブ集客はエリア名SEOの捉え方が難しい
先週、札幌・帯広へお仕事で伺った際に夕方ビジネスホテルで書類整理や荷物整理をしながらテレビを
-
スマホ最適化がSEO要素(順位決定要素)になる事が決定!
一言で言えば、「スマホ対応していると順位が上がる」というお話。 難しく言えば、モバイルフレ
-
外部SEO対策の方法(ホワイトとブラック)
SEOには、内部と外部がありますね。 内部対策は地道にサイト編集することでより良く最適化さ
-
レスポンシブデザインはSEOに有利?WordPress等のCMSでは?
この記事は、既に保有するサイトをレスポンシブ化しようか、または新規作成するサイトをレスポンシ
-
SEO効果の高いURLの決め方。日本語?英語?数字?長さは?
もしあなたが、新規にホームページやブログを立ち上げるタイミングで、ドメインやファイル名の決定
- PREV
- 目的にあったSEO業者の選び方
- NEXT
- SEOテキスト広告って?テキストリンク広告の選び方