it-swarm-ja.com

JSを使用しないと動作しないという犠牲を払って速度を向上

現在標準のimgタグを使用して画像を読み込む画像ギャラリーがあり、大きな画像がたくさんあるため、読み込みが非常に遅くなります。

ページが読み込まれた後、ギャラリースクリプトで動的に画像を読み込むことで、処理速度を上げることができます。これをテストしたところ、パフォーマンスが大幅に向上しました。問題は、ユーザーがJSを無効にしている場合、このように画像をロードしないことです。

だから問題は、JSが無効になっている場合にページが機能しないという犠牲を払ってパフォーマンスを得るのは価値のあるトレードオフですか?

この特定のケースでは、noscriptタグを使用すると思いますが、html出力(CMSなど)を制御できなかった場合はどうなりますか。

2
Sruly

いくつかの簡単な考え:

  • N個を超える画像をロードする必要がないように、UIを再設計します。たとえば、ページネーションを導入します。
  • 多くのブラウザは、ユーザーに表示される画像のみをレンダリングします。他の画像を画面外またはオーバーフロー付きのdivに移動して非表示にすることを検討してください:非表示または何か。
  • Pageloadで最初のN個のイメージをロードし、その後残りをロードします。残りの画像を読み込むにはJavaScriptが必要です。JSを有効にしていない少数のユーザーにページネーションを追加するnoscriptタグを追加できます。
  • 処理する画像の種類に応じて、画像をスプライトシートに結合し、CSSのbackground-positionを使用してすべてを背景画像としてロードし、適切な部分のみを表示します。事前のロード時間は膨大ですが、キャッシュ可能です。

結局、私はあなたの聴衆が何であるかわからないので、JSがオフにされることは価値のあるトレードオフであるかどうか答えることはできません。詳細が必要です。私が取り組んだウェブサイトでは、ほとんどの場合、プログレッシブエンハンスメントに傾倒する傾向があります。したがって、私のリストの3番目の例は、おそらく私が行きたいものでしょう。

4
Rahul

JSが画像の読み込みを高速化する代わりに、別のページの最後に画像を読み込んで、ギャラリーを表示したいときに既に読み込まれているとしたらどうでしょう。重要なすべてのコンテンツの後に画像があり、キャッシュできるように同じ名前を使用していることを確認したいだけです。

JSでのロードに固執したい場合は、まずJSを確認し、JSをサポートしている場合は動的ロードを使用し、JSがない場合は標準にフォールバックすることをお勧めします。

1
LoganGoesPlaces

これは段階的に行うことができます。つまり、初期HTMLは現在と同様にIMGタグを出力します。しかし、ロード直後にjQueryが起動し、IMGタグをカスタムローダーに動的に置き換えます。両方の長所。

1
Chase Seibert

大企業でさえJavascriptが必要になり始めています。たとえば、IEでJavaScriptをオフにしている場合、Google Chromeをダウンロードすることさえできないことをご存知ですか。 Accept and Installボタンが機能しません。画面の上部に次のテキストを表示するだけです。

このソフトウェアをダウンロードするには、JavaScript対応のブラウザーが必要です。 手順についてはこちら ブラウザでJavaScriptを有効にする方法について。

個人的には、Javascriptの要件はこのシナリオに対する彼らの側の誤りであると感じていますが、私は余談です。

もちろん、それはあなたの聴衆に依存しますが、過去2年間、私もJavascriptが機能することを必要とするかなり多くのWebインターフェースを構築してきました。

残りの懸念はSEOです。ギャラリー内の画像をGoogleでインデックスに登録する場合は、HTMLで表示する必要があります。

1
Steve Wortham

「Javascriptがオフになっているとしたら」という質問は、それだけで生きるべきです。 JSをオフにしてもアプリ/サイトが引き続き使用可能であることを確認する必要がありますが、オーディエンスが誰であるかについても考慮する必要があります。正直なところ、それは2010年であり、Web開発者はこの問題について考える必要さえありません(私はもう必要ありません)。

アナリティクスを使用して、ユーザーがJSをオフ/オンにしているかどうかを調べます。ユーザーの5%未満の場合は、回避策に時間を浪費しないでください。

1
abrudtkuhl