カテゴリバナー画像の読み込みが遅い

[NoamH (Noam Huri)]

@awesomerobot

.category-title-header {
  &.category-banner-example-category {
        background: url(example.jpg);
  }
}

このCSSを使用しましたが、画像がアップロードされるのに3秒かかります（画像サイズは240kです）。
何か提案はありますか？

[Canapin (Coin-coin le Canapin)]

ノアムさん、返信が遅れてすみません。メインの#category-bannersトピックを確認しており、いくつか未回答の質問があったため、個別のトピックに移動しています

結局、問題は解決しましたか？

[NoamH (Noam Huri)]

いいえ、最初のアップロードにはまだ3秒かかります

[Lilly (Lillian Louis)]

@NoamH

このCSSを使用しましたが、画像（サイズ240k）の読み込みに3秒かかります。
何か提案はありますか？

うーん
画像をテーマ（またはテーマコンポーネント）にアップロードして、次のような変数を使用してアセットとして読み込むことを試しましたか？

.category-title-header {
  &.category-banner-example-category {
        background: url($example);
  }
}

[NoamH (Noam Huri)]

はい、こちら側のコードです。

.category-title-header.category-banner-show-and-tell {background-size: cover !important; background: url(https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/business20/uploads/algosec/original/1X/b94301fb225b079d905143074e33c5140e151f19.png); }

[awesomerobot (Kris)]

これのような背景画像を追加すること自体に、遅くなるような要因は何もありませんので、断定するのは難しいです。他の画像も読み込みが遅くなっていませんか？

画像のファイルサイズを小さくするために、もう少し最適化できるかもしれません。透明部分はなさそうなので、PNGよりもJPGの方が小さくなる可能性があります。また、ImageOptim (Mac) のようなツールや、TinyPNG のようなウェブベースのツールを使って、さらに最適化することもできます。