また、軽い、重いというのはどうやって判断すればいいのでしょうか。
・重い画像を使用しない
・不必要なタグは入れない
・テーブルを多用しない
でしょう。
ページの軽い・重いは以下のページで
1.チェック結果
評価 F
合計 586862bytes
予想表示時間 83.84秒程度(56Kモデム単純換算。8秒が目安。)
コメント:ファイルが重過ぎます。根本的に考え直したほうが良いかもしれません。
ひどい有様でした。
ありがとうございます。
一般的にはページ本体とソコから参照される画像やスタイルシート、Flash、JavaScript などのトータルのファイルサイズが大きいほど思いと言われると思います。
なのですこしでもファイルサイズを抑えるためには改行や空白をなくす、分けられるページは分ける、画像の圧縮設定を変えるなどしてみることです。
また、TABLE が複雑な構成だと表示が遅かったりスクロールがスムーズに行かない場合があります。これも重いと言われる一因になります。レイアウトに TABLE を使っている場合は CSS でデザインし直すと改善される場合もあります。
>レイアウトに TABLE を使っている場合は CSS でデザインし直すと改善される場合もあります。
もう、隅から隅までtableです。
cssでデザインしなおす方法を質問させていただくことになりそうです。。。
テーブルレイアウトのサイトであればCSSデザインに移行させるだけで、ブラウザの反応が早くなると思います(もちろんきちんとHTMLとCSSを理解して各必要があると思いますが)。
後はサーバーのスペックアップや、Apacheの設定変更とかで反応を良くさせる方法もあります。
HTMLのソースを軽くするのであれば、HTMLソースをきれいに表示させるために入っているTABなどを消せば理論的にですがファイルサイズが小さくなって軽くなるのではないでしょうか。
あとは下記サイトのようなサービスを使って確認して行くのは如何でしょうか。
以上、参考になれば幸いです。
英語でした。。。
TOTAL_HTML - Congratulations, the total number of HTML files on this page (including the main HTML file) is 2 which most browsers can multithread. Minimizing HTTP requests is key for web site optimization.
TOTAL_OBJECTS - Warning! The total number of objects on this page is 93 - consider reducing this to a more reasonable number. Combine, refine, and optimize your external objects. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests.
TOTAL_IMAGES - Warning! The total number of images on this page is 79 , consider reducing this to a more reasonable number. Combine, refine, and optimize your graphics. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests.
TOTAL_CSS - Caution. The total number of external CSS files on this page is 4 , consider reducing this to a more reasonable number. Combine, refine, and optimize your external CSS files. Ideally you should have one (or even embed CSS for high-traffic pages) on your pages.
TOTAL_SIZE - Warning! The total size of this page is 713026 bytes, which will load in 142.41 seconds on a 56Kbps modem. Consider reducing total page size to less than 30K to achieve sub eight second response times on 56K connections. Pages over 100K exceed most attention thresholds at 56Kbps, even with feedback. Consider contacting us about our optimization services.
TOTAL_SCRIPT - Warning! The total number of external script files on this page is 8 , consider reducing this to a more reasonable number. Combine, refine, and optimize your external script files. Ideally you should have one (or even embed scripts for high-traffic pages) on your pages.
HTML_SIZE - Caution. The total size of this HTML file is 45445 bytes, which is above 20K but below 100K. With a 10K ad and a logo this means that your page will load in over 8.6 seconds. Consider optimizing your HTML and eliminating unnecessary features. To give your users feedback, consider layering your page or using positioning to display useful content within the first two seconds.
IMAGES_SIZE - Warning! The total size of your images is 550055 bytes, which is over 30K. Consider optimizing your images for size, combining them, and replacing graphic rollovers with CSS.
SCRIPT_SIZE - Warning! The total size of your external scripts is 108044 bytes, which is over 8K. Consider optimizing your scripts for size, combining them, and using compression where appropriate for any scripts placed in the HEAD of your documents.
CSS_SIZE - Caution. The total size of your external CSS is 6990 bytes, which is above 4080 bytes and less than 8K. For external files, try to keep them less than 1160 bytes to fit within one higher-speed TCP-IP packet (or an approximate multiple thereof). Consider optimizing your CSS and eliminating features to reduce this to a more reasonable size.
MULTIM_SIZE - Congratulations, the total size of all your external multimedia files is 0 bytes, which is less than 4K.
なんにせよ、ひどい有様のようです。
htmlだけで31MBあるみたいです。
作成したツールがいろいろな独自のコードをはいていますから、それらをテキストエディタで削除することで大分軽くなります。
ツールは、ビルダーですとか、Dreamwaver、ひょっとしたらWord・・いろいろありますが、どれも余分なコードを追加してしまいます。
私はαEditというツールをお勧めします。
またフォントの指定なども削除すればもっと軽くなりますよ。
HTMLの知識を少し仕入れて、チューニングしていくことです。
Dreamwaverを使っています。
今まで手を抜いてチューニングしていなかったのですが。。。
この重さはそういったレベルじゃない気がしてきました。
tableタグの使いすぎと画像の重すぎなところからてをつけていきたいと思います。
もし多く画像をお使いでしたら、画質が全て最高画質で保存されてたりしないでしょうか?
重い画像はfireworksなどのツールでgifやpngに変えることで、ファイルサイズを縮小することができます。
やはり画像の多さは大きな原因なのですね。
ありがとうございます。
HTMLの不要な改行やコメントを削除し、見栄えそのままサイズダウン
http://www.vector.co.jp/soft/win95/net/se237741.html
HTMLのデザインを変えずにファイルサイズだけを小さくします
無駄なスペースやタブを消してくれるのですね。
ありがとうございます。
ウェブページが重い原因は多様なので、可能ならばウェブページのアドレスを書いた方が適切な答えが得られると思いますよ。
ajisio_taro さんの回答への返事で、「ファイルが重過ぎます」という評価を重く受け止めているようですが、今時 56kbps で 8 秒などと言っているサイトの表示する「評価」はあまり文字通りに受け取らない方がいいのではないかと思います。そのサイトで http://www.yahoo.co.jp/ や http://www.hatena.ne.jp/ や http://www.asahi.com/ を判定させると D 「ちょっと重いようです」と出ましたけど、これらのサイトって改善が必要なほど重いと思いますか?
では ajisio_taro さんの紹介しているサイトに意味がないかというとそんなことはなくて、ファイルの個数やファイルサイズといった生のデータを見るべきです。「ファイルが重過ぎます」などという主観的な表現に惑わされることなく、何を修正するかを考えるべきだと思います。
toguo さんの回答への返事を見ると画像ファイルが 79 個で合計 550 キロバイトだそうなので、画像ファイルを見せるのが目的のページでないなら、これが必要以上に多いのではないかと感じます (僕は画像を作るのが苦手で、自分のサイトで画像をほとんど使わないので、余計にそう感じるのかもしれませんが)。本当にそれだけの画像が必要かどうかは見直してみてもよいかもしれません。
ところで同じ返事の HTML_SIZE の部分の表示によれば、 HTML ファイルのサイズは 31 メガバイトではなく 45 キロバイト (45445 バイト) みたいですよ。それならたぶん HTML ファイルのサイズを気にすることはないと思います。例えば http://www.hatena.ne.jp/ を今見たら 42 キロバイトでした。もちろん「はてな」のトップページも重くて、それよりも軽くしたいのだということなら気にしなければならないかもしれませんが。
GEN111 さんの回答への返事で table 要素を多用しているとのことですが、 CSS も使っているみたいなので、そのあたりをちょっと勉強して整理した方がいいかもしれません。
あと、質問からずれるのですが、身も蓋もないことを書くと、重くて改善が必要だと思っているのはただの思い込みで、じつは別段重くもなく改善の必要はないということも、往々にしてあります。
次に挙げるのは一般的な話ではなく特定のサイト (イラスト中心のサイト、今はもう見られない) に関する話であって、しかも 2 年近く前の内容ですが、「サイトの表示の重さ」に関して的確なことが書かれていると感じるので、ぜひ参考にしてもらえればと思います。趣味の Web デザイン Advice 324 milk punch
詳しく書いていただいてありがとうございます。
参考にさせていただきました。
非常に参考になりました。
やはりよくある質問のようですね。
既に出来上がってしまっているページを簡単に修正、というのは難しそうですね。