より快適に!ホームページのダイエット
そんなわけで、昨晩、部活終えて23時過ぎにハンバーグ250g食べてから即寝したら、消化不良で5時に目覚めちゃったオレなので暇つぶしに最近のマイブームなホームページのダイエットネタを書いてみます。
今はブログサービスやfacebookが普及して、一昔前のように個人でホームページを開設するなんてめったに無いと思われ、果たしてこのブログを見てる人にニーズがあるのか?!と思いつつも書いてみます。
さて、ホームページのダイエットとはナニかというと、いわゆる「表示が速いページ」「さくさく動く」「軽い」ページを目指すわけです。
大昔は回線が細かったりPCがヒヨワだったので、軽いページを目指していました。その後、ブロードバンドの普及とPCの高性能化によって、どんどん中身の凝った重いページ化が進んだ訳です。
もうサイズとか写真の劣化具合を気にせずバンバン大きい画像貼ったり、ボタンとか見出しとかも画像を使いまくり。4~5年前まではそんな感じで、制作側にとってはとても楽でした。
が、スマホの登場が一気に状況を変えました。
ホームページを見てる時って、サーバーから送られてきたデータをPC・スマホが表示します。
たとえばREDPEPPERSのトップページを開いとき・・・
上図の下は専門のツールを使って、どんなデータがサーバーから送られてきたかを表示してます。途中で省略してますが、REDPEPPERSトップページを開いただけで・・・
(1)71個のデータ
(2)それらの合計が2.1メガバイト
がサーバーからPC/スマホに送られてきます。これ、PCで見てる時はあんまり気にならないけど外でスマホでみると、まーまー重いです。見積もり表示スピードが4秒台。
トップページは写真が多いので(2)は誰にでもイメージできると思いますが(1)の「71個のデータが送られてくる」は専門家以外は意外だと思われます。71個のデータが来るってことは、サーバーとPC/スマホ間で71回のデータのやり取りがあるんです。これがけっこうな足カセになります。
たとえば電波状況がよくない外出先でページを開いた時、裏で71回もの交信があるんで、通信状況が悪いタイミングにあたると、そのうちの何個かが送られてこなくて表示速度に影響が出ることがある(らしい)んです。
たとえ全体のファイル容量が少くても、ファイル数が多いのは好ましくない。ってのがスマホ時代になって叫ばれるようになりました。
軽いページとは全体の容量が少なくて、なおかつファイル数も少ないこと。
それを目指してダイエットするわけです。
では、どーやってダイエットするか。
WEB界のダイエット宣教師なGoogleが、肥満度合とダイエットのアドバイスをチェックするサイトを用意してくれてます。
このサイトに調べたいURLを入れると採点とともに修正すべき点を教えてくれます。
Google神の指示にしたがって、画像の質をできるだけ落とす・ファイル数を極力減らす・圧縮できるものはする・非同期でもOKならそーする・細切れのファイルをまとめる・キャッシュを使う、などなどの地味で細かいダイエットをしていくわけです。
REDPEPPERSは個人の趣味サイトなので、極力ダイエットはしていますが、突き詰めてはいません・・・。なんせトップページに画像が多いのとGoogle広告があるので、自ずと限界があります。
正直71個のファイルで2MBもあるって、ダメダメですw けど、これでも最大限のダイエットはしています。ナニも手を加えていない時は、ファイル数が80以上あって容量も4MBくらいありましたからね。
もう一個例を挙げると。
こちらは仕事でやってて、大きな大会があるたびにサーバーがダウンしてしまうサイト(汗)
ダウンさせるなんて、管理者として恥であり屈辱なんですけど・・・・
通常時の10倍近いアクセスがそのときに集中するので・・・・
しかも近年はSNSの普及とスマホの普及で、より一層、短期集中型になって・・・・
そのピーク時に耐えうるサーバー構成の見積もり取ったら月額ウン十万円に・・・無理!
なんて愚痴と言い訳は置いといてですね、そんなサイトだからこそ、ダイエットは真剣にやっています。
トップページの全体図。極力シンプルにしつつも、やっぱりページ最上段の大きいバナーとかは捨てがたくていろいろ工夫しないといけません。
ある程度の妥協をしつつも、ダイエットを続けた結果・・・
Google神にはまーまー高得点をもらえました。 モバイル版で91点、パソコン版で83点。
ちなみにREDPEPPERSはモバイル版・PC版が一緒のファイルで、このサイトはファイルを完全に別けてます。
先ほどの専門ツールで調べると
PC版で
(1)45個のデータ
(2)それらの合計が0.8メガバイト
見積もり表示スピードが2.64秒。REDPEPPERSの半分くらいです。
スマホ版だともっとシンプルなので
(1)11件のデータ
(2)それらの合計が0.16メガバイト
見積もりスピードが0.8秒でした。
シーズンインするともっと画像が増えるんで、今は一番やせいている時期ではありますが。
こんな感じで、Googleのサイト診断ツールであれこれやっていくわけですが、どーしても高得点を得るのが難しいんです。それは、自分が管理してるファイルはGoogle神の指示通りに改善できるけど、そうでない外部ファイルを読み込んでいる時はどーすることもできません。
外部ファイルというのは、Googleのアクセス解析・広告、ツィッターのボタン、Facebookのイイねボタンなどが該当します。これらを表示するにはそれぞれの会社のサーバーからデータをもってくるわけです。
で、Googleサイト診断ツールで一番足を引っ張っている会社・・・・
それは・・・・・
ブラウザのキャッシュを活用する静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになります。次のキャッシュ可能なリソースでブラウザのキャッシュを活用してください:http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 分)http://pagead2.googlesyndication.com/pagead/osd.js (60 分)http://www.google.com/…callback":"__gcse.sacb"}]} (60 分)CSS を縮小するCSS コードを縮小すると、データ サイズを大きく削減でき、ダウンロードや解析の速度を向上させることができます。次のリソースの CSS を縮小すると、サイズを 3.8 KB(40%)削減できます。http://www.google.com/…dfd66b31992bfbaca6d597ca1/default ja.css を縮小すると圧縮後に 3.8 KB(40%)削減できます。JavaScript を縮小するJavaScript コードを縮小すると、データ サイズを大きく削減でき、ダウンロード、解析、実行の速度を向上させることができます。次のリソースの JavaScript を縮小すると、サイズを674 バイト(1%)削減できます。http://www.google.com/…fd66b31992bfbaca6d597ca1/default ja.I.js を縮小すると圧縮後に 674 バイト(1%)削減できます。
なにを隠そう、Google社!お前だww
そうなんです、どんどんダイエットに励んでも最終的に改善案の項目に残るのがGoogleのサービスなんですw
結局、お前かよ!
って心の中で突っ込んでいます。
いや、この長いエントリーの落ちはここなわけです。これを言いたいがための長文でした。失礼しました(・ω・)ノ
なお、このブログ読んで
じゃうちの会社のホームページもGoogleページインサイトで採点しよ~
げっ、、、なんだこの低い点数は!
WEB制作業者に連絡して、クレームを言う!
なんてことは辞めてくださいねw
ホームページはそれぞれ役割とか目的があって、軽いのがベターではありますがベストな訳ではありません。イメージ・ビジュアル重視ならそれはそれでOKですからね(・ω・)ノ
オマケ
とはいえ、間違ってGoogle検索でここに辿り着いた方には申し訳ないんで、オレが愛用してるダイエットツールを挙げておきます。
(1)スピードチェックのGoogleページスピードインサイト
http://developers.google.com/speed/pagespeed/insights/
(2)JavaScriptとCSSをオンラインで圧縮できるOnline JavaScript/CSS Compression Using YUI Compressor
(3)複数のPNG画像を一発で超簡単に圧縮できるタイニーPng
(4)複数のJPEGを圧縮するJPEGオプティマイザー
http://media4x.com/jpeg-optimizer/
(5)小さいアイコンなんかはファイルではなくHTMl/CSSにインラインで、そんな時の「画像ファイルのBase64エンコード」
http://www.crystal-creation.com/web-appli/image/base64/
補足:このページのロゴやSNSアイコンなどは全てインライン化してます。これにより5個のファイル(http通信)を減らしてます。
例:RSSのアイコンは画像ファイルではなく以下のように記述します。このdata:imageの部分を作ってくれるのが「画像ファイルのBase64エンコード」です。
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAn1BMVEX/gwD/ggD/pEj/cgD/fAD/fwD/dAD/////hAD/gQH/egD/ewD/58v/7tn/dwD/oT7//vz/v3v/fwj/jx//kyX/zJT/agD/hhf/ky7/jRX/rFX/0qD/qU3/ /b/48T/9uz/hgn/iSL/mjL/o0L/nDz/eAz/6s//373/oUb/sGD/16r/bQD/t27/8eL/xIX/gBr/u3D/27X/2bL/8uL/s2bFmNuVAAAA/ElEQVQoz62Q17KDMAxEAdvIhd57h9Tb7/9/WwyJZ5hMHrOvR6vVSnuvKMOYsBeA5IYbUS70Z4AMAM Oj4Qz gw2NQUT2h6J0I8P7Yp MnNvogQhJz01ktgG0vfhlZs7l D/byOakr5mtOfRRJE0WdF2ggJSXpmi9ADwy4jahkO/tGEdToYF2lOAqWrOeXCVAUuYXMGzQq6u0gh3knEBiOd1WUEeFkKiTz9Mqhrq6fItcepsgJqZBVDOcwzgo6mGJjPp4yWeTM6SyoNz0NvwMd0BdfpSzgZoqGHpv6T7qOqTzh06zLqxGDvmFlVOVHmGsU6pjgWWrYSQ1d pG70NElbNc42MAAAAAElFTkSuQmCC" border="0" >
(6)ド定番の2つ FirebugとWeb Developer
https://addons.mozilla.org/ja/firefox/addon/firebug/
https://addons.mozilla.org/ja/firefox/addon/web-developer/
こんなサイト・ツールを使ってダイエットに励んでいます。
なお、日本のスマホサイトは世界的にみてもかなり遅いようです。
WEB高速化でググるとちゃんとした情報がいっぱいあるので、気になる方はググってください(・ω・)ノ
カテゴリ:PC・スマホ・WEBネタ