loadを使った外部ファイルの読み込みで表示遅延が発生してしまう

前提・実現したいこと

ヘッダーやフッターの共通化をするため、jqueryのloadを使用して外部ファイルを読み込ませたところ、外部ファイルが遅れて表示されてしまいます。体感としては、もとのhtml表示後0.5秒くらいしてから、外部ファイルが急に表示されるような感じです。
表示遅延を解消する方法をご教示いただきたいです。何卒よろしくお願いいたします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

本体

html
1<head>
2    <meta charset="UTF-8">
3    <title>Document</title>
4    <link rel="stylesheet" href="include_style.css">
5    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
6    <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
8</head>
9<body>
10    <div id="head_common"></div>
11    <div class="body_wrap"><img src="images/lecoqsportif.jpg" alt=""></div>
12    <div id="foot_common"></div>
13<!--ここからjquery-->
14    <script>
15        $(function(){
16        $('#head_common').load('include_header.html');
17        });
18        $(function(){
19        $('#foot_common').load('include_footer.html');
20        });
21    </script>
22</body>
23</html>

外部ファイル1のhtml

html
1<body>
2<div class="header_wrap">
3    <a class="logo" href=""><img src="images/logo-lecoqsportif@2x.png" alt=""></a>
4    <ul>
5        <li><a href="">NEWS</a></li>
6        <li><a href="">MEN</a></li>
7        <li><a href="">WOMEN</a></li>
8        <li><a href="">STORES</a></li>
9        <li><a href="">ABOUT US</a></li>
10        <li class="online_store-rink"><a href="">ONLINE STORE</a></li>
11    </ul>
12</div>
13</body>

外部ファイル1のcss

css
1body{
2    margin:0;
3    padding:0;
4    font-family:sans-serif;
5}
6/*リンクスタイル指定*/
7a{
8    text-decoration: none;
9    color:black;
10}
11.header_wrap{
12    width:75%;
13    height:100px;
14    margin:auto;
15    display:flex;
16    justify-content: space-between;
17    align-items: center;
18}
19.header_wrap ul{
20    width:57%;
21    height:100%;
22    display:flex;
23    justify-content: space-between;
24    align-items: center;
25    list-style: none;
26    padding:0;
27    margin:0;
28    font-size:13px;
29    font-weight:bold;
30}
31.header_wrap li{
32    height:100%;
33    display:flex;
34    align-items:center;
35}
36.header_wrap a{
37    height:50%;
38    border-bottom: 3px solid white;
39    box-sizing: border-box;
40    display:flex;
41    align-items:center;
42    transition: 0.5s;
43}
44.header_wrap li a:hover{
45    box-sizing: border-box;
46    border-bottom:3px solid red;
47    transition: 0.9s;
48}
49.logo{
50    height:50%;
51    transition: 0.7s;
52}
53.logo:hover{
54    filter:opacity(70%);
55    transition: 0.7s;
56}
57.logo img{
58    height:100%;
59}
60.online_store-rink a{
61    display: flex;
62    align-items: center;
63}
64.online_store-rink a::before {
65    content: "shopping_cart";
66    font-family: "Material Icons";
67    font-size:18px;
68    padding-right:3px;
69    padding-bottom:4px;
70}

外部ファイル2のhtml

html
1<body>
2<div class="footer_background">
3    <div class="footer_wrap">
4        <div class="footer_left">
5            <p>le coq sportif</p>
6            <ul>
7                <li><a href="">会社概要</a></li>
8                <li><a href="">お問い合わせ</a></li>
9                <li><a href="">プライバシーポリシー</a></li>
10                <li><a href="">特定商取引法に基づく表記</a></li>
11                <li><a href="">お客様への重要なお知らせ</a></li>
12            </ul>
13        </div>
14        <div class="footer_right">
15            <p>FOLLOW US</p>
16            <a href=""><i class="fab fa-twitter-square"></i></a>
17            <ul>
18                <li class="icon-facebook"><a href="">le coq sportif</a></li>
19                <li class="icon-space"><a href="">le coq sportif golf collection</a></li>
20                <li class="icon-space"><a href="">le coq sportif shoes</a></li>
21            </ul>
22            <ul>
23                <li class="icon-insta"><a href="">le coq sportif</a></li>
24                <li class="icon-space"><a href="">le coq sportif golf collection</a></li>
25                <li class="icon-space"><a href="">le coq sportif shoes</a></li>
26                <li class="icon-space"><a href="">le coq sportif snap</a></li>
27            </ul>
28            <ul>
29                <li class="icon-youtube"><a href="">le coq sportif</a></li>
30                <li class="icon-space"><a href="">le coq sportif golf collection</a></li>
31            </ul>
32        </div>
33    </div>
34    <div class="footer_wrap-bottom">
35        <p>COPYRIGHT c DESCENTE LTD. ALL RIGHTS RESERVED.</p>
36    </div>
37</div>
38</body>

外部ファイル2のcss

css
1body{
2    margin:0;
3    padding:0;
4    font-family:sans-serif;
5}
6/*リンクスタイル指定*/
7a{
8    text-decoration: none;
9    color:black;
10}
11.footer_background{
12    height:565px;
13    background-color:whitesmoke;
14}
15.footer_wrap{
16    width:75%;
17    height:78%;
18    margin:auto;
19    display:flex;
20    padding-top:40px;
21}
22.footer_wrap-bottom{
23    width:75%;
24    height:10%;
25    margin:auto;
26    font-size:10px;
27}
28/*コーポレートパート*/
29.footer_left{
30    width:30%;
31}
32.footer_left p{
33    font-weight: bold;
34    font-size:14px;
35    margin-bottom:20px;
36}
37.footer_left ul{
38    list-style: none;
39    padding:0;
40    font-size:12px;
41}
42.footer_left li{
43    padding-bottom:20px;
44}
45/*SNSパート*/
46.footer_right{
47    width:70%;
48}
49.footer_right i{
50    font-size:25px;
51    margin-bottom:15px;
52}
53.footer_right p{
54    font-weight: bold;
55    font-size:15px;
56    margin-bottom:15px;
57}
58.footer_right ul{
59    list-style: none;
60    font-size:12px;
61    padding:0;
62}
63.footer_right li{
64    display:flex;
65    align-items: center;
66    padding-bottom:5px;
67}
68.icon-facebook::before{
69    font-family:"Font Awesome 5 brands";
70    font-weight:400;
71    content:"\f082";
72    font-size:25px;
73    padding-right:15px;
74}
75.icon-insta::before{
76    font-family:"Font Awesome 5 brands";
77    font-weight:400;
78    content:"\f16d";
79    font-size:25px;
80    padding-right:15px;
81}
82.icon-youtube::before{
83    font-family:"Font Awesome 5 brands";
84    font-weight:400;
85    content:"\f167";
86    font-size:20px;
87    padding-right:15px;
88}
89.icon-space::before{
90    font-family:"Font Awesome 5 free";
91    font-weight:400;
92    content:"\f082";
93    font-size:25px;
94    padding-right:12px;
95}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

js
1//      $(function(){
2        $('#head_common').load('include_header.html');
3//      });
4//      $(function(){
5        $('#foot_common').load('include_footer.html');
6//      });