Instagram Graph API v11.0 インスタ画像取得について描画が重たい遅い状況を改善したい

### 前提・実現したいこと

環境
サーバーOS：Linux
DBサーバー：MySQL
WEBサーバー：Apache
PHP：7.4.25

動的なECサイトを制作中です。
Instagram Graph API v11.0 を利用してInstagramの画像や動画を取得するブロックを作成中です。
しかしながら描画が遅くてモバイル端末（３G回線）だと画面が読み込み開始から10秒ほど固まり支障をきたすレベルです。
その間はスクロールが出来ない若しくはJSが読み込み完了しないので描画が不完全な状態のものが散見される。

処理は画像とLIKE（いいね）数と投稿内容の取得をしていて、投稿内容は文字数の調整を行います。
静的サイトではそこまで読み込みが遅くならないのでどうにか改善して支障ないレベルに落ち着けば再度ブロックをレイアウト追加して表示する予定です。。

Instagram Graph API経由で画像を取得すると、第三者コード（https://cdnjs.com/）が10000msほどかかって画面描画に支障をきたしているのが問題点です。

お忙しいところ恐縮ですが何かしらヒントをいただけますと幸いです。どうぞよろしくお願いいたします。

### 該当のソースコード


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

<script>
$.ajax({
type: 'GET',
url: 'https://graph.facebook.com/v11.0/【Instagramビジネスアカウント】?fields=name%2Cmedia.limit(【表示件数】)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cusername%7D&access_token=【２番目のアクセストークン】',
dataType: 'json',
 success: function(json) {
var ig = json.media.data;
var html = "";
var caption;
for (var i = 0; i < ig.length; i++) {
var link = ig[i].permalink;
var image;
caption = ig[i].caption;
var like_count;
like_count = ig[i].like_count;

jQuery(function($) {
	$('.ig_caption').each(function() {
		var $target = $(this);

		// オリジナルの文章を取得する
		var html = $target.html();

		// 対象の要素を、高さにautoを指定し非表示で複製する
		var $clone = $target.clone();
		$clone
			.css({
				display: 'none',
				position : 'absolute',
				overflow : 'visible'
			})
			.width($target.width())
			.height('auto');

		// DOMを一旦追加
		$target.after($clone);

		// 指定した高さになるまで、1文字ずつ消去していく
		while((html.length > 0) && ($clone.height() > $target.height())) {
			html = html.substr(0, html.length - 1);
			$clone.html(html + '   ...more');
		}

		// 文章を入れ替えて、複製した要素を削除する
		$target.html($clone.html());
		$clone.remove();
	});
});


if(!ig[i].thumbnail_url) {
// 動画の場合はこちら
image = ig[i].media_url;}
else {
// 写真の場合はこちら
image = ig[i].thumbnail_url;
}
html += '<div class="child u-fadein _right" ><a rel="noopener norefferrer" target="_blank" alt="インスタグラム投稿" href="' + link + '" ><img data-lazy="true" loading="lazy" width="281px" height="281px" style="height:auto" class="ig lozad" src="" data-src="' + image + '" src="" async/><span class="like lozad"><i class="fa fa-heart"></i>'+like_count+'</span></a><p loading="lazy" class="ig_caption">'+caption+'...</p></div>'
}
$(".instagram").append(html);
// lazy loads elements with default selector as '.lozad'
      const observer = lozad('.lozad', {
      rootMargin: '30%',
  });
  observer.observe(); 
}

});
</script>


----表示部分　CSSは省略します----




<div class="instagram parent"></div>

試したこと

特になし。指針が分からなかった為。
事前読み込みや不要ソースの削除なども試みましたが、結果にさほど影響を与えませんでした。
当然このブロックをレイアウトから外すと快適に閲覧できる状態になります。
静的サイトだと巧くいっていたのですが、書き方も自信がなかったのでそのままです。
プラグインを購入しようかとも悩み中ですが、投稿写真だけでなく投稿内容（文字列の一部）も表示させたかった訳です。