お問い合わせ

SWELL不具合|instagramの埋め込みが表示されない

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

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

目次

SWELLでinstagramの埋め込みが表示されなくなった

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

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

instagramの埋め込みが表示されないよくある原因

検索するとよく出てくるのが、instagramのjavascriptが読み込めていない、という事例です。

スマホだったり、回線によって読めたり読めなかったりして、埋め込みが表示されないというのが原因のようです。

<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が対象になる

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

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

instagramを遅延読み込み対象から除外する

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

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

instagram.com/embed.js,

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

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

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

まとめ

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

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

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!

この記事を書いた人

コメント

コメントする

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

目次