【JavaScript】TwitterやFacebookの埋め込みを遅延読み込みしPageSpeed Insightsのスコアを改善する
サイトパフォーマンス(速度)を改善することは
UX(サイトを訪れるユーザーの体験)の観点からも重要な対応となります。
そのサイトパフォーマンスを計測するためのツールとしては様々ありますが、
代表的なものにGoogleが提供するPageSpeed Insightsがあります。
ユーザーへの最適化という意味ではコンテンツが最も重要ではあるものの、
PageSpeed Insightsのスコアもサイト運営者にとって気になる指標のひとつです。
ただ、サイトのコンテンツのひとつとして、
TwitterやFacebookなどSNSの埋め込みプラグインをしている場合、
特にモバイルにおいてはこのスコアは大幅に低くなる傾向があります。
今回はTwitterとFacebookの埋め込みエリアが可視範囲に入った時に初めて読み込みを行うことで、
サイトパフォーマンスとスコアを改善する方法をご紹介します。
目次
実際のコードと解説
HTML
サンプルとなるHTMLのコードはコンテンツの配置場所としての役割を持っています。
埋め込む内容はあとから呼び出されますので初期状態の中身は空です。
<div id="js-sns">
<div class="load-twitter"></div>
<div class="load-facebook"></div>
</div>
JavaScript
サンプルで用意したHTMLの要素に対して
JavaScriptで動的にコンテンツを呼び出す処理をします。
// Facebook ページプラグインページのコード取得 ステップ2からscriptタグを削除し貼り付け および ステップ3のHTML。以下は例。
const fbHTML = '<div id="fb-root"></div><div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div>';
// Twitter Publishで作成したコードからscriptタグを削除。以下は例。
const twHTML = '<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>';
// Facebook ページプラグインのコード取得 ステップ2のscriptタグからsrc属性の値を入力
const fbJs = document.createElement('script');
fbJs.src = "https://connect.facebook.net/〜〜〜";
fbJs.crossorigin = "anonymous";
// Twitter Script
const twJs = document.createElement('script');
twJs.src = "https://platform.twitter.com/widgets.js";
twJs.charset = "utf-8";
// 埋め込み先の要素を取得
const fb = document.querySelector(".load-facebook");
const tw = document.querySelector(".load-twitter");
// 重複して呼び出し処理をしないようにフラグで管理
let loaded = false;
if (window.matchMedia( "(min-width: 768px)" ).matches) {
// ウィンドウの幅が768px以上の場合はすぐにロード(PCの場合は遅延読み込みをしない)
fb.insertAdjacentHTML("beforebegin" ,fbHTML);
tw.insertAdjacentHTML("beforebegin" ,twHTML);
fb.appendChild(fbJs);
tw.appendChild(twJs);
loaded = true;
} else {
// ウィンドウの幅が768px未満の場合はスクロール監視 | 可視範囲に入ったらロード(SPの場合は遅延読み込みをする)
const loadTarget = document.querySelector("#js-sns");
const loadOption = {
root: null,
rootMargin: "0px",
threshold: 0
};
const targets = (entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
if(!loaded) {
fb.insertAdjacentHTML("beforebegin" ,fbHTML);
tw.insertAdjacentHTML("beforebegin" ,twHTML);
fb.appendChild(fbJs);
tw.appendChild(twJs);
loaded = true;
}
}
});
};
const loadObserver = new IntersectionObserver(targets, loadOption);
loadObserver.observe(loadTarget);
}
Facebook ページプラグイン
Facebookの埋め込み用コードを取得するにはFacebookページプラグインを利用します。
ここで取得したコードをHTMLとしてそのまま貼り付けるのではなく、
JavaScriptで動的に挿入することで遅延読み込みを実現しています。
取得したコードのステップ2内にある<div id="fb-root"></div>
と
ステップ3内にある<div class="fb-page"〜〜〜
のHTML部分、
および<script>
タグのsrc
属性で指定された部分をそれぞれ分割しています。
Twitter Publish
Twitterの埋め込み用コードはTwitter Publishを利用します。
Facebookと同様の考え方で取得したコードからscript
タグとHTMLタグを分割しています。
最後に
PageSpeed Insightsのスコアはサイトにとってのすべてではなく、
あくまでもUX改善やSEO対策におけるひとつの要素でしかありません。
サイトにとって重要なコンテンツ作成に注力できず今回のような事例でもしお困りでしたら、
ご紹介したコードがお役に立てば幸いです。
- SNIPPET
- JavaScript
- 【JavaScript】TwitterやFacebookの埋め込みを遅延読み込みしPageSpeed Insightsのスコアを改善する