Twitterの埋め込みしたWebページの速度を上げる方法

Webページを作成してるのですが、Twitterの埋め込みをいれると読み込みが遅い時があります。
最初にローディング画面を表示するようにして、一秒後ぐらいにWebページが表示されますが、十数回に一度ぐらいの割合でローディング画面がかなり長くなってしまう時がある。


試みてみた事：
・twitterのソースコード(下記)部分に 「async」(非同期通信)を削除する
→あまり効果を実感できず

<a class="twitter-timeline" data-width="250" data-height="350" href="https://twitter.com/isekaiizakaya?ref_src=twsrc% … by isekaiizakaya</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></scr

・addEventListenerのイベントをload→domcontentloadedに変更
→早くなるが反対に遅延があった時しかLoading画面が表示されなくなる(画像やスタイルシートを待たずに発生する)

window.addEventListener('domcontentloaded', function(){
document.getElementById('gif').classList.add('loaded');
});

・試しにTwitterの埋め込み部分を削除してみる
→30数回程行ったが遅くなることはなかった
(Twitter埋め込み以外に外部リンクが2つあった状態で行ったが遅延は起きなかった。
また、逆にTwitter埋め込みのみの状態を行ったが、遅延は起きた)

Twitterの埋め込みがある状態で遅延が起きなくなる方法がありましたら、
教えて頂きたくお願い致します。


全体ソースコード(一部のみ 抜粋)；
HTML:

<div id="gif"></div>
<div id="id3_top" clss="twitter_page">
<a class="twitter-timeline" data-width="250" data-height="350" href="https://twitter.com/isekaiizakaya?ref_src=twsrc% … by isekaiizakaya</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

<div id="id4_top" class="banner">
<a href="https://www.aist.go.jp/"><img src=images/top_bnr_univ_shindan.png class="link_banner"></a>
</div>
<div id="id5_top" class="banner">
<a href="https://seiga.nicovideo.jp/seiga/im9619637"><img src=images/9619637i.jpg class="link_banner"></a>
</div>

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
CSS：

#gif {
position: fixed;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: all 2s ease;
background: url(../images/https___arisago.com_official_wp-content_uploads_2017_08_005.gif) center/300px no-repeat, #080403;
}

.loaded {
opacity: 0;
visibility: hidden;
}

______________________________________________________________________
Javascript：

window.addEventListener('load', function(){
document.getElementById('gif').classList.add('loaded');
});

質問者からの補足コメント

• 回答ありがとうございます。
  
  非同期通信ですか。
  試してみた内容の一つですね。
  あまり、効果が実感できなかったのでよくわかりませんでした。
  「async」の部分を削除するやり方とはまた別の方法でしょうか。
  
  確かに非同期通信にすれば、ローディング画面は必要ないですが、
  あえてローディング画面をつけているのは、Webページ作成の練習としてです。
  なので、ローディング画面があった状態でTwitterの埋め込み時間短縮を模索していました。
  
  30数回ほど～に関しては、単純にWebページ更新ボタンを押して何度も試しているだけです。
  
  また、下記以降の内容を理解しきれていませんのでもしよろしければ後学の為に教えて頂けないでしょうか。
  宜しくお願い致します。
  
  
  >→ひとまず、非同期通信がご質問の部分のみとして回答します。
  ～～
  結果を受け取ったら消すようにしておけば良いのではないでしょうか？

    補足日時：2020/10/12 16:19

No.2 ベストアンサー 回答者： fujillin 回答日時： 2020/10/12 17:16

No1です。

お尋ねの実際の構成がどうなっているのかわからないので、推測での回答でしかありません。（…ので、当たっているのかもわかりません）

想像するところ、
＞<a class="twitter-timeline" ～～～</a>
で、設定ししているURLの内容を、
＞<script async src=～～～></script>
のスクリプトからajaxで読み込んでいるのではないでしょうか？？
（私の環境では両方ともアクセスできないので、他の部分で読み込んでいるのかも知れませんが、質問者様にはわかっているはず）

No1の回答は、スクリプト(＝多分ajax）の処理が行われているために、htmlの解析完了が遅れているものかと想像しました。
(一応、asyncとなっているので、ページ読み込みとは別に実行されるはずなのですが、内容が不明なのではっきりしないのと、ご質問文のテストの内容から推測すると、そこが怪しそうなので）

ですので、確実にload後に（=ローディング画面を表示したいのであれば、それを外してから）、読み込みのスクリプトを実行するように順序を明確にすれば、先に、htmlの内容が表示されるはずと推測しました。
ただし、twiterの表示予定部分だけは空白状態になってしまうので、後から内容が表示されたときに、レイアウトが動かないようにあらかじめサイズを確保しておくほうが良いという意味です。（幸い、サイズ指定がありそうな雰囲気ですので）

イメージ的には、以下のページで、2回目以降に「もっと見る」を押したときのような感じかな。（あまり良い例ではなくて申し訳ありませんが）
https://www.tipdip.jp/demo/showmore_json/
要は、一旦、表示された内容はそのままにしておいて、ページの一部分だけ後から読み込むという感じです。
（上例のページでは、「一部に挿入」ではなくて「後ろに追加」になっていますけれど…）


おまけ
＞30数回ほど～に関しては、単純にWebページ更新ボタンを押して
＞何度も試しているだけです。
1回目のテストはテストになりますが、「通信関連を削除した」状態では、画像等はキャッシュされてしまっているので、2回目以降はそちらが利用されて表示速度は速くなるため、ほとんど速度のテストにはならないという意味です。

この回答へのお礼

回答ありがとうございます。
教えて頂きありがとうございました。

お礼日時：2020/10/15 15:41

No.1 回答者： fujillin 回答日時： 2020/10/09 16:04

こんにちは

私の環境ではスクリプトを見られないので、どのような内容かはわかりませんが、想像するところ非同期で一定の項目を絞り込むなりして読み込んでいるのではないかと仮定しました。

もしも、それを除いても、ローディング画面が必要なほどに遅いようであるなら、今時の環境下ではちと信じられません。
（よほど重たい画像を読み込んでいるとか、他にも非同期通信があるとか…）
画像が原因であるなら、まず画像を「表示に適切な解像度」にして表示用としておいたほうが宜しいでしょう。
解像度が高い（重たい）ものが必要な場合には、表示用とは別に用意しておけば良いのですから。
勝手に想像するところ、非同期通信を除いてしまえば、そもそもローディング画面など必要なくなるのではないかと思います。


＞Twitterの埋め込みがある状態で遅延が起きなくなる方法が
＞ありましたら、教えて頂きたくお願い致します。
ひとまず、非同期通信がご質問の部分のみとして回答します。
当該部分の表示サイズは固定のようなので、先にスペースだけ確保して（レイアウトの為）全体を表示させ、HTMLのload後に非同期通信を開始するようにしておけば良いのではないでしょうか？
（現状では、多分、HTML読み込み時に併せて非同期通信を行っている）

このようにすることで、ページ全体は先に表示されることになるはずです。
非同期通信の部分は、表示までに時間がかかるかも知れませんけれど、ページ全体から見れば一部分のはずと思いますので。
必要であれば、非同期通信の結果表示の部分だけに「ローディング表示」をしておいて、結果を受け取ったら消すようにしておけば良いのではないでしょうか？


ついでながら・・・
＞→30数回程行ったが遅くなることはなかった
毎回キャッシュをクリアするなどしてから試さないと、あまり意味が無いと思いますけれど、どのようにテストなさったのでしょうね？
（あるいはタイムスタンプ付きのURLにしておくとか）