PageSpeed Insights・・・一般の方は意識されませんが、要は「これみて、HPを早く表示するようにチューンしろよ！」By Google、、、というやつです。判定項目はいろいろあるのですが、SNSとの連携部分でのお話。

Facebook・YouTube・InstagramなどをHP上に埋込表示ということをよくしますが、この埋込すると重くなるのなんの。特にInstagramをスライド表示させると、その分読み込むのでかなり遅くなります。

Modxで表示用のスニペットは作ってますので、導入自体はだいぶ楽になってきたのですが、今回はスピードアップを目標に遅延読込をさせようかと（HP表示時にファーストビュー以外の部分は読み込ませない）

遅延自体は「lozad.js」を採用。他のSNSや他の要素にも適応できるし、判定結果も良い。導入方法は、いろんなサイトが説明してくれてますので割愛・・・追記：直下に以下で読込。

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script>
const observer = lozad();
observer.observe();
</script>

「lozad.js」を設置後に、スニペットを以下のように改造（class="lozad"の部分を追記）。これで、Instagramの画像も遅延読込してくれます。ただ、表示箇所までスクロールさせると読込なので、ほんの一瞬、空白→画像となるのが見えてしまう

ちなみにPageSpeed Insights対策でいろいろやってますが、一番手っ取り早い対策は高機能のサーバーにすること、、、orz

スニペット 

$instagram = null;
$instagram_business_id = '【InstagramビジネスアカウントID】'; 
$access_token = '【3段階目のアクセストークン】';
$post_count = 8;
$query = 'name,media.limit(' . $post_count. '){caption,like_count,media_url,permalink,timestamp,thumbnail_url,media_type}';
$get_url = 'https://graph.facebook.com/v5.0/' . $instagram_business_id . '?fields=' . $query . '&access_token=' . $access_token;
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $get_url);
curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'GET');
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($curl);
curl_close($curl);
if($response){
  $instagram = json_decode($response);
  if(isset($instagram->error)){
      $instagram = null;
  }
}
foreach($instagram->media->data as $post){
if($post->media_type=='VIDEO'){ $src='<img class="lozad" src="" data-src="'.$post->thumbnail_url.'" alt="" />';}
else{$src='<img class="lozad" src="" data-src="'.$post->media_url.'" alt="" />';}
echo '<li><a href="'.$post->permalink.'" class="instagram" target="_blank" rel="noopener noreferrer">'.$src.'</a></li>'."\n";
}

InstagramGraphAPI（任意）という名前を付けてスニペットを作成します。

HTML

[!InstagramGraphAPI!]