COLUM

コラム

PageSpeed Insights(Instagram Graph API をちょっと改造)

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

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

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

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

「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.'" />';}
else{$src='<img class="lozad" src="" data-src=="'.$post->media_url.'" />';}
echo '<a href="'.$post->permalink.'" class="instagram" target="_blank" rel="noopener noreferrer">'.$src.'</a>'."\n";
}

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

HTML
<div id="instapi">[!InstagramGraphAPI!]</div>

| 一覧へ |

CONTACT

092-406-9941

受付 9:30~18:00(土・日・祝日除く)

MEETING

福岡市近郊は
無料でお伺いします

九州