くじぇ回答ポイント 500pt

低速回線(ISDN128K)向けのPCサイト(静止画・テキストからなるWebアプリ・AJaxで一部項目を常に更新させたい)をこれから作成することになりました。この環境下でもできるだけ快適に利用できるようにする為に、抑えておいた方が良い点がまとめられているサイトを教えてください。経験者の方のみお願いします。

回線は低速ですが、希望は閲覧PC環境をある程度固定できる点です。そこでWindows7以降でIE10/Chrome28限定にしようと考えています。
ですので「高速 Webアプリ」で検索すると出てきそうな、HTML5を用いた(オフラインウェブアプリ向け)系テクニックとか、スマホ向けの高速化手法なども十分参考になるかなと考えています。ただ、特に似たような開発に携わった方より血肉の通ったアドバイスを事前に頂ければと思い質問しました。

なお、こんなに低速回線を前提とするのは、ADSLですら基地局から離れていて遅い山間部でも快適にWebアプリケーションが動くようにして欲しいと担当から前もって釘を刺されたからです。
虫が良い質問ですが、よろしくお願いいたします。

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

みんなの回答

きゃづみぃ2013/08/05 23:50:35
満足100pt

サイズをできるだけ抑えればいいです。

静止画も大きさを小さくし、画質も悪くする。
デザインは基本的に文字(キャラクタ)で行えば
かなりサクサクとなるでしょう。

スター
- 2件のコメントを見る
- くじぇ 2013/08/06 10:53:40
  
  きゃづみぃさんありがとうございます。
  デザインについて折角CSS3が使えますから、単純画像・キャッシュを上手く効果と組み合わせて使い勝手を上げていきたいと考えています。
  宜しければその辺のノウハウまとめを教えていただければ幸いです。
  
  スター
- きゃづみぃ 2013/08/06 11:27:01
  
  ま、写真とか画像のサイズがそんなに大きくならなければいいと思いますよ。
  
  スター

holoholobird2013/08/06 01:08:03
満足100pt

サイトの閲覧端末はここ数年で発売された、そこそこ性能のいいものですね。

となると、データによっては処理された容量の大きいものではなく、生のデータを送り、それを組み立てるようなタイプのウェブページの方がいいかもしれません。

例えば、いちいちtableタグを送信するのは無駄なのでcsvファイルをテーブルで表示させるjavascriptとcsvファイルのみを送る。

http://javascript.webcreativepark.net/library/csv2table

静止画がどのようなものなのかにもよりますが、単色のものの組み合わせならpngなどを利用するのがいいかもです。

http://www.gizmodo.jp/2010/10/jpgpnggif.html

画像が複数ある場合はCSS spriteなどで複数の画像を1つにまとめるのも有効です。

画像が10枚、20枚ある場合はヘッダの文章の量もシャレにならないので。

http://ja.spritegen.website-performance.org/

回線速度が10倍の場合、小さい容量のものなら0.01秒と0.1秒ではあまり体感時間に差はありませんが、0.5秒と5秒では体感時間にとても差があります。

帯域の狭さは端末のスペックでカバーするつもりで、とにかく通信データを削るつもりで作成することを心掛けるほうがいいでしょう。

スター

1件のコメントを見る
くじぇ 2013/08/06 11:04:17

holoholobirdさんありがとうございます。
　
JavaScriptの動的生成、CSS Spriteなど参考にさせていただきます。
また利用者から見取り図(限定された色から構成)をアップロードしてもらう予定ですが、そこは単純に格納するのではなく、サーバには別途GIF形式で格納して出力する仕組みにした方が良さそうですね。

スター

だわかき2013/08/06 16:30:16
満足100pt

離島のお客様向けの業務Webシステム（INS64使用）を構築した経験があります。

ポイントは2つです。

データ転送量を減らす。
同時セッション数を制御する。

１ですが、マルチメディアデータ（動画、音声など）を使わないことが第一です。
静止画については、100kb×３～４本ならそれほど重くありません。

２ですが、１ページあたり、コンテンツ本体と画像データ３～４本に絞ることができるのが理想です。
自身でセッションを制御できない広告サイトや、ソース不詳のJavaScriptを埋め込むことは避けるべきです。

動的コンテンツは、あらたな通信が発生しなければＯＫです。
たとえば、サーバサイド（RubyやPHPなど）で動的にコンテンツを作ったり、クライアントサイド（HTML5やJavaScript）でコンテンツを動的に変更するのは大丈夫です。サーバ間通信は問題ありませんが、Ajaxとかでクライアント側に新しい通信が発生するのは避けるべきです。
クライアントがIE10／Chrome26ということなので、クライアント側でかなり動的なコンテンツを作ることはできそうです。

