ローディング画面の読み込みが遅い

テーマから自作したWordpressサイトが動画を用いており、
読み込みが遅いためローディング画面を設置したところ
ローディング画面の表示自体が遅く、ローディング画面の機能をなしていない状態です。

遅延読み込みを導入したり、プラグインで画像圧縮などしていますが一向に改善しません。
おそらく動画読み込みの発生が問題かと思うのですが、動画読み込み中に優先的にローディング画面を表示する方法がわからず...
ローディング画面だけ優先的にすぐ表示するなどの方法ありましたらご教示いただきたいです。
動画を除いた場合はすぐに読み込まれ、ローディング画面も一瞬で消えるので、
おそらく動画の重さが関係しているかと思いますが、動画読み込み前にローディングを表示することはできないでしょうか...?

合計動画サイズ　：5MB(一般的に推奨されているデータ量より少ないです)
動画はautoplay muted　設定しています。

HTML
1<div class="loading js-loading">
2  <p>Loading...</p>
3</div>
4<main class="main">ここに表示したい内容</main>

CSS
1.loading{
2	width: 100vw;
3	height: 100vh;
4	background-color: #fff;
5	display: flex;
6	justify-content: center;
7	align-items: center;
8	position: fixed;
9	top: 0;
10	left: 0;
11	z-index: 9999;
12  }

JS
1$(window).on('load',function () {
2  endLoading();
3});
4setTimeout('endLoading()', 10000);
5function endLoading(){
6  $('.js-loading').fadeOut(1000);
7}

コードはシンプルで、ページが読み込まれたらローディング画面が消えるという設定にしています。

試してみたこと
メインコンテンツをdisplay:noneにし、読み込んだらJavaScriptでdisplay:block
に設定しても表示は変わりませんでした。

　遅延読み込みはlozad.jsを使用しています。

何時間も葛藤していて、解決しないのでどうかご教示いただけると助かります。