サイトの表示スピードを上げるぞ!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の圧縮と画像の圧縮をご紹介しました。
画像が多いサイトでは是非トライして頂きたい内容でした。
関連記事
-
-
Page Speed Insightsの点数を上げる「圧縮を有効にする」の方法説明
昨年末に投稿したページ表示速度の改善方法【続編】内にて、gzip圧縮や画像の最適化について触れて
-
-
多くのSEO案件をご相談・ご依頼頂けるようになった理由
私のようなSEO屋でも、ご相談・ご依頼くださるクライアント様がいらっしゃいます。 有難い事に、
-
-
SSL導入でSEO効果アップ?順位アップ!?
今回は、はじめにメールフォームや決済情報入力ページをSSL化するとSEO効果があるのかについ
-
-
目的にあったSEO業者の選び方
社内で実施せず外部に委託しようとなった際、どのように業者選定をすると良いのでしょうか。 SEO
-
-
SEOのご相談を頂いた際に、CMS導入を薦める訳
もしあなたのサイトは静的なhtmlで制作されており、CMS導入をすべきか悩んでいるならこの記
-
-
大きな順位変動2014-12-06 アップデートがあったのか?
ここ数日、順位に大きな変動が見うけられます。(2014/12/4~12/6付近で大きな変動が
-
-
SEOコンサルなら強く発信し、意見は断定的であれ!
普段書かないようなポストを。 SEOとは、正解が見えないものです。ブラックボックスのアルゴ
-
-
ブラックハットSEOの手法を正しく理解して欲しい(切実に)
当ブログでは、内部ソースの最適化やコンテンツの最適化をテーマにした記事や、サイトの表示速度に関す
-
-
SEO効果の高い【良い記事】と【悪い記事】
どうも。忙しぶって記事更新をしない高橋です。 約1ヶ月ぶりです。 今回は、記事(≒コンテ
-
-
理想のSEO企業とは?見極めるための4つの視点
皆さんはSEO企業と一緒に仕事をする際、どのような点を考慮しているでしょうか。 ミスマッチを避
- PREV
- 目的にあったSEO業者の選び方
- NEXT
- SEOテキスト広告って?テキストリンク広告の選び方