こういうノウハウを纏めたサイトは少ないです。
軽いサイトをキーワードに探すと、単純にコンテンツ容量の軽いものになってしまうので、今回の質問にはマッチしないと思います。

画像を最適化するという点では、下記サイトが参考になります。
http://www.adobe.com/jp/devnet/dreamweaver/articles/smartphone_web_part4.html

スター

2件のコメントを見る
くじぇ 2013/08/06 22:31:47

おお！だわかきさんありがとうございます！

誰かが作ったJqueryプラグインを安易に使用するのは気を付けた方が良さそうですね。
画像データを絞るよう、CSS Spriteは活用させていただきます。

常時サーバ側に蓄えられるデータを、クライアント側でリアルタイムで監視できる仕組みを構築したいのですが、サーバ→クライアント間の通信は全オブジェクトの動きを一回の通信で完了するようにするとか気を付けようと漠然と考えています。

スター
だわかき 2013/08/08 09:13:46

>クライアント間の通信は全オブジェクトの動きを一回の通信で完了するように
それがいいと思います。

スター

gizmo52013/08/10 14:01:45
満足100pt

作成しようとしているWebアプリケーションのイメージがいまいち分かっていないので、見当違いの箇所については指摘してください。

私が一番重要だと考えるのは、ブラウザのキャッシュをきっちりと効かせることだと思います。
そのためには、静的なリソースと動的なリソースをきちんと分けて設計することです。
CSS や外部スクリプトファイルは、もちろん静的なリソースですが、CGI や php スクリプトで返されるデータについても、例えば、登録された画像などについては、更新の頻度を考えて Expire ヘッダや Cache-Control ヘッダをきちんと制御して、キャッシュが効いてあげるようにすべきです。
（文面から、登録される見取り図は頻繁に更新されないのではないかと思っています。）

静的なリソースについては、一ページ当たりの個数を減らすことです。
ブラウザはキャッシュが有効かどうかを判断するためには、一度問い合わせをして、302 ステータスで判断します。
この問い合わせの数が少なくなるように、CSS や外部スクリプトファイルを統合して、数を減らします。
CSS Sprite は、この最たるものだと思いますが、業務用のアプリケーションのようですから修飾のために画像を使わない方が賢明だと思います。
（CSS Sprite は結構面倒なので。）

また、問い合わせが CGI だとしても、データを返す必要が無ければ 302 ステータスを返すべきです。
利用者から登録された画像や、その情報はデータベースに保存するのだと思いますが、単純に検索結果を返すのではなく、登録日を確認して 302 ステータスを返すようにひと手間くわえる方が良いと思います。

このあたりは、ブラウザの設定でもある程度手を抜くことが可能です。
例えばIEであればインターネット一時ファイルと履歴の設定で「Internet Explorer を開始するたびに確認する」または「確認しない」を選ぶと、通信量は劇的に減ります。
その代わり、URL とデータの結びつきが強くなってしまうので、常に新しいデータを返さなければいけないような問合せでは、パラメータに時刻を入れるなどしてURLが常にユニークになるように設計する必要があります。

もうひとつ思ったのは、状況の監視のような画面を作られるようですが、ある程度の制約がありますがプッシュ型の仕組みを検討しても良いと思います。
http://ja.wikipedia.org/wiki/Comet

制約というのは同時接続数です。
クライアントから最低１本の接続がつながりっぱなしになるので、Webサーバでは通常のトラフィックをさばく分に加えて、クライアント台数分の同時接続を保証しなくてはいけません。
通常のWebシステムよりも多めに同時接続を保証しなくてはいけないのでサーバのスペックや個数、メモリ搭載容量に影響が出てきます。
ただ文面からクライアント数はそれほど多くないのではないかと想像できるので、十分検討の余地はあると思います。

スター

boost_beast2013/08/12 11:41:29
満足100pt

軽いホームページを作るには
http://www.suita.ed.jp/edc/bunsho/hp/make_hp02.html#top
こちらを参考にしてみるのがいいと思います。

スター

その他の回答を読む

この質問へのコメント

コメントはありません

この質問への反応（ブックマークコメント）

質問の情報

登録日時: 2013-08-05 23:16:00
終了日時: 2013-08-12 23:20:03
回答条件: 1人5回まで

この質問のカテゴリ

インターネット

みんなの回答