Instagram API経由で取得した画像の読み込みが遅い場合の改善?対策方法
2019.05.06これを書いたのは下っ端です。
WordPressやXOOPSなど更新システム(CMS)を入れない場合、お知らせをホームページ内に載せるたFacebookやTwitter、InstagramなどのSNSを利用することはありますよね。
SNSを使う場合のメリットは多々ありますが、デメリットの1つとして挙げられるのが、仕様の変更等でホームページに正常な表示が出来なくなることだと思います。
Instagram APIを使ったサイトで、その問題があることが分かりました。
全てのサイトではないものの、Instagram API経由で画像を取得した場合ページの読み込み自体遅くなるサイトがあるようです。
以下は、「Instagram API※」で取得した画像の読み込みが遅い場合の対策方法です。
※2020年の初めまで「Instagram API」は使用できなくなるので、「Instagram Graph API」への切り替えをお勧めします。
ページ内に画像を取得、表示させる記述をすると読み込み自体を遅くしてしまう為、
Instagram API経由で画像を取得する記述を後で読み込む様にしましょう。
<script>
$(function(){
$("#hogehoge").load("./instagram.php");
})
</script>
instagram.php は、Instagram API経由で画像を取得する記述を行ったファイルです。
#hogehoge は、instagram.php を読み込むブロックです。
instagram.phpのサンプル、一例は以下です。
<?php $instagramApiURI = 'https://api.instagram.com/v1/users/ユーザID/media/recent?access_token=アクセストークン&count=表示させる件数';
$instagramDates = json_decode(file_get_contents($instagramApiURI));
foreach((array) $instagramDates->data as $instagramData):
?>
<div class="item"><a href="<?php echo $instagramData->link; ?>"><img src="<?php echo $instagramData->images->standard_resolution->url; ?>"></a></div>
<?php endforeach; ?>
以上になります。
ページの表示スピードは大幅に改善されるので、閲覧者のストレスは軽減されるはずです。
ただ、「Instagram API」は2020年の初めまでは使用できなくなるので、「Instagram Graph API」への切り替えをお勧めします。
ちょっとしたご相談事などでもお気軽にお問い合わせください。