画像が多いサイトの高速化

サポート
1

Cloudflareや画像の多いサイトに関する警告をすべて目にした後、私が取り組んでいる小さなペットプロジェクトでその課題に挑戦することにしました。Cloudflareについては概ね成功しているのですが、なぜJSの実行が完了する前にテーマの画像が読み込まれないのか、その理由がわからずに困っています（CDNの問題ではないようです）。

画像をより早く読み込む方法（JS/CSSと同時、あるいはJS実行中に読み込むなど）はあるのでしょうか、それともこれは不可能なのでしょうか？これは必要な優先順位付けなのでしょうか？

以下はwebpagetest.orgの結果です。私の関心は、最後のJSスクリプトの読み込みが完了する約2.3秒と、画像のダウンロードが開始される約3.4秒との間の大きなギャップにあります。

image
image1098×1514 328 KB

テーマレイアウト：

image
image1859×1488 466 KB

設定
リンク: https://investorcommunity.org
テーマ: Graceful
サーバー: DO Droplet（追加のキャッシュやS3なし）
CDN: Cloudflare（無料版、JSの干渉を防ぐために「Rocket Loader」は無効化）。なお、Cloudflareを無効にしてもこの特定の課題には影響しないようです。

どなたかアイデアがあれば幸いです。

2

このギャップは JavaScript の実行期間であり、Discourse の EmberJS アプリのダウンロードが完了して起動を開始する時間です。私たちは複数のメンバーで EmberJS アプリの近代化に取り組んでおり、今年からこの取り組みの恩恵を享受し始めます。

しかし、JavaScript アプリケーションである以上、常に何らかの JavaScript 実行が発生します。すでにコミュニティ向けに Discourse を使用することを決めているのであれば、この点については過度に心配する必要はありません。

3

なるほど、ご説明ありがとうございます。

そのスクリプトの初期化と並行してテーマ画像の転送を開始する方法はありますか？そうすれば、JavaScript が完了した時点で画像がプリロードされ、すぐに表示されるようになります。それとも、どの画像を抽出すべきかを知るために、JavaScript スクリプトが必須の前提条件になっているのでしょうか？

EmberJS の話を楽しみにしています。皆様が出し続ける素晴らしい改善に期待しています！