performance - 読み込み速度を速くするために「background-size:cover」に代わるものはありますか?

Question

私はChromeを使用しています。以下は背景画像のコードです。これにより、選択した背景画像が他の要素の背後にある画面全体を効果的にカバーし、グレースケールに設定されます。完全に機能しますが、background-size:cover が読み込み速度とサイトの使いやすさを劇的に低下させていることがわかりました。

「background-size:cover」(行番号 1 を参照) に代わるもので、同じ結果を視覚的にレンダリングするが、サイトの読み込み速度を向上させるものはありますか? ありがとうございました！

<div style='background: url("LARGE PHOTO URL HERE") no-repeat center center fixed;background-size: cover;' class="grayscale bg"></div>

<div id="background">

    <style>

        #supersized img{

            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */

            filter: gray; /* IE6-9 */

            -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

        }

    </style>

</div>

これらがクラスではなくIDであるため、これらが関連しているかどうかはわかりません...したがって、それらを追加して使用しなかった可能性がありますが、スタイルシートに関連する可能性のあるスタイルもいくつかあります。

#bg {
    position:fixed; 
    top:-50%; 
    left:-50%; 
    width:200%; 
    height:200%;
    z-index: -1;
    display: none;
}

#bg img {
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 
    min-width:50%;
    min-height:50%;
}

#background スタイルはないようです。