PageSpeed Insights(Instagram Graph API をちょっと改造) - ホームページ制作 福岡|システムノア
COLUM
コラム
- HOME
- COLUM
- PageSpeed Insights(Instagram Graph API をちょっと改造)
PageSpeed Insights(Instagram Graph API をちょっと改造)

(作成:2020/03/02・最終更新:2023/09/13)
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
スニペット 最終更新:2023/09/13
$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;
}
}
if ($instagram == null) {
echo 'エラーメッセージ~~';
}else{
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" aria-label="instagram-img">'.$src.'</a></li>'."\n";
}
}
InstagramGraphAPI(任意)という名前を付けてスニペットを作成します。
HTML
< 前の記事へ |
一覧へ

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