【JavaScript】TwitterやFacebookの埋め込みを遅延読み込みしPageSpeed Insightsのスコアを改善するのイメージ

【JavaScript】TwitterやFacebookの埋め込みを遅延読み込みしPageSpeed Insightsのスコアを改善する

  • JS

サイトパフォーマンス(速度)を改善することは
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で動的に挿入することで遅延読み込みを実現しています。

Facebook ページプラグインのコード取得画面

取得したコードのステップ2内にある<div id="fb-root"></div>
ステップ3内にある<div class="fb-page"〜〜〜のHTML部分、
および<script>タグのsrc属性で指定された部分をそれぞれ分割しています。

Twitter Publish

Twitterの埋め込み用コードはTwitter Publishを利用します。
Facebookと同様の考え方で取得したコードからscriptタグとHTMLタグを分割しています。

Twitter Publishのコード取得画面

最後に

PageSpeed Insightsのスコアはサイトにとってのすべてではなく、
あくまでもUX改善やSEO対策におけるひとつの要素でしかありません。

サイトにとって重要なコンテンツ作成に注力できず今回のような事例でもしお困りでしたら、
ご紹介したコードがお役に立てば幸いです。

  1. SNIPPET
  2. JavaScript
  3. 【JavaScript】TwitterやFacebookの埋め込みを遅延読み込みしPageSpeed Insightsのスコアを改善する