サイトの表示スピードを上げるぞ!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対策どちらが優れているか?
リスティング広告とSEOのどちらを採用すべきかについて考えていきましょう。 まず設問を全否
-
-
理想のSEO企業とは?見極めるための4つの視点
皆さんはSEO企業と一緒に仕事をする際、どのような点を考慮しているでしょうか。 ミスマッチを避
-
-
コンテンツ最適化シートとは?(COS:Content Optimization Sheet)
オウンドメディアを立ちあげたい場合、自社サービスサイトのトラフィックを増やしたい場合、コンテ
-
-
内部リンクを最適化しよう(実務者用ハイレベル)
今回は前回の2014/09/26のパンダアップデートについて(Googleアップデート)の最
-
-
2019年のSEO。私が頑張りたい4要素。
昨年(2018年)は書くのを忘れました。今年は書いておこうと思います。情報を丁寧に書こうと
-
-
ブログの更新頻度を上げるとSEO対策効果も上がる?トップページの場合には?
あなたがブログを定期更新している場合にはきっと更新頻度で一度は悩んだことでしょう。 また、
-
-
SEOに効く404エラーページを作成しよう!WordPress設定の仕方も
古いページを削除したため404エラーが発生している場合や、誰かが張ってくれたリンクのパスが誤
- PREV
- 目的にあったSEO業者の選び方
- NEXT
- SEOテキスト広告って?テキストリンク広告の選び方