HTMLの画像タグに幅と高さの属性を追加することによるパフォーマンスの向上

Question

私はDjangoのフォーラムで、メッセージと写真をお互いに残しておくことができます。 9gagのそれと同じように考えてください。

私はウェブサイトのパフォーマンスをGTmetrixでベンチマークしました。私の評価が低いのは、イメージの次元の特異性です。具体的には、すべての<img>タグ内にイメージの幅と高さを追加することをお勧めします。これにより、ブラウザのページのレンダリングが容易になり、再描画が最小限に抑えられます。

アップロードされたすべての画像は、動的にサイズ変更され、アスペクト比を維持しながらDBに保存されます。テンプレートの高さと幅を<img>タグに含める唯一の方法は、DBにその幅や高さを保存した場合です。または、私が見るためにそれらを提供するときに私は彼らの幅と高さを読んでください。

いずれにせよ、それは私の一部でいくつかのコンピューティングパワーを取るつもりです。ここでのトレードオフは、サーバーのコンピューティング時間とユーザーのブラウザーとの間のトレードオフのようです。私。サーバー側またはクライアント側。ユーザーのエクスペリエンスを最適化したいのですが、私のサーバーリソースはまともです。

新しい画像が数秒ごとに私のウェブサイトのパブリックエリアにアップロードされます。あなたはそれがウェブサイトの定番だと言うことができます。テンプレートにイメージの幅と高さを含めることで、誰かが大きなパフォーマンスを得た経験がありますか？私はそれについていくつかのアドバイスを聞いて欲しいので、私は先に行くことができます（またはアイデアをダンプ）。

ありがとうございます。

Answer 1

サイトの正確なレイアウトがわかっている場合は、ユーザーアップロード時に画像のサイズを変更し、cssを使用して寸法を指定できます。

サイトが応答性があり、デバイスの寸法に応じて画像の縮尺が変わった場合、この最適化の提案ではあまり心配しません。 TwitterはGTmetrixでこれをF（0）とし、それぞれDとBのグレードを持ちますが、依然としてほとんどのサイトよりも読み込み時間が速いです。

ハッサンにより示唆されるように付け足し：

私の提案は、あなたが（例えば、静的なコンテンツの配信を最適化、その後（。など、memcacheのを使用して、例えばキャッシュテンプレート）とDjangoの内部に焦点を当てることです。 Nginxで圧縮）、Webサーバーのキャッシュポリシーを設定します。これは大きなパフォーマンスの向上に気づくでしょう。最後に、ページビュー数が多い場合は、VarnishまたはSquidをWebサーバーの前に配置することを検討してください。