より快適に!ホームページのダイエット

2014-01-24   

そんなわけで、昨晩、部活終えて23時過ぎにハンバーグ250g食べてから即寝したら、消化不良で5時に目覚めちゃったオレなので暇つぶしに最近のマイブームなホームページのダイエットネタを書いてみます。

今はブログサービスやfacebookが普及して、一昔前のように個人でホームページを開設するなんてめったに無いと思われ、果たしてこのブログを見てる人にニーズがあるのか?!と思いつつも書いてみます。

さて、ホームページのダイエットとはナニかというと、いわゆる「表示が速いページ」「さくさく動く」「軽い」ページを目指すわけです。

大昔は回線が細かったりPCがヒヨワだったので、軽いページを目指していました。その後、ブロードバンドの普及とPCの高性能化によって、どんどん中身の凝った重いページ化が進んだ訳です。

もうサイズとか写真の劣化具合を気にせずバンバン大きい画像貼ったり、ボタンとか見出しとかも画像を使いまくり。4~5年前まではそんな感じで、制作側にとってはとても楽でした。

が、スマホの登場が一気に状況を変えました。

ホームページを見てる時って、サーバーから送られてきたデータをPC・スマホが表示します。

たとえばREDPEPPERSのトップページを開いとき・・・

LGiBqm4p4Hg_vO22.jpg

上図の下は専門のツールを使って、どんなデータがサーバーから送られてきたかを表示してます。途中で省略してますが、REDPEPPERSトップページを開いただけで・・・

(1)71個のデータ

(2)それらの合計が2.1メガバイト

がサーバーからPC/スマホに送られてきます。これ、PCで見てる時はあんまり気にならないけど外でスマホでみると、まーまー重いです。見積もり表示スピードが4秒台。

トップページは写真が多いので(2)は誰にでもイメージできると思いますが(1)の「71個のデータが送られてくる」は専門家以外は意外だと思われます。71個のデータが来るってことは、サーバーとPC/スマホ間で71回のデータのやり取りがあるんです。これがけっこうな足カセになります。

たとえば電波状況がよくない外出先でページを開いた時、裏で71回もの交信があるんで、通信状況が悪いタイミングにあたると、そのうちの何個かが送られてこなくて表示速度に影響が出ることがある(らしい)んです。

たとえ全体のファイル容量が少くても、ファイル数が多いのは好ましくない。ってのがスマホ時代になって叫ばれるようになりました。

軽いページとは全体の容量が少なくて、なおかつファイル数も少ないこと。

それを目指してダイエットするわけです。

では、どーやってダイエットするか。

WEB界のダイエット宣教師なGoogleが、肥満度合とダイエットのアドバイスをチェックするサイトを用意してくれてます。

Google PageSpeed Insights

このサイトに調べたいURLを入れると採点とともに修正すべき点を教えてくれます。

nUWzsG86UlQsZUq_.jpg

 

 

65ZyUGriSXGqey_s.jpg

Google神の指示にしたがって、画像の質をできるだけ落とす・ファイル数を極力減らす・圧縮できるものはする・非同期でもOKならそーする・細切れのファイルをまとめる・キャッシュを使う、などなどの地味で細かいダイエットをしていくわけです。

REDPEPPERSは個人の趣味サイトなので、極力ダイエットはしていますが、突き詰めてはいません・・・。なんせトップページに画像が多いのとGoogle広告があるので、自ずと限界があります。

正直71個のファイルで2MBもあるって、ダメダメですw けど、これでも最大限のダイエットはしています。ナニも手を加えていない時は、ファイル数が80以上あって容量も4MBくらいありましたからね。

もう一個例を挙げると。

こちらは仕事でやってて、大きな大会があるたびにサーバーがダウンしてしまうサイト(汗)

ダウンさせるなんて、管理者として恥であり屈辱なんですけど・・・・

通常時の10倍近いアクセスがそのときに集中するので・・・・

しかも近年はSNSの普及とスマホの普及で、より一層、短期集中型になって・・・・

そのピーク時に耐えうるサーバー構成の見積もり取ったら月額ウン十万円に・・・無理!

なんて愚痴と言い訳は置いといてですね、そんなサイトだからこそ、ダイエットは真剣にやっています。

ID4ZRQJPPE0eV0Dm.jpg

トップページの全体図。極力シンプルにしつつも、やっぱりページ最上段の大きいバナーとかは捨てがたくていろいろ工夫しないといけません。

ある程度の妥協をしつつも、ダイエットを続けた結果・・・

gMouYPmeeFcl_lkQ.jpg

Google神にはまーまー高得点をもらえました。 モバイル版で91点、パソコン版で83点。

ちなみにREDPEPPERSはモバイル版・PC版が一緒のファイルで、このサイトはファイルを完全に別けてます。

先ほどの専門ツールで調べると

ekzznhvsW8nxcqyD.jpg

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

http://refresh-sf.com/yui/

(3)複数のPNG画像を一発で超簡単に圧縮できるタイニーPng

https://tinypng.com/

(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ネタ

UNITORO以外の最近の投稿

N/A

twitter

Recent entries

spbvt1v1L17yOEUx.jpg

audi A5が来たっつ(・ω・)

hg3K02yZ7jZ1nF7q.jpg

REDPEPEPRSステッカープレゼント

picture from keitai

バンド結成か?!

VJ74ZT7gDM5z5Pag.jpg

おっさんバサーの悩みどころ「老眼鏡+偏光グラス」

qRpYLzND4amCW0W3.jpg

三代目TD-XにSTEEZ SVスプール105は使用可能

picture from keitai

キャベツ大好き猫

VhIpJEHjDnSwXX1z.jpg

ある日突然ネット関係のが使えなくなった時のGoogle小技

iOvBB_w4wsc5uJYZ.jpg

ピンクアダーのその後のその後w

picture from keitai

暑いぜベアバレイ

Muv1f8a4n8ph8wnP.jpg

今年の河口湖はアツイ!?かも?

picture from keitai

ピンクアダーのその後

picture from keitai

船津NOW

picture from keitai

Redpeppersステッカー再度

W7gVrpRkSYbQ6zvO.jpg

Zoom Zoom Zoom♪ 最近のクルマはかっこいい(・ω・)ノ

picture from keitai

アダプティックじゃないクルーズコントロール

EGq2W6iU7ajeL2Ki.jpg

オレメモ:草津温泉に行ってきた

gPqo8fvyFn2KjP73.jpg

暇つぶしの小ネタ集

U4HINfeqW7jwpG3D.jpg

DEPSデスアダーのコットンキャンディーを作ってみるテストその2 完結

picture from keitai

油性マッキー到着

eCui7jdLfFPA6P_j.jpg

DEPSデスアダーのコットンキャンディーを作ってみるテストその1

QBtJqd4IEAAprsyI.jpg

ジャークベイトの代替という位置づけでのDEPSデスアダー5インチノーシンカー

picture from keitai

ソルトドリーマー青森のマグロ!

picture from keitai

どんな時もー

picture from keitai

東北つれつれ団

picture from keitai

バスワールド休刊

0IFFFkz2u06X0WQw.jpg

江頭ジャマだカメラ

HpwLwiS1l3MXUCJq.jpg

スマホと連動するカシオG-SHOKブルートゥース

Ch0h7Do1z5YMaC_o.jpg

Golf7ヴァリアントにまさかの氷室京介♪

u6bFOf0xocXlZPy8.jpg

車内・社内BGMにその2:全国のラジオとかJ-POPヒットとかいろいろ聴ける無料アプリ・サイトのリスラジ

B0JKdkOqP2ldJwAV.jpg

車内・社内BGMにその1:パソコンの音楽をiPhoneで再生するyounity

Category

Popular entries 2018

Popular entries 2017

Popular entries 2016