サイトの表示スピードを上げるぞ!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スパムに無意識に参加するリスク
知らずにリンクネットワークとつながり、手動スパム判定を受けることのないよう注意が必要です。
-
-
SSL導入でSEO効果アップ?順位アップ!?
今回は、はじめにメールフォームや決済情報入力ページをSSL化するとSEO効果があるのかについ
-
-
Googleガイドラインって何?Googleガイドラインを完結にまとめてみた
この記事はGoogleのガイドラインに違反し、インデックス削除を含むペナルティを受けた人の役
-
-
相互リンクを募集しているサイトと相互リンク?絶対ダメ!
もしあなたが、相互リンクを張り合ってくれるサイトを探しているなら、この記事を読んでから本当に
-
-
フラッシュ利用サイトは順位が落ちる?スマホ検索で【Flashを使用。お使いの端末で動作しない場合があります。】
今回のテーマは『フラッシュ(Flash)』です。 リッチなコンテンツを用意する上で重要
-
-
URLはwww.があったほうがSEO効果が高い?
一昔前、ウェブサイトは大企業しか作っていない頃のお話。 この頃はウェブサイトはwww.exam
-
-
過去に失敗したSEO施策を7例あげます
弘法にも筆の誤りと言いますが、私のようなひよっこであれば、それはもう多くの失敗をする訳です。
-
-
2020年のSEOトレンド
明けましておめでとうございます。(いまさら!)毎年書いていた年始めのトレンド予測、1月も下旬です
- PREV
- 目的にあったSEO業者の選び方
- NEXT
- SEOテキスト広告って?テキストリンク広告の選び方