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にして改善するか確認した方がよいと思います。
コメント