お問い合わせ

SWELL不具合|インスタグラムの埋め込みが表示されない原因と解決策

SWELLでインスタグラムの埋め込みが表示されなくなりました。

他に同じ現象で困っている方がいるかもしれませんので、解決方法をまとめておきます。

SWELLでインスタグラムの埋め込みが表示されなくなった

過去にインスタグラムを埋め込んだ記事をふと見たところ、表示されていませんでした。

こんな見た目になっています。

インスタグラムの埋め込みが表示されないよくある原因は?

検索するとよく出てくるのが、インスタグラムのjavascriptが読み込めていない、という事例です。

スマホだったり、回線によってjavascriptのembed.jsが読めたり読めなかったりすることにより、インスタグラムの埋め込みが表示されないというのが原因のようです。

<script async="" src="//www.instagram.com/embed.js"></script>

少なくとも、今回のケースではembed.jsのソースがブラウザで表示できたので、読み込める環境でした。

インスタグラムの埋め込みが表示されない原因はスクリプトの遅延読み込み

次に考えられるのが、SWELLの高速化設定です。

SWELLの高速化設定にはスクリプトの遅延読み込みがあります。

スクリプトの遅延読み込みというのは、Page Speed Insight対策でとりあえず必要無いjavascriptを時間を置いてから読み込み、サイトの表示を高速化させるための技術です。

もともとのアイデアは、Googleアドセンスを導入するとサイトの表示が遅くなってスマホだと全然点数でませんけど!ということで、アドセンスのjavascriptを遅延読み込みする流れが自然発生し、その技術を他のjavascriptにも適用したらもっといいんじゃない?というPSI最適化ジャンキーが便利に自動化してくれたのが、flying-scriptsというプラグインです。

SWELLの遅延読み込みはこのプラグインの機能を取り込んだものです。

詳細は確認できていませんが、SWELLでもHTMLの最終出力から除外対象のscriptタグを削除し、javascriptでscriptタグを後から動的に追加する処理をしていると思われます。

Flying Scriptではscriptタグを除外する時にHTMLパーサーを使っており、HTMLファイルが大きくなると処理が重くなってしまうというスットコドッコイなプラグインだったのですが、SWELLはpreg_replace_callback()で処理しているので重くはなりません。

スクリプトの遅延読み込みは初期状態でinstagramが対象になる

スクリプトの遅延読み込みを有効化すると、初期設定でインスタグラムのjavascriptの読み込みが遅延されます。

本来であれば問題なく動くはずなのですが、今回のケースだとなぜかインスタグラムの埋め込みが表示できないようでした。

instagramをスクリプトの遅延読み込み対象から除外する

スクリプトの遅延読み込みから、instagramに関するものを削除すればinstagaramの埋め込みが表示されるようになります。

削除するのは、以下の文字列になります。

instagram.com/embed.js,

instagramの埋め込みが表示されない原因は不明

instagramのjavascriptをSWELLはきちんと遅延読み込みしているのですが、検証ツールで見てもエラーも無く、何で表示されないのかよくわかりません。

とりあえず、instagramだけを遅延読み込みから除外することで問題は回避できます。

SWELLのスクリプトの遅延読み込みには不具合がある

SWELLスクリプトの遅延読み込みには不具合があります。

スマホの時にユーザー操作があっても、指定時間までスクリプトの読み込みが始まりません。

まとめ

SWELLの初期状態だとinstagramの埋め込みは表示されていたので、高速化設定をしたタイミングで表示されなくなったのだと思います。

検索すると、別の理由でinstagramの埋め込みが表示されない事例が結構見つかりますが、SWELLの場合は高速化設定を一度OFFにして改善するか確認した方がよいと思います。

インスタグラムの埋め込みが表示されないよくある原因は?

インスタグラムのembed.jsが読み込めないと、インスタグラムの埋め込み表示できなくなることがあります。

インスタグラムのembed.jsが読み込めない原因は?

スマホの時に表示できない場合は、回線の影響やスマホで読み込めないことがあります。
また、javascriptの最適化などの影響でembed.jsが読み込めない、エラーになることがあります

SWELLでインスタグラムの埋め込みが表示されない原因は?

SWELLの高速化設定で、遅延読み込みにinstagramを含めていると表示されない不具合がある。

SWELLのスクリプトの遅延読み込みには不具合があるの?

はい、不具合があります。

他の人にもシェアしてね
コメントを閉じる

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

クリックできる目次