CSSで設定した画像が、表示までに遅延してしまう

見てみないと何とも言えませんが、例えばjetpackのphotonを利用していたり、外部から読み込みしていたり、lazyloadを使っていたり、色々それらしいことはあるかと思います。

backgroundの処理に何かしらあるのかも知れません。
どんなcssでスタイルしているのかも問題かも知れません。

いずれにしても、遅れる部分がどうなっているのかがわからないと、原因の特定と改善は難しいかと思います。
ちなみに他のブラウザでキャッシュさせない(プライベートウィンドウやシークレットウィンドウ等)状態ではどうでしょうか？
chromeのみの挙動の場合は、もしかすると仕様変更があった可能性もあります。

リンクがないと何とも言えませんね
Hidekichiさんがおしゃっていたようにプラグインの可能性もありますし
サーバーなども関係があるかもしれません
プラグインを記載いただくなどをしてください

Hidekichiさんの名前が変わってませんか? 笑
前:hidekichi
今:Hidekichi
見間違いではなければ・・・

Hidekichi様,みき様
お返事ありがとうございます。

現在プラグインはすべて停止済みです。またカスタマイズ項目のLazy Loadのチェックは外しております。
これまで使っていたCloudFlare指定のネームサーバーは一時的に戻しました。

【確認に関して】
chromeはシークレットモード？で確認済みですが、症状は現れておりました。
IEに関しては、症状が現れず問題なく表示されております。

【対象サイト】
今回の件があり、現在はCSSでヘッター画像を指定するなど試行錯誤中ではございますが、対象ページは下記になります。
https://akabane-navi.com/
ヘッダーとアイコン１２種のみ表示が遅れる事を確認しております。（容量を軽くしてもダメでした。）
また、大変恐縮なのですが現在作成中につき、後にURLを消して頂く事は可能でしょうか。

【サーバー】
Ｘサーバー

【その他】
同一サーバーの他のドメインに同じテーマを移し、同様の事を試したところ問題なく表示されました。
プラグインは切っておりますし、違いはＤＢだけだと思うのですが・・・。

申し訳ございません。ご意見伺えると嬉しいです。
よろしくお願い致します。

メニューの上の画像ですか?

見た感じだとブラウザの読み込み方法じゃないですか?

chromeは「さっ」て出るんでるんですよね
IEは一回白くなって「バッ」ってでます

わかりにくいので動画を用意します

動画でも分かりづらいかもしれませんが・・・
ただchromeとIEの読み込み方はわかると思います
chrome
IE

また、大変恐縮なのですが現在作成中につき、後にURLを消して頂く事は可能でしょうか。

とのことですので解決後この動画は消しておきます
リンクはわいひらさんが消してくれると思います

ちゃんと見てないんですが、

#header {
    background-image: 画像パス;
    background-position: 0 0;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

たぶん#headerはこんなcssが入ると思うんですよ。で、background-sizeとbackground-repeatがないのは親テーマの方を触ってられるんですかね？
background-sizeが上記のようだと正しく現在のようには見えないはずですし、no-repeatがあればリピートしないはずです。

で、たいていは、

#header {
  background-size: unset;
  background-repeat: repeat-x;
}

こういうのを子テーマstyle.cssに入れて親テーマをキャンセルし、かつ横だけにrepeatさせるというような事をすると思うんですよね。
おそらくカスタマイザーで高さは設定されているでしょうから。縦のrepeatは不要なわけですし。

で、この設定でうちのテストサイトに利用されているヘッダを入れた所、chromeでもfirefoxでも初回はアレでしたが2回目からは正しく動作しました。

で、headを見てみた所、cssを読む前にいくつかjavascriptが読み込まれていますが、これはもしかすると、header.phpあたりに直接スクリプトタグで読み込んでませんか？
これらのうちいくつかあるいは全部がレンダリングブロックになっているようにも思えます。
そこらはどうなっていますでしょうか？

みき様
動画まで作っていただきありがとうございます。

表示のタイミングがずれるのは、ヘッダー画像と１２種のカテゴリーアイコンでして、双方同じタイミングでズレます。ご用意いただいた動画は、カテゴリーアイコン（飲食店などの）が映っていたので伝わりました。
実は当方の環境では、動画とは逆の様に表示されるのです。

当初は「さっ」っと気持ちよく表示されていたのですが、いつのまにか「(読み込み空白)・・・バッ」に変わってしまいました。
この０から読み込んでいるように、一瞬空白が表示されるのを直せないかと悩んでいます。
キャッシュ系のプラグインを使ってもダメでした。

また、先程ネットカフェまで行き確認してきたところ、ＷＩＮ７のchromeでは問題なく表示されました。
「さっ」って感じです。
私はwin10使っておりまして、使っているＰＣで変わるものなのかと帰ってきて再度悩み中です。
寝ログのヘッダー画像の様に、待機時間なく表示させていたいのですが・・・。

「(読み込み空白)・・・バッ」

これはchromeで変わってしまったのですか?
IEの感じですね

本当ですね
寝ログはヘッダーが早いですね

メニューの画像だけ表示が遅いんですよね・・・

Hidekichi様

親テーマの#headerは削除し、子テーマに

#header {
    background-image: url("○○");
}

だけ記載しています。
ヘッダーの縦幅はオレンジメニュー？という名前のスキン？を使いました。

javascriptはemojiがどうこうというのが読み込まれておりましたが、心当たりが無く。WordPressのバージョン4.2で入ったものらしいのですが、何をしているか分かりません。
ただ、消し方が乗っていたので消してみましたが効果はありませんでした。

また、新しくテーマをインストールし、header.phpと入れ替えてみましたが変わりませんでした。
色々いじりすぎてしまったのかもしれません。お手数をおかけしてしまい、申し訳ございませんでした。

みき様

【自宅】
win10
・chrome 「(読み込み空白)・・・バッ」
・IE「さっ」(寝ログヘッダーの様に)
回線/光。

【自宅】
win7
・chrome 「さっ」
・IE「さっ」

ダメもとでもう少しいじって見ようと思います。

動画まで作っていただきありがとうございました。
お手数をおかけしてしまい、申し訳ございませんでした。

訂正
２番目の【自宅】は【ネットカフェ】です。
失礼しました。

win10だけ逆になっているみたいですね・・・

今見てみたら、夕方とはちょっと中身が変わったようでしたが、検証のために#h-topと#headerの両方に背景を入れず、#headerだけに背景を入れるようにしてみてください。つまり、幅広い方(#header幅)だけ使うという感じです。

cropped-cropped-header3-1.png
header3.png
spritesheet.png
とヘッダに使われる画像っぽいのが入ってる画像がありますが、cropped-cropped-header3-1.pngは128KB、header3.pngは11KBなので、header3.pngが良いでしょうか。
これらは別にカスタマイザーで設定せずとも、

#header {
  background-image: url(画像のパス);
}

でよいです。#headerの方はstyle.cssで読み込まれてますが、#h-topはindexになってるのでインラインに書かれているようです。これは毎回読み込む部分になるので、まずは#h-topから画像を取り除いてください。またここが128KBの画像なので、設定を取ればその分ページの読み込み速度も速くなるでしょう。

spritesheet.pngにもヘッダ背景っぽいのが見えますが、ファイルサイズの無駄なので使わない場合は取り除くほうが良いです。そうすると、スプライトを使っている部分のbackground-positionを再度設定しないといけなくなりますが、これもページ読み込み速度のためです。

ページの読み込み速度の点で言うと、ページ内のスタイルの中で結構な頻度でstyle属性にてcssが書かれていますが、これも毎回読み込んでしまうのと、これが最終のスタイルになって子テーマ等で変更できなくなるため、なるべくクラスで設定してください。

メニュー部分の画像の部分(::before)は何で入れてられますか？
cssを見てみましたがなかったので。メニュー自体がプラグインとか何かですかね？

Hidekichi様
夜分にアドバイス頂き、ありがとうございました。

色々いじっていた所、ヘッダー画像とカテゴリーアイコンが、非ログイン時のみ正しく表示されるようになりました。
やった事としましては、stlyeで指定していた箇所をＣＳＳに移した事。
その過程で、ＣＳＳの更新の挙動がおかしかったので、(３日前に使うのをやめてＤＮＳサーバーの設定を戻した)cloudflareに再ログインし、「Purge Cache」を全てのＣＳＳに行った所、表示されるようになりました。

現在は、ログイン中に同様の現象が起こる事、Font AwesomeのCSSクラス？アイコンが同じように遅れる現象が起きております。ただしこれらも、ＣＳＳの見直しと時間が経てば、キャッシュが消え見えるようになるかもしれません。
もう少しなので頑張ってみます！

この度は本当にありがとうございました。
心から感謝いたします。