画像を早く読み込みたい

前提

サイトアクセス時に画像および文字をjsで一瞬表示しているのですが、
画像の読み込みに時間が多くかかっており、フェードアウトの時間を長くせざるを得ない状態になっています。
1度サイトに訪問するとキャッシュが残るため、再度アクセスした際に画像がすぐに表示され、3秒が長く感じてしまいます。

実現したいこと

画像をすぐに表示し、フェードアウト時間を短くできる方法はありますでしょうか。
もしくは画像読み込みが終わってからフェードアウトできるように設定する方法はありますでしょうか。

該当のソースコード

php
       <div class="first-img">
           <p><img src="<?php echo esc_url(get_template_directory_uri()); ?>/imgs/top/visual_bg.jpg" alt=""></p>
           <span>
             美容専門のコンシェルジュが、<br>
             提供する「最高の美」
          </span>
       </div>

js
  function firstimg() {
    $('.first-img p').fadeIn(50);
    $('.first-img span').fadeIn(500);
  }
  setTimeout(firstimg, 10);

  setTimeout(function () {
    $('.first-img').fadeOut(50);
    $('#main').fadeIn(50);
  }, 3000); //3秒後にロゴ含め真っ白背景をフェードアウト
})(jQuery);

css
.first-img {
    background: #000;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
    background-size: cover;

}
.first-img p {
    position: fixed;
    z-index: 9998;
    transform: translate(-50%, -50%);
	display: none;
    height: 100%;
    width: 100%;
    left: 50%;
	top: 50%;
}
.first-img span {
    font-family: "Noto Sans CJK JP Medium", sans-serif;
    font-size: 3.8rem;
    position: fixed;
    letter-spacing: 0.1em;
    color: #fff;
    text-align: center;
    z-index: 9999;
    display: none;
    justify-content: flex-end;
    bottom: 200px;
    width: 100%;
}

試したこと

画像の容量を小さくしてみましたが、変わりませんでした。
また下記コードを試しましたが、firstimgを取得できず、logが出力されない状態です。

php
       <div class="first-img" >
           <p><img src="<?php echo esc_url(get_template_directory_uri()); ?>/imgs/top/visual_bg.jpg" alt="r" id="firstimg"></p>
           <span>
             美容専門のコンシェルジュが、<br>
             提供する「最高の美」
          </span>
       </div>

js
 function firstimg(){

  $('.first-img p').fadeIn(500);
      $('.first-img span').fadeIn(500);
    };
    setTimeout(firstimg, 10);
    window.addEventListener('DOMContentLoaded', function(){
        var img_elements = document.getElementById('firstimg');
        for (var i = 0; i < img_elements.length; i++) {
            img_elements[i].addEventListener('load', (e) => {
                console.log(" load");
            });
            img_elements[i].src = img_elements[i].getAttribute("src");
        }
      });