PHPによる指定ホームページURLのファイルサイズのチェック・計測

HOME > PHPによる指定URLページのファイルサイズのチェック・計測

PHPによる指定URLページのファイルサイズのチェック・計測を行います（Beta版）

チェックしたいURLを入力して「計測」を押すとそのページファイル、及び各依存ファイルのサイズ、及び合計ファイルサイズを計測、表示します。Webページの表示速度向上、表示の高速化にお役立ていただければと思います。

主な特徴

画像ファイル、CSSファイル、JSファイルなど外部ファイルも自動で取得します。
※実際にはsrcのパス、及びlinkタグでかつhrefの値が○○.cssである場合のみ取得します。
※ただし特殊なURLの場合には取得できず「計測不可」と表示されます。
※ソース上の外部ファイルでコメントアウトされている場合には除外しますので余計なファイルは読み込みません。
動画ファイル、FLASH、CSS内の背景画像などは取得できませんのでご了承下さい。
すべての依存ファイルのサイズ取得を保証するものではありません。Webページの実際の容量とは若干異なる可能性がありますので、あくまでもご参考程度として下さい。
htmlやPHP、CSSなどのテキストファイルの場合、FTPでアップロードした際のファイルの改行コードの違いでローカル上のファイル容量とは微妙に違う場合があります。
ページの合計サイズが20MBを超えた場合には強制的に終了します。
jQuery本体の読み込みなどにGoogleなどのCDN等を使っている場合、実際の容量よりも大きく計算されます。（CDNのファイル自体はもっと軽く、圧縮ファイルは受信したブラウザ側で展開するため）
逆に「実際のファイルサイズ」ということは言えると思います。これをgzip圧縮しているということになります。
URLは絶対パスで指定下さい。
例　http://www.php-factory.net/　または　http://www.php-factory.net/○○.html
基本的には無いかと思いますが、サーバー側で許可されていない場合には計測できない可能性があります。

計測

計測結果

ファイルサイズ削減のヒント

大前提として・・・今時は閲覧者の回線速度も非常に上がっているため、安易に考えればページのファイルサイズなんてもう気にしなくていいじゃん！ってなるところですが、ちょっと待ってください！
それは半分正しいですが、半分違います。

水道の蛇口を例にすると分かりやすいかもしれません。水を送る側がサーバー、蛇口がある側をプロバイダーというように置き換えられます。
通常蛇口の直径はせいぜい2～3cmでしょう。たとえば、水道の蛇口だけを直径1メートルにしたとします。果たしてそれで通常の蛇口と比べて相対的に多くの水が出るでしょうか？ってことを想像すると理解しやすいと思います。（実際に出る水量は同じですよね）

要するに表示速度には、送る側（サーバー側）、受信する側（主にプロバイダー）の2つが影響します。受信側だけ早くしてもそもそも送る側が遅ければ表示速度は早くなりません。「光」の営業トークでもよく耳にしましたが、そもそも実際にADSLと光で体感できるほど表示速度に違いはあるでしょうか？（私個人の経験上ではほぼ無いです）

答えは半分正解です。実際のホームページなどの表示速度はほぼ変わらないでしょう。ただ、Youtubeなどの動作サイトでは体感できるかもしれません。Youtubeなどはその性質上送る側も非常にハイスペックなため、
通常は「送る側＞受信側」を意識されていると思います。

こういった理由からもファイルサイズの削減をすることはページの表示速度を上げるという意味で非常に重要な概念です。ユーザビリティの観点からも重要な要素だと考えられます。
経験あるかと思いますが、重いサイトってそれだけでストレスを感じます。

ただ、私自身はこのプロフェッショナルではないため、以下はあくまでも私が知りうるもの、かつ比較的簡単にできる「ヒント」程度と考えていただければと存じます。あくまでも最低限の基本的なことのみになります。

サーバーの選定

まぁこればかりは簡単にできない状況もあるので、「できれば」ということでもあります。
またそもそもどこがいいん？っていう問題もあります。一般的にも経験上もやはり安い＝遅い傾向にあります。

具体的な例を出して申し訳ないのですが、さくらサーバは正直体感できるほど遅いです。。（でもその分圧倒的に安いのでコスパ的に言ってしまえば「有り」かもしれません。が、私は無いです。。）ロリポップもちょっと気になりますね。エックスサーバーは値段の割にかなり優秀な方だと思います。（ここはそもそも表示速度を売りにしているというのもあります）いずれにせよこのあたりの判断はケースバイケースなところもあり難しいところですね。
月数万円のサーバーだから速いということでも無いですしね。実際。

画像ファイルの最適化

画像ファイルは基本的に写真関連はjpg、写真以外の画像はすべてpng（png8）とする。要するにgifは使用しない。（アニメーションgifは除く）gifとpng（png8）は見た目は基本的にはまったく同じものですが、png（png8）のほうが20～30％容量が軽いです。一昔前はpngに対応していないブラウザがあったため一般的ではありませんでしたが、今やpngに対応していないブラウザはほぼありません。

※実際にはIE6がpngには対応しているが透明pngに対応していない。またガラケーの古い機種の多くが対応していません。そのためガラケーを考慮しないのであれば、pngを選択しない理由はありません。（IE6はもはや余裕で無視でしょう）
※png24（またはpng32）はpng8の256色制限が無く、さらに劣化が無いため綺麗ですが、容量が大きくなる傾向にあるので、ものによってはjpgのほうが良い場合もあります。

※逆に劣化なしで表示したい場合には迷うこと無くpng32となります。（再編集も可能）

さらにpngの場合、さらに50～70%軽量化してくれるサイトがあります。
https://tinypng.com/ （なんか最近試したら昔よりさらに縮小できていた・・ので逆に劣化が若干気になります）

さすがによーーく見ると特にグラデーション部分の若干の劣化は見られますが、ぱっと見はそれほど変わりません。画質が選択できればさらに良いかな～と思いますが、私は実務でも頻繁に利用しています。

jpgの書き出し画質については個人の好みもあるため、一概には言えませんが、私は80程度としています。
会社であれば制作ルールとして決まっている場合もあります。

Javascriptライブラリの読み込みにCDNを利用する

これは利用している方も多いと思いますが、Googleなどが提供しているサービスです。
現在のサイト制作ではjQueryなどのライブラリなどはほぼ必須となっていますが、その本体のJavascriptファイルをCDNを使って読み込むことでブラウザのキャッシュを利用し、ページの表示高速化を行おうというものです。

このサイトでもGoogleのCDNを利用してjQuery本体を読み込んでいます。多くの方が使用することでブラウザが同じパスのファイルをキャッシュする仕組みを利用し、再読み込みしなくて済むため結果、高速化できるわけですね。

CSSスプライトを使用する

詳細は割愛しますが、複数の画像を繋げた状態の画像を1つ用意し、CSSで表示箇所に合わせて背景画像として指定する手法です（具体的にはpositionを使って表示位置を調整する方法です）。画像ファイルを1つにすることで、余計なリソースを省き、結果高速化を実現します。

現代ではかなり一般的になってきましたが、Yahooなどでも使用されています。
CSSに精通していないと難しいテクニックとなるかと思います。
検索すればたくさん解説しているサイトがあります。

JavaScriptとCSSは外部ファイル化する

まぁこれは普通にやっていると思うのであえて詳細の説明はしません。。
これもキャッシュを利用することで高速化を実現します。

ソースコードのインデント

これはもはやそこまで気にする必要はないのかなと。。。個人的には。

インデントもファイル容量に影響します。（タブや空白も文字列とされるため）
※実際にインデントを削除してみるとファイルサイズが変わることが確認できます。
※DreamWeaverの場合、ソースを全選択でCtrl+Shift+<　を複数実行することでインデントを削除できます。またちなみにメニューの「コメンド」→「ソースフォーマットの適用」でインデントが自動で付けられます。
ただ、実際には微々たるもののため表示速度に影響あるかと言われると個人的にはほぼ影響ないと考えています。
ので、好みで良いのでは？と考えています。
※個人的にはHTML程度であればインデントは不要と考えていますので基本的にはすべて左寄せしています。
これはあくまでも私の好みです。インデントを下手に付けられると逆に見にくくなるためです。
PHPの場合には可読性確保のためインデントをつけています。

ちなみにソースコード内の改行もファイルサイズに影響しますので、削除すれば削減できますが、可読性の観点から言えば、さすがに。。。自分はやりません。ちなみにおすすめはできませんが、どうしてもやりたい場合にはDreamWeaverで Ctrl+F、「正規表現」にチェック→検索欄に「\n」を入力→「すべて置換」を実行すると改行をすべて削除できます。

その他「Webサイト高速化」等で検索すればたくさんのサイトが見つかります